/* Get FieldKit: Mil-Spec Gold & Green, the same tokens, liquid-gold LIVE plate, corner ticks
   and stencil labels as the FieldKitOS store and console. Same-origin only, no fonts or images. */
:root{color-scheme:dark;
 --mk-bg:#0a0e0b;--mk-bg2:#10160f;--mk-panel:#121a14;--mk-raised:#182319;--mk-raised2:#1c2a1f;
 --mk-line:rgba(159,204,168,.16);--mk-line-strong:rgba(159,204,168,.28);
 --mk-gold:#f5c76e;--mk-gold-text:#f4c766;--mk-gold-bright:#ffe7a6;--mk-gold-line:rgba(245,199,110,.34);
 --mk-green:#8fd4a0;--mk-green-bright:#b8f5c2;--mk-green-dim:#6f9c7b;
 --mk-white:#f3f6ee;--mk-ivory:#fffaf2;--mk-muted:#b7c6b6;--mk-ink:#241608;--mk-danger:#ffb4a8;
 --mk-live:linear-gradient(112deg,#754109 0%,#ba7d20 12%,#f9d573 22%,#fff6d2 33%,#dba63a 43%,#8b520d 55%,#ffe18e 68%,#fff8de 75%,#c8942c 89%,#87500d 100%);
 --mk-mono:ui-monospace,"Cascadia Mono","Source Code Pro","SF Mono",Menlo,Consolas,monospace;
 --mk-sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--mk-white);font:400 16px/1.62 var(--mk-sans);
 background:
  radial-gradient(ellipse 60% 40% at 85% -10%,rgba(245,199,110,.08),transparent 70%),
  radial-gradient(ellipse 50% 45% at 0% 100%,rgba(63,168,106,.07),transparent 75%),
  linear-gradient(90deg,rgba(159,204,168,.03) 1px,transparent 1px),
  linear-gradient(rgba(159,204,168,.03) 1px,transparent 1px),var(--mk-bg);
 background-size:auto,auto,32px 32px,32px 32px,auto;background-attachment:fixed}
::selection{background:var(--mk-gold);color:var(--mk-ink)}
a{color:var(--mk-gold);text-underline-offset:3px}
a:hover{color:var(--mk-gold-bright)}
code{font-family:var(--mk-mono);color:var(--mk-gold-bright);background:rgba(245,199,110,.08);border:1px solid var(--mk-gold-line);border-radius:2px;padding:0 .3em}
strong{color:var(--mk-ivory)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--mk-gold);color:var(--mk-ink);padding:8px 12px;z-index:10}
.skip:focus{left:16px}
.shell{max-width:780px;margin:0 auto;padding:0 16px 40px}
/* Header: olive data plate with the liquid-gold hairline. */
.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
 margin:0 -16px;padding:14px 16px;background:var(--mk-panel);border-bottom:1px solid var(--mk-gold-line);
 box-shadow:inset 0 -1px rgba(184,245,194,.08),0 8px 24px rgba(0,0,0,.45)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
 background:linear-gradient(90deg,transparent 0%,#9a6015 11%,#e0aa3f 26%,#fff6ce 40%,#c5881d 53%,#fff1b2 66%,#b1771b 84%,transparent);
 box-shadow:0 0 12px rgba(244,193,86,.3)}
.wordmark{display:inline-flex;align-items:center;gap:10px;font:800 1.2rem/1 var(--mk-sans);letter-spacing:-.01em;color:var(--mk-gold-text)}
.wordmark em{font-style:normal;color:var(--mk-ivory)}
.wordmark img{display:block;width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(245,197,101,.28))}
/* Status chip: phosphor-green light, mono stencil. */
.secure-note{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--mk-gold-line);
 background:var(--mk-bg2);color:var(--mk-green-bright);font:600 10px/1.4 var(--mk-mono);letter-spacing:.14em;text-transform:uppercase}
.secure-note::before{content:"";width:7px;height:7px;flex:none;background:var(--mk-green-bright);
 box-shadow:0 0 9px rgba(184,245,194,.9),0 0 16px rgba(143,212,160,.4);animation:mk-led 3.2s ease-in-out infinite}
@keyframes mk-led{0%,100%{opacity:1}50%{opacity:.55}}
.dev-banner{margin:16px 0 0;padding:12px 14px;border:2px dashed var(--mk-danger);color:var(--mk-danger);font-weight:650}
/* Toolbar strip, as on the store. */
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:18px;padding:9px 14px;
 background:linear-gradient(180deg,var(--mk-raised2),var(--mk-panel));border:1px solid var(--mk-line);border-top:2px solid var(--mk-gold);
 box-shadow:inset 0 1px rgba(184,245,194,.05),0 8px 20px rgba(0,0,0,.25);
 color:var(--mk-gold);font:600 10px/1.5 var(--mk-mono);letter-spacing:.14em;text-transform:uppercase}
