:root{font-family:Arial,"PingFang SC",sans-serif;color:#111;background:#e9e5dc}*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(90deg,#0000 23px,#cfcac0 24px,#0000 25px),#e9e5dc;background-size:25px 100%}button,input,textarea{font:inherit}main{width:min(1240px,calc(100% - 48px));margin:auto}header{height:84px;border-bottom:2px solid #111;display:flex;align-items:center;justify-content:space-between}.brand{font:900 28px/1 "Arial Black","PingFang SC";text-decoration:none;color:#111;letter-spacing:-.12em}.brand span{display:inline-block;color:#f14d2a;transform:translateY(7px)}header p{text-align:right;font:700 9px/1.35 monospace;letter-spacing:.18em}.masthead{display:grid;grid-template-columns:1fr 320px;align-items:end;padding:46px 0 38px}.kicker{font:700 11px monospace;letter-spacing:.2em}.masthead h1{font:900 clamp(56px,8vw,108px)/.83 "Arial Black","PingFang SC";letter-spacing:-.095em;margin:24px 0 0}.masthead h1 i{font-style:normal;-webkit-text-stroke:2px #111;color:transparent}.lead{line-height:1.8;font-size:13px;border-left:6px solid #f14d2a;padding:8px 0 8px 20px}.studio{display:grid;grid-template-columns:340px 1fr;border:2px solid #111;background:#f5f2eb;box-shadow:12px 12px 0 #111}.controls{padding:26px;border-right:2px solid #111;background:#f14d2a}.controls label,.controls legend{display:block;font:bold 11px monospace;letter-spacing:.08em}.controls input,.controls textarea{border:2px solid #111;background:#f5f2eb;color:#111}.sentence{position:relative}.sentence textarea{display:block;width:100%;margin-top:8px;padding:13px;resize:vertical;min-height:92px;font:700 17px/1.5 "PingFang SC"}.sentence span{position:absolute;right:8px;bottom:7px;background:#111;color:white;padding:3px 6px;font:9px monospace}.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.pair input{display:block;width:100%;padding:9px;margin:7px 0 4px}.pair small{font:9px monospace}input[type=range]{width:100%;margin:14px 0;accent-color:#111}output{float:right}fieldset{border:0;padding:0;margin:13px 0 18px}fieldset div{display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px}fieldset button{border:2px solid #111;border-right:0;background:#f5f2eb;padding:9px 2px;cursor:pointer;font-size:11px}fieldset button:last-child{border-right:2px solid #111}fieldset button.active{background:#111;color:white}.remember{font-weight:400!important}.remember input{accent-color:#111}.error{min-height:18px;font-size:11px;font-weight:700}.download{width:100%;border:2px solid #111;background:#111;color:#fff;padding:14px 16px;text-align:left;font-weight:900;cursor:pointer}.download span{float:right;color:#f14d2a;font-size:20px}.preview-panel{min-width:0;padding:28px}.preview-head{display:flex;justify-content:space-between;align-items:start}.preview-head b,.preview-head span{display:block}.preview-head b{font:900 10px monospace;letter-spacing:.2em}.preview-head span{font-size:11px;margin-top:6px;color:#65615a}.preview-head small{text-align:right;font:9px/1.5 monospace}.canvas{width:100%;aspect-ratio:16/9;background:#111;margin-top:24px;position:relative;overflow:hidden;background-image:linear-gradient(#ffffff14 1px,transparent 1px);background-size:100% 25%}.bar{position:absolute;background:#f5f2eb;border-top:4px solid #f14d2a;display:flex;align-items:flex-start;justify-content:center;transition:.25s ease;overflow:visible}.bar span{position:absolute;bottom:calc(100% + 7px);color:#f5f2eb;font-size:10px;white-space:nowrap}.baseline-line{position:absolute;left:0;right:0;border-top:1px dashed #f14d2a;opacity:.65}.empty{color:#f5f2eb;position:absolute;inset:0;display:grid;place-items:center;font-size:13px}.legend{display:grid;grid-template-columns:auto 100px auto 1fr;align-items:center;gap:8px;margin-top:15px;font:9px monospace}.legend i{height:5px;background:linear-gradient(90deg,#aaa,#f14d2a)}.legend p{text-align:right;margin:0}.how{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:24px;padding:44px 0 70px}.how>b{font:900 24px "Arial Black"}.how p{font-size:11px;line-height:1.6;border-top:2px solid #111;padding-top:10px}.how span{color:#f14d2a;font:bold 10px monospace;margin-right:8px}@media(max-width:800px){main{width:min(100% - 28px,1240px)}.masthead{grid-template-columns:1fr}.lead{margin-top:30px}.studio{grid-template-columns:1fr;box-shadow:7px 7px #111}.controls{border-right:0;border-bottom:2px solid #111}.preview-panel{padding:18px}.how{grid-template-columns:1fr}.masthead h1{font-size:61px}.canvas{min-height:260px;aspect-ratio:auto}.bar span{display:none}}