:root{
  color-scheme:dark;
  --dark-water:#041514;
  --deep-water:#07231f;
  --signal-teal:#74e7d8;
  --soft-teal:#a8d8cd;
  --bone-light:#f2ead8;
  --paper:#ead7a5;
  --paper-light:#fff3d5;
  --paper-ink:#15201b;
  --brass:#c6a15b;
  --copper:#d8733f;
  --rust:#9b3f2b;
  --line:rgba(116,231,216,.27);
  --display:"Unbounded","Arial Black","Avenir Next",system-ui,sans-serif;
  --mono:"SFMono-Regular","IBM Plex Mono","Courier New",monospace;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--dark-water);scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--bone-light);background:
  radial-gradient(circle at 83% 11%,rgba(116,231,216,.13),transparent 28rem),
  radial-gradient(circle at 8% 52%,rgba(216,115,63,.11),transparent 31rem),
  linear-gradient(155deg,var(--deep-water),var(--dark-water) 68%);font:1rem/1.62 var(--mono)}
body::before{position:fixed;inset:0;z-index:-2;content:"";opacity:.28;background:
  repeating-linear-gradient(93deg,transparent 0 72px,rgba(116,231,216,.06) 73px,transparent 75px 145px),
  repeating-radial-gradient(ellipse at 50% 110%,transparent 0 38px,rgba(198,161,91,.08) 39px,transparent 41px 78px)}
