:root{--ink:#4a3426;--cream:#f6ead2;--terracotta:#d9775a;--mustard:#e3b04b;--sage:#8fae7a;--blue:#7fa3bf;--wood:#c98f55;--plate:#e4bb86;--screw:#8a5a33;--pad:52px;--gap:14px;--wind:30s}html,body{background:var(--wood);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;height:100%;color:var(--ink);margin:0;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:none;background:0 0;border:0;padding:0}[hidden]{display:none!important}.board{grid-template-columns:repeat(var(--cols,4), 1fr);grid-template-rows:repeat(var(--rows,3), 1fr);gap:var(--gap);padding:max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));background-color:var(--wood);touch-action:none;background-image:repeating-linear-gradient(91deg,#ffffff0f 0 3px,#0000 3px 23px),repeating-linear-gradient(89deg,#5a321414 0 2px,#0000 2px 41px);display:grid;position:fixed;inset:0}.board:after{content:"";opacity:0;pointer-events:none;transition:opacity var(--wind) linear;background:#2b1b10;position:absolute;inset:0}.board.winding-down:after{opacity:.32}.cell{background-color:var(--plate);background-image:radial-gradient(circle at 16px 16px, var(--screw) 0 4px, transparent 5px), radial-gradient(circle at calc(100% - 16px) 16px, var(--screw) 0 4px, transparent 5px), radial-gradient(circle at 16px calc(100% - 16px), var(--screw) 0 4px, transparent 5px), radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), var(--screw) 0 4px, transparent 5px);border-radius:26px;min-width:0;min-height:0;position:relative;box-shadow:inset 0 -5px #5a371938,0 4px #46280f47}.cell.empty{background-color:#dcb07a}.art{pointer-events:none;width:90%;height:90%;transition:filter 1.5s ease-out;position:absolute;inset:5%;overflow:visible}.art *{transform-box:fill-box;transform-origin:50%}.art .spin{transform-box:view-box;transform-origin:0 0}.cell.asleep .art{filter:saturate(.35)brightness(.82)}.cell:after{content:"";opacity:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M62 16 A36 36 0 1 0 84 66 A30 30 0 1 1 62 16 Z' fill='%23f6ead2' stroke='%234a3426' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat;width:30px;height:30px;transition:opacity 1s ease-out,transform 1s ease-out;position:absolute;top:10px;right:34px;transform:translateY(6px)}.cell.asleep:after{opacity:1;transform:none}.art-big-button .btn{transform-origin:bottom}.art-light-switch .nub{transition:transform .22s ease-out}.art-light-switch[data-sprite=switch_down] .nub{transform:translateY(24px)}.art-light-switch .bulb{fill:var(--cream);transition:fill .3s ease-out}.art-light-switch[data-sprite=switch_up] .bulb{fill:#ffd76a}.art-light-switch .glow{opacity:0;transition:opacity .35s ease-out}.art-light-switch[data-sprite=switch_up] .glow{opacity:.85}.winding-down .art-light-switch .glow{transition-duration:4s}.winding-down .art-light-switch[data-sprite=switch_up] .glow{opacity:.2}.winding-down .art-light-switch[data-sprite=switch_up] .bulb{fill:#f2dfa8;transition-duration:4s}.art-doorbell .door{transform-box:view-box;transform-origin:62px 126px}.art-lever .arm{transform-box:view-box;transform-origin:65px 152px;transform:rotate(-18deg)}.art-lever .cup{transform-origin:bottom}.art-color-knob .knob{transition:transform .28s cubic-bezier(.22,.8,.3,1)}.art-color-knob .light,.art-color-knob .halo{transition:fill .3s ease-out}.art-color-knob[data-sprite=light_red] :is(.light,.halo){fill:var(--terracotta)}.art-color-knob[data-sprite=light_yellow] :is(.light,.halo){fill:#ecc45a}.art-color-knob[data-sprite=light_green] :is(.light,.halo){fill:var(--sage)}.art-color-knob[data-sprite=light_blue] :is(.light,.halo){fill:var(--blue)}.art-slide-whistle .handle{transition:transform .12s ease-out}.art-zipper .pull{transition:transform .45s ease-out}.art-zipper[data-sprite=zip_open] .pull{transform:translate(126px)}.art-zipper .flap{transform-origin:100%;transition:transform .45s ease-out}.art-zipper[data-sprite=zip_open] .flap{transform:scaleX(.01)}.art-lock-and-key .key{transition:transform .25s ease-out .25s}.art-lock-and-key[data-sprite=lock_open] .key{transition-delay:0s;transform:rotate(90deg)}.art-lock-and-key .shackle{transition:transform .25s ease-out}.art-lock-and-key[data-sprite=lock_open] .shackle{transition-delay:.3s;transform:translateY(-18px)}.cover{z-index:10;touch-action:none;display:flex;position:fixed;inset:0}.door{background-color:#b97f4a;background-image:repeating-linear-gradient(90deg,#ffffff0f 0 4px,#0000 4px 31px),repeating-linear-gradient(90deg,#46230a1a 0 2px,#0000 2px 53px);flex:1;transition:transform .8s cubic-bezier(.6,0,.3,1),filter 1.5s ease-out;position:relative;box-shadow:inset 0 0 0 10px #a8723f,inset 0 0 0 14px #3c1e0a40}.door .knob{background:var(--mustard);border:6px solid var(--ink);border-radius:50%;width:64px;height:64px;margin-top:-32px;position:absolute;top:50%;box-shadow:inset -6px -6px #0000001f}.door.left .knob{right:22px}.door.right .knob{left:22px}body[data-screen=cover] .door .knob{animation:2.4s ease-in-out infinite invite}@keyframes invite{0%,60%,to{transform:scale(1)}75%{transform:scale(1.12)}}body[data-screen=play] .cover{pointer-events:none}body[data-screen=play] .door.left{transform:translate(-101%)}body[data-screen=play] .door.right{transform:translate(101%)}.night{opacity:0;pointer-events:none;place-items:center;transition:opacity 1.2s ease-out .6s;display:grid;position:absolute;inset:0}.night svg{width:min(48vw,420px)}body[data-screen=goodnight] .night{opacity:1}body[data-screen=goodnight] .door{filter:brightness(.62)saturate(.8)}.door .knob{transition:opacity .8s ease-out}body[data-screen=goodnight] .door .knob{opacity:0}.cover.instant .door,.cover.instant .night{transition:none}.rotate{z-index:20;background:var(--wood);place-items:center;display:none;position:fixed;inset:0}.rotate svg{width:40vw;max-width:240px}@media (orientation:portrait){.rotate{display:grid}}.gate{z-index:30;top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));opacity:.7;background:#4a34262e;border-radius:50%;place-items:center;width:46px;height:46px;display:grid;position:fixed}.gate>svg:first-child{width:28px;height:28px}.gate .ring{pointer-events:none;width:calc(100% + 10px);height:calc(100% + 10px);position:absolute;inset:-5px}.gate .ring circle{fill:none;stroke:var(--cream);stroke-width:9px;stroke-linecap:round;transform-origin:50%;transform:rotate(-90deg)}.parent{z-index:40;-webkit-user-select:text;user-select:text;background:#28190f8c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.sheet{touch-action:pan-y;overscroll-behavior:contain;background:#fbf4e6;border-radius:22px;width:min(780px,100%);max-height:100%;padding:20px 24px 12px;font-size:17px;line-height:1.4;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.sheet *{touch-action:pan-y}.sheet header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.sheet h1{margin:0;font-size:24px}.sheet h2{margin:0 0 6px;font-size:17px}.sheet h3{margin:0 0 6px;font-size:16px}.sheet section{border-top:1px solid #e6d6bb;margin-top:16px;padding-top:14px}.sheet .hint{color:#7a6250;margin:0 0 8px;font-size:15px}.sheet .foot{margin-top:16px}.sheet .row,.sheet .actions{flex-wrap:wrap;gap:8px;display:flex}.sheet .grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sheet button{background:#efe1c7;border-radius:12px;min-height:46px;padding:0 18px;font-weight:600}.sheet button.primary{background:var(--ink);color:var(--cream)}.sheet button.danger{color:#8a3a22;background:#f3d3c6}.chip,.check{cursor:pointer;align-items:center;min-height:46px;display:inline-flex}.chip input,.check input{opacity:0;pointer-events:none;position:absolute}.chip span,.check span{background:#efe1c7;border:2px solid #0000;border-radius:12px;align-items:center;width:100%;min-height:46px;padding:0 16px;display:inline-flex}.check{width:100%}.chip input:checked+span,.check input:checked+span{border-color:var(--ink);background:#fff;font-weight:600}.check span:before{content:"";border:2px solid var(--ink);border-radius:4px;flex:none;width:16px;height:16px;margin-right:10px}.check input:checked+span:before{background:var(--sage)}.card{background:#fff;border:2px dashed #e0c9a6;border-radius:14px;margin-top:10px;padding:12px 16px}.card ul{margin:0;padding-left:18px}.card li{margin:4px 0}
