/* DAS-FELD-ORIGINAL-STYLESHEET — restored from the prototype artifact
   https://claude.ai/code/artifact/54cc15d3-ca3e-4f2f-8cc8-d7cfd591dd68
   The reconstruction it replaces carried 3,765 of the original's 14,631
   characters. Token blocks stay on :root because field.js resolves colours from
   documentElement; everything else is scoped to .field-page. */


:root{
    --paper:#EDF1EC; --panel:#F5F8F3; --panel-2:#E7ECE5;
    --ink:#13201A; --mute:#5F6F67; --line:#7C978D;
    --accent:#1C6B47; --accent-bright:#2E9E6B;
    --commerce:#9A6B12; --commerce-bright:#C08A24; --commerce-soft:rgba(192,138,36,.12);
    --brick:#9E4228;
    --hair:rgba(19,32,26,.13); --hair-strong:rgba(19,32,26,.22);
    --glow:rgba(46,158,107,.28); --glow-c:rgba(192,138,36,.26);
    --disp:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
    --body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  }

@media (prefers-color-scheme:dark){
:root{
      --paper:#0B140F; --panel:#111C16; --panel-2:#0E1712;
      --ink:#E7EEE8; --mute:#8DA097; --line:#5C776D;
      --accent:#3FBE84; --accent-bright:#57D89B;
      --commerce:#D39A3C; --commerce-bright:#E7B65A; --commerce-soft:rgba(211,154,60,.14);
      --brick:#D8694A;
      --hair:rgba(231,238,232,.13); --hair-strong:rgba(231,238,232,.22);
      --glow:rgba(63,190,132,.30); --glow-c:rgba(231,182,90,.24);
    }

  }

:root[data-theme="light"]{
    --paper:#EDF1EC; --panel:#F5F8F3; --panel-2:#E7ECE5; --ink:#13201A; --mute:#5F6F67; --line:#7C978D;
    --accent:#1C6B47; --accent-bright:#2E9E6B; --commerce:#9A6B12; --commerce-bright:#C08A24; --commerce-soft:rgba(192,138,36,.12); --brick:#9E4228;
    --hair:rgba(19,32,26,.13); --hair-strong:rgba(19,32,26,.22); --glow:rgba(46,158,107,.28); --glow-c:rgba(192,138,36,.26);
  }

:root[data-theme="dark"]{
    --paper:#0B140F; --panel:#111C16; --panel-2:#0E1712; --ink:#E7EEE8; --mute:#8DA097; --line:#5C776D;
    --accent:#3FBE84; --accent-bright:#57D89B; --commerce:#D39A3C; --commerce-bright:#E7B65A; --commerce-soft:rgba(211,154,60,.14); --brick:#D8694A;
    --hair:rgba(231,238,232,.13); --hair-strong:rgba(231,238,232,.22); --glow:rgba(63,190,132,.30); --glow-c:rgba(231,182,90,.24);
  }

.field-page .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.field-page .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.field-page .eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

.field-page .hero{padding:clamp(30px,5vw,54px) 0 22px;max-width:44ch}

.field-page .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.3vw,3.15rem);line-height:1.06;
    letter-spacing:-.015em;text-wrap:balance;margin:.5rem 0 0}

.field-page .hero h1 em{font-style:italic;color:var(--accent)}

.field-page .hero p{color:var(--mute);font-size:1.04rem;max-width:54ch;margin:1.05rem 0 0}

.field-page /* ---- wayfinding spine ---- */
  .spine{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    margin-top:20px;padding:11px 14px;border:1px solid var(--hair-strong);border-radius:4px;background:var(--panel)}

.field-page .crumbs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem}

.field-page .crumb{background:transparent;border:0;color:var(--mute);cursor:pointer;padding:4px 6px;border-radius:2px;
    font-family:inherit;font-size:inherit;letter-spacing:.02em}

.field-page .crumb:hover{color:var(--ink)}

.field-page .crumb.here{color:var(--ink);font-weight:600}

.field-page .crumb.here[data-world="commerce"]{color:var(--commerce-bright)}

.field-page .crumb:disabled{cursor:default}

.field-page .sep{color:var(--line);opacity:.6;padding:0 1px}

.field-page .rail{display:flex;align-items:center;gap:0}

.field-page .tick{display:flex;align-items:center;gap:7px}

.field-page .tick .d{width:9px;height:9px;border:1.5px solid var(--line);border-radius:50%;background:transparent}

.field-page .tick.on .d{background:var(--accent);border-color:var(--accent)}

.field-page .tick.on[data-world="commerce"] .d{background:var(--commerce-bright);border-color:var(--commerce-bright)}

