@font-face{
    font-family:'Fraunces';
    src:url('/fonts/fraunces-300.woff2') format('woff2');
    font-weight:300; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Fraunces';
    src:url('/fonts/fraunces-300-italic.woff2') format('woff2');
    font-weight:300; font-style:italic; font-display:swap;
  }
  @font-face{
    font-family:'Fraunces';
    src:url('/fonts/fraunces-500.woff2') format('woff2');
    font-weight:500; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'JetBrains Mono';
    src:url('/fonts/jetbrains-mono-300.woff2') format('woff2');
    font-weight:300; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'JetBrains Mono';
    src:url('/fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'JetBrains Mono';
    src:url('/fonts/jetbrains-mono-500.woff2') format('woff2');
    font-weight:500; font-style:normal; font-display:swap;
  }
  :root{
    --ink:#efe7d6;
    --dim:#9b9384;
    --faint:#6b6458;
    --paper:#0a0906;
    --accent:#d9553b;
    --rule:rgba(239,231,214,.18);
    --pad: clamp(14px, 2.6vw, 40px);
    --gap: clamp(18px, 3vw, 36px);
    --crossfade: 400ms;
    --filter-t: 1200ms;
    --fx-t: 900ms;
  }
  *{box-sizing:border-box;margin:0;padding:0;min-width:0}
  html,body{height:100%;width:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:"JetBrains Mono",ui-monospace,monospace}
  .stage{position:fixed;inset:0;overflow:hidden;background:#05060a}
  
  .photo-stack{
    position:absolute;inset:0;
    transition: filter var(--filter-t) ease-out;
  }
  .photo{
    position:absolute;inset:0;width:100%;height:100%;
    background-size:cover;background-position:center;
    background-color:#05060a;
    opacity:0;
    transition: opacity var(--crossfade) ease-out;
  }
  .photo.active{ opacity:1 }
  
  #stage-noise-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--fx-t) ease-out;
    z-index: 0;
  }
  
  .veil{
    position:absolute;inset:0;pointer-events:none;
    background: #000;
    opacity:0;
    transition: opacity var(--fx-t) ease-out;
  }
  .vignette{
    position:absolute;inset:0;pointer-events:none;z-index:3;
    background: radial-gradient(130% 90% at 50% 55%, transparent 55%, rgba(0,0,0,.5) 100%);
    opacity:0;
    transition: opacity var(--fx-t) ease-out;
  }
  
  
  .stage[data-pass="1"] .photo-stack { filter: saturate(1.05) brightness(1) contrast(1); }
  .stage[data-pass="1"] #stage-noise-canvas            { opacity: .60; }
  .stage[data-pass="1"] .filmstrip .frame .noise-canvas{ opacity: .75; }
  .stage[data-pass="1"] .veil        { opacity: .8 }
  .stage[data-pass="1"] .vignette    { opacity: 0   }
  
  .stage[data-pass="2"] .photo-stack { filter: saturate(.85) brightness(.95) contrast(1); }
  .stage[data-pass="2"] .veil        { opacity: .6 }
  .stage[data-pass="3"] .photo-stack { filter: blur(0) saturate(.95) brightness(1) contrast(1.02); }
  .stage[data-pass="3"] .veil        { opacity: .4 }
  .stage[data-pass="4"] .photo-stack { filter: blur(0) saturate(1) brightness(1.02) contrast(1.05); }
  .stage[data-pass="4"] .veil        { opacity: .2 }
  .stage[data-pass="5"] .photo-stack { filter: blur(0) saturate(1.08) brightness(1.03) contrast(1.08); }
  .stage[data-pass="5"] .veil        { opacity: 0  }
  
  .te-view{
    position:absolute; inset:0; z-index:2;
    display:none;
    pointer-events:none;
    color: var(--ink);
    overflow:hidden;
  }
  .stage.mode-text .te-view { display: block; }
  .stage.mode-text .photo-stack,
  .stage.mode-text #stage-noise-canvas,
  .stage.mode-text .veil,
  .stage.mode-text .vignette { display: none; }
  
  .video-view{
    position: absolute; inset: 0;
    z-index: 1;  
    display: none;
    pointer-events: none;
    color: var(--ink);
    overflow: hidden;
  }
  .stage.mode-video .video-view{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
    padding: clamp(40px, 8vh, 120px) 2vw clamp(60px, 9vh, 140px) 2vw;
  }
  .stage.mode-video .photo-stack{ display: none; }
  
  .stage.mode-video > #stage-noise-canvas,
  .stage.mode-video > .veil,
  .stage.mode-video > .vignette { display: none; }
  
  .filmstrip .frame .noise-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--fx-t) ease-out;
    z-index: 1;
  }
  
  .filmstrip .frame .frame-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    display: block;
  }
  
  .filmstrip .frame .hero-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 80ms ease-out;
  }
  .filmstrip.played .frame.hero .hero-video{ display: block; }
  .filmstrip.played .frame.hero .hero-video.ready{ opacity: 1; }
  
  .filmstrip{
    display: flex;
    gap: clamp(3px, 0.5vw, 6px);
    width: min(88vw, 1280px);
    align-items: stretch;
    transition: gap .9s ease;
  }
  .filmstrip .frame{
    flex: 1 1 0;
    aspect-ratio: 16 / 9;
    background-color: #0b0a07;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    outline: 1px solid rgba(239,231,214,.12);
    position: relative;
    overflow: hidden;
    transition: flex-grow .9s cubic-bezier(.2,.7,.25,1),
                opacity   .6s ease,
                outline-color .6s ease,
                box-shadow .6s ease,
                transform .9s cubic-bezier(.2,.7,.25,1);
  }
  .filmstrip.playing .frame.hero{
    outline: 1px solid rgba(239,231,214,.18);
    box-shadow: none;
  }
  .filmstrip.playing .frame .tc{
    color: var(--ink);
    border-color: rgba(239,231,214,.18);
  }
  .filmstrip.played .frame:not(.hero){
    opacity: 0.18;
    outline-color: rgba(239,231,214,.06);
  }
  .filmstrip.played .frame.hero{
    transform: scale(3.8);
    z-index: 5;
    outline: 1px solid var(--accent);
    box-shadow: 0 0 0 1px rgba(217,85,59,.30), 0 18px 60px rgba(0,0,0,.6);
  }
  .filmstrip.played ~ .video-chrome{ opacity: 0; }
  .filmstrip.played .frame:not(.hero) .tc{
    opacity: 0;
  }
  .filmstrip.played .frame.hero .tc{
    opacity: 0;
  }
  
  .video-scrubber-playhead{
    position: absolute; top: 50%;
    width: 2px; height: 16px;
    background: var(--accent);
    box-shadow: 0 0 6px rgba(217,85,59,.6);
    transform: translate(-50%, -50%);
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .video-scrubber.playing .video-scrubber-playhead{ opacity: 1; }
  .filmstrip .frame .tc{
    position: absolute;
    top: 6px; left: 7px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--ink);
    background: rgba(10,9,6,.62);
    padding: 2px 5px;
    border: 1px solid rgba(239,231,214,.18);
    line-height: 1;
  }
  .filmstrip .frame.hero{
    outline: 1px solid var(--accent);
    box-shadow: 0 0 0 1px rgba(217,85,59,.18), 0 6px 28px rgba(0,0,0,.5);
    z-index: 1;
  }
  .filmstrip .frame.hero .tc{
    color: var(--accent);
    border-color: var(--accent);
  }
  
  .video-chrome{
    width: min(88vw, 1280px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "JetBrains Mono", monospace;
    transition: opacity .9s ease;
  }
  .video-scrubber{
    position: relative;
    height: 14px;
  }
  .video-scrubber-track{
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: rgba(239,231,214,.22);
    transform: translateY(-50%);
  }
  .video-scrubber-tick{
    position: absolute; top: 50%;
    width: 1px; height: 10px;
    background: rgba(239,231,214,.35);
    transform: translate(-50%, -50%);
  }
  .video-scrubber-tick.first,
  .video-scrubber-tick.last{
    height: 14px;
    background: var(--accent);
  }
  .video-scrubber-label{
    position: absolute; top: 100%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--dim);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .video-meta{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dim);
    margin-top: 18px;
  }
  .video-meta span{ white-space: nowrap; }
  .video-meta strong{
    color: var(--ink);
    font-weight: 400;
    margin-left: 0.4em;
  }
  .video-meta .sep{
    color: var(--faint);
    margin: 0 0.2em;
  }
  
  @media (max-width: 720px){
    .filmstrip .frame.hidden-mobile{ display: none; }
    .video-scrubber-tick.hidden-mobile{ display: none; }
    .video-scrubber-label.hidden-mobile{ display: none; }
    .filmstrip.played .frame.hero{
      transform: scale(2.4);
    }
    .video-meta{ flex-wrap: wrap; gap: 6px 14px; font-size: 9px; letter-spacing: 0.16em; }
  }
  
  .te-prompt{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding: 8vw;
  }
  .te-prompt-text{
    font-family:"Fraunces",serif;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--ink);
    max-width: 80%;
    text-align: center;
    letter-spacing: -0.01em;
  }
  .te-prompt .quotes{ color: var(--faint); margin: 0 0.18em; }
  .te-cursor{
    display: inline-block;
    width: 0.5em;
    margin-left: 0.1em;
    color: var(--accent);
    animation: cursor-blink 1.05s steps(1) infinite;
  }
  @keyframes cursor-blink { 50% { opacity: 0; } }
  
  .te-tokens{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding: 4vw;
  }
  .te-tokens-row{
    display:flex; gap: 8px;
    flex-wrap: wrap; justify-content:center;
    max-width: 90%;
  }
  .te-token{
    display:flex; flex-direction:column; align-items:center;
    padding: 16px 12px 10px 12px;
    border: 1px solid rgba(239,231,214,.18);
    background: rgba(239,231,214,.025);
    min-width: 48px;
    animation: te-fade-in 0.28s ease-out backwards;
  }
  .te-token:nth-child(even){ background: rgba(239,231,214,.06); }
  .te-token.special{
    background: rgba(217,85,59,.08);
    border-color: rgba(217,85,59,.55);
  }
  .te-token.special .te-token-text{ color: var(--accent); }
  .te-token-text{
    font-family:"JetBrains Mono",monospace;
    font-size: clamp(14px, 1.3vw, 17px);
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
  }
  .te-token-text .sp,
  .te-col-label .sp{
    color: var(--accent);
    opacity: .8;
    font-size: 1em;
    margin-right: 2px;
  }
  .te-token-id{
    margin-top: 6px;
    font-family:"JetBrains Mono",monospace;
    font-size: 10px;
    color: var(--dim);
    letter-spacing: .08em;
  }
  @keyframes te-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  
  .te-strips{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding: 4vw 4vw 6vw 4vw;
    gap: 10px;
  }
  .te-strips-row{
    display:flex; gap: 10px;
    align-items: flex-start;
  }
  .te-col{
    width: clamp(22px, 2.5vw, 34px);
    flex: 0 0 auto;
    display:flex; flex-direction:column; align-items:center;
    gap: 6px;
    animation: te-fade-in 0.28s ease-out backwards;
  }
  .te-strip{
    width: clamp(22px, 2.5vw, 34px);
    height: clamp(260px, 42vh, 380px);
    display: flex; flex-direction: column;
    outline: 1px solid rgba(239,231,214,.12);
    position: relative;
  }
  .te-strip .cell{
    flex: 1 1 auto;
    width: 100%;
  }
  .te-col-label{
    font-family:"JetBrains Mono",monospace;
    font-size: 11px;
    color: var(--dim);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    overflow: visible;
    text-align: center;
  }
  .te-col:nth-child(even) .te-col-label{
    margin-top: 18px;
  }
  .te-strips-caption{
    margin-top: 14px;
    font-family:"JetBrains Mono",monospace;
    font-size: 10px;
    color: var(--dim);
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .te-pos-plus{
    font-family:"JetBrains Mono",monospace;
    font-size: 18px; line-height: 1;
    color: var(--accent);
    margin: 6px 0 2px 0;
  }
  .te-pos-row{
    display:flex; gap:10px;
    align-items: flex-start;
  }
  .te-pos-strip{
    width: clamp(22px, 2.5vw, 34px);
    height: 48px;
    outline: 1px solid rgba(239,231,214,.12);
  }
  .stage.te-clip .te-strip{ height: clamp(200px, 32vh, 280px); }
  
  .te-pool{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding: 2vw 4vw;
    gap: 10px;
  }
  .te-pool-row{ display:flex; gap: 10px; align-items: flex-start; }
  .te-pool .te-col{
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .te-pool .te-col.dim{
    opacity: 0.12;
    filter: saturate(0.25);
  }
  .te-pool .te-col.pick{
    transform: translateY(-4px);
  }
  .te-pool .te-col.pick .te-strip{
    outline: 2px solid var(--accent);
    box-shadow: 0 0 22px rgba(217,85,59,.55);
  }
  .te-pool .te-col.pick .te-col-label{
    color: var(--accent);
    font-weight: 600;
  }
  .te-pool-arrow{
    font-family:"JetBrains Mono",monospace;
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
    margin: 4px 0;
  }
  .te-pool-output{
    display:flex; flex-direction:column; align-items:center;
    gap: 6px;
  }
  .te-pool-output .te-strip{
    width: clamp(30px, 3.2vw, 46px);
    height: clamp(80px, 12vh, 110px);
    outline: 1px solid var(--accent);
    box-shadow: 0 0 14px rgba(217,85,59,.35);
    display:flex; flex-direction:column;
  }
  .te-pool-output .te-strip .cell{ flex:1 1 auto; width:100%; }
  .te-pool-output-label{
    font-family:"JetBrains Mono",monospace;
    font-size: 10px;
    color: var(--accent);
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .te-pool-caption{
    margin-top: 10px;
    font-family:"JetBrains Mono",monospace;
    font-size: 10px;
    color: var(--dim);
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  
  .te-attention-layer{
    position:absolute; inset:0;
    pointer-events:none;
  }
  .te-arcs{
    position:absolute; inset:0;
    width:100%; height:100%;
    overflow: visible;
  }
  .te-arcs .arc{
    fill:none;
    stroke: var(--accent);
    stroke-linecap: round;
    mix-blend-mode: screen;
  }
  .te-arcs .arc.abstract{
    filter: blur(1.3px);
    animation: te-arc-pulse-big 2.4s ease-in-out infinite;
  }
  @keyframes te-arc-pulse { 0%,100%{opacity:.22} 50%{opacity:.78} }
  @keyframes te-arc-pulse-big { 0%,100%{opacity:.18} 50%{opacity:.85} }
  .te-block-counter{
    position: absolute;
    top: 180px;              
    left: var(--pad);
    font-family:"JetBrains Mono",monospace;
    text-transform: uppercase;
    color: var(--dim);
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: .7em;
    line-height: 1.1;
  }
  .te-block-counter .te-block-label{
    font-size: clamp(9px, .72vw, 10px);
    letter-spacing: .22em;
    color: var(--faint);
  }
  .te-block-counter .te-block-val{
    font-size: clamp(12px, 1.0vw, 14px);
    letter-spacing: .10em;
  }
  .te-block-counter--stacked{
    top: 305px;
  }
  .te-block-counter strong{
    color: var(--accent);
    font-weight: 400;
    margin: 0 .2em;
  }
  .te-heatmap{
    position: absolute;
    top: 180px;
    left: var(--pad);
    width: 90px; height: 90px;
    display: grid;
    gap: 1px;
    padding: 7px 7px 18px 7px;
    border: 1px solid rgba(239,231,214,.18);
    background: rgba(10,9,6,.72);
  }
  .te-heatmap .cell{
    background: var(--accent);
  }
  .te-heatmap-label{
    position: absolute;
    bottom: 4px; left: 50%; transform: translateX(-50%);
    font-family:"JetBrains Mono",monospace;
    font-size: 8px;
    color: var(--dim);
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  
  .overlay{
    position:absolute;inset:0;z-index:10;
    padding: var(--pad);
    display:flex; flex-direction:column; justify-content:space-between;
    gap: var(--gap);
    pointer-events: auto;
    text-shadow: 0 0 6px rgba(5,6,10,.85), 0 1px 2px rgba(5,6,10,.6);
  }
  .row{ display:flex; justify-content:space-between; gap: var(--gap); width:100%; }
  .row.top{ align-items:flex-start; }
  .row.bot{ align-items:flex-end; }
  .row > *{ min-width:0; max-width:100%; }
  @media (max-width: 720px), (max-height: 520px) {
    .row{ flex-direction:column; gap: 12px; }
    .row.bot{ align-items:flex-start; }
    .align-end{ align-self:flex-start !important; text-align:left !important; }
    .modelchip{ align-items:flex-start !important }
    .readout{ text-align:left !important }
    .readout .row-line{ justify-content:flex-start !important }
    .readout strong{ text-align:left !important }
    .readout .links{ justify-content:flex-start !important }
    
    
    .te-heatmap{
      display: grid;
      top: 210px;
      width: 56px; height: 56px;
      padding: 4px;
      border-width: 1px;
    }
    .te-block-counter--stacked{
      top: 284px;
    }
    .te-heatmap-label{
      display: none;
    }
    
    .te-strips, .te-pool{ padding: 2vw 3vw 3vw 3vw; }
    .te-strips-row, .te-pool-row{ gap: 4px; }
    .te-strip{
      width: clamp(14px, 4.5vw, 22px);
      height: clamp(180px, 28vh, 240px);
    }
    .te-col{ width: clamp(14px, 4.5vw, 22px); }
    .stage.te-clip .te-strip{ height: clamp(140px, 22vh, 190px); }
    
    .te-col-label{
      max-width: clamp(28px, 9vw, 60px);
      font-size: 9px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .te-strips-caption,
    .te-pool-caption{
      font-size: 9px;
      letter-spacing: .12em;
      text-align: center;
      max-width: 94%;
      line-height: 1.4;
    }
    .te-block-counter{
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
    .te-block-counter .te-block-label{ font-size: 9px; }
    .te-block-counter .te-block-val{   font-size: 11px; }
    
    .te-pool-output .te-strip{
      width: clamp(22px, 6vw, 36px);
      height: clamp(60px, 10vh, 90px);
    }
    .te-pool-arrow{ font-size: 16px; margin: 2px 0; }
    
    .te-prompt-text{ font-size: clamp(20px, 6vw, 32px); }
    
    .te-pos-strip{ width: clamp(14px, 4.5vw, 22px); height: 28px; }
    .te-pos-row{ gap: 4px; }
    .te-pos-plus{ font-size: 14px; margin: 2px 0; }
  }
  .brand{
    font-family:"Fraunces",serif; font-weight:300;
    font-size: clamp(30px, min(6.2vw, 9vh), 84px);
    letter-spacing:-0.03em; line-height:.95;
    color:var(--ink); text-shadow: 0 2px 34px rgba(0,0,0,.6);
  }
  .brand em{
    font-style: normal;
    font-weight: 300;
    color: var(--accent);
    margin-left: 0.18em;   
  }
  .brand .sub{
    display:block; font-family:"JetBrains Mono",monospace; font-weight:400;
    font-size: clamp(9px, 1vw, 11px);
    letter-spacing:.28em; text-transform:uppercase; color:var(--dim);
    margin-top: clamp(8px, 1.2vw, 14px); line-height:1.5;
  }
  .modelchip{
    position: relative;
    display:inline-flex;flex-direction:column;align-items:flex-end;gap:7px;
    font-size: clamp(9px, .9vw, 10.5px);
    letter-spacing:.28em;text-transform:uppercase;color:var(--dim);
    pointer-events:auto; max-width:100%;
  }
  .align-end{ align-self:flex-end; text-align:right; }
  .modelchip .box{
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 14px;
    border:1px solid rgba(239,231,214,.22);
    background: rgba(10,9,6,.72);   
    color:var(--ink); letter-spacing:.18em;
    font-size: clamp(9.5px, .9vw, 11px);
    font-family:"JetBrains Mono",monospace;
    cursor:pointer; transition: border-color .2s, background .2s, transform .2s;
    text-align:left; max-width:100%;
  }
  .modelchip .box:hover{ border-color: var(--accent); background: rgba(217,85,59,.12); transform: translateY(-1px); }
  .modelchip .box:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,85,59,.25); }
  .modelchip .box .name{ flex:1; min-width:0 }
  .modelchip .dot{
    flex-shrink:0; width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 10px var(--accent); animation: chippulse 2.4s ease-in-out infinite;
  }
  .modelchip .caret{ flex-shrink:0; opacity:.55; font-size:10px; line-height:1; transition: transform .2s; }
  .modelchip .box[aria-expanded="true"] .caret{ transform: rotate(180deg); opacity:.9; }
  .modelchip .hint{ line-height:1.5; max-width:34ch }
  .modelchip-spec{
    margin-top: 8px;
    align-self: flex-end;      
    font: inherit;
    color: var(--ink);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-size: clamp(9.5px, .9vw, 10.5px);
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
    pointer-events: auto;
  }
  .modelchip-spec:hover,
  .modelchip-spec:focus-visible{
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
  }
  .modelchip-spec .arrow{ display:inline-block; margin-left:4px; transform:translateY(-1px) }
  @media (max-width: 720px){
    .modelchip-spec{ align-self: flex-start; }
  }
  
  .model-dropdown{
    position:absolute;
    right: 0;
    min-width: 100%;
    max-width: 420px;
    z-index: 40;
    background: #0d0b08;
    border: 1px solid rgba(239,231,214,.22);
    box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(217,85,59,.06);
    padding: 0;
    display: none;
    flex-direction: column;
    pointer-events: auto;
    animation: ddIn .14s ease-out;
  }
  .model-dropdown.open{ display:flex; }
  @media (max-width: 720px){
    .model-dropdown{ right: auto; left: 0; }
  }
  @keyframes ddIn { from{opacity:0} to{opacity:1} }
  
  .model-dropdown .mi{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(9.5px, .9vw, 11px);
    letter-spacing: .18em;
    color: var(--ink);
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none; 
    transition: background .15s, border-color .15s, color .15s;
  }
  .model-dropdown .mi .mi-dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(239,231,214,.25);
    flex-shrink: 0;
  }
  .model-dropdown .mi.current .mi-dot{
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
  }
  .model-dropdown .mi .mi-name{
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  .model-dropdown .mi:hover{
    background: rgba(217,85,59,.08);
    border-left-color: var(--accent);
  }
  .model-dropdown .mi.current{
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(217,85,59,.04);
  }
  .model-dropdown .mi:focus-visible{
    outline: none;
    background: rgba(217,85,59,.12);
    border-left-color: var(--accent);
  }
  @keyframes chippulse { 0%,100%{opacity:.55} 50%{opacity:1} }
  @keyframes pulse { 0%,100%{opacity:.4;transform:scale(.9)} 50%{opacity:1;transform:scale(1.2)} }
  .fade{ transition: opacity .25s ease; }
  .fade.swapping{ opacity:0 }
  .passblock{ display:flex; align-items:flex-end; gap: clamp(12px, 1.5vw, 22px); color:var(--ink); min-width:0 }
  .passnum{
    font-family:"Fraunces",serif; font-weight:300;
    font-size: clamp(42px, 8vmin, 92px);
    line-height:.85; letter-spacing:-0.04em;
    position:relative; flex-shrink:0;
  }
  .passnum::after{
    content:""; position:absolute; left:0; right:18%;
    bottom:-6px; height:1px; background:var(--ink); opacity:.45;
  }
  .passmeta{
    padding-bottom: clamp(4px, 1vw, 12px);
    font-size: clamp(9.5px, .95vw, 11px);
    letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
    line-height:1.55; min-width:0;
  }
  .passmeta .eyebrow{ margin-bottom:6px }
  .passmeta strong{ display:block; color:var(--ink); font-weight:500; letter-spacing:.2em; }
  .readout{
    font-size: clamp(9.5px, .9vw, 10.5px);
    letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
    text-align:right; line-height:1.9; min-width:0;
  }
  .readout .row-line{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
  .readout strong{ color:var(--ink); font-weight:500; letter-spacing:.2em; text-align:right; }
  .readout .links{
    margin-top:12px; padding-top:10px;
    border-top:1px solid var(--rule);
    display:flex; justify-content:flex-end; gap: clamp(10px, 1.4vw, 20px);
    flex-wrap:wrap; pointer-events:auto;
  }
  .readout .links a, .readout .links button{
    font:inherit; color:var(--ink); background:none; border:none; padding:0; cursor:pointer;
    letter-spacing:.26em; text-transform:uppercase;
    font-size: clamp(9.5px, .9vw, 10.5px);
    border-bottom:1px solid transparent; transition: color .2s, border-color .2s;
    text-decoration:none; white-space:nowrap;
  }
  .readout .links a:hover, .readout .links button:hover,
  .readout .links a:focus-visible, .readout .links button:focus-visible{
    color:var(--accent); border-color:var(--accent); outline:none;
  }
  .readout .links .arrow{ display:inline-block; margin-left:4px; transform:translateY(-1px) }
  .rail{
    position:absolute; left:0; right:0; bottom:0; height:1px;
    background: rgba(239,231,214,.14);
    z-index:11; pointer-events:none;
    opacity: 1;
    transition: opacity 360ms ease-out;
  }
  .rail.completed{ opacity: 0; }
  .rail .fill{
    position:absolute; left:0; top:-0.5px; height:2px;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
    width:0; transition: width linear;
  }
  .pips{ position:absolute; right: var(--pad); bottom: 10px; z-index:12; display:flex; gap:6px; pointer-events:auto; }
  .pip{
    width:18px; height:2px;
    background: rgba(239,231,214,.18);
    border:none; padding:0; margin:0;
    cursor:pointer; position:relative;
    transition: background .2s;
  }
  .pip::before{
    content:"";
    position:absolute;
    left:-3px; right:-3px; top:-10px; bottom:-10px;
  }
  .pip:hover{ background: rgba(239,231,214,.55) }
  .pip:focus-visible{ outline: 1px solid var(--accent); outline-offset: 6px }
  .pip.done{ background: rgba(239,231,214,.55); }
  .pip.active{ background: var(--accent); box-shadow: 0 0 6px var(--accent); }
  .tick{position:absolute;width:14px;height:14px;z-index:9;opacity:.45;pointer-events:none}
  .tick::before,.tick::after{content:"";position:absolute;background:var(--ink)}
  .tick::before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}
  .tick::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)}
  .tick.tl{top:14px;left:14px}.tick.tr{top:14px;right:14px}
  .tick.bl{bottom:14px;left:14px}.tick.br{bottom:14px;right:14px}
  @media (max-width: 480px), (max-height: 480px){ .tick{ display:none } }
  
  .modal-backdrop{
    position:fixed;inset:0;z-index:50;
    background: rgba(5,4,8,.7);
    backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);
    display:none; align-items:center; justify-content:center;
    padding: clamp(12px, 3vw, 48px); animation: fadeIn .22s ease-out;
  }
  .modal-backdrop.open{ display:flex; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  .modal{
    position:relative; width: min(640px, 100%);
    max-height: min(86vh, 820px); overflow-y:auto;
    background: #0d0b08; border: 1px solid rgba(239,231,214,.18);
    color: var(--ink); padding: clamp(24px, 3.6vw, 44px);
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(217,85,59,.06);
    animation: popIn .28s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes popIn { from{opacity:0;transform:translateY(10px) scale(.98)} to{opacity:1;transform:none} }
  .modal::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: linear-gradient(90deg, var(--accent), transparent 60%);
  }
  .modal .close{
    position:absolute; top:12px; right:12px;
    width:34px; height:34px; border:1px solid rgba(239,231,214,.2);
    background:transparent; color:var(--ink); cursor:pointer;
    font-size:0;
    transition: border-color .2s, color .2s, transform .2s;
  }
  .modal .close::before,
  .modal .close::after{
    content:""; position:absolute; top:50%; left:50%;
    width:14px; height:1.5px; background:currentColor;
  }
  .modal .close::before{ transform: translate(-50%, -50%) rotate(45deg); }
  .modal .close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .modal .close:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(90deg) }
  .modal .close:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,85,59,.25) }
  .modal .eyebrow{
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--accent); margin-bottom:12px; padding-right:40px;
  }
  .modal h2{
    font-family:"Fraunces",serif; font-weight:300;
    font-size: clamp(26px, 3.6vw, 42px);
    letter-spacing:-0.02em; line-height:1; margin-bottom:4px;
  }
  .modal h2 em{ font-style:italic; color:var(--accent); font-weight:300 }
  .modal .tagline{
    font-size: clamp(10.5px, 1vw, 12px); letter-spacing:.16em; text-transform:uppercase;
    color:var(--dim); margin-bottom:22px; padding-bottom:18px;
    border-bottom:1px solid var(--rule);
  }
  .modal .tagline .m-subtitle-client{
    margin-top: 18px;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(11px, .95vw, 13px);
    line-height: 1.4;
  }
  .modal .tagline .m-subtitle-client a{
    color: inherit;
    text-decoration: none;
    transition: color .15s, border-color .15s;
  }
  .modal .tagline .m-subtitle-client a:hover,
  .modal .tagline .m-subtitle-client a:focus-visible{
    color: var(--accent);
    outline: none;
  }
  .m-subtitle-client .msc-label{
    color: var(--accent);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 0.85em;
  }
  .m-subtitle-client .msc-name{
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0;
  }
  .m-subtitle-client .msc-name a{
    border-bottom: 1px dotted rgba(239,231,214,.35);
  }
  .m-subtitle-client .msc-name a:hover{
    border-bottom: 1px solid var(--accent);
  }
  .m-subtitle-client .msc-tasks{
    color: var(--dim);
    letter-spacing: .02em;
  }
  .m-subtitle-client .msc-tasks::before{
    content: "·";
    color: var(--faint);
    margin-right: 8px;
  }
  .modal .prose{
    font-family:"Fraunces",serif; font-weight:300;
    font-size: clamp(14px, 1.1vw, 15.5px); line-height:1.65; color:var(--ink);
  }
  .modal .prose p + p{ margin-top: 12px; }
  .modal .prose strong{ color:var(--accent); font-weight:500; }
  .modal .prose h3{
    margin: 26px 0 6px 0;
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(10.5px, 1vw, 12px);
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .modal .prose h3:first-child{ margin-top: 0; }
  .modal .prose a,
  .modal .address a{
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
  }
  .modal .prose a:hover, .modal .prose a:focus-visible,
  .modal .address a:hover, .modal .address a:focus-visible{
    color: #eb6447;
  }
  .modal dl.spec{
    margin-top:22px; padding-top:18px; border-top:1px solid var(--rule);
    display:grid; grid-template-columns: 40% 1fr; gap:10px 18px;
  }
  .modal dl.spec dt{ color:var(--dim); text-transform:uppercase; letter-spacing:.22em; font-size:10px; padding-top:3px }
  .modal dl.spec dd{ color:var(--ink); font-family:"JetBrains Mono",monospace; font-size:12px; line-height:1.45; word-break:break-word }
  .modal dl.spec dd em{ color:var(--faint); font-style:normal }
  .modal .actions{
    margin-top:26px; padding-top:18px; border-top:1px solid var(--rule);
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .modal .actions a{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; border:1px solid rgba(239,231,214,.22);
    color:var(--ink); text-decoration:none;
    font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
    transition: all .2s;
  }
  .modal .actions a:hover{ border-color: var(--accent); color:var(--accent); background: rgba(217,85,59,.08); }
  .modal .actions a.primary{ background: var(--accent); color:#1a0a06; border-color: var(--accent); }
  .modal .actions a.primary:hover{ background: #eb6447; color:#1a0a06; }
  .modal .address{
    font-family:"JetBrains Mono",monospace;
    font-size: clamp(11px, 1vw, 12.5px); line-height:1.7; color:var(--ink);
    padding:14px 16px; margin-top:18px;
    border-left:2px solid var(--accent);
    background:rgba(217,85,59,.04);
  }
  .modal .address span{ color:var(--dim); display:inline-block; min-width:110px; }
  @media (max-width: 560px){
    .modal dl.spec{ grid-template-columns: 1fr; gap: 4px 0 }
    .modal dl.spec dt{ padding-top:10px }
    .modal .address span{ min-width:0; margin-right:8px }
  }
  .boot{
    position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
    background:#05060a; color:var(--dim);
    font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
    transition: opacity .4s ease; opacity:1;
  }
  .boot.hide{ opacity:0; pointer-events:none }
  .boot .dot{
    display:inline-block; width:6px;height:6px;border-radius:50%;
    background:var(--accent); box-shadow:0 0 10px var(--accent);
    margin-right:12px;
  }
  .boot:not(.hide) .dot{ animation: pulse 1.2s ease-in-out infinite; }
  .boot .err{ color: var(--accent); max-width:60ch; line-height:1.6; font-size:11px; letter-spacing:.08em; text-transform:none; padding:0 24px; text-align:center }
  
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
.noscript-note{position:fixed;inset:auto 0 0 0;padding:24px;background:#0a0906;color:#efe7d6;font-family:ui-monospace,monospace;font-size:13px;line-height:1.6;text-align:center;border-top:1px solid rgba(239,231,214,.18)}
.noscript-note a{color:#d9553b}