.toolbar .on{color:var(--mk-green-bright)}
/* Hero */
.intro{margin-top:10px;padding:clamp(20px,4vw,34px);border:1px solid var(--mk-line-strong);
 background:radial-gradient(ellipse 50% 70% at 92% 4%,rgba(245,199,110,.10),transparent 76%),linear-gradient(150deg,#142018 0%,var(--mk-panel) 55%,var(--mk-bg2) 100%);
 box-shadow:inset 0 1px rgba(184,245,194,.07),inset 0 -1px rgba(0,0,0,.5),0 22px 46px rgba(0,0,0,.4)}
.eyebrow{margin:0 0 8px;color:var(--mk-gold);font:600 10px/1.5 var(--mk-mono);letter-spacing:.14em;text-transform:uppercase}
h1{margin:0 0 12px;font:800 clamp(2rem,7vw,3rem)/1.06 var(--mk-sans);letter-spacing:-.01em;text-transform:uppercase;color:var(--mk-white)}
h1 span{color:var(--mk-gold)}
.lede{margin:0;color:var(--mk-muted);font-size:1.02rem;max-width:58ch}
.lede-tag{margin:0 0 10px;color:var(--mk-green);font:600 12px/1.6 var(--mk-mono);letter-spacing:.04em}
p{margin:0 0 12px}
/* Panels: olive glass, green hairline, gold corner ticks. */
.panel{position:relative;margin-top:12px;padding:22px;border:1px solid var(--mk-line);
 background:linear-gradient(160deg,var(--mk-raised),var(--mk-panel));
 box-shadow:inset 0 1px rgba(184,245,194,.05),0 14px 31px rgba(0,0,0,.3)}
.ticks{position:relative}
.ticks::after{content:"";position:absolute;inset:5px;pointer-events:none;opacity:.8;
 background:
  linear-gradient(var(--mk-gold),var(--mk-gold)) left top/10px 1px,linear-gradient(var(--mk-gold),var(--mk-gold)) left top/1px 10px,
  linear-gradient(var(--mk-gold),var(--mk-gold)) right top/10px 1px,linear-gradient(var(--mk-gold),var(--mk-gold)) right top/1px 10px,
  linear-gradient(var(--mk-gold),var(--mk-gold)) left bottom/10px 1px,linear-gradient(var(--mk-gold),var(--mk-gold)) left bottom/1px 10px,
  linear-gradient(var(--mk-gold),var(--mk-gold)) right bottom/10px 1px,linear-gradient(var(--mk-gold),var(--mk-gold)) right bottom/1px 10px;
 background-repeat:no-repeat}
.result{border-color:var(--mk-gold-line);box-shadow:inset 0 1px rgba(184,245,194,.06),0 0 18px rgba(245,199,110,.1),0 14px 31px rgba(0,0,0,.3)}
h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:800 1.05rem/1.3 var(--mk-sans);letter-spacing:-.01em;text-transform:uppercase;color:var(--mk-white)}
.num{flex:none;display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 6px;
 color:var(--mk-gold-bright);font:700 11px/1 var(--mk-mono);border:1px solid var(--mk-gold-line);background:rgba(245,199,110,.08)}