.field-page .tick .t{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.field-page .tick.on .t{color:var(--ink)}

.field-page .tick .link{width:22px;height:1.5px;background:var(--line);opacity:.5;margin:0 6px}

@media (max-width:680px){
.field-page .tick .t{display:none}

.field-page .tick .link{width:14px}
}

.field-page /* ---- station ---- */
  .station{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:16px;
    border:1px solid var(--hair-strong);border-radius:4px;background:var(--panel);overflow:hidden}

@media (max-width:900px){
.field-page .station{grid-template-columns:1fr}
}

.field-page .stage{position:relative;min-height:520px;border-right:1px solid var(--hair)}

@media (max-width:900px){
.field-page .stage{border-right:0;border-bottom:1px solid var(--hair);min-height:430px}
}

.field-page canvas#field{display:block;width:100%;height:100%;position:absolute;inset:0;cursor:crosshair}

.field-page .stage-label{position:absolute;left:16px;top:14px;z-index:3;pointer-events:none}

.field-page .stage-hint{position:absolute;left:16px;bottom:14px;z-index:3;font-family:var(--mono);font-size:.68rem;
    color:var(--mute);letter-spacing:.04em;pointer-events:none}

.field-page .tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-140%);background:var(--ink);
    color:var(--paper);font-family:var(--mono);font-size:.7rem;padding:5px 8px;border-radius:2px;white-space:nowrap;opacity:0;transition:opacity .12s}

.field-page .tip.on{opacity:1}

.field-page .tip b{color:var(--accent-bright)}

.field-page .backfield{position:absolute;right:14px;bottom:14px;z-index:4;font-family:var(--mono);font-size:.66rem;
    letter-spacing:.06em;color:var(--mute);background:var(--panel);border:1px solid var(--hair-strong);
    border-radius:2px;padding:6px 10px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .18s}

.field-page .backfield.show{opacity:1;pointer-events:auto}

.field-page .backfield:hover{color:var(--ink);border-color:var(--line)}

.field-page /* ---- reading panel ---- */
  .panel{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:18px}

.field-page .panel .kicker{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

.field-page .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    border-radius:2px;padding:2px 6px;border:1px solid var(--accent);color:var(--accent)}

.field-page .tag.c{border-color:var(--commerce-bright);color:var(--commerce-bright)}

.field-page .panel h2{font-family:var(--disp) !important;font-weight:700 !important;font-size:1.62rem !important;letter-spacing:-.02em;margin:.35rem 0 0;line-height:1.05}

.field-page .panel .lede{color:var(--mute);font-size:.9rem;margin:.5rem 0 0;max-width:46ch}

.field-page .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:3px;overflow:hidden}

.field-page .stat{background:var(--panel);padding:12px 13px 11px;text-decoration:none;display:block}

.field-page .stat:hover{background:var(--panel-2)}

.field-page .stat .lab{font-family:var(--mono);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.field-page .stat .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:500;letter-spacing:-.02em;margin-top:5px;line-height:1}

.field-page .stat .sub{font-family:var(--mono);font-size:.61rem;color:var(--accent);margin-top:5px;display:flex;gap:5px;align-items:center}

.field-page .stat.c .sub{color:var(--commerce-bright)}

.field-page .stat .sub .q{color:var(--mute)}

.field-page .stat .go{opacity:.55}

.field-page .stat:hover .go{opacity:1}

.field-page .stat:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-2px}

.field-page .geo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}

@media (max-width:520px){
.field-page .geo{grid-template-columns:1fr}
}

.field-page .geo figure{margin:0;text-align:center}

.field-page .geo figcaption{font-family:var(--mono);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:8px}

.field-page svg.sig, .field-page svg.ring{width:100%;height:auto;overflow:visible}

.field-page .descend{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    border:1px solid var(--hair-strong);border-radius:3px;background:var(--panel-2);color:inherit;
    padding:13px 15px;cursor:pointer;text-align:left;font-family:inherit}

.field-page .descend:hover{border-color:var(--accent)}

.field-page .descend.c:hover{border-color:var(--commerce-bright)}

.field-page .descend:disabled{cursor:default;opacity:.6}

.field-page .descend:disabled:hover{border-color:var(--hair-strong)}

.field-page .descend .dl{display:flex;flex-direction:column;gap:2px}

.field-page .descend .dl b{font-family:var(--disp);font-weight:600;font-size:.98rem}

.field-page .descend .dl span{font-family:var(--mono);font-size:.68rem;color:var(--mute)}

.field-page .descend .arw{font-family:var(--mono);color:var(--accent);font-size:1.1rem}

.field-page .descend.c .arw{color:var(--commerce-bright)}

.field-page .xref{border-top:1px solid var(--hair);padding-top:15px}

.field-page .xref h3{font-family:var(--mono) !important;font-size:.63rem !important;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin:0 0 4px}

.field-page .xref .why{font-size:.8rem;color:var(--mute);margin:0 0 10px}

.field-page .xref ul{list-style:none;margin:0;padding:0}

.field-page .xrow{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:0;border-top:1px solid var(--hair);
    padding:9px 2px;cursor:pointer;text-align:left;color:inherit}

.field-page .xrow:first-child{border-top:0}

.field-page .xrow:hover .xn{color:var(--accent)}

.field-page .xrow:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

.field-page .xbar{flex:0 0 58px;height:4px;background:var(--hair);border-radius:3px;overflow:hidden}

.field-page .xbar i{display:block;height:100%;background:var(--accent);border-radius:3px}

