:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#fff1dd;font-synthesis:none;background:#38283d;font-family:ui-rounded,Avenir Next,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button{font:inherit}.app{--vertical-padding:12px;--padding-top:max(var(--vertical-padding), env(safe-area-inset-top));--padding-bottom:max(var(--vertical-padding), env(safe-area-inset-bottom));min-height:100dvh;padding:var(--padding-top) max(12px, env(safe-area-inset-right)) var(--padding-bottom) max(12px, env(safe-area-inset-left));background:radial-gradient(at 50% 0,#604159,#38283d 75%);place-content:center;display:grid}.progress-open,.progress-close{color:#fff1dd;cursor:pointer;touch-action:manipulation;background:#63445c;border:1px solid #9f758b;border-radius:12px;min-height:44px;padding:6px 12px;font-size:.8rem;font-weight:700}.progress-open{width:var(--progress-size);height:var(--progress-size);flex:none;place-items:center;padding:0;display:grid}.progress-open svg{width:26px;height:26px}.progress-open:focus-visible{outline-offset:2px;outline:2px solid #fff1dd}.learning-dialog{color:#4e3447;background:#fff4e7;border:1px solid #d4adac;border-radius:20px;width:min(44rem,100vw - 32px);max-height:min(38rem,100dvh - 32px);margin:auto;padding:0;position:fixed;inset:0;overflow:hidden;box-shadow:0 16px 60px #21172480}.learning-dialog[open]{grid-template-rows:auto minmax(0,1fr);display:grid}.learning-dialog::backdrop{background:#2619279c}.progress-header{border-bottom:1px solid #e6cabb;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex}.progress-header h2{margin:0;font:600 1.6rem Georgia,serif}.progress-close{color:#4e3447;background:#f1dfd9}.progress-content{overscroll-behavior:contain;padding:0 20px 20px;overflow:auto}.progress-content h3{margin:16px 0 8px;font-size:.95rem}.progress-content p{margin:8px 0;font-size:.9rem}.progress-count{color:#76465f;margin-left:4px}.word-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.word-summary li{background:#f7e7de;border:1px solid #ead2c6;border-radius:10px;align-content:start;gap:3px;padding:10px 12px;font-size:.88rem;display:grid}.word-summary small{color:#74415a;font-size:.75rem}.progress-table{border:1px solid #ead2c6;border-radius:10px;overflow-x:auto}.progress-table:focus-visible{outline-offset:2px;outline:2px solid #704261}.progress-table table{border-collapse:collapse;background:#fffaf4;width:100%;font-size:.78rem}.progress-table th,.progress-table td{text-align:left;vertical-align:top;padding:7px 8px}.progress-table thead{background:#f4e2d9}.progress-table tbody tr{border-top:1px solid #ead2c6}.play-area{--prompt-space:100px;--prompt-gap:6px;--shell-space:calc(var(--padding-top) + var(--padding-bottom));grid-template-rows:auto minmax(var(--prompt-space), auto);place-items:start center;gap:var(--prompt-gap);width:min(calc(100vw - 24px), calc((100vh - var(--shell-space) - var(--prompt-space) - var(--prompt-gap)) * 16 / 9), 1260px);width:min(calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))), calc((100dvh - var(--shell-space) - var(--prompt-space) - var(--prompt-gap)) * 16 / 9), 1260px);display:grid}.stage{--hourglass-width:clamp(44px, 8%, 72px);--progress-size:44px;--room-tools-gap:8px;--room-tools-right:max(8px, 3%);isolation:isolate;aspect-ratio:16/9;background:#f1c3b5;border:1px solid #b7868c;border-radius:clamp(13px,2vw,24px);width:100%;position:relative;overflow:hidden;box-shadow:0 15px 45px #21172478}.room-art,.room-art canvas{width:100%;height:100%;display:block}.room-art{touch-action:manipulation;position:absolute;inset:0}.room-error{color:#55384c;margin:18px}.room-tools{top:max(8px,4%);right:var(--room-tools-right);align-items:flex-start;gap:var(--room-tools-gap);pointer-events:none;display:flex;position:absolute}.room-tools .progress-open,.room-tools .learning-dialog{pointer-events:auto}.room-tools:has(.hourglass-tool){width:calc(var(--progress-size) + var(--hourglass-width) + var(--room-tools-gap))}.hourglass-tool{flex:1;min-width:0;position:relative}.session-hourglass{cursor:pointer;pointer-events:auto;touch-action:manipulation;background:#fff4df;border:1px solid #fff5dc;border-radius:clamp(12px,2vw,21px);width:100%;min-height:44px;padding:3px 5px;display:block;box-shadow:0 5px 17px #5d384144,inset 0 -2px #ecd2b9}.session-hourglass svg{width:100%;display:block}.session-hourglass:focus-visible{outline-offset:2px;outline:2px solid #704261}.play-time-left{top:50%;right:calc(100% + var(--room-tools-gap));color:#58384d;font-variant-numeric:tabular-nums;white-space:nowrap;background:#fff4df;border:1px solid #fff5dc;border-radius:8px;padding:5px 9px;font-size:.875rem;font-weight:750;animation:.35s 10s forwards fade-play-time;position:absolute;transform:translateY(-50%);box-shadow:0 5px 17px #5d384144}@keyframes fade-play-time{to{opacity:0}}.prompt-panel{color:#58384d;background:#fff4df;border:1px solid #fff5dc;border-radius:21px;justify-items:center;gap:5px;max-width:100%;padding:6px 12px;display:grid;position:relative;box-shadow:0 5px 17px #5d384144,inset 0 -2px #ecd2b9}.prompt-message{justify-content:center;align-items:center;gap:6px;display:flex}.prompt-title{text-align:center;margin:0;font-size:clamp(.93rem,2vw,1.25rem);font-weight:750;line-height:1.1}.prompt-symbol{flex-shrink:0;width:32px;height:32px}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.picture{cursor:pointer;touch-action:manipulation;background:#f9dcc3;border:1px solid #d7a287;border-radius:15px;place-items:center;width:clamp(53px,7vw,74px);height:clamp(48px,6vw,58px);padding:4px;display:grid;box-shadow:inset 0 -3px #c0816a33}.picture svg{width:100%;height:100%}.toy-icon{object-fit:contain;pointer-events:none;width:100%;height:100%;padding:5px;display:block}.picture.car{background:#d4e8e7;border-color:#a1c3c4}.picture.crayons{background:#e9dcf3;border-color:#c4aed7}.picture.moon{background:#e8d6e6;border-color:#c6a3bd}.picture.sun{background:#fce1aa}.picture.small{background:#f1e5d9;border-radius:12px;width:46px;height:46px}.picture.highlight{outline-offset:1px;outline:3px solid #a95b48}.picture:focus-visible{outline-offset:2px;outline:3px solid #704261}.picture:active{transform:translateY(2px)}@media (width<=560px){.progress-header,.progress-content{padding-inline:12px}.word-summary li{padding-inline:8px}.progress-table time{white-space:nowrap}}@media (height<=485px) and (orientation:landscape){.app{--vertical-padding:7px}.play-area{--prompt-space:86px}.prompt-panel{padding-block:4px}.picture{height:48px}}