body::after{position:fixed;inset:0;z-index:-1;pointer-events:none;content:"";opacity:.16;background-image:
  linear-gradient(rgba(242,234,216,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(242,234,216,.05) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(#000,transparent 92%)}

button{min-height:2.75rem;border:1px solid rgba(116,231,216,.48);border-radius:.18rem;padding:.72rem 1rem;color:var(--bone-light);background:#0b302a;font:800 .78rem/1.3 var(--mono);letter-spacing:.04em;cursor:pointer}
button:hover{border-color:var(--copper);color:#fff9e9;background:#173d36}
button:disabled{cursor:not-allowed;opacity:.42}
:focus-visible{outline:.24rem solid var(--signal-teal);outline-offset:.22rem}
.skip-link{position:fixed;left:1rem;top:-6rem;z-index:100;padding:.85rem 1rem;color:var(--paper-ink);background:var(--signal-teal);font-weight:950}.skip-link:focus{top:1rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.site-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.4rem;padding:.45rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line);background:rgba(4,21,20,.94);backdrop-filter:blur(14px);font-size:.7rem;font-weight:900;letter-spacing:.1em}
.site-nav a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--signal-teal)}
.site-nav span{color:var(--soft-teal)}

.activity-hero,.instrument{width:min(92rem,calc(100% - 2rem));margin-inline:auto}
.activity-hero{position:relative;display:grid;align-content:end;min-height:72vh;overflow:hidden;padding:clamp(6rem,13vw,10rem) 0 clamp(3rem,7vw,5rem)}
.activity-hero::before{position:absolute;right:2%;top:13%;width:min(34rem,48vw);aspect-ratio:1;content:"";border:1px solid rgba(116,231,216,.3);border-radius:7% 42% 9% 38%;box-shadow:0 0 5rem rgba(116,231,216,.08),inset 0 0 3rem rgba(116,231,216,.05);transform:rotate(8deg)}
.activity-hero::after{position:absolute;right:9%;top:22%;width:min(23rem,33vw);aspect-ratio:1;content:"CLASSIFICATION UNIT\A INSPECTION OVERDUE";white-space:pre;display:grid;place-items:center;border:1px dashed rgba(216,115,63,.7);color:rgba(216,115,63,.68);font-size:.7rem;font-weight:900;text-align:center;letter-spacing:.12em;transform:rotate(-13deg)}
.eyebrow,.progress{position:relative;z-index:1;margin:0;color:var(--copper);font-size:.7rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--display)}
h1{position:relative;z-index:1;max-width:13ch;margin:.7rem 0 1rem;font-size:clamp(3rem,7vw,6.5rem);line-height:.92;letter-spacing:-.05em}
h1 em{color:var(--signal-teal);font-style:normal}
.hero-copy{position:relative;z-index:1;max-width:58ch;margin:0;color:var(--soft-teal);font-size:clamp(1.05rem,2vw,1.35rem)}
.boundary-panel{position:relative;z-index:2;display:grid;grid-template-columns:max-content 1fr;gap:1rem;width:min(58rem,100%);margin-top:2rem;padding:1rem 1.2rem;border-left:.3rem solid var(--copper);background:rgba(7,35,31,.83)}
.boundary-panel strong{color:var(--signal-teal)}

.instrument{padding:2.5rem 0 6rem}
.instrument-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.instrument-head h2{max-width:24ch;margin:.45rem 0 0;font-size:clamp(2rem,4vw,3.6rem);line-height:1.02}
.source-copy{max-width:74rem;margin:1.4rem 0 2rem}
.source-copy article{border-left:.16rem solid var(--brass);padding-left:1rem}
.source-copy h3{margin:0 0 .5rem;color:var(--paper);font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.source-copy p{max-width:78ch;margin:0;color:var(--soft-teal)}

.workbench{display:grid;grid-template-columns:minmax(18rem,22rem) minmax(30rem,1fr) minmax(16rem,20rem);gap:1rem;align-items:stretch}
.apparatus{position:relative;isolation:isolate;min-height:44rem;overflow:hidden;border:1px solid rgba(198,161,91,.56);border-radius:.3rem;background:
  linear-gradient(90deg,rgba(198,161,91,.07) 1px,transparent 1px),
  linear-gradient(rgba(198,161,91,.07) 1px,transparent 1px),
  rgba(2,15,14,.82);background-size:38px 38px;box-shadow:inset 0 0 0 .45rem rgba(3,17,16,.64),inset 0 0 4rem rgba(0,0,0,.45)}
.apparatus::before{position:absolute;inset:1rem;z-index:-1;content:"";border:1px dashed rgba(116,231,216,.14);pointer-events:none}
.drop-instruction{position:absolute;left:1.5rem;bottom:.7rem;margin:0;color:rgba(168,216,205,.62);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.expected-box{position:absolute;left:50%;top:50%;z-index:3;width:min(72%,32rem);aspect-ratio:1;border:.22rem double var(--brass);background:rgba(7,35,31,.92);box-shadow:0 0 0 .45rem rgba(198,161,91,.09),0 1.4rem 4rem rgba(0,0,0,.42),inset 0 0 3rem rgba(116,231,216,.05);transform:translate(-50%,-50%);transition:width .32s ease-out,transform .32s ease-out,opacity .25s ease-out}
.expected-box[data-shrunk="true"]{width:min(38%,15rem);transform:translate(-50%,-50%)}
.box-label{position:absolute;left:.7rem;right:.7rem;top:.55rem;color:var(--brass);font-size:.62rem;font-weight:950;letter-spacing:.12em;text-align:center}
.expected-swirl,.outside-field,.operation-field{display:flex;align-content:center;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap}
.expected-swirl{position:absolute;inset:2.2rem .75rem .75rem;overflow:auto;padding:.35rem}
.outside-field{position:absolute;inset:1rem;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:space-around;justify-items:start;gap:.42rem 38%;padding:2.4rem .8rem 2rem}
.outside-field::before{position:absolute;left:1rem;top:.8rem;content:"WHAT HAPPENS OUTSIDE THE BOX?";color:var(--copper);font-size:.68rem;font-weight:950;letter-spacing:.12em}
.outside-field .visual-card:nth-child(even){justify-self:end}
.enforcement-arrows{position:absolute;inset:0;z-index:6;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 .32rem rgba(4,21,20,.96));pointer-events:none}
.enforcement-arrow{fill:none;stroke-width:8;opacity:1}
.enforcement-arrow.institution{stroke:var(--signal-teal)}
.enforcement-arrow.everyday{stroke:var(--copper)}
.arrowhead{stroke:var(--dark-water);stroke-width:4;paint-order:stroke fill}
.arrowhead.institution{fill:var(--signal-teal)}
.arrowhead.everyday{fill:var(--copper)}
.operation-field{position:absolute;inset:13% 3% 11%;z-index:7;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:.6rem 42%;pointer-events:none}
.operation-field::before,.operation-field::after{position:absolute;top:1rem;max-width:15rem;font-size:.64rem;font-weight:950;line-height:1.35;letter-spacing:.08em;text-transform:uppercase}
.operation-field::before{left:0;content:"INSTITUTIONAL OPERATIONS";color:var(--signal-teal)}
.operation-field::after{right:0;content:"EVERYDAY ENFORCEMENT";color:var(--copper);text-align:right}
.operation-field .visual-card{width:min(100%,9.5rem);pointer-events:auto}
.operation-field .visual-card[data-card-category="institutional-operation"]{grid-column:1;justify-self:start}
.operation-field .visual-card[data-card-category="everyday-enforcement"]{grid-column:2;justify-self:end}
.visual-card{display:inline-block;max-width:13rem;border:1px solid rgba(21,32,27,.76);border-radius:.08rem;padding:.48rem .58rem;color:var(--paper-ink);background:var(--paper);box-shadow:.18rem .3rem 0 rgba(0,0,0,.22);font:850 clamp(.66rem,1.1vw,.82rem)/1.2 var(--mono);text-align:left;transition:transform .22s ease-out,opacity .18s ease-out}
.visual-card[data-card-category="software-update"]{background:#b8d8cc}
.visual-card[data-card-category="outside-condition"]{background:#9ed9ce}
.visual-card[data-card-category="institutional-capture"]{border-style:dashed;background:#e2a38d}
.visual-card[data-card-category="survival-consequence"]{border-bottom:.22rem double var(--rust);background:#d9c58b}
.visual-card[data-card-category="institutional-operation"]{background:#c7e9df}
.visual-card[data-card-category="everyday-enforcement"]{background:#edb296}
[data-angle="-3"]{transform:rotate(-7deg)}
[data-angle="-2"]{transform:rotate(-4deg)}
[data-angle="-1"]{transform:rotate(-2deg)}
[data-angle="0"]{transform:rotate(1deg)}
[data-angle="1"]{transform:rotate(3deg)}
[data-angle="2"]{transform:rotate(5deg)}
[data-angle="3"]{transform:rotate(7deg)}

.linear-ledger{min-width:0;border-top:.28rem solid var(--signal-teal);padding:1.15rem;background:rgba(7,35,31,.72)}
.linear-ledger h3{margin:.25rem 0;font-size:1.35rem}
.linear-ledger>p:not(.eyebrow){margin:.2rem 0 1rem;color:var(--soft-teal);font-size:.82rem}
.linear-ledger ol{display:grid;gap:.48rem;max-height:38rem;overflow:auto;margin:0;padding:0;list-style:none}
.linear-ledger li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border-left:.18rem solid var(--brass);padding:.62rem .7rem;background:rgba(242,234,216,.08)}
.linear-ledger [data-card-category] small{display:block;color:var(--copper);font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.linear-ledger strong{display:block;font-size:.78rem;line-height:1.28}
.linear-ledger li>small{max-width:12ch;color:var(--soft-teal);font-size:.58rem;text-align:right}
.remove-card{min-height:2.75rem;padding:.55rem .65rem;font-size:.65rem}
.empty-ledger{color:var(--soft-teal);font-style:italic}

.tray-section{min-width:0;border-top:.28rem solid var(--copper);padding:1rem;background:rgba(7,35,31,.64)}
.tray-heading{display:grid;gap:.7rem;margin-bottom:1rem}
.tray-heading h3{margin:.2rem 0 0;font-size:1.45rem}
.tray-heading>p{max-width:46ch;margin:0;color:var(--soft-teal);font-size:.76rem}
.card-trays{display:grid;gap:1rem;max-height:38rem;overflow:auto;padding-right:.25rem}
.card-tray{border:1px solid rgba(198,161,91,.25);padding:.9rem;background:rgba(2,15,14,.5)}
.card-tray h4{margin:0 0 .7rem;color:var(--paper);font-size:.72rem;letter-spacing:.11em}
.tray-cards{display:flex;flex-wrap:wrap;gap:.48rem}
.place-card{min-height:2.75rem;border-color:rgba(198,161,91,.52);padding:.58rem .72rem;color:var(--paper-ink);background:var(--paper);font-size:.68rem;text-transform:none;letter-spacing:0}
.place-card[data-card-category="software-update"]{background:#b8d8cc}
.place-card[data-card-category="outside-condition"]{background:#9ed9ce}
.place-card[data-card-category="institutional-capture"]{border:2px dashed var(--rust);background:#e2a38d}
.place-card[data-card-category="survival-consequence"]{border:2px solid var(--brass);border-bottom:.25rem double var(--rust);background:#d9c58b}
.place-card[data-card-category="institutional-operation"]{background:#c7e9df}
.place-card[data-card-category="everyday-enforcement"]{background:#edb296}
.place-card:hover{color:#081411;background:#fff1c8}
.place-card:disabled{color:rgba(21,32,27,.63);background:#8a907e;text-decoration:line-through}
.custom-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(116,231,216,.18)}
.custom-form label{display:grid;gap:.25rem;color:var(--soft-teal);font-size:.68rem;font-weight:800}
.custom-form input{min-width:0;min-height:2.75rem;border:1px solid rgba(116,231,216,.5);border-radius:.18rem;padding:.65rem .72rem;color:var(--bone-light);background:#041b18;font:inherit}
.custom-form button{align-self:end;white-space:nowrap}
.content-notice{margin-top:1rem;border-left:.28rem solid var(--copper);padding:1rem;background:rgba(155,63,43,.14)}
.content-notice p{max-width:72ch}

.reveal-output{display:grid;gap:1rem;margin-top:1.2rem}
.reveal-output[data-revealed="true"]{border:1px solid rgba(116,231,216,.34);padding:1.25rem;background:rgba(2,15,14,.76)}
.reveal-output article{border-left:.28rem solid var(--signal-teal);padding-left:1rem}
.reveal-output article+article{border-left-color:var(--copper)}
.reveal-output h3{margin:0;color:var(--paper);font-size:clamp(1.45rem,3vw,2.4rem);letter-spacing:.02em}
.reveal-output p{max-width:80ch;margin:.6rem 0 0;color:var(--soft-teal)}
.instrument-controls{position:sticky;bottom:0;z-index:20;display:flex;justify-content:flex-end;gap:.55rem;flex-wrap:wrap;margin-top:1.2rem;border-top:1px solid var(--line);padding:.8rem;background:rgba(4,21,20,.95);backdrop-filter:blur(12px)}
.quiet-button{color:var(--soft-teal);background:#08231f}
.danger-button{margin-right:auto;border-color:rgba(216,115,63,.48);color:#f1b49b;background:#281813}
.signal-button{border-color:var(--signal-teal);color:#071d1a;background:var(--signal-teal)}
.signal-button:hover{color:#071d1a;background:#b7fff4}

.final-field{display:grid;place-items:center;min-height:100vh;padding:clamp(2rem,8vw,8rem);background:
  radial-gradient(circle at center,rgba(116,231,216,.08),transparent 39rem),
  var(--dark-water)}
.final-field h1{max-width:25ch;margin:0;color:var(--bone-light);font-size:clamp(2rem,5.8vw,5.2rem);line-height:1.05;text-align:center}
body[data-quiet="true"]::before,body[data-quiet="true"]::after{opacity:.04;transition:opacity .45s ease-out}
.noscript-field{width:min(62rem,calc(100% - 2rem));margin:2rem auto 6rem;border:1px solid var(--line);padding:1.2rem}

body[data-plain-list="true"] .apparatus{display:none}
body[data-plain-list="true"] .workbench{grid-template-columns:1fr}
body[data-plain-list="true"] .linear-ledger ol{max-height:none}
body[data-plain-list="true"] .tray-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
body[data-plain-list="true"] .place-card{text-align:left}

@media (max-width:800px){
  .activity-hero{min-height:60vh}
  .activity-hero::before,.activity-hero::after{opacity:.42}
  .boundary-panel{grid-template-columns:1fr}
  .workbench{grid-template-columns:1fr}
  .apparatus{min-height:39rem}
  .linear-ledger ol{max-height:20rem}
  .instrument-head,.tray-heading{align-items:flex-start;flex-direction:column;gap:1rem}
}

@media (min-width:801px) and (max-width:1120px){
  .workbench{grid-template-columns:minmax(18rem,22rem) minmax(28rem,1fr)}
  .linear-ledger{grid-column:1/-1}
  .linear-ledger ol{max-height:18rem}
}

@media (max-width:480px){
  .site-nav{align-items:flex-start;flex-direction:column;gap:0;padding:.35rem .75rem}
  .site-nav span{padding-bottom:.45rem}
  .activity-hero,.instrument{width:min(100% - 1rem,92rem)}
  .activity-hero{min-height:33rem;padding-top:5rem}
  .activity-hero::before{right:-32%;width:22rem}
  .activity-hero::after{display:none}
  h1{font-size:clamp(2.75rem,17vw,4rem)}
  .instrument{padding-top:1.2rem}
  .instrument-head h2{font-size:2rem}
  .apparatus{min-height:35rem}
  .expected-box{width:82%}
  .expected-box[data-shrunk="true"]{width:min(48%,10.5rem)}
  .outside-field{inset:.6rem;gap:.35rem 32%;padding:2.2rem .2rem 2rem}
  .enforcement-arrow{stroke-width:7}
  .operation-field{inset:12% 1.5% 10%;gap:.4rem 38%}
  .operation-field::before,.operation-field::after{max-width:7.5rem;font-size:.52rem}
  .operation-field .visual-card:nth-of-type(n+7){display:none}
  .visual-card{max-width:8.7rem;font-size:.59rem}
  .linear-ledger,.tray-section{padding:.8rem}
  .linear-ledger li{align-items:flex-start;flex-direction:column}
  .linear-ledger li>small{max-width:none;text-align:left}
  .remove-card{width:100%}
  .tray-cards{display:grid;grid-template-columns:1fr 1fr}
  .place-card{width:100%;text-align:left}
  .custom-form{grid-template-columns:1fr}
  .custom-form button{width:100%}
  .instrument-controls{display:grid;grid-template-columns:1fr 1fr;padding:.55rem}
  .instrument-controls button{width:100%;min-width:0}
  .danger-button{margin-right:0}
  .signal-button{grid-column:1/-1}
  .final-field{padding:1.2rem}
  .final-field h1{font-size:clamp(1.8rem,9vw,2.7rem)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .visual-card{transform:none!important}
}