@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-sans-400.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dm-sans-500.ttf') format('truetype')}
:root{color-scheme:dark;--background:#111214;--text:#efefea;--muted:#92939c;--accent:#c6b5ff;--lime:#dbff70;--font:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--background)}body{color:var(--text);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--lime);outline-offset:7px}button:disabled{cursor:default}button[hidden]{display:none}.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px)}.brand{font-size:17px;letter-spacing:-.6px;font-weight:500}.sound-toggle{color:var(--muted);font-size:12px;background:none;border:1px solid #33343a;padding:9px 15px;border-radius:30px;min-height:40px;transition:border-color .2s,color .2s}.sound-toggle:hover{color:var(--text);border-color:#62636d}.sound-toggle[aria-pressed="true"]{color:var(--lime);border-color:#778b44}main{min-height:calc(100svh - 100px);display:flex;justify-content:center;align-items:center;padding:0 24px 110px}.intro{--size:clamp(25px,6.5vw,82px);--row-height:1.37em;width:100%;max-width:1100px}h1{display:flex;justify-content:center;align-items:center;gap:.27em;margin:0;font-size:var(--size);font-weight:500;letter-spacing:-.065em;line-height:1.1;white-space:nowrap}.greeting{display:block}.machine{display:inline-flex;align-items:center;gap:.17em;letter-spacing:-.065em}.name-window{display:block;height:var(--row-height);width:3.5em;position:relative;overflow:hidden;border-radius:.15em;background:#1a191f;border:1px solid #3b354b;box-shadow:inset 0 1px 0 #ffffff05}.name-window:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,#1a191f 0%,transparent 17%,transparent 83%,#1a191f 100%)}.reel{position:relative;display:flex;flex-direction:column;will-change:transform;color:var(--accent)}.reel-name{height:var(--row-height);min-height:var(--row-height);display:flex;align-items:center;justify-content:center;font-size:1em;line-height:1;letter-spacing:-.055em;padding-bottom:.025em;white-space:nowrap}.reel-name span{font-size:1em}.reel-name.long span{font-size:.52em;letter-spacing:-.04em}.lever{position:relative;flex:0 0 .48em;width:.48em;height:1.7em;min-width:28px;min-height:54px;background:transparent;border:0;padding:0;touch-action:none;user-select:none;outline-offset:5px!important}.lever-track{position:absolute;width:2px;height:72%;top:14%;left:50%;transform:translateX(-50%);background:#393b41;border-radius:2px}.lever-stem{position:absolute;left:calc(50% - 2px);top:19%;height:60%;width:4px;background:#71747e;border-radius:3px;transform:scaleY(calc(1 - var(--pull,0) * .55));transform-origin:bottom}.lever-knob{position:absolute;left:50%;top:12%;height:.30em;width:.30em;min-width:19px;min-height:19px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px #dbff701c,0 2px 6px #0005;transform:translate(-50%,calc(var(--pull,0) * .65em));transition:background .2s}.lever:hover .lever-knob{background:#e5ff9c}.lever.pulled .lever-knob{animation:pull .65s cubic-bezier(.2,.8,.2,1)}.lever.pulled .lever-stem{animation:stem .65s cubic-bezier(.2,.8,.2,1)}.name-window.settled{animation:settle .35s ease-out}.interaction-meta{height:24px;display:flex;align-items:center;justify-content:center;gap:22px;margin-top:35px}.interaction-meta p{font-size:12px;color:var(--muted);margin:0;letter-spacing:0}.skip{background:none;border:0;padding:10px 0;color:var(--text);font-size:12px;text-decoration:underline;text-underline-offset:4px}.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}::selection{background:var(--accent);color:#111214}@keyframes pull{0%{transform:translate(-50%,0)}35%{transform:translate(-50%,.65em)}100%{transform:translate(-50%,0)}}@keyframes stem{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.45)}}@keyframes settle{0%{border-color:#9d87d3;box-shadow:0 0 20px #bda3ff12}100%{border-color:#3b354b;box-shadow:0 0 0 transparent}}
@media(min-width:1400px){.intro{--size:90px}}
@media(max-width:600px){.header{height:80px;padding:0 24px}.brand{font-size:15px}.sound-toggle{font-size:11px;padding:8px 13px}main{min-height:calc(100svh - 80px);padding:0 20px 100px}.intro{--size:clamp(24px,8.5vw,44px)}h1{gap:.28em;letter-spacing:-.055em}.machine{gap:.16em}.name-window{width:3.55em;border-radius:.2em}.lever{min-width:28px;min-height:56px}.interaction-meta{gap:14px;margin-top:26px;min-height:44px;height:auto;flex-wrap:wrap}.interaction-meta p,.skip{font-size:11px}.skip{padding:10px 0}.lever-knob{min-width:18px;min-height:18px}}
@media(max-width:350px){.header{padding:0 20px}main{padding-left:14px;padding-right:14px}.intro{--size:clamp(24px,8.5vw,29px)}.name-window{width:3.45em}.interaction-meta{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reel{will-change:auto}}
/* Compact introduction and word interaction share one calm visual rhythm. */
main{align-items:flex-start;padding-top:54px;padding-bottom:60px}.intro{--size:clamp(32px,5.9vw,74px)}.interaction-meta{margin-top:19px}.cloze-section{max-width:710px;margin:55px auto 0}.cloze-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px;color:var(--muted);font-size:11px}.cloze-toolbar p{margin:0}.cloze-toolbar>span{font-variant-numeric:tabular-nums;color:var(--accent)}.word-bank{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 23px;min-height:96px}.word-option{font-size:13px;line-height:1.2;min-height:38px;padding:9px 13px;background:#1b1c20;border:1px solid #36373f;border-radius:6px;color:#cfcfd4;touch-action:none;user-select:none;transition:color .18s,border-color .18s,background .18s,opacity .18s}.word-option:hover:not(:disabled){border-color:#8c7cae;color:#efefea}.word-option[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:#25212e}.word-option.used{visibility:hidden;pointer-events:none}.cloze-text{font-size:22px;line-height:1.95;letter-spacing:-.45px;color:#d7d7da}.cloze-text p{margin:0 0 19px}.blank{display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:1.6em;margin:0 2px;padding:0 3px;border:0;border-bottom:1px solid #6b607f;border-radius:3px 3px 0 0;background:#201e27;color:var(--accent);font:inherit;font-size:.9em;line-height:1;letter-spacing:-.3px;vertical-align:baseline;transition:background .2s}.blank span{font-size:10px;font-weight:400;color:#a095b2;letter-spacing:.7px}.blank:hover:not(.filled){background:#2b2538}.blank.filled{background:#c6b5ff0b;border-bottom-color:#c6b5ff60;cursor:default}.cloze-footer{display:flex;align-items:center;gap:20px;justify-content:space-between;min-height:35px;font-size:11px;color:var(--muted)}.cloze-footer button{background:transparent;color:#b9b9c2;border:0;padding:10px 0;font-size:11px;text-decoration:underline;text-underline-offset:4px}.is-dragging{opacity:.25}.word-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);border-color:var(--accent);color:var(--accent);box-shadow:0 8px 30px #0008;transition:none!important}
@media(min-width:1400px){.intro{--size:78px}}
@media(max-width:600px){.header{height:66px}.intro{--size:clamp(24px,8.5vw,44px)}main{min-height:calc(100svh - 66px);padding:22px 20px 32px}.interaction-meta{margin-top:7px;min-height:24px}.interaction-meta p,.skip{font-size:10px}.skip{padding:6px 0}.cloze-section{margin-top:30px}.cloze-toolbar{font-size:10px;margin-bottom:10px}.word-bank{position:sticky;top:0;z-index:5;padding:9px 0 13px;gap:6px;min-height:0;background:var(--background);box-shadow:0 -10px var(--background),0 8px 10px var(--background)}.word-option{font-size:11px;padding:8px 10px;min-height:35px;border-radius:5px}.cloze-text{font-size:16px;line-height:2.05;letter-spacing:-.2px;margin-top:12px}.cloze-text p{margin-bottom:17px}.blank{height:1.8em;margin:0 1px;font-size:.9em}.blank span{font-size:9px}.cloze-footer{font-size:10px;gap:12px}.cloze-footer button{font-size:10px;min-height:35px}}
@media(max-width:350px){main{padding-left:16px;padding-right:16px;padding-top:16px}.intro{--size:clamp(24px,8.5vw,29px)}.cloze-section{margin-top:23px}.word-option{font-size:10px;padding:8px 9px}.cloze-text{font-size:15px;line-height:2}.cloze-toolbar{font-size:9px}}
/* No visible instructions. The word bank follows the text. */
.interaction-meta{height:0;min-height:0;margin:0;position:relative}.interaction-meta .skip{position:absolute;top:5px;left:50%;transform:translateX(-50%);white-space:nowrap}.cloze-toolbar.sr-only{display:block;margin:0}.cloze-section{margin-top:48px}.cloze-text{margin-top:0}.word-bank{padding:7px 0 0;min-height:0;margin-top:22px}.cloze-footer{justify-content:flex-end;margin-top:10px}.blank:empty{min-height:1.6em}.cloze-toolbar.sr-only p{margin:0}
@media(max-width:600px){.interaction-meta{min-height:0;height:0;margin:0}.interaction-meta .skip{top:2px}.cloze-section{margin-top:28px}.cloze-text{margin-top:0}.word-bank{top:auto;bottom:0;padding:12px 0 9px;margin-top:10px;box-shadow:0 -8px 12px var(--background),0 8px var(--background)}.cloze-footer{margin-top:0}.blank:empty{min-height:1.8em}}
.photo-puzzle{width:100%;max-width:510px;margin:85px auto 0}.puzzle-stage{position:relative;width:100%;aspect-ratio:1;isolation:isolate}.photo-piece{position:absolute;width:39.6%;height:39.6%;border:0;border-radius:0;background:none;padding:0;margin:0;touch-action:none;user-select:none;-webkit-user-select:none;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--angle,0deg)) scale(var(--piece-scale,.91));transition:left .42s cubic-bezier(.2,.8,.2,1),top .42s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),filter .3s;filter:drop-shadow(0 5px 9px #0005);z-index:2}.photo-piece svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}.photo-piece.locked{cursor:default;z-index:1;filter:none}.photo-piece.chosen{z-index:5;filter:drop-shadow(0 9px 13px #0009);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(0deg) scale(1.02)}.photo-piece.in-hand{z-index:20;transition:none;cursor:grabbing;transform:translate(var(--dx,0px),var(--dy,0px)) scale(1.035);filter:drop-shadow(0 12px 15px #0008)}.puzzle-stage.solved .photo-piece{filter:none}.photo-piece:focus-visible{outline:2px solid var(--accent);outline-offset:-14px}.cloze-section .word-bank{margin-bottom:0}@media(max-width:600px){.photo-puzzle{margin-top:52px;max-width:440px}main{padding-bottom:45px}}@media(prefers-reduced-motion:reduce){.photo-piece{transition:none!important}}
.puzzle-photo{position:absolute;left:5%;top:5%;width:90%;height:90%;object-fit:cover;display:block;z-index:8;opacity:0;pointer-events:none;transition:opacity .35s ease}.puzzle-stage.solved .puzzle-photo{opacity:1}
.brand{color:var(--text);text-decoration:none}.header-link{font-size:12px;color:#b9b9c2;text-decoration:none;display:inline-block;padding:12px 0}.header-link:hover{color:var(--accent)}a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.project-entry{max-width:460px;margin:60px auto 0;text-align:center}.project-entry a{font-size:22px;font-weight:500;letter-spacing:-.6px;color:var(--text);text-decoration:none}.project-entry a:hover{color:var(--accent)}@media(max-width:600px){.header-link{font-size:11px}.project-entry{margin-top:38px}.project-entry a{font-size:20px}}

.header nav{display:flex;gap:24px;align-items:center}.project-entry{display:flex;flex-direction:column;gap:20px}@media(max-width:600px){.header{padding-left:20px;padding-right:20px}.header nav{gap:14px}.header-link{font-size:10px}.brand{font-size:14px}}

@media(max-width:700px){.header{height:auto;min-height:76px;flex-wrap:wrap;gap:5px;padding-top:15px;padding-bottom:15px}.header nav{gap:14px}}

.brand{display:block;flex-shrink:0;mix-blend-mode:screen}.brand-logo{display:block;width:180px;height:60px;object-fit:cover;object-position:50% 49%;}@media(max-width:700px){.brand-logo{width:145px;height:48px}.header{row-gap:5px}}