label{display:block;margin:0 0 4px;color:var(--mk-gold);font:600 11px/1.5 var(--mk-mono);letter-spacing:.12em;text-transform:uppercase}
.hint{color:var(--mk-muted);font-size:.9rem}
input{display:block;width:100%;min-height:50px;margin:6px 0 10px;padding:10px 12px;border:1px solid var(--mk-line-strong);border-radius:3px;
 background:#070b09;color:var(--mk-white);font:500 16px/1.4 var(--mk-mono);letter-spacing:.06em;
 box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
input:focus{border-color:var(--mk-gold)}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
/* Secondary controls: green-edged plates. */
button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 16px;
 border:1px solid var(--mk-line-strong);border-radius:3px;background:var(--mk-raised);color:var(--mk-green-bright);
 font:700 12px/1.3 var(--mk-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
 transition:background .14s,border-color .14s,color .14s}
button:hover:not(:disabled){background:var(--mk-raised2);border-color:var(--mk-green)}
/* Primary control: the store's liquid-gold LIVE plate with its slow gold flow. */
button.primary{position:relative;isolation:isolate;overflow:hidden;min-height:52px;padding:11px 18px;
 color:#271904;border:1px solid #f8dfa0;border-radius:4px;background:var(--mk-live);background-size:190% 100%;
 text-shadow:0 1px rgba(255,253,241,.44);
 box-shadow:inset 0 2px rgba(255,255,240,.66),inset 0 -2px rgba(82,39,4,.27),0 0 19px rgba(242,196,84,.25),0 9px 24px rgba(5,2,0,.28);
 animation:mk-gold-flow 11s ease-in-out infinite alternate;transition:background-position .4s ease,box-shadow .2s,transform .2s}
button.primary::after{content:"";position:absolute;z-index:-1;inset:1px;pointer-events:none;border-radius:3px;
 background:linear-gradient(118deg,rgba(255,255,247,.22),transparent 28%,transparent 69%,rgba(255,250,226,.11))}
button.primary:hover:not(:disabled){background-position:100% 0;color:#241605;border-color:#fff1c2;
 box-shadow:inset 0 2px rgba(255,255,243,.78),0 0 27px rgba(250,219,117,.48),0 10px 24px rgba(5,2,0,.29);transform:translateY(-1px)}
button.primary:active{transform:none}
.live{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;flex:none;
 background:linear-gradient(145deg,#1b2a1f,#0f1712);border:1px solid #f6d88d;border-radius:2px;color:#fff4d3;text-shadow:none;
 font:800 10px/1.25 var(--mk-mono);letter-spacing:.1em;box-shadow:inset 0 1px rgba(255,244,214,.19),0 0 10px rgba(243,194,78,.21)}
.live::before{content:"";display:block;width:7px;height:7px;flex:none;background:#fff0a1;border:1px solid #fff9da;
 box-shadow:0 0 9px rgba(255,228,135,.95),0 0 17px rgba(244,189,56,.4);animation:mk-led 3.5s ease-in-out infinite}
@keyframes mk-gold-flow{from{background-position:0% 0%}to{background-position:100% 0%}}
button:disabled{opacity:.5;cursor:not-allowed;animation:none}
:is(a,button,input,summary,.problem):focus-visible{outline:2px solid var(--mk-gold-bright);outline-offset:3px}
/* The access code is a plain text field (so browsers do not offer to store it as a password), shown as dots where supported. */
.masked{-webkit-text-security:disc}
h2:focus{outline:none}
/* Check sequence: build-journal rows with phosphor readouts. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:step}
.steps li{counter-increment:step;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 10px 10px;
 background:var(--mk-bg2);border:1px solid var(--mk-line);border-left:2px solid var(--mk-gold-line)}
.step-label{min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:10px;font-size:.95rem}
.step-label::before{content:counter(step,decimal-leading-zero);flex:none;color:var(--mk-gold);font:700 11px/1 var(--mk-mono)}
.step-state{flex:none;font:700 10px/1.4 var(--mk-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mk-green-dim)}
.step-state::before{content:"\25CB  "}
.steps li[data-state=active]{border-left-color:var(--mk-gold);background:var(--mk-raised2)}
.steps li[data-state=active] .step-state{color:var(--mk-gold)}
.steps li[data-state=active] .step-state::before{content:"\25D4  "}
.steps li[data-state=done]{border-left-color:var(--mk-green)}
.steps li[data-state=done] .step-state{color:var(--mk-green-bright)}
.steps li[data-state=done] .step-state::before{content:"\25CF  "}
.steps li[data-state=failed]{border-left-color:var(--mk-danger);border-color:rgba(255,180,168,.45)}
.steps li[data-state=failed] .step-state{color:var(--mk-danger)}
.steps li[data-state=failed] .step-state::before{content:"\2715  "}
.status{margin-top:12px;padding:11px 14px;border:1px solid var(--mk-line);border-left:3px solid var(--mk-gold);background:#070b09;
 color:var(--mk-green);font:500 13px/1.55 var(--mk-mono);overflow-wrap:anywhere}
.problem{margin-top:12px;padding:12px 14px;border:1px solid var(--mk-danger);border-left-width:4px;background:#24130f;color:var(--mk-ivory);overflow-wrap:anywhere}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 0;font-size:.92rem}
.facts dt{color:var(--mk-green-dim);font:600 11px/1.9 var(--mk-mono);letter-spacing:.1em;text-transform:uppercase}
.facts dd{margin:0;overflow-wrap:anywhere}
details{margin-top:14px;border-top:1px solid var(--mk-line);padding-top:12px}
summary{cursor:pointer;color:var(--mk-gold);font:600 11px/1.6 var(--mk-mono);letter-spacing:.12em;text-transform:uppercase}
.info h2{font-size:.95rem}
.info ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.info li{position:relative;padding-left:18px;color:var(--mk-muted)}
.info li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--mk-green);box-shadow:0 0 8px rgba(143,212,160,.6)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px 20px;margin-top:22px;padding-top:14px;
 border-top:1px solid var(--mk-gold-line);color:var(--mk-green-dim);font:600 10px/1.6 var(--mk-mono);letter-spacing:.12em;text-transform:uppercase}
.foot p{margin:0}
.foot a{color:var(--mk-green);text-transform:none;letter-spacing:.04em}
@media (max-width:520px){.panel{padding:16px}.intro{padding:20px 15px}.actions button{flex:1 1 100%}.facts{grid-template-columns:1fr}.facts dd{margin-bottom:6px}.steps li{flex-wrap:wrap}.secure-note{letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (forced-colors:active){.ticks::after,.top::after{display:none}}