:root{--ink:#29241f;--paper:#eeeae1;--white:#f9f7f1;--muted:#878178;--line:#d6d0c5;--rust:#cd7250;--green:#476d50;--lime:#d4de9c;--mono:"DM Mono",monospace;--sans:"DM Sans",sans-serif;--display:Manrope,sans-serif}*{box-sizing:border-box}html{color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body{margin:0;min-height:100vh;background:var(--paper)}.topbar{height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(22px,6vw,88px);border-bottom:1px solid var(--line);background:#eeeae1}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:13px;letter-spacing:.06em}.brand i{font-style:normal;font:500 9px var(--mono);letter-spacing:.14em;color:#827c70;margin-left:5px}.brand-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--lime);font:18px Georgia,serif}.back-link{font-size:11px;text-decoration:none;color:#625c53}.back-link:hover{color:var(--rust)}.layout{max-width:1280px;margin:0 auto;padding:56px clamp(22px,6vw,88px) 64px;display:grid;grid-template-columns:minmax(260px,370px) minmax(420px,1fr);gap:clamp(40px,7vw,104px);align-items:center}.intro{padding:5px 0}.eyebrow{display:flex;align-items:center;gap:9px;color:#7e786e;font:500 8px var(--mono);letter-spacing:.14em}.eyebrow>span{width:19px;height:1px;background:var(--rust)}.eyebrow b{margin-left:auto;font-size:8px;color:#b5aea2;font-weight:400}.intro h1{margin:26px 0 17px;font:700 clamp(51px,6vw,78px)/.97 var(--display);letter-spacing:-.075em;color:#29241f}.intro h1 em{font:400 1.05em Georgia,serif;letter-spacing:-.07em;color:#b75e43}.lede{max-width:330px;margin:0;color:#6f6a62;font-size:13px;line-height:1.75}.made-local{margin:24px 0 30px;display:flex;align-items:center;gap:7px;color:#8c867a;font:500 7px var(--mono);letter-spacing:.11em}.local-dot,.status-light{width:6px;height:6px;border-radius:50%;display:inline-block;background:#72926a;box-shadow:0 0 0 3px #72926a22}.made-local i{font-style:normal;color:#bcb4a7}.controls{max-width:360px}.field-label{display:flex;align-items:center;justify-content:space-between;color:#777166;font:500 8px var(--mono);letter-spacing:.13em}.field-label span{color:#aaa294}.word-field{height:57px;margin-top:8px;border-bottom:1px solid #a9a295;display:flex;align-items:center}.word-field:focus-within{border-color:#b75e43}.word-field input{width:100%;min-width:0;border:0;outline:0;background:transparent;font:600 26px var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}.word-field button{border:0;background:transparent;color:#a49d91;font-size:20px;cursor:pointer}.field-help{margin:8px 0 23px;color:#979084;font-size:9px}.control-row{min-height:42px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #d9d3c8}.control-row select{border:0;background:transparent;max-width:160px;color:#39352f;font:500 10px var(--sans);outline-color:var(--rust);cursor:pointer}.custom-row{padding:9px 0}.custom-row input{width:100%;border:1px solid var(--line);border-radius:2px;padding:9px;background:#f8f6f0;font:12px var(--mono);outline-color:var(--rust)}.palette-picker{display:flex;gap:8px}.swatch{width:24px;height:24px;border:1px solid #b8b1a5;border-radius:50%;padding:3px;background:transparent;cursor:pointer}.swatch i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#48694e 50%,#cd7250 50%)}.swatch.is-active{outline:1px solid var(--ink);outline-offset:2px}.swatch-night i{background:linear-gradient(135deg,#ede3ca 50%,#de7755 50%)}.swatch-citrus i{background:linear-gradient(135deg,#6c4c91 50%,#e3ca5a 50%)}.density-row{display:block;padding:12px 0 10px}.density-row .field-label{margin-bottom:10px}.density-row input{width:100%;height:3px;accent-color:#b75e43;cursor:pointer}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.button{height:41px;border-radius:2px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 10px var(--sans);cursor:pointer;transition:transform .16s,background .16s}.button:active{transform:translateY(1px)}.button-primary{border:1px solid var(--ink);background:var(--ink);color:#f8f4e9}.button-primary:hover{background:#443a31}.button-secondary{border:1px solid #c7c0b4;background:transparent;color:var(--ink)}.button-secondary:hover{background:#e7e1d5}.play-icon{font-size:11px;color:var(--lime)}.record-icon{width:7px;height:7px;border-radius:50%;background:#c66b4d;box-shadow:0 0 0 3px #c66b4d22}.still-link{margin:13px 0 0;padding:0;border:0;background:transparent;color:#6e675d;font:500 9px var(--sans);cursor:pointer}.still-link span{color:var(--rust);margin-left:5px}.record-note{height:13px;margin:13px 0 0;color:#9a9387;font-size:8px}.stage-column{min-width:0}.stage-heading{height:35px;display:flex;justify-content:space-between;align-items:flex-start;color:#827b70;font:500 8px var(--mono);letter-spacing:.12em}.stage-heading>span:first-child{display:flex;align-items:center;gap:9px}.stage-heading #stage-word{color:#39342d}.stage-frame{position:relative;aspect-ratio:1.3;background:#e4dfd4;overflow:hidden;border:1px solid #d2ccbf;box-shadow:0 16px 42px #382f2512}.stage-frame canvas{display:block;width:100%;height:100%}.stage-grain{pointer-events:none;position:absolute;inset:0;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");mix-blend-mode:multiply}.corner{position:absolute;width:18px;height:18px;opacity:.65}.corner-tl{left:13px;top:13px;border-top:1px solid #736c61;border-left:1px solid #736c61}.corner-br{right:13px;bottom:13px;border-right:1px solid #736c61;border-bottom:1px solid #736c61}.stage-caption{position:absolute;left:20px;right:20px;bottom:15px;display:flex;justify-content:space-between;color:#7e786e;font:500 7px var(--mono);letter-spacing:.1em;pointer-events:none}.stage-footer{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);color:#918a7f;font:500 7px var(--mono);letter-spacing:.09em}.stage-footer b{font-weight:500;color:#514b42}.stage-footer i{font-style:normal;color:var(--rust)}.hint{display:flex;align-items:flex-start;gap:11px;margin-top:22px}.hint-mark{display:grid;place-items:center;flex:none;width:20px;height:20px;background:#e2ded3;border-radius:50%;color:#a95c43;font-size:11px}.hint p{margin:1px 0 0;max-width:330px;color:#8c857a;font-size:9px;line-height:1.65}footer{min-height:52px;border-top:1px solid var(--line);padding:0 clamp(22px,6vw,88px);display:flex;align-items:center;justify-content:space-between;color:#a19a8e;font:500 7px var(--mono);letter-spacing:.11em}footer a{color:#716b60;text-decoration:none}footer a:hover{color:var(--rust)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body[data-palette="night"]{--ink:#f0e7d5;--paper:#292b2c;--white:#353839;--muted:#b0aa9e;--line:#494a47}body[data-palette="night"] .topbar{background:#292b2c;border-color:#484a47}body[data-palette="night"] .brand,body[data-palette="night"] .intro h1,body[data-palette="night"] .word-field input,body[data-palette="night"] .control-row select,body[data-palette="night"] .stage-heading #stage-word{color:#f0e7d5}body[data-palette="night"] .brand-mark{background:#e7dfcd;color:#303130}body[data-palette="night"] .back-link,body[data-palette="night"] .lede,body[data-palette="night"] .field-help,body[data-palette="night"] .still-link,body[data-palette="night"] .hint p{color:#b4aea2}body[data-palette="night"] .word-field{border-color:#716e66}body[data-palette="night"] .control-row{border-color:#454744}body[data-palette="night"] .custom-row input{background:#343637;border-color:#565752;color:#f0e7d5}body[data-palette="night"] .button-primary{background:#eee7d8;border-color:#eee7d8;color:#292b2c}body[data-palette="night"] .button-primary:hover{background:#d8cdb7}body[data-palette="night"] .button-secondary{border-color:#61615b;color:#eee7d8}body[data-palette="night"] .button-secondary:hover{background:#343637}body[data-palette="night"] .stage-frame{border-color:#51524f;box-shadow:none}body[data-palette="night"] .stage-grain{mix-blend-mode:screen}body[data-palette="night"] .hint-mark{background:#3d3f3e}body[data-palette="night"] footer{border-color:#494a47}body[data-palette="night"] footer a{color:#d0c6b6}body[data-palette="citrus"]{--rust:#75519a}body[data-palette="citrus"] .intro h1 em{color:#75519a}body[data-palette="citrus"] .word-field:focus-within{border-color:#75519a}body[data-palette="citrus"] .button-primary{background:#49335d;border-color:#49335d}body[data-palette="citrus"] .button-primary:hover{background:#61467b}body[data-palette="citrus"] .record-icon{background:#d0ad2d;box-shadow:0 0 0 3px #d0ad2d22}body[data-palette="citrus"] .swatch.is-active{outline-color:#75519a}@media(max-width:900px){.layout{grid-template-columns:minmax(235px,310px) minmax(0,1fr);gap:40px;padding-top:44px}.intro h1{font-size:58px}.made-local{font-size:6px}.actions{grid-template-columns:1fr}.button{height:38px}.stage-frame{aspect-ratio:1.08}}@media(max-width:680px){.topbar{height:62px;padding:0 19px}.layout{display:flex;flex-direction:column;align-items:stretch;gap:35px;padding:35px 20px 42px}.intro h1{font-size:55px;margin-top:22px}.lede{font-size:12px}.made-local{margin:19px 0 25px}.controls{max-width:none}.actions{grid-template-columns:1fr 1fr}.stage-column{width:100%}.stage-frame{aspect-ratio:1.05}.hint{margin-top:17px}footer{padding:0 20px;min-height:49px;font-size:6px}}@media(max-width:380px){.actions{grid-template-columns:1fr}.stage-frame{aspect-ratio:.95}.eyebrow{font-size:7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
.export-box{margin-top:18px;padding:12px 0 0;border-top:1px solid var(--line)}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.export-actions button{min-height:34px;padding:7px 9px;border:1px solid #d0c9bd;border-radius:2px;background:transparent;color:var(--ink);text-align:left;font:600 9px var(--sans);cursor:pointer}.export-actions button:hover{border-color:var(--rust);background:#b75e4309}.export-actions button span{float:right;color:var(--rust)}.export-box>p{margin:7px 0 0;color:#969084;font-size:8px}body[data-palette="night"] .export-actions button{border-color:#555650;color:#eee7d8}body[data-palette="night"] .export-actions button:hover{background:#ffffff0a}