@layer base, layout, components;
@layer base {
  :root {color-scheme:light;--ink:#243c34;--forest:#193f38;--muted:#53645a;--paper:#f7f5ed;--gold:#e8bd77;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.5}
  * {box-sizing:border-box} body {margin:0} button,input {font:inherit} button {cursor:pointer} button:disabled {cursor:default} [hidden] {display:none!important} :focus-visible {outline:3px solid #986415;outline-offset:5px} h1,h2,p {margin:0} button {touch-action:manipulation} button,input {accent-color:var(--forest)}
}
@layer layout {
  .masthead,main,footer {width:min(1080px,calc(100% - 64px));margin-inline:auto}
  .masthead {display:flex;align-items:center;justify-content:space-between;padding:25px 0;border-bottom:1px solid #d4dacd;gap:16px}
  .wordmark {font:600 1.3rem Georgia,serif}.alpha {font-size:.75rem;letter-spacing:.14em;color:var(--muted)}
  .intro {padding:30px 0 24px}.eyebrow {font-size:.75rem;letter-spacing:.17em;margin-bottom:8px;color:var(--muted)}h1 {font:400 clamp(1.75rem,4vw,2.6rem)/1.2 Georgia,serif;letter-spacing:-.035em}
  .workspace {display:grid;grid-template-columns:1.08fr 1fr;border:1px solid #cdd5c8;border-radius:24px;overflow:hidden;background:#fffef9;box-shadow:0 12px 40px #183c3510}
  .corner {background:var(--forest);color:#faf5e8;display:flex;flex-direction:column;justify-content:center;padding:26px;gap:22px}.scene {overflow:hidden;border-radius:100px 100px 12px 12px;background:#d8bb88;aspect-ratio:3/2}.scene img {display:block;width:100%;height:100%;object-fit:cover}.companion-copy {padding:0 8px 10px}.state-label {display:inline-block;color:var(--gold);font-size:.75rem;letter-spacing:.13em;margin-bottom:10px}.companion-copy h2 {font:400 2rem/1.2 Georgia,serif;margin-bottom:8px}.companion-copy p {color:#e1e7dc;max-width:31ch}
  .focus-panel {padding:30px 36px 24px;min-width:0}.limits {padding:24px 8px;display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:.875rem;color:var(--muted)}footer {padding:15px 0 26px;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #d4dacd;color:var(--muted);font-size:.75rem}
  @media(max-width:700px) {.masthead,main,footer {width:calc(100% - 32px)}.masthead{padding:18px 0}.intro{padding:24px 0 18px}.workspace{grid-template-columns:1fr;border-radius:18px}.corner{padding:16px;display:grid;grid-template-columns:130px 1fr;gap:16px}.scene{aspect-ratio:1;align-self:center;border-radius:55px 55px 10px 10px}.scene img{object-position:50% 48%}.companion-copy{padding:0}.companion-copy h2{font-size:1.4rem}.companion-copy p{font-size:.875rem}.state-label{font-size:.7rem;letter-spacing:.07em;margin-bottom:5px}.focus-panel{padding:22px 22px 18px}.limits{grid-template-columns:1fr;gap:10px;padding:20px 2px}footer{flex-wrap:wrap}}
  @media(max-width:370px) {.corner{grid-template-columns:108px 1fr;gap:12px}.focus-panel{padding-inline:18px}.wordmark{font-size:1.1rem}.alpha{letter-spacing:.06em}}
}
@layer components {
  fieldset {border:0;padding:0;margin:0}legend {font-size:.875rem;margin-bottom:10px}.durations {display:grid;grid-template-columns:1fr 1fr;gap:8px}.durations label {position:relative;cursor:pointer}.durations input {position:absolute;opacity:0;width:100%;height:100%;margin:0}.durations span {display:block;text-align:center;padding:10px;border:1px solid #c8d1c5;border-radius:9px;font-weight:600}.durations input:checked+span {background:#e5ecdf;border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest)}.durations input:focus-visible+span {outline:3px solid #986415;outline-offset:3px}fieldset:disabled {opacity:.6}.durations input:disabled {cursor:default}
  .clock {text-align:center;padding:25px 0 12px}.clock p {font-size:.65rem;letter-spacing:.13em;color:var(--muted)}#timer {font-size:clamp(3.9rem,8vw,5.8rem);line-height:1.2;font-weight:400;letter-spacing:-.055em;font-variant-numeric:tabular-nums}progress {display:block;appearance:none;border:0;border-radius:9px;overflow:hidden;width:100%;height:5px;background:#e4e9df;margin-top:15px}progress::-webkit-progress-bar {background:#e4e9df}progress::-webkit-progress-value {background:#3d6d56}progress::-moz-progress-bar {background:#3d6d56}.status {text-align:center;font-size:.875rem;min-height:42px;display:grid;align-items:center;margin-bottom:10px}button {min-height:48px;border-radius:10px;padding:10px 16px;border:1px solid transparent;font-weight:600;width:100%}.primary{background:var(--forest);color:#fff9ed}.primary:hover {background:#285749}.secondary {background:transparent;border-color:#718477;color:var(--ink)}.secondary:hover{background:#edf1e8}
  .totals {display:grid;grid-template-columns:1fr 1fr;margin-top:24px;padding-top:18px;border-top:1px solid #dce1d5;text-align:center;gap:12px}.totals>div+div {border-left:1px solid #dce1d5}.totals strong {display:block;font-size:1.7rem;font-weight:500;overflow-wrap:anywhere}.totals span {font-size:.75rem;display:block;color:var(--muted)}.storage-status {text-align:center;color:var(--muted);font-size:.75rem;margin-top:13px}.notice {font-size:.875rem;background:#fff0d3;color:#633e0b;padding:14px;border:1px solid #d6b77b;border-radius:8px;margin-bottom:18px}.notice button{margin-top:12px;background:white;color:#633e0b;border-color:#916829}.noscript {position:fixed;inset:auto 10px 10px;background:#fff0d3;padding:20px;border:2px solid #633e0b}
}

@layer base {
  select {font:inherit;min-height:48px;border-radius:9px;padding:10px 36px 10px 12px;max-width:100%}
  .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}
@layer layout {
  .corner {gap:16px;padding:24px;justify-content:flex-start}
  .scene {position:relative;aspect-ratio:auto;height:300px;border-radius:14px;background:#1b2c2b;isolation:isolate}
  .scene img {position:absolute;inset:0;object-position:center;image-rendering:pixelated;filter:none;pointer-events:none}
  .scene #companion-background {object-fit:cover;width:100%;height:100%}
  .scene #companion-image {inset:auto 0 2%;object-fit:contain;object-position:center bottom;width:100%;height:92%}
  .companion-copy {padding-bottom:0}.companion-copy h2 {font-size:1.75rem}
  .corner[data-companion="velarya"] {background:#33283d}
  .corner[data-companion="niveusiel"] {background:#273c51}
  .companion-choice {padding:0 8px;margin-top:auto}
  .companion-choice label {display:block;font-size:.875rem;margin-bottom:6px}
  .companion-choice select {width:100%;background:#fffef9;color:var(--ink);border:1px solid #aebba6;cursor:pointer}
  .companion-choice select:disabled {opacity:.7;cursor:default}
  #companion-description {font-size:.875rem;color:#edf1e6;margin-top:8px}
  #companion-lock-note {font-size:.75rem;color:#d4dbd0;margin-top:4px}
  .history {margin-top:20px;padding:18px 24px;border:1px solid #cdd5c8;border-radius:14px;background:#fffef9}
  .history summary {cursor:pointer;font-weight:600;min-height:28px}
  #history-count {font-size:.875rem;color:var(--muted);margin-left:8px}
  .history-note,#history-empty {font-size:.875rem;color:var(--muted);margin-top:10px}
  #history-list {list-style:none;max-height:22rem;overflow-y:auto;padding:0 8px 0 0;margin:12px 0 0}
  #history-list li {display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:12px 0;border-top:1px solid #e1e5dc;font-size:.875rem}
  #history-list strong {font-weight:600}#history-list time {color:var(--muted)}
  @media(max-width:700px) {
    .corner {padding:16px;grid-template-columns:minmax(112px,.9fr) minmax(0,1.1fr);gap:12px}
    .scene {height:174px;aspect-ratio:auto;border-radius:10px}
    .companion-copy h2 {font-size:1.3rem}
    .companion-choice {grid-column:1/-1;padding:0;margin-top:0}
    .companion-choice label {font-size:.875rem}
    #companion-description {margin-top:6px}#companion-lock-note {margin-top:2px}
    .intro {padding:18px 0 14px}.clock {padding-top:18px}
    .focus-panel {padding-top:18px}.history {padding:16px 18px}
  }
}