:root{color-scheme:dark;--bg:#101311;--paper:#f0eee2;--muted:#9baba0;--line:#303c34;--lime:#dcf4ab}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}main{max-width:1640px;margin:auto;padding:29px 42px 24px}header{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:.15em;line-height:1.6;color:var(--muted);font-weight:600;margin:0 0 9px}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(28px,3vw,43px);line-height:1.1;margin:0}.edition{text-align:right;font-size:10px;line-height:1.6;color:var(--muted);margin:0;letter-spacing:.08em}.room{display:grid;grid-template-columns:minmax(0,2.65fr) minmax(280px,.95fr);gap:34px;align-items:start}.stage{aspect-ratio:4/3;position:relative;background:#050907;overflow:hidden}#photo{width:100%;height:100%;object-fit:contain;display:block;opacity:.96}#map{position:absolute;width:100%;height:100%;inset:0}.image-tag{position:absolute;bottom:14px;left:16px;font:10px ui-monospace,monospace;letter-spacing:.12em;background:#101811a6;padding:6px 8px;border-radius:3px}.stage[data-view=vectors] #photo{opacity:0}.stage[data-view=photo] #map{visibility:hidden}.stage[data-view=photo] #photo{opacity:1}.view-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0}.view-options{display:flex;gap:5px}button{cursor:pointer;font:inherit;color:inherit;border:1px solid var(--line);background:transparent}button[aria-pressed=true]{background:var(--lime);color:#142012;border-color:var(--lime)}.view-options button{font-size:10px;border-radius:16px;padding:6px 10px}#clock{font:10px ui-monospace,monospace;color:var(--muted);white-space:nowrap}#timeline{width:100%;height:88px;display:block;cursor:pointer}#timeline [role=button]:focus-visible{stroke:white;stroke-width:4;outline:none}.timeline-labels{display:flex;gap:16px;color:var(--muted);font-size:10px;margin-top:8px}.hint{margin-left:auto;font-size:9px;color:#829487}aside{padding-top:3px}h2{font-size:39px;line-height:1.06;margin:13px 0 18px}.description{font-size:13px;line-height:1.75;color:#b6c3b8;margin:0 0 21px}.tempo{display:flex;gap:14px;align-items:center;font-size:10px;color:var(--muted);padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:20px}.beat-dots{display:flex;gap:6px;margin-left:auto}.beat-dots i{width:6px;height:6px;border-radius:50%;background:#3e5143}.beat-dots i.active{background:var(--lime)}audio{width:100%;height:42px}.layer-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:15px 0 26px}.layer-buttons button{font-size:11px;padding:8px 2px;border-radius:5px}.families>div{display:flex;align-items:center;gap:10px;margin:16px 0;opacity:.55}.families>div.active{opacity:1}.symbol{font-size:25px;width:30px;text-align:center;line-height:1}.families strong{font-size:12px;font-weight:400;display:block}.families small{display:block;font-size:9px;line-height:1.5;color:var(--muted);margin-top:3px}.families i{width:7px;height:7px;border-radius:50%;margin-left:auto;background:var(--event-color,#2a3a2e);box-shadow:0 0 12px color-mix(in srgb,var(--event-color,#2a3a2e),transparent 60%)}.now{font-size:11px;line-height:1.65;color:var(--muted);min-height:37px;margin:24px 0 18px}.links{display:flex;gap:16px;justify-content:space-between;font-size:10px}a{color:inherit;text-underline-offset:4px}.links a{color:#c1cfbb}details{margin-top:24px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;line-height:1.75;color:var(--muted)}summary{color:var(--paper);cursor:pointer;font-size:11px}details a{display:inline-block;margin-top:8px}#status{color:#ffc69a;font-size:11px}#gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:30px}#gallery button{padding:0;text-align:left;border-radius:3px;overflow:hidden;background:transparent;color:var(--paper);border-color:transparent}#gallery button img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;opacity:.65}#gallery button[aria-pressed=true]{border-color:var(--lime)}#gallery button[aria-pressed=true] img,#gallery button:hover img{opacity:1}#gallery button span{display:block;font-size:10px;line-height:1.4;padding:10px 8px;min-height:34px}#gallery button[aria-pressed=true] span{color:var(--lime)}footer{display:flex;justify-content:space-between;gap:25px;align-items:center;border-top:1px solid var(--line);margin-top:24px;padding-top:19px;color:var(--muted);font-size:10px;line-height:1.7}footer p{margin:0}footer span{font-size:9px;color:#768a7c}.upload{color:var(--lime);cursor:pointer;border-bottom:1px solid var(--lime);padding:7px 0;position:relative;display:inline-block}#upload{position:absolute;width:1px;height:1px;opacity:0}#upload-status{color:#ffc69a;margin-top:8px;max-width:350px}button:focus-visible,a:focus-visible,summary:focus-visible,.upload:focus-within{outline:2px solid var(--lime);outline-offset:4px}@media(max-width:1100px){main{padding:24px}.room{gap:23px;grid-template-columns:minmax(0,1.85fr) minmax(260px,1fr)}h2{font-size:32px}.hint{display:none}.description{font-size:12px}#gallery{gap:8px}#gallery button span{font-size:9px}}@media(max-width:760px){main{padding:20px 16px}header{align-items:start;gap:15px;padding-bottom:18px;margin-bottom:18px}h1{font-size:29px}.edition{font-size:8px;white-space:nowrap;padding-top:3px}.room{display:flex;flex-direction:column;gap:24px}.visual,aside{width:100%}h2{font-size:34px}.description{font-size:14px;margin-bottom:16px}.tempo{margin-bottom:14px}.families{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.families>div{display:block;margin:9px 0;position:relative}.families strong{font-size:10px;margin-top:7px}.families small{font-size:9px}.families i{position:absolute;right:3px;top:8px}.symbol{font-size:23px;display:block;text-align:left}.now{margin:15px 0 14px;min-height:25px}.links{font-size:11px}details{margin-top:20px}.layer-buttons{margin-bottom:12px}.layer-buttons button{padding:10px 2px}.view-options button{font-size:9px;padding:6px 9px}.timeline-labels{font-size:9px;gap:15px}#gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:25px}#gallery button span{font-size:10px;padding:9px 5px}footer{flex-wrap:wrap;font-size:10px;gap:17px}.upload{padding:4px 0}.image-tag{left:10px;bottom:10px}}

#art{position:absolute;inset:0;width:100%;height:100%}.stage[data-view=photo] #art{display:none}.photo-title{font-size:12px;color:#d1d9cd;margin:-7px 0 16px}.instruments{border-left:2px solid var(--lime);padding-left:12px;margin:0 0 18px}.instruments span{font-size:8px;letter-spacing:.13em;color:var(--muted)}.instruments p{font:14px/1.5 Georgia,serif;color:var(--paper);margin:6px 0 0}#title{font-size:43px}.description{margin-bottom:17px}#gallery button .style-name{font:20px Georgia,serif;padding:9px 8px 0;min-height:0}#gallery button .image-name{font-size:9px;color:var(--muted);padding-top:6px}.complexity{font-size:9px;color:var(--lime);letter-spacing:.2em}.stage[data-view=origin] #photo{opacity:.7}footer{align-items:flex-start}@media(max-width:760px){#title{font-size:35px}#gallery button .style-name{font-size:18px}.instruments p{font-size:15px}}
