:root{color-scheme:light;font:16px system-ui;background:#f5f7fa;color:#182230;--ink:#435166;--line:#b8c3d0}*{box-sizing:border-box}body{margin:0}header,main{max-width:1000px;margin:auto;padding:20px}header{padding-top:36px}header small{color:#bcece3;font-weight:800;letter-spacing:.18em}h1{margin:.25em 0;font-size:clamp(2rem,6vw,3.5rem)}h2{margin:0 0 16px;font-size:1.15rem}p{line-height:1.5}header p,.hint{color:var(--ink)}section{background:#fff;border:1px solid var(--line);border-radius:16px;margin:0 0 16px;padding:18px}fieldset{margin:0;padding:0;border:0;min-width:0}.row{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:12px 0}label{display:grid;gap:5px;color:var(--ink);font-size:.9rem}button,select,input[type=number],a{font:inherit;padding:8px 10px;border:1px solid var(--line);background:#f1f5f9;color:inherit;border-radius:8px;min-height:42px}button,a{cursor:pointer}button:disabled{opacity:.45;cursor:default}.primary{background:#bcece3;color:#102523;font-weight:750}input[type=number]{width:115px}input[type=file]{max-width:100%}#timeline{width:100%}.viewport{overflow:auto;max-height:65vh;background:#edf1f5;border-radius:10px}canvas{display:block;width:100%;height:auto;touch-action:none;background:repeating-conic-gradient(#fff 0% 25%,#b8c3d0 0% 50%) 0/24px 24px}#desk{min-height:200px;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px;margin-top:12px;border-radius:10px;background:linear-gradient(#35466080 1px,transparent 1px),linear-gradient(90deg,#35466080 1px,transparent 1px),#182338;background-size:20px 20px}#bubble{width:min(100%,340px);max-height:280px}[hidden]{display:none!important}

.advanced{display:none}body:has(#settings:checked) .advanced{display:revert}body:has(#settings:checked) .row.advanced{display:flex}body:has(#settings:checked) label.advanced{display:grid}
header,main{padding:14px}header{padding-top:20px}section{padding:14px}label,.hint,header p{color:#435166}label{font-size:1rem}button,select{min-height:48px}button[aria-pressed=true]{background:#bcece3;color:#102523}#size{width:min(230px,60vw)}#time{align-self:center;font-variant-numeric:tabular-nums}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bcece3;outline-offset:2px}
#montage summary{cursor:pointer;font-weight:700;padding:10px 0}#caption{font:inherit;max-width:100%;padding:8px;min-height:44px}
header{padding-bottom:4px}header h1{font-size:clamp(1.55rem,4vw,2.2rem)}.project-panel h2{margin-bottom:6px}.source-picker{margin-bottom:12px}.workspace{padding:12px}.tool-strip{display:flex;gap:6px;margin:12px 0 8px}.tool-strip button{flex:1;padding-inline:6px}.tool-strip button[aria-pressed=true]{box-shadow:inset 0 -3px #24746c}.workspace .hint{font-size:.93rem;margin:8px 0}.workspace #saveStatus:empty,.project-panel #projectName:empty{display:none}.viewport{border:1px solid var(--line)}input[type=range]{accent-color:#bcece3}

header small{color:#17645b}button:focus-visible,input:focus-visible,select:focus-visible{outline-color:#17645b}input[type=range]{accent-color:#17645b}.tool-strip button[aria-pressed=true]{font-weight:750}#caption{background:#fff;color:inherit;border:1px solid var(--line);border-radius:8px}

#play{min-width:52px;font-size:1.3rem;line-height:1}

.transport{display:inline-flex;align-items:stretch;gap:6px}.transport button{min-width:54px}.transport button:not(#play){display:flex;align-items:center;gap:4px}.seek-arrow{font-size:1.35rem;line-height:1}
.transport button{background:#f5d578;color:#372500;border-color:#a77b20}
.transport #play{background:#e8b84d;color:#372500}
#projectPages{display:flex;gap:10px;overflow-x:auto;padding:4px 2px}
.project-page{flex:0 0 145px;min-height:78px;text-align:left;overflow-wrap:anywhere}
.project-page[aria-pressed=true]{background:#fff1c8;color:#372500;border-color:#a77b20}
.timeline-panel{padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.timeline-panel label{font-weight:700}
#timelineSections{position:relative;min-height:44px;border-radius:6px;background:#f1f5f9}
#timelineSections:empty{display:none}
#timelineSections button{position:absolute;top:0;min-height:44px;padding:0;overflow:hidden;background:#fff1c8;color:#372500;border-color:#a77b20}
.tool-strip{flex-wrap:wrap;background:#f5d578;border:1px solid #a77b20;border-radius:12px;padding:6px}
.tool-strip button{flex:1 1 84px;background:#fff3cc;color:#372500;border-color:#a77b20}
.tool-strip button[aria-pressed=true]{background:#e8b84d;box-shadow:inset 0 -3px #815b0f}