/* HORO. Cream paper, cobalt and orange, the palette the account already prints in. An essay with
   an instrument in it, not a dashboard: wide measure, big rules, one live object. */
:root{
  --paper:#F4EDE0; --paper-2:#EFE6D5; --ink:#151C33; --dim:#6B6653;
  --blue:#2545D6; --blue-d:#1A34A8; --orange:#EE6B1E; --orange-d:#CE560F;
  --rule:#D8CDB8;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --measure:66ch;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;
  line-height:1.6;-webkit-font-smoothing:antialiased}
/* the paper has a grain: it is what stops cream from reading as "unstyled white" */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(21,28,51,.13) 1px,transparent 0);
  background-size:4px 4px}
a{color:var(--blue)}

.mast{position:sticky;top:0;z-index:20;background:rgba(244,237,224,.92);
  backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink)}
.mast .in{max-width:1080px;margin:0 auto;padding:12px clamp(16px,4vw,30px);
  display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;display:block}
.brand b{font-family:var(--serif);font-size:25px;letter-spacing:.01em;font-weight:400}
nav{margin-left:auto;display:flex;gap:clamp(8px,2.2vw,24px);align-items:center}
nav a{text-decoration:none;color:var(--dim);font:600 13px/1 var(--sans);letter-spacing:.01em}
nav a:hover,nav a[aria-current=page]{color:var(--ink)}
.cta{background:var(--blue);color:var(--paper);border:1.5px solid var(--ink);border-radius:2px;
  padding:9px 15px;font:600 13px/1 var(--sans);cursor:pointer;text-decoration:none;
  box-shadow:2.5px 2.5px 0 var(--ink);transition:transform .1s ease,box-shadow .1s ease}
.cta:hover{transform:translate(1px,1px);box-shadow:1.5px 1.5px 0 var(--ink)}
.cta:active{transform:translate(2.5px,2.5px);box-shadow:0 0 0 var(--ink)}
.cta.o{background:var(--orange)}
.cta.g{background:transparent;color:var(--ink)}

.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;
  padding:clamp(26px,5vw,54px) clamp(16px,4vw,30px) 90px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7.6vw,80px);line-height:1.02;
  letter-spacing:-.012em}
h1 em{font-style:italic;color:var(--orange)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,40px);line-height:1.1;
  margin:0 0 14px}
h3{font:700 16px/1.3 var(--sans);margin:0 0 7px}
p{max-width:var(--measure);margin:0 0 15px}
.lead{font-size:clamp(17px,2.2vw,21px);line-height:1.5;margin-top:20px;color:#33395A}
.rule{display:flex;align-items:center;gap:14px;margin:54px 0 20px;
  font:600 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-d)}
.rule::after{content:"";flex:1;height:1.5px;background:var(--ink);opacity:.28}
blockquote{font-family:var(--serif);font-size:clamp(21px,3.1vw,30px);line-height:1.25;
  border-left:3px solid var(--orange);padding-left:22px;margin:26px 0;max-width:52ch}

.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper-2);border:1.5px solid var(--ink);border-radius:2px;padding:18px;
  box-shadow:3px 3px 0 rgba(21,28,51,.16)}
.card .k{font:600 10.5px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
.card .v{font-family:var(--serif);font-size:34px;line-height:1;margin:12px 0 6px}
.card .v.b{color:var(--blue)} .card .v.o{color:var(--orange)}
.card .s{font-size:13.5px;color:var(--dim);line-height:1.45}
.chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);
  background:var(--paper-2);border-radius:999px;padding:6px 14px;
  font:600 11.5px/1 var(--mono);letter-spacing:.1em}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--orange);display:block}
.btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}

ul.pts{list-style:none;margin:14px 0;max-width:var(--measure)}
ul.pts li{position:relative;padding:12px 0 12px 30px;border-bottom:1.5px solid var(--rule)}
ul.pts li::before{content:"";position:absolute;left:2px;top:19px;width:11px;height:11px;
  background:var(--blue);transform:rotate(45deg)}
code{font-family:var(--mono);font-size:13px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:2px;padding:1px 5px}
.addr{display:block;font-family:var(--mono);font-size:12.5px;color:var(--blue-d);
  overflow-wrap:anywhere;margin-top:5px}

/* ── the instrument ─────────────────────────────────────────────────────────────────────*/
.gauge{border:1.5px solid var(--ink);background:var(--paper-2);border-radius:2px;padding:24px;
  box-shadow:4px 4px 0 rgba(21,28,51,.18);margin-top:34px}