.field-page .xn{font-size:.89rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.field-page .xmeta{font-family:var(--mono);font-size:.65rem;color:var(--mute);white-space:nowrap}

.field-page /* firewall block: company's own research vs independent */
  .firewall{border:1px solid var(--commerce-bright);border-radius:3px;overflow:hidden;background:var(--commerce-soft)}

.field-page .firewall .fh{font-family:var(--mono);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;color:var(--commerce-bright);
    padding:9px 12px;border-bottom:1px solid var(--commerce-bright)}

.field-page .firewall .fb{padding:12px}

.field-page .fbar{height:14px;border-radius:2px;overflow:hidden;display:flex;border:1px solid var(--hair)}

.field-page .fbar .own{background:var(--commerce);}

.field-page .fbar .ind{background:var(--accent);}

.field-page .fkey{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:.66rem;color:var(--mute)}

.field-page .fkey b{color:var(--ink);font-weight:500}

.field-page .fnote{font-size:.79rem;color:var(--mute);margin:10px 0 0}

.field-page .offer{border:1px solid var(--commerce-bright);border-radius:3px;background:var(--panel);overflow:hidden}

.field-page .offer .oh{padding:11px 13px;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:8px}

.field-page .offer .oh .tag.c{margin:0}

.field-page .offer .ob{padding:13px}

.field-page .offer .disc{font-size:.8rem;color:var(--ink);background:var(--commerce-soft);border-left:2px solid var(--commerce-bright);
    padding:9px 11px;border-radius:2px;margin:0 0 12px}

.field-page .offer .cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:3px;
    font-family:var(--disp);font-weight:600;font-size:.95rem;border:1px solid var(--commerce-bright);cursor:not-allowed;
    background:transparent;color:var(--commerce-bright);opacity:.85}

.field-page .offer .cta small{font-family:var(--mono);font-weight:400;font-size:.66rem;opacity:.8}

.field-page .offer .flow{font-family:var(--mono);font-size:.66rem;color:var(--mute);margin:11px 0 0;line-height:1.7}

.field-page .offer .flow b{color:var(--commerce-bright)}

.field-page .queued{border:1px dashed var(--hair-strong);border-radius:3px;padding:16px;font-size:.86rem;color:var(--mute)}

.field-page .queued b{color:var(--ink)}

.field-page .queued button{margin-top:10px;font-family:var(--mono);font-size:.7rem;background:transparent;border:1px solid var(--hair-strong);
    color:var(--accent);border-radius:2px;padding:7px 10px;cursor:pointer}

.field-page .queued button:hover{border-color:var(--accent)}

.field-page /* ---- journey explainer ---- */
  .lang{margin-top:46px}

.field-page .lang .head{max-width:46ch}

.field-page .lang h2{font-family:var(--serif) !important;font-weight:400 !important;font-size:clamp(1.5rem,2.6vw,2rem) !important;letter-spacing:-.01em;line-height:1.1;margin:.4rem 0 0;text-wrap:balance}

.field-page .layers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-strong);border:1px solid var(--hair-strong);border-radius:4px;overflow:hidden;margin-top:22px}

@media (max-width:820px){
.field-page .layers{grid-template-columns:1fr 1fr}
}

@media (max-width:520px){
.field-page .layers{grid-template-columns:1fr}
}

.field-page .layer{background:var(--paper);padding:20px 18px 22px;display:flex;flex-direction:column;gap:9px;min-height:184px}

.field-page .layer .lv{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--accent)}

.field-page .layer.c .lv{color:var(--commerce-bright)}

.field-page .layer h3{font-family:var(--disp) !important;font-weight:700 !important;font-size:1.08rem !important;letter-spacing:-.01em;margin:0}

.field-page .layer p{color:var(--mute);font-size:.85rem;margin:0}

.field-page .lost{margin-top:30px;border-top:1px solid var(--hair-strong);padding-top:24px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}

@media (max-width:820px){
.field-page .lost{grid-template-columns:1fr 1fr}
}

@media (max-width:520px){
.field-page .lost{grid-template-columns:1fr}
}

.field-page .lost div .n{font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

.field-page .lost div p{font-size:.84rem;color:var(--ink);margin:.5rem 0 0}

.field-page .lost div p b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){}



/* the prototype carried the theme toggle in its own page header, which the live
   page does not have; the button now sits in the spine, so its rule comes along */
.field-page .themebtn{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);background:transparent;
  border:1px solid var(--hair-strong);border-radius:2px;padding:7px 11px;cursor:pointer}
.field-page .themebtn:hover{color:var(--ink);border-color:var(--line)}


/* The prototype held everything in .wrap{max-width:1240px;margin:0 auto;
   padding:clamp(20px,4vw,52px)}. The live page has no .wrap -- main.field-page
   IS the container -- so the geometry moves onto it. Without this the station
   ran the full 1886px viewport and the hero sat flush against the edge. */
main.field-page{max-width:1240px;margin:0 auto;padding:clamp(20px,4vw,52px)}


/* The prototype set a{color:inherit} globally. Dropped as page chrome when the
   original stylesheet was scoped -- but the stat tiles ARE links, so they took
   the site's link colour and the counts read dim instead of as ink. */
main.field-page a{color:inherit}