@font-face{font-family:Studio;src:local('Helvetica Neue'),local('Arial');font-display:swap}
:root{font-family:Studio,Arial,sans-serif;color:#292a27;background:#f7f7f3;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #bc5038;outline-offset:6px}header{height:104px;position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;margin:0 4.1%;border-bottom:1px solid #deded7;gap:24px}.wordmark{text-decoration:none;color:inherit;font-weight:850;font-size:42px;letter-spacing:-3px;line-height:1}.wordmark span{font-weight:400;font-size:13px;letter-spacing:0;vertical-align:top;margin-left:4px}.edition,.eyebrow,footer{font-family:Arial,sans-serif;font-size:11px;letter-spacing:1.6px;line-height:1.4}.edition{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;color:#777872;font-size:10px}.text-button{border:0;background:none;font-size:13px;padding:10px 0;display:flex;align-items:center;gap:21px}.plus{font-size:23px;font-weight:300}.intro{position:absolute;left:4.1%;top:146px;z-index:2;pointer-events:none}.eyebrow{font-size:10px;color:#797a72;letter-spacing:1.8px}h1{font-weight:400;font-size:clamp(22px,2.3vw,34px);letter-spacing:-1.2px;line-height:1.2;margin:15px 0 0}main{height:calc(100dvh - 174px);min-height:360px}#playground{position:absolute;inset:104px 0 70px;touch-action:none}#playground canvas{display:block;width:100%;height:100%;outline:none}.stage-note{position:absolute;bottom:169px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;display:flex;align-items:center;gap:9px;font-size:13px;color:#7c7d76;white-space:nowrap;transition:opacity .5s}.stage-note svg{height:21px;width:21px;transform:rotate(-15deg)}.stage-note.used{opacity:0}.controls{position:absolute;z-index:3;bottom:96px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid #deded7;background:#ffffffc9;box-shadow:0 3px 10px #1d291205;backdrop-filter:blur(12px);border-radius:40px}.control-button{border:0;border-radius:30px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 13px;font-size:12px;background:transparent;transition:background .15s,transform .2s;white-space:nowrap}.control-button:hover{background:#ecece6}.control-button:active{transform:scale(.96)}.control-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.icon-button{width:38px;height:38px;padding:9px}.divider{width:1px;height:20px;background:#deded7;margin:0 5px}footer{height:70px;margin:0 4.1%;border-top:1px solid #deded7;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.3px;color:#777872}.footer-right{display:flex;align-items:center;gap:16px}.asterisk{font-size:23px;color:#4e5048}#loading{position:absolute;inset:104px 0 70px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;font-size:13px;color:#808078;background:#f7f7f3;z-index:2;transition:opacity .55s;pointer-events:none}.loading-mark{font-size:70px;font-weight:800;color:#e8894b}.ready #loading{opacity:0}.keyboard-letters{position:absolute;left:50%;bottom:225px;transform:translateX(-50%);display:flex;gap:10px;pointer-events:none;opacity:0}.keyboard-letters:focus-within{opacity:1;pointer-events:auto}.keyboard-letters button{width:44px;height:44px;border:1px solid #777;background:#fff;border-radius:50%}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{border:1px solid #dfdfd8;background:#f7f7f3;color:#292a27;border-radius:4px;padding:48px;max-width:420px;width:calc(100% - 40px);box-shadow:0 20px 100px #20201014}dialog::backdrop{background:#353b3520;backdrop-filter:blur(8px)}dialog h2{font-size:44px;font-weight:400;line-height:1.05;letter-spacing:-2px;margin:25px 0}dialog p{font-size:14px;color:#696b63;line-height:1.7}.close-button{position:absolute;right:20px;top:15px;border:0;background:none;font-size:26px}.about-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #dcdcd4;margin-top:36px;padding-top:20px;font-size:12px}.about-bottom span{font-size:9px;letter-spacing:1.4px}.error-message{text-align:center;max-width:360px;line-height:1.7;padding:24px}
@media(min-width:1600px){.intro{top:175px}header{height:120px}#playground,#loading{top:120px}main{height:calc(100dvh - 190px)}}
@media(max-width:700px){header{height:82px;margin:0 24px}.wordmark{font-size:36px}.edition{display:none}.text-button{font-size:12px;gap:10px}.intro{left:26px;top:114px}h1{font-size:25px}.eyebrow{font-size:9px}#playground,#loading{top:82px;bottom:62px}main{height:calc(100dvh - 144px)}footer{height:62px;margin:0 24px;font-size:8px;letter-spacing:.8px}.footer-right{gap:9px}.footer-right .asterisk{font-size:19px}.controls{bottom:87px}.stage-note{bottom:160px;font-size:12px}.footer-right{font-size:0}.asterisk{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.stage-note{display:none}}