.gauge .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.gauge .top b{font:600 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.gauge .top span{font-size:13px;color:var(--dim);margin-left:auto}
.bar{position:relative;height:34px;border:1.5px solid var(--ink);background:var(--paper);
  display:flex;overflow:hidden}
.bar .buy{background:var(--blue);transition:width .6s cubic-bezier(.4,0,.2,1)}
.bar .sell{background:var(--orange);transition:width .6s cubic-bezier(.4,0,.2,1);margin-left:auto}
.bar .mid{position:absolute;left:50%;top:-6px;bottom:-6px;width:1.5px;background:var(--ink)}
.legend{display:flex;gap:20px;margin-top:11px;font:600 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.reading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.reading div{border-top:1.5px solid var(--rule);padding-top:10px}
.reading .k{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.reading .v{font-family:var(--serif);font-size:27px;margin-top:6px}

footer{position:relative;z-index:1;border-top:1.5px solid var(--ink);
  padding:22px clamp(16px,4vw,30px);font-size:13px;color:var(--dim)}
footer .in{max-width:1080px;margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
footer a{color:var(--blue-d);text-decoration:none;font-weight:600}

@media (max-width:820px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .g3,.g4{grid-template-columns:minmax(0,1fr)}
  .reading{grid-template-columns:minmax(0,1fr)}
  .brand b{display:none}
  .mast .in{gap:10px}
  nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}
  nav a{font-size:12px}
  .cta{padding:8px 11px;font-size:12px}
}
@media (max-width:380px){
  nav a{font-size:11px}
  nav a[data-short]{font-size:0}
  nav a[data-short]::after{content:attr(data-short);font-size:11px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ══ the app ════════════════════════════════════════════════════════════════════════════
   Two columns on a desk: the instrument on the left, the numbers you can push on the right.
   It is a model of the hook you can drive by hand, and it says so. */
.app{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:22px;margin-top:26px;
  align-items:start}
.panel{background:var(--paper-2);border:1.5px solid var(--ink);border-radius:2px;
  box-shadow:4px 4px 0 rgba(21,28,51,.18)}
.panel .hd{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1.5px solid var(--ink);font:600 11px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase}
.panel .hd .r{margin-left:auto;color:var(--dim);letter-spacing:.08em;text-transform:none;
  font-family:var(--sans);font-size:12px}
.panel .bd{padding:16px}

#glass{display:block;width:100%;height:auto;background:var(--paper)}
.scale-wrap{padding:0 16px 14px}

.ctl{margin-top:14px}
.ctl label{display:flex;align-items:baseline;gap:10px;font:600 11px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.ctl label b{margin-left:auto;font-family:var(--serif);font-size:21px;letter-spacing:0;
  text-transform:none;color:var(--ink)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:0;
  background:var(--paper);border:1.5px solid var(--ink);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  background:var(--orange);border:1.5px solid var(--ink);cursor:pointer;border-radius:2px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--orange);
  border:1.5px solid var(--ink);cursor:pointer;border-radius:2px}
input[type=text]{width:100%;background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;
  padding:11px 13px;font:600 15px/1 var(--mono);color:var(--ink)}
input[type=text]:focus{outline:2px solid var(--blue);outline-offset:1px}

.seg{display:flex;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden}
.seg button{flex:1;background:var(--paper);border:0;padding:11px 8px;cursor:pointer;
  font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button[aria-pressed=true]{background:var(--blue);color:var(--paper)}
.seg button[aria-pressed=true].o{background:var(--orange)}

.out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:16px;
  border:1.5px solid var(--ink)}
.out div{padding:13px;border-right:1.5px solid var(--ink)}
.out div:last-child{border-right:0}
.out .k{font:600 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.out .v{font-family:var(--serif);font-size:27px;line-height:1;margin-top:9px}
.out .v.o{color:var(--orange)} .out .v.b{color:var(--blue)}
.verdict{margin-top:14px;padding:13px 15px;border:1.5px dashed var(--ink);font-size:14px;
  background:var(--paper)}
.verdict b{color:var(--orange)}
.verdict.calm b{color:var(--blue)}
#curve{display:block;width:100%;height:auto;margin-top:6px}
.mode{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--dim);margin-top:12px}
.mode button{background:none;border:0;color:var(--blue);font:600 12.5px var(--sans);
  cursor:pointer;text-decoration:underline;padding:0}
@media (max-width:900px){ .app{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .out{grid-template-columns:minmax(0,1fr)}
  .out div{border-right:0;border-bottom:1.5px solid var(--ink)}
  .out div:last-child{border-bottom:0} }