/* Devourn — an engineering sheet. Ground, one ice-cyan accent, a plotter that draws itself. */
:root{
  --ground:#050B12; --sheet:#071119; --ink:#E6F3FA; --dim:#6C8698;
  --cyan:#38E1FF; --cyan-soft:rgba(56,225,255,.16); --cyan-line:rgba(56,225,255,.34);
  --grid:rgba(56,225,255,.055); --hair:rgba(56,225,255,.22);
  --warn:#FFB454;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans",-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100svh;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
code,.dv-num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---- the sheet: a blueprint with a ruled border ---- */
.dv-sheet{min-height:100svh;display:flex;flex-direction:column;position:relative;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/34px 34px,
    radial-gradient(120% 85% at 50% 18%,#0A1B27 0%,var(--ground) 62%);
  padding:14px 12px calc(12px + env(safe-area-inset-bottom));gap:12px}
.dv-rule{position:fixed;background:var(--hair);pointer-events:none;z-index:2}
.dv-rule-t,.dv-rule-b{left:10px;right:10px;height:1px}
.dv-rule-l,.dv-rule-r{top:10px;bottom:10px;width:1px}
.dv-rule-t{top:10px}.dv-rule-b{bottom:10px}.dv-rule-l{left:10px}.dv-rule-r{right:10px}
.dv-drawing{flex:1;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}

/* ---- annotations (the drawing's own labels) ---- */
.dv-datum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:"Oxanium",sans-serif;letter-spacing:.14em;font-size:11px;color:var(--dim);text-transform:uppercase}
.dv-datum b{color:var(--cyan);font-weight:700;letter-spacing:.1em}
.dv-datum .dv-clock{margin-left:auto;font-size:15px;color:var(--ink);letter-spacing:.06em}
.dv-datum .dv-clock.dv-shut{color:var(--warn)}

.dv-callout{font-family:"Oxanium",sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.01em;
  font-size:clamp(27px,8.4vw,44px);max-width:15ch}
.dv-callout em{font-style:normal;color:var(--cyan)}
.dv-sub{color:var(--dim);font-size:14.5px;line-height:1.5;max-width:44ch}

/* ---- the instrument ---- */
.dv-plot{width:100%;max-width:460px;margin:2px auto 0;aspect-ratio:1;position:relative;touch-action:manipulation}
.dv-plot svg{width:100%;height:100%;overflow:visible}
.dv-wedge{cursor:pointer}
.dv-wedge .dv-face{fill:var(--cyan);transition:fill-opacity .45s ease}
.dv-wedge .dv-edge{fill:none;stroke:var(--cyan-line);stroke-width:1.6;transition:stroke .3s ease,stroke-width .3s ease}
.dv-wedge.dv-on .dv-edge{stroke:var(--cyan);stroke-width:3}
.dv-wedge.dv-bare .dv-edge{stroke-dasharray:5 5}
.dv-wedge text{font-family:"Oxanium",sans-serif;font-weight:700;fill:var(--ink);text-anchor:middle;pointer-events:none}
.dv-wedge .dv-mark{font-size:19px;letter-spacing:.08em}
.dv-wedge .dv-load{font-size:12.5px;fill:var(--dim);letter-spacing:.04em}
.dv-wedge.dv-on .dv-load{fill:var(--cyan)}
.dv-bite{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;opacity:.42;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:dv-print .55s ease forwards}
.dv-bite.dv-hot{opacity:.95;stroke-width:3.4}
@keyframes dv-print{to{stroke-dashoffset:0}}
.dv-tip{fill:var(--cyan);opacity:0;animation:dv-land .2s ease forwards}
.dv-tip.dv-hot{--tipo:.95}
@keyframes dv-land{to{opacity:var(--tipo,.45)}}
.dv-hub{text-anchor:middle;font-family:"Oxanium",sans-serif}
.dv-hub .dv-hub-n{font-size:30px;font-weight:700;fill:var(--cyan)}
.dv-hub .dv-hub-l{font-size:10.5px;fill:var(--dim);letter-spacing:.2em}
.dv-caliper{stroke:var(--hair);stroke-width:1;stroke-dasharray:3 4}

/* ---- readout strip under the plot ---- */
.dv-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.dv-cellr{background:var(--sheet);padding:9px 8px;display:flex;flex-direction:column;gap:3px}
.dv-cellr small{font-family:"Oxanium",sans-serif;font-size:9.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.dv-cellr b{font-family:"Oxanium",sans-serif;font-size:17px;font-weight:600}
.dv-cellr b.dv-lit{color:var(--cyan)}

/* ---- gate ledger rows ---- */
.dv-strip{border:1px solid var(--hair);background:rgba(7,17,25,.72)}
.dv-line{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--grid);font-size:13.5px}
.dv-line:last-child{border-bottom:0}
.dv-line .dv-mk{font-family:"Oxanium",sans-serif;font-weight:700;color:var(--cyan);letter-spacing:.06em}
.dv-line .dv-note{color:var(--dim);font-size:12.5px}
.dv-line .dv-fig{font-family:"Oxanium",sans-serif;font-size:15px;text-align:right}
.dv-line .dv-fig small{display:block;color:var(--dim);font-size:10.5px;letter-spacing:.1em;font-family:"Oxanium",sans-serif}
.dv-x{color:var(--cyan)}
.dv-none{padding:22px 14px;color:var(--dim);font-size:13.5px;text-align:center}

.dv-head{font-family:"Oxanium",sans-serif;font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.dv-head::after{content:"";flex:1;height:1px;background:var(--hair)}

.dv-prose p{color:var(--dim);font-size:14.5px;line-height:1.62;margin:9px 0}
.dv-prose h3{font-family:"Oxanium",sans-serif;font-size:15px;letter-spacing:.04em;margin-top:20px;color:var(--ink)}
.dv-prose b{color:var(--ink)}

/* ---- title block: the chrome lives inside the drawing ---- */
.dv-titleblock{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair);background:rgba(5,11,18,.94);
  font-family:"Oxanium",sans-serif;position:relative;z-index:3}
.dv-tb-cell{padding:10px 11px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);min-width:0}
.dv-tb-cell:nth-child(2n){border-right:0}
.dv-tb-cell:nth-last-child(-n+2){border-bottom:0}
.dv-tb-id{display:flex;align-items:center;gap:9px}
.dv-tb-id img{border-radius:4px;flex:none}
.dv-tb-id b{display:block;font-size:14.5px;letter-spacing:.06em}
.dv-tb-id small{display:block;color:var(--dim);font-size:10px;letter-spacing:.1em}
.dv-tb-nav{display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-size:11px;letter-spacing:.16em}
.dv-tb-nav a{color:var(--dim)}
.dv-tb-nav a.dv-here,.dv-tb-nav a:hover{color:var(--cyan)}
.dv-tb-ca small{display:block;font-size:9px;letter-spacing:.18em;color:var(--dim)}
.dv-tb-ca code{display:block;font-size:10.5px;word-break:break-all;line-height:1.35;margin-top:3px;font-family:"IBM Plex Sans",monospace}
.dv-tb-ca #copyCa{font-size:9.5px;letter-spacing:.16em;color:var(--cyan);margin-top:4px}
.dv-tb-act{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dv-tb-act a#buy{background:var(--cyan);color:#04121A;padding:7px 11px;font-size:11px;font-weight:700;letter-spacing:.1em}
.dv-tb-act #connect{border:1px solid var(--cyan-line);padding:6px 11px;font-size:11px;letter-spacing:.1em;color:var(--cyan)}
.dv-tb-act #connect.dv-on{border-color:var(--hair);color:var(--dim)}
.dv-tb-act #links a{color:var(--dim);font-size:11px;letter-spacing:.1em;margin-right:9px}

/* ---- the pad ---- */
.dv-pad{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.dv-pad-scrim{position:absolute;inset:0;background:rgba(2,6,10,.82);backdrop-filter:blur(3px)}
.dv-pad-body{position:relative;width:100%;max-width:440px;background:var(--sheet);border:1px solid var(--cyan-line);
  border-bottom:0;padding:14px 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:11px;
  animation:dv-rise .22s ease}
@keyframes dv-rise{from{transform:translateY(16px);opacity:.4}}
.dv-pad-body header{display:flex;align-items:center;justify-content:space-between}
.dv-pad-body h2{font-family:"Oxanium",sans-serif;font-size:16px;letter-spacing:.14em;font-weight:700}
.dv-pad-body header button{color:var(--dim);font-size:16px;padding:2px 6px}
.dv-pad-info{display:flex;gap:16px;font-size:11.5px;color:var(--dim);font-family:"Oxanium",sans-serif;letter-spacing:.06em;flex-wrap:wrap}
.dv-pad-info b{color:var(--ink);font-weight:600}
.dv-pad-amt{font-family:"Oxanium",sans-serif;font-size:38px;font-weight:700;letter-spacing:.02em;
  border-bottom:1px solid var(--hair);padding-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-pad-fine{font-size:12.5px;color:var(--dim);line-height:1.45;min-height:34px}
.dv-pad-fine b{color:var(--cyan)}
.dv-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.dv-keys button{background:rgba(56,225,255,.06);border:1px solid var(--grid);padding:13px 0;font-family:"Oxanium",sans-serif;
  font-size:19px;font-weight:600;transition:background .12s}
.dv-keys button:active{background:var(--cyan-soft)}
.dv-keys .dv-k-alt{font-size:12.5px;letter-spacing:.12em;color:var(--dim)}
.dv-commit{background:var(--cyan);color:#04121A;padding:14px 0;font-family:"Oxanium",sans-serif;font-size:15px;
  font-weight:700;letter-spacing:.14em}
.dv-commit:disabled{background:var(--grid);color:var(--dim)}

.dv-flash{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;background:var(--cyan);color:#04121A;
  padding:9px 15px;font-family:"Oxanium",sans-serif;font-size:12.5px;letter-spacing:.06em;max-width:88vw}

@media(min-width:760px){
  .dv-sheet{padding:22px 20px}
  /* two columns: everything flows down the left, the instrument is pinned in the right and spans the lot */
  .dv-drawing{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px 28px;align-content:start}
  .dv-drawing > *{grid-column:1;min-width:0}
  .dv-datum{grid-column:1/-1}
  .dv-plot{grid-column:2;grid-row:2/span 40;max-width:400px;margin:0;align-self:start;position:sticky;top:26px}
  .dv-callout{font-size:46px}
  .dv-titleblock{grid-template-columns:1.1fr .8fr 1.4fr 1fr}
  .dv-tb-cell{border-bottom:0}
  .dv-tb-cell:nth-child(2n){border-right:1px solid var(--hair)}
  .dv-tb-cell:last-child{border-right:0}
}
@media(prefers-reduced-motion:reduce){.dv-bite{animation:none;stroke-dashoffset:0}.dv-tip{animation:none;opacity:var(--tipo,.45)}.dv-pad-body{animation:none}}

.dv-aside{color:var(--dim);font-size:12.5px}
.dv-line a{color:var(--ink);border-bottom:1px solid var(--grid)}
.dv-line a:hover{color:var(--cyan);border-color:var(--cyan-line)}

[hidden]{display:none!important}