@font-face{font-family:Do Hyeon;src:url(../fonts/dohyeon.ttf) format("truetype");font-display:swap}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f4f1e8;background:#10111a;font-synthesis:none;color-scheme:dark;--amber:#ffb547;--dim:#a4a7bc}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.48;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--amber);outline-offset:5px}button svg,.cta svg{width:23px;height:23px;flex-shrink:0}.brand{max-width:1100px;margin:auto;padding:30px 32px;display:flex;align-items:center;gap:10px;font:27px Do Hyeon,sans-serif}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border:1px solid #ffb54740;border-radius:12px;color:var(--amber);background:#ffb54708;font-size:27px}.demo-label{margin-left:8px;color:var(--dim);letter-spacing:2px;font:10px system-ui,sans-serif}main{max-width:1000px;margin:15px auto 0;display:grid;grid-template-columns:1fr 380px;column-gap:90px;align-items:start;padding:0 28px}.intro{padding-top:69px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:2px;color:var(--amber);font-weight:650}.eyebrow span{width:5px;height:5px;border-radius:50%;background:var(--amber)}h1{font:60px/1.1 Do Hyeon,sans-serif;letter-spacing:-1.2px;margin:22px 0;color:#f4f1e8}.lede{font-size:14px;line-height:1.9;color:var(--dim)}.how{display:flex;gap:13px;margin-top:32px;align-items:start}.how>span{color:var(--amber);font-size:27px}.how strong{font-size:13px;font-weight:550;line-height:2}.how p{font-size:11px;line-height:1.7;color:var(--dim);margin:4px 0}.desktop-decoration{width:220px;height:76px;position:relative;margin-top:36px;transform:rotate(-4deg);opacity:.5}.desktop-decoration i{display:block;border-top:1px solid #f4f1e814;margin-top:14px}.desktop-decoration span{position:absolute;top:-12px;left:130px;color:#6ea8ff;font:65px Do Hyeon}.studio{width:100%;grid-column:2;grid-row:1 / span 2}.sheet-meta{display:flex;justify-content:space-between;align-items:center;color:var(--dim);font-size:10px;margin-bottom:12px}.sheet-meta span{display:flex;align-items:center;gap:7px}.sheet-meta i{width:6px;height:6px;border-radius:50%;background:#6ea8ff;box-shadow:0 0 8px #6ea8ff65}.sheet-meta b{font-weight:400;opacity:.4}.paper{background:#191b28;border-radius:22px;overflow:hidden;border:1px solid #ffffff0c;box-shadow:0 20px 70px #0003}.paper-heading{height:45px;padding:17px 19px 10px;display:flex;justify-content:space-between;align-items:center;font:18px Do Hyeon,sans-serif}.paper-heading span:last-child{font:9px system-ui,sans-serif;letter-spacing:1px;color:#a4a7bc80}canvas{display:block;width:100%;aspect-ratio:1 / 1.4;touch-action:none;cursor:crosshair}.paper-caption{display:block;padding:11px 0 13px;text-align:center;font-size:8px;letter-spacing:2px;color:#a4a7bc66}.transport{display:flex;gap:10px;margin-top:14px}.transport button{display:flex;align-items:center;justify-content:center;gap:7px;border:0;height:48px;border-radius:14px;font-size:14px;font-weight:650}.play{background:var(--amber);color:#10111a;flex:1;box-shadow:0 4px 20px #ffb5470b}.play:hover:not(:disabled){background:#ffc56f}.clear{background:#232637;color:#f4f1e8;padding:0 17px}.clear:hover{background:#303449}.status-row{min-height:37px;text-align:center}#status{font-size:10px;color:var(--dim);margin:12px 0 0;line-height:1.5}.example{background:none;border:0;color:#6ea8ff;font-size:11px;padding:7px 10px;text-decoration:underline;text-underline-offset:3px}.keyboard-help{display:none;font-size:10px;text-align:center;color:var(--dim)}.studio:has(canvas:focus-visible) .keyboard-help{display:block}.install{grid-column:1;grid-row:2;align-self:end;padding-bottom:30px;margin-top:15px}.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #ffb54766;border-radius:13px;padding:16px 17px;color:var(--amber);text-decoration:none;font-size:13px;font-weight:600;background:#ffb54704}.cta:hover{background:#ffb54710;border-color:var(--amber)}.install p{font-size:10px;color:var(--dim);margin:12px 0 0}footer{max-width:1036px;display:flex;justify-content:space-between;gap:10px;margin:25px auto 0;padding:20px 28px 16px;font-size:10px;color:#a4a7bc99;border-top:1px solid #ffffff0b}@media(min-width:761px)and (max-height:850px){main{grid-template-columns:1fr 330px;margin-top:0}.intro{padding-top:45px}h1{font-size:56px}.brand{padding-top:22px;padding-bottom:24px}.paper-heading{height:39px}.paper-caption{padding:8px 0}.install{padding-bottom:25px}footer{margin-top:4px;padding-top:12px}}@media(max-width:760px){.brand{padding:18px 20px 10px;font-size:23px;gap:8px}.brand-mark{width:29px;height:29px;border-radius:9px;font-size:23px}.demo-label{margin-left:auto;font-size:8px}main{display:flex;flex-direction:column;max-width:410px;gap:0;margin:0 auto;padding:0 20px}.intro{padding-top:8px;width:100%}.eyebrow{display:none}h1{font-size:34px;line-height:1.04;letter-spacing:-.4px;margin:0 0 9px}.lede,.desktop-decoration{display:none}.how{margin-top:0;gap:0}.how>span{display:none}.how strong{font-size:11px;line-height:1.5;font-weight:400;color:var(--dim)}.how p{display:none}.studio{margin-top:16px}.sheet-meta{font-size:9px;margin-bottom:8px}.sheet-meta span{gap:5px}.paper{border-radius:17px;width:min(100%,calc((100svh - 490px) / 1.4));min-width:150px;margin:auto}.paper-heading{height:33px;padding:10px 15px 5px;font-size:16px}.paper-caption{font-size:7px;padding:8px 0;letter-spacing:1.7px}canvas{width:100%;height:auto;aspect-ratio:1 / 1.4}.transport{margin-top:10px;gap:8px}.transport button{height:45px;border-radius:12px;font-size:13px}.clear{padding:0 13px}.status-row{min-height:31px}#status{font-size:9px;margin-top:9px}.install{width:100%;padding:0;margin-top:13px}.cta{padding:12px 13px;font-size:11px;border-radius:11px}.cta svg{width:18px;height:18px}.install p{text-align:center;font-size:9px;margin-top:7px}footer{max-width:410px;margin-top:12px;padding:10px 20px;font-size:8px;align-items:center;flex-direction:column;gap:5px;border-top:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
