:root{color-scheme:light;--paper: #fbf6ec;--ink: #2b2118;--muted: #7d6a58;--faint: #c9b9a2;--accent: #93a074;--serif: "Fraunces", Georgia, "Times New Roman", serif;--body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--vh: 100vh}@supports (height: 100svh){:root{--vh: 100svh}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font:17px/1.55 var(--body);overflow-x:hidden}.paper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,#fffcf5e6,#fbf6ec00 55%),radial-gradient(140% 120% at 50% 50%,transparent 60%,rgba(150,115,70,.12) 100%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0 0.2  0 0 0 0.05 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),var(--paper)}main{min-height:var(--vh)}.scene{min-height:var(--vh);padding:max(28px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 28px max(22px,env(safe-area-inset-left))}.scene.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}.scene{transition:opacity .6s ease}.scene.leaving{opacity:0}h1,h2{font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 100,"opsz" 144;margin:0;text-wrap:balance;letter-spacing:-.01em}h1{font-size:clamp(2.6rem,8vw,5.4rem);line-height:1.04}.title{position:relative}.title .swap{display:inline-flex;align-items:baseline;white-space:nowrap;padding-top:.3em}.title .n{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:bottom;transition:max-width .45s ease,opacity .35s ease .1s}.title .gap{display:inline-block;width:.26em;transition:width .55s cubic-bezier(.65,0,.35,1)}.fade.quick{transition-duration:.7s}.title.open .n{max-width:.7em;opacity:1}.title.still .n,.title.still .gap{transition:none!important}.title-ink{position:absolute;left:-10%;width:120%;pointer-events:none}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}h2{font-size:clamp(1.7rem,4.4vw,2.8rem);line-height:1.15}.lede{font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--muted);max-width:32em;margin:0;text-wrap:balance}.small{font-size:.9rem;color:var(--muted);margin:0}.fade{opacity:0;transform:translateY(6px);transition:opacity 1.4s ease,transform 1.4s ease}.fade.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.fade{transition:none}}.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:10px}button{font:inherit;color:inherit}.go{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 30px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font:500 1.08rem/1 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .2s ease,opacity .2s ease}.go:hover{background:#46362a}.go:active{transform:scale(.98)}.go:disabled{opacity:.3;cursor:default}.go.small{min-height:44px;padding:9px 22px;font-size:1rem}.quiet{background:none;border:none;padding:10px 12px;color:var(--muted);cursor:pointer;font-size:.98rem;-webkit-tap-highlight-color:transparent;border-radius:10px}.quiet:hover{color:var(--ink)}.quiet:disabled{opacity:.35;cursor:default}.link{background:none;border:none;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.go:focus-visible,.quiet:focus-visible,.link:focus-visible,.tool:focus-visible,.pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.tools{display:grid;grid-template-columns:repeat(4,minmax(120px,170px));gap:14px;margin-top:12px}@media(max-width:640px){.tools{grid-template-columns:repeat(2,minmax(120px,160px))}}.tool{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px 16px;border-radius:18px;background:#fffcf5b3;border:1.5px solid var(--faint);cursor:pointer;color:var(--ink);transition:border-color .2s ease,background .2s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.tool:hover,.tool.guess{border-color:var(--ink)}.tool:active{transform:scale(.98)}.tool svg{width:58px;height:58px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tool span{font-size:.98rem}.kooka-wrap{position:relative;width:min(78vw,420px);aspect-ratio:1 / 1;max-height:48vh}#kooka{width:100%;height:100%;display:block;touch-action:none;cursor:grab;position:relative;z-index:1}.kooka-shadow{position:absolute;left:30%;right:30%;bottom:13%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,60,30,.22),transparent)}#kooka-said{min-height:1.6em;transition:opacity .5s ease}.show{width:min(calc(100vw - 190px),900px,(var(--vh) - 400px) * 1.6);display:flex;flex-direction:column;align-items:center;gap:10px}.stage{position:relative;width:100%;aspect-ratio:16 / 10;border-radius:22px;overflow:hidden;box-shadow:0 12px 40px #3c281429;background:#f6eedb}.stage canvas.ink{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}.set{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .7s ease}.set.on{opacity:1}.ex-journal{background:#3a2a1e}.ex-journal video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.ex-vn{background:url(/media/still-kitchen.webp) center / cover}.vn-box{position:absolute;left:5%;right:5%;bottom:5%;height:30%;border-radius:18px;background:#fbf6eced;border:2px solid rgba(43,33,24,.85)}.vn-name{position:absolute;left:3.5%;top:-15%;padding:.3em 1em;border-radius:999px;background:#93a074;color:#fffaf1;font:600 clamp(.7rem,1.6vw,1rem)/1.2 var(--body);border:2px solid rgba(43,33,24,.85)}.ex-card{background:linear-gradient(160deg,#b9835a,#8f5b3a)}.card{position:absolute;left:22%;right:22%;top:10%;bottom:10%;background:#fffaf1;border-radius:6px;box-shadow:0 10px 30px #28140a59;transform:rotate(-1.5deg)}.card-doodle{position:absolute;right:8%;bottom:8%;width:14%;fill:#d2504640;stroke:#aa3228cc;stroke-width:2.2;stroke-linejoin:round}.ex-comic{background:url(/media/still-mill.webp) center / cover}.bubble{position:absolute;left:4%;top:6%;width:42%;height:30%;background:#fffaf1;border:2.5px solid #2b2118;border-radius:50%}.bubble:after{content:"";position:absolute;left:58%;bottom:-18%;width:12%;height:26%;background:#fffaf1;border-right:2.5px solid #2b2118;border-bottom:2.5px solid #2b2118;transform:skew(-30deg) rotate(25deg);border-bottom-right-radius:80% 60%}.ex-writeon{background:#fbf6ec}.ex-film{background:linear-gradient(#140e0a73,#140e0a8c),url(/media/still-mill.webp) center / cover}.film-bars{position:absolute;top:0;right:0;bottom:0;left:0;border-top:solid #0d0a08;border-bottom:solid #0d0a08;border-width:7.5% 0}.noun{display:inline-block;font-style:italic;transition:opacity .45s ease}.stage-row{position:relative;width:100%}.show-arrow{position:absolute;top:50%;z-index:3;width:64px;height:64px;margin-top:-32px;border-radius:50%;display:grid;place-items:center;padding:0;border:1.5px solid transparent;background:transparent;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background .2s ease,border-color .2s ease}.show-arrow svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.show-arrow.next{right:-78px}.show-arrow.back{left:-78px}.show-arrow[hidden]{display:none}@media(hover:hover){.show-arrow:hover{border-color:#2b211880;background:#fbf6ecd9}}.show-arrow:active{transform:scale(.92)}@media(max-width:640px){.show{width:92vw}.show-arrow.next{right:0}.show-arrow.back{left:0}}.dots{display:flex;gap:10px}.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:none;background:var(--faint);cursor:pointer}.dots button[aria-current=true]{background:var(--ink)}#show-go{opacity:0;transition:opacity 1.4s ease}#show-go.in{opacity:1}.scene.write{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-left:0;padding-right:0}.dock{position:relative;width:100%;height:64px;overflow:hidden}.dock-row{position:absolute;left:0;bottom:4px;display:flex;align-items:baseline;white-space:pre;font-family:var(--serif);color:var(--faint);transition:opacity .5s ease;will-change:transform}.dock-row span{line-height:1}.dock-row .done{color:var(--muted)}.dock-row .now{color:var(--ink)}.strip-wrap{width:100%}#strip{display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}.hint{text-align:center;color:var(--muted);margin:0 22px;min-height:1.5em;font-size:.98rem}.bar{display:flex;align-items:center;gap:6px;max-width:900px;width:100%;margin:0 auto;padding:0 16px}.grow{flex:1}.next-word{border:1.5px solid var(--faint);background:#fffcf5cc;border-radius:999px;min-height:44px;padding:8px 18px;cursor:pointer;color:var(--ink);font-size:1rem;-webkit-tap-highlight-color:transparent}.next-word:disabled{opacity:.35;cursor:default}.letters{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 7px;max-width:760px;margin:8px auto 0;padding:0 16px;font-family:Caveat,cursive;font-size:1.35rem;line-height:1.1}.letters span{color:var(--faint);transition:color .8s ease}.letters span.got{color:var(--ink)}.letters span.some{color:var(--muted)}.next-word.nudge{animation:nudge 1.6s ease-in-out infinite;border-color:var(--ink)}@keyframes nudge{0%,to{transform:translate(0)}50%{transform:translate(4px)}}.meter{max-width:560px;width:100%;margin:6px auto 0;padding:0 16px}.meter-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--muted);margin-bottom:4px}.meter-bar{position:relative;height:10px;border-radius:999px;background:#2b211814;margin-bottom:18px}.meter-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--ink);opacity:.75;transition:width .9s ease}.meter-mark{position:absolute;top:12px;transform:translate(-50%);font-size:.78rem;color:var(--muted);white-space:nowrap}.meter-mark:before{content:"";position:absolute;left:50%;top:-14px;width:1.5px;height:12px;background:var(--muted)}.meter-mark.reached{color:var(--ink);font-weight:600}.meter-note{text-align:center;font-size:.9rem;color:var(--muted);margin:0}.rotate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--paper);font-family:var(--serif);font-size:1.3rem}.rotate svg{width:80px;height:80px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:tip 2.4s ease-in-out infinite}@keyframes tip{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media(max-height:500px){.scene.write{gap:4px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:6px}.letters{display:none}.meter{margin-top:0}.meter-head{font-size:.78rem;margin-bottom:2px}.meter-bar{height:7px;margin-bottom:12px}.meter-mark{top:8px;font-size:.7rem}.meter-mark:before{top:-10px;height:9px}.meter-note{font-size:.78rem}.meter{display:grid;grid-template-columns:1fr auto;column-gap:10px}.meter-head{display:contents}.meter-head>span{display:none}.meter-note{grid-row:1;grid-column:1;text-align:left;margin-bottom:3px}#finish-go{grid-row:1;grid-column:2;font-size:.78rem}.meter-bar{grid-row:2;grid-column:1 / span 2}.dock{height:40px}.hint{font-size:.85rem;min-height:1.1em}.bar .quiet,.bar .next-word,.bar .go.small{min-height:38px;padding-top:5px;padding-bottom:5px}body[data-scene=s-write] .menu{display:none}}.scene.letters-scene{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-bottom:120px}.board{width:min(100%,1000px);display:grid;gap:14px;text-align:left}.board-row{display:grid;grid-template-columns:4.5em 1fr;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}.board-row h3{margin:0;font:400 1.6rem/1 Caveat,cursive;color:var(--muted)}.board-cells{display:flex;flex-wrap:wrap;gap:6px}.board-cell{position:relative;padding:0;border:1.5px solid transparent;border-radius:10px;background:#fffcf5cc;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease,border-color .2s ease}.board-cell:hover{border-color:var(--faint)}.board-cell canvas{display:block}.board-cell[aria-pressed=true]{opacity:.3}.board-cell.suggested{border:1.5px dashed #b5452c;opacity:.5}.board-cell[aria-pressed=true]:after{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:2px solid #b5452c;transform:rotate(-30deg)}.board-actions{position:fixed;left:0;right:0;bottom:0;padding:14px 20px max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 35%)}.letters{cursor:pointer}.scene.pond-scene{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.pond-wrap{position:relative;width:min(100%,1100px);height:min(58vh,560px);border-radius:28px;overflow:hidden;box-shadow:inset 0 0 40px #28464640}#pond{width:100%;height:100%;display:block;cursor:text}.pond-input{position:absolute;left:0;bottom:0;width:100%;height:40px;opacity:0;font-size:16px;border:0}.pens{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.pill{min-height:38px;padding:7px 15px;border-radius:999px;border:1.5px solid var(--faint);background:#fffcf5b3;cursor:pointer;font-size:.95rem;-webkit-tap-highlight-color:transparent}.pill[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}.uses{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px}.use-steps{max-width:36em;text-align:left;background:#fffcf5bf;border:1.5px solid var(--faint);border-radius:18px;padding:16px 22px}.use-steps ol{margin:0;padding-left:1.2em;display:grid;gap:8px}.use-steps pre{background:#f2e9d8;border-radius:10px;padding:10px 12px;overflow-x:auto;font-size:.85rem}.name{display:inline-flex;gap:10px;align-items:center;color:var(--muted)}.name input{font:1rem var(--body);padding:10px 14px;border:1.5px solid var(--faint);border-radius:999px;background:#fffcf5cc;min-width:12em;color:var(--ink)}.film{width:min(92vw,760px);aspect-ratio:16 / 9;border-radius:20px;overflow:hidden;background:#e9dfcc;box-shadow:0 10px 40px #3c28142e}.film video{width:100%;height:100%;object-fit:cover;display:block}.menu{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:4;text-align:right}.menu-list{display:grid;gap:2px;margin-top:4px;padding:8px;border-radius:14px;background:#fffcf5f5;border:1px solid var(--faint);box-shadow:0 6px 24px #3c28141f}.menu-list button,.menu-list .file{background:none;border:none;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.95rem;color:var(--ink)}.menu-list button:hover,.menu-list .file:hover{background:#f2e9d8}.file{position:relative}.file input{position:absolute;width:1px;height:1px;opacity:0}.storage{position:fixed;left:50%;bottom:14px;transform:translate(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;font-size:.92rem;z-index:6}@media(max-height:500px){.scene.center{gap:8px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px}h1{font-size:2.3rem}h2{font-size:1.35rem}.lede{font-size:.98rem}.kooka-wrap{width:min(50vw,300px);max-height:46vh}.show{width:min(68vw,560px,(var(--vh) - 150px) * 1.6);gap:4px}.show-arrow{width:48px;height:48px;margin-top:-24px}.show-arrow svg{width:26px;height:26px}.show-arrow.next{right:-56px}.show-arrow.back{left:-56px}.scene.pond-scene{gap:6px;padding-top:max(10px,env(safe-area-inset-top))}.pond-scene .lede{display:none}.pond-wrap{height:54vh;border-radius:18px}.film{width:min(60vw,460px)}}