:root { color-scheme: dark; --ink:#f2f0e9; --muted:rgba(242,240,233,.5); --line:rgba(242,240,233,.17); --black:#030303; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; }
body { overflow:hidden; background:var(--black); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,a { color:inherit; font:inherit; } button { cursor:pointer; } canvas { display:block; }
.work { width:100vw; height:100vh; }
.work.is-light-field { --ink:#080808; --muted:rgba(8,8,8,.52); --line:rgba(8,8,8,.2); color:var(--ink); }
.work.is-light-field .mark { filter:none; }
.work.is-light-field .caption { text-shadow:0 1px 14px rgba(255,255,255,.9); }
.work.is-light-field .caption>p { color:rgba(8,8,8,.74); }
.work.is-light-field .state-navigation button { background:rgba(255,255,255,.3); }
.work.is-light-field .archive,.work.is-light-field .about {
  --ink:#f2f0e9; --muted:rgba(242,240,233,.5); --line:rgba(242,240,233,.17);
  color:var(--ink);
}
.work.is-light-field .about p { color:rgba(242,240,233,.67); }
.work.is-light-field .parameter-metadata dd { color:rgba(242,240,233,.76); }
.masthead { position:fixed; z-index:10; inset:0; pointer-events:none; }
.identity,.primary-nav { pointer-events:auto; }
.identity { position:absolute; top:clamp(10px,3vw,34px); left:clamp(10px,3vw,34px); display:flex; align-items:center; justify-content:center; width:48px; height:48px; color:var(--ink); text-decoration:none; }
.mark { display:block; width:82px; height:82px; max-width:none; opacity:.34; filter:drop-shadow(0 0 7px rgba(255,255,255,.16)); transition:opacity .2s ease; }
.identity:hover .mark,.identity:focus-visible .mark { opacity:1; }
.identity strong,.identity small { display:block; }
.identity strong { font-size:13px; letter-spacing:.18em; }
.identity small { margin-top:5px; color:var(--muted); font:9px/1 ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; }
.sound { position:absolute; z-index:3; right:clamp(22px,4vw,68px); bottom:clamp(22px,4vw,68px); display:flex; align-items:center; gap:11px; padding:10px 0; border:0; background:transparent; color:#eeeae3; cursor:pointer; pointer-events:auto; }
.sound:focus-visible { outline:1px solid #eeeae3; outline-offset:7px; }
.sound span { position:relative; display:block; width:29px; height:29px; border:1px solid rgba(238,234,227,.32); border-radius:50%; transition:border-color .4s,transform .4s; }
.sound span::before { content:""; position:absolute; top:50%; left:50%; width:3px; height:3px; border-radius:50%; background:#eeeae3; transform:translate(-50%,-50%); transition:background .4s,box-shadow .4s; }
.sound b { font:400 .5rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:.23em; text-transform:uppercase; }
.sound:hover span { border-color:rgba(238,234,227,.8); transform:scale(1.08); }
.sound[aria-pressed="true"] span { border-color:rgba(230,37,31,.76); }
.sound[aria-pressed="true"] span::before { background:#e6251f; box-shadow:0 0 12px 3px rgba(230,37,31,.46); }
.iteration-signature { position:fixed; z-index:4; left:28px; bottom:25px; display:flex; align-items:baseline; gap:11px; color:rgba(242,240,233,.42); pointer-events:none; text-transform:uppercase; }
.iteration-signature span { font:8px/1 ui-monospace,monospace; letter-spacing:.14em; }
.iteration-signature strong { padding-left:11px; border-left:1px solid rgba(242,240,233,.2); color:rgba(242,240,233,.68); font:400 9px/1 ui-monospace,monospace; letter-spacing:.16em; }
.primary-nav { display:flex; gap:24px; }
.text-button { padding:4px 0; border:0; border-bottom:1px solid transparent; background:none; color:var(--muted); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.text-button:hover,.text-button:focus-visible,.text-button.is-active { border-color:currentColor; color:var(--ink); outline:none; }
.eyebrow { display:block; color:var(--muted); font:9px/1.2 ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; }
.state-index { position:fixed; z-index:4; top:104px; right:28px; width:136px; padding-top:10px; border-top:1px solid var(--line); text-align:right; }
.state-index strong { display:block; margin-top:6px; font:300 26px/1 Georgia,serif; }
.state-index i { margin:0 6px; color:var(--muted); font-style:normal; }
.caption { position:fixed; z-index:4; left:28px; bottom:86px; width:min(430px,calc(100vw - 56px)); padding-top:13px; border-top:1px solid var(--line); text-shadow:0 1px 14px #000; }
.caption h1 { margin:8px 0 7px; font:400 clamp(26px,3vw,43px)/1 Georgia,"Times New Roman",serif; letter-spacing:-.02em; }
.caption>p { max-width:42ch; margin:0; color:rgba(242,240,233,.7); font:14px/1.5 Georgia,serif; }
.caption footer { display:flex; gap:18px; margin-top:15px; color:var(--muted); font:9px/1 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.caption footer button { padding:0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; text-transform:uppercase; }
.caption footer #soundButton { margin-left:auto; }
.state-navigation { position:fixed; z-index:4; right:28px; bottom:25px; display:flex; align-items:center; gap:12px; }
.state-navigation button { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(0,0,0,.25); }
.state-navigation button:disabled { opacity:.22; cursor:default; }
.state-navigation span { color:var(--muted); font:8px/1 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
.archive { position:fixed; z-index:20; inset:0; overflow-y:auto; padding:0 28px 50px; background:rgba(3,3,3,.97); backdrop-filter:blur(14px); }
.archive[hidden],.about[hidden] { display:none; }
.archive-header { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; padding:24px 0 18px; border-bottom:1px solid var(--line); background:rgba(3,3,3,.94); }
.archive-header h2 { margin:7px 0 0; font:400 28px/1 Georgia,serif; }
.archive-actions { display:flex; align-items:center; gap:22px; }
.outline-button { min-height:36px; padding:0 14px; border:1px solid var(--line); background:transparent; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.outline-button:hover { background:var(--ink); color:var(--black); }
.archive-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding-top:28px; }
.state-card { min-width:0; padding:0; border:1px solid rgba(242,240,233,.08); background:var(--black); text-align:left; }
.state-card figure { margin:0; aspect-ratio:4/5; overflow:hidden; background:#080808; }
.state-card img { display:block; width:100%; height:100%; object-fit:cover; }
.state-card footer { display:flex; justify-content:space-between; gap:12px; padding:12px 10px 18px; color:var(--muted); font:9px/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.state-card footer span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.state-card:hover footer,.state-card[aria-current="true"] footer { color:var(--ink); }
.state-card[aria-current="true"] figure { outline:1px solid var(--ink); outline-offset:-1px; }
.about { position:fixed; z-index:30; inset:0 0 0 auto; width:min(520px,100%); overflow-y:auto; padding:96px 46px 50px; border-left:1px solid var(--line); background:rgba(5,5,5,.97); backdrop-filter:blur(18px); }
.panel-close { position:absolute; top:27px; right:28px; }
.about h2 { margin:17px 0 34px; font:400 clamp(36px,5vw,58px)/1.02 Georgia,serif; letter-spacing:-.03em; }
.about p { color:rgba(242,240,233,.67); font:16px/1.65 Georgia,serif; }
.about dl { margin-top:35px; border-top:1px solid var(--line); }
.about dl div { display:grid; grid-template-columns:1fr 1.35fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); }
.about dt { color:var(--muted); font:9px/1.3 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.1em; }
.about dd { margin:0; font-size:12px; }
.parameter-section { margin-top:40px; }
.parameter-section>header { display:flex; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px solid var(--line); color:var(--muted); font:8px/1 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.09em; }
.parameter-metadata { margin:0; border-top:0; }
.parameter-metadata div { grid-template-columns:minmax(0,1fr) auto!important; padding:9px 0!important; }
.parameter-metadata dt { overflow:hidden; text-overflow:ellipsis; text-transform:none!important; letter-spacing:.03em!important; }
.parameter-metadata dt::before { display:inline-block; width:13px; color:transparent; content:'●'; }
.parameter-metadata div.is-override dt::before { color:var(--ink); }
.parameter-metadata dd { color:rgba(242,240,233,.76); font-family:ui-monospace,monospace; }
#captureProgress { position:fixed; z-index:40; left:50%; bottom:20px; width:min(380px,calc(100vw - 32px)); padding:10px 12px; border:1px solid var(--line); background:rgba(3,3,3,.9); opacity:0; transform:translate(-50%,10px); transition:.18s ease; pointer-events:none; }
#captureProgress.is-visible { opacity:1; transform:translate(-50%,0); }
.captureProgressText { display:flex; justify-content:space-between; margin-bottom:8px; font:9px/1 ui-monospace,monospace; text-transform:uppercase; }
.captureProgressStatus { color:var(--muted); } .captureProgressTrack { height:1px; background:var(--line); } .captureProgressFill { width:0; height:100%; background:var(--ink); transition:width .1s linear; }
html.embedded-in-telos .masthead,
html.embedded-in-telos .iteration-signature,
html.embedded-in-telos .state-index,
html.embedded-in-telos .caption,
html.embedded-in-telos .state-navigation,
html.embedded-in-telos .archive,
html.embedded-in-telos .about,
html.embedded-in-telos #captureProgress { display:none!important; }
html.embedded-in-telos canvas { background:#030303!important; pointer-events:none!important; }
@media (max-width:760px) {
  .sound b { display:none; } .primary-nav { gap:13px; }
  .iteration-signature { left:16px; bottom:20px; gap:8px; } .iteration-signature strong { padding-left:8px; }
  .state-index { top:76px; right:16px; width:104px; } .caption { left:16px; bottom:82px; width:calc(100vw - 32px); } .caption>p { font-size:13px; }
  .state-navigation { right:16px; bottom:20px; } .archive { padding:0 16px 36px; } .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .archive-actions { gap:12px; } .about { padding:84px 28px 40px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }