:root{--ink: #3b2a1a;--ink-soft: #7a5c3e;--ink-faint: #b89b78;--paper: #e9dcc0;--paper-deep: #d8c6a0;--gray: #8f8677;--cell: 88px;--wash-1: #d9a441;--wash-2: #c4623a;--wash-3: #9b2f3a;--wash-4: #3f7f6e;--wash-5: #2f4f8f}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:Cormorant Garamond,Georgia,Times New Roman,serif;font-size:18px;background:radial-gradient(ellipse at 30% 20%,rgba(255,250,235,.55),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(120,80,40,.18),transparent 55%),var(--paper)}#app{display:grid;gap:20px;justify-items:center;padding:28px 16px 48px}h1{font-family:Cinzel,Cormorant Garamond,serif;font-weight:500;letter-spacing:.25em;font-size:22px;margin:0}nav.levels{display:flex;gap:8px}nav.levels button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--ink-soft);border-radius:2px;padding:3px 10px;cursor:pointer;display:grid;justify-items:center;line-height:1.15}nav.levels button .best{font-size:12px;color:var(--gray)}nav.levels button[aria-current=true]{background:var(--ink);color:var(--paper)}nav.levels button[aria-current=true] .best{color:var(--paper-deep)}nav.levels button.hidden-level{border-style:dashed;border-color:var(--ink)}.intro{font-style:italic;color:var(--ink-soft);margin-top:-8px;animation:intro-in .4s ease-out both}@keyframes intro-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.status{display:flex;gap:28px;font-style:italic}.status b{font-style:normal}svg.board{display:block;max-width:100%;height:auto}svg.board .cell{cursor:pointer}svg.board .tile{fill:var(--paper-deep);stroke:var(--ink-soft);stroke-width:1}svg.board .wash{opacity:.8}svg.board .wash.r0{fill:none}svg.board .wash.r1{fill:var(--wash-1)}svg.board .wash.r2{fill:var(--wash-2)}svg.board .wash.r3{fill:var(--wash-3)}svg.board .wash.r4{fill:var(--wash-4)}svg.board .wash.r5{fill:var(--wash-5)}svg.board .tick{stroke:var(--ink);stroke-width:2;stroke-linecap:round}svg.board .tick.spent{stroke:var(--ink-soft);stroke-width:1.5;opacity:.8}svg.board .cell.done .ink{opacity:.45}svg.board .cell.lit .tile{fill:#f2e8d2;stroke:var(--ink);stroke-width:1.5}svg.board .lamp{transform-box:fill-box;transform-origin:50% 60%}svg.board .cell.hit .lamp{animation:knock .24s ease-out}svg.board .cell.charge .lamp{animation:flare .3s ease-out}svg.board .cell.charge .wash{animation:pour .3s ease-out}svg.board .cell.out .ink{animation:dim .3s ease-in forwards}svg.board .tick{transform-box:fill-box;transform-origin:50% 100%}svg.board .tick.fading{animation:tick-spend .24s ease-in forwards}svg.board .tick.fading.gone{animation:tick-gone .24s ease-in forwards}svg.board .tick.filling{animation:tick-in .18s ease-out both}@keyframes knock{0%{transform:scale(1)}40%{transform:scale(.92)}to{transform:scale(1)}}@keyframes flare{0%{transform:scale(.96)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes pour{0%{opacity:0}to{opacity:.8}}@keyframes dim{0%{opacity:1}to{opacity:.45}}@keyframes tick-spend{0%{stroke:var(--ink);stroke-width:2;transform:scaleY(1)}to{stroke:var(--ink-soft);stroke-width:1.5;opacity:.8;transform:scaleY(.5)}}@keyframes tick-gone{0%{stroke:var(--ink);stroke-width:2;transform:scaleY(1);opacity:1}to{transform:scaleY(0);opacity:0}}@keyframes tick-in{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}svg.board .face{transform-box:fill-box;transform-origin:center}svg.board .cell.flip .face{animation:flip .52s ease-in-out both}svg.board .cell.flip .tile{animation:tile-flash .52s ease-in-out both;animation-delay:inherit}@keyframes flip{0%{transform:scaleX(1)}50%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes tile-flash{0%,to{fill:var(--paper-deep)}50%{fill:var(--ink-faint)}}@media(prefers-reduced-motion:reduce){svg.board *{animation:none!important}}body.gray{filter:grayscale(1)}.result{width:min(100%,460px);display:grid;gap:12px;justify-items:center;text-align:center;padding:18px 20px 16px;border:1px solid var(--ink-soft);background:#d8c6a059;animation:result-in .5s ease-out both}@keyframes result-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.result .title{font-family:Cinzel,serif;letter-spacing:.3em;font-size:24px}.result .stats{display:flex;gap:28px;margin:0}.result .stats div{display:grid;gap:2px}.result .stats dt{font-size:14px;color:var(--gray);font-style:italic}.result .stats dd{margin:0;font-size:20px}.result .badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 10px;border-radius:999px;border:1px solid var(--ink);font-size:13px}.result .badge.under{background:var(--ink);color:var(--paper)}.result .badge.over{color:var(--ink-soft);border-color:var(--ink-soft)}.result .muted{color:var(--gray);font-size:14px}.result form.submit{display:flex;gap:6px}.result input{font:inherit;width:10em;padding:3px 8px;border:1px solid var(--ink-soft);border-radius:2px;background:var(--paper);color:var(--ink)}.result button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--ink-soft);border-radius:2px;padding:4px 12px;cursor:pointer}.result table{border-collapse:collapse;font-size:15px;width:100%}.result th{font-weight:500;color:var(--gray);font-style:italic;border-bottom:1px solid var(--ink-soft);padding:2px 8px}.result td{padding:3px 8px;border-bottom:1px dashed var(--paper-deep)}.result .actions{display:flex;gap:8px;margin-top:2px}.result .actions button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.toggles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:16px}.toggles.melody{gap:8px}.group-label{align-self:center;margin-right:6px;font-style:italic}.group-label.off{color:var(--gray)}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch input{position:absolute;opacity:0;width:0;height:0}.switch .track{position:relative;width:36px;height:20px;border-radius:999px;border:1px solid var(--ink-soft);background:transparent;transition:background .16s,border-color .16s}.switch .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-soft);transition:transform .16s,background .16s}.switch .text{color:var(--gray);transition:color .16s}.switch.on .track{background:var(--ink);border-color:var(--ink)}.switch.on .knob{transform:translate(16px);background:var(--paper)}.switch.on .text{color:var(--ink)}.switch.disabled{cursor:not-allowed;opacity:.45}.switch input:focus-visible+.track{outline:2px solid var(--ink-soft);outline-offset:2px}.volume{display:inline-flex;align-items:center;gap:8px}.volume .text{color:var(--ink)}.volume.off{opacity:.45}.volume.off .text{color:var(--gray)}.volume input[type=range]{width:110px;accent-color:var(--ink);cursor:pointer}.pill{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.pill input{position:absolute;opacity:0;width:0;height:0}.pill span{padding:3px 12px;border-radius:999px;border:1px solid var(--ink-soft);color:var(--gray);transition:background .16s,color .16s}.pill:has(input:checked) span{background:var(--ink);border-color:var(--ink);color:var(--paper)}.pill.disabled{cursor:not-allowed;opacity:.45}.pill input:focus-visible+span{outline:2px solid var(--ink-soft);outline-offset:2px}.feedback{width:min(100%,460px);border-top:1px solid var(--ink-soft);padding-top:10px;margin-top:8px}.feedback summary{cursor:pointer;font-style:italic;color:var(--ink-soft);list-style:none;display:flex;align-items:center;gap:8px}.feedback summary:before{content:"▸";font-style:normal;transition:transform .16s}.feedback[open] summary:before{transform:rotate(90deg)}.feedback summary::-webkit-details-marker{display:none}.feedback-body{display:grid;gap:16px;padding-top:12px}.feedback-form{display:grid;gap:10px;font-size:16px}.feedback-form label{display:grid;gap:4px}.feedback-form label.row{grid-template-columns:auto 1fr;align-items:center;gap:10px}.feedback-form label.check{grid-template-columns:auto 1fr;cursor:pointer}.feedback-form .req{color:var(--wash-2)}.feedback-form input[type=text],.feedback-form input:not([type]),.feedback-form input[type=email],.feedback-form textarea{font:inherit;padding:4px 8px;border:1px solid var(--ink-soft);border-radius:2px;background:var(--paper);color:var(--ink);width:100%}.feedback-form textarea{resize:vertical}.feedback-form input[type=checkbox]{accent-color:var(--ink)}.feedback-form .actions{display:flex;align-items:center;gap:12px}.feedback-form button{font:inherit;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:4px 16px;cursor:pointer}.feedback-form button:disabled{opacity:.5;cursor:wait}.feedback-form .err{color:var(--wash-3);font-size:15px}.thanks{font-style:italic;margin:0}.rating-row{display:flex;align-items:center;gap:10px}.rating{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}.rating input{position:absolute;opacity:0;width:0;height:0}.rating label{font-size:24px;line-height:1;color:var(--ink-faint);cursor:pointer;transition:color .12s}.rating input:checked~label,.rating label:hover,.rating label:hover~label{color:var(--wash-1)}.rating input:focus-visible+label{outline:2px solid var(--ink-soft);outline-offset:2px}.feedback-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}.feedback-list li{border-bottom:1px dashed var(--paper-deep);padding-bottom:8px}.feedback-list li b{margin-right:8px}.feedback-list li .muted{margin-left:8px;font-size:13px}.feedback-list li p{margin:4px 0 0;white-space:pre-wrap}.feedback-list .stars{color:var(--wash-1);letter-spacing:1px}.muted{color:var(--gray)}.version{font-size:13px;color:var(--gray);letter-spacing:.05em;margin-top:12px}.roadmap{width:min(100%,460px);border-top:1px solid var(--ink-soft);padding-top:10px}.roadmap summary{cursor:pointer;font-style:italic;color:var(--ink-soft);list-style:none;display:flex;align-items:center;gap:8px}.roadmap summary:before{content:"▸";font-style:normal;transition:transform .16s}.roadmap[open] summary:before{transform:rotate(90deg)}.roadmap summary::-webkit-details-marker{display:none}.roadmap-body{display:grid;gap:12px;padding-top:10px;font-size:15px}.roadmap-body p{margin:0}.roadmap-body h3{margin:0 0 4px;font-size:15px;font-weight:500;font-style:italic;color:var(--ink-soft)}.roadmap-body ul{margin:0;padding-left:18px;display:grid;gap:3px}