/* ==========================================================================
   Syntropise · The Cabinet · the instrument pages
   (The Ground Beneath, The Spiral Mirror, The Self You Are Making,
   The Energy to Perceive, The Syntropy Scan, Thinking Fit)
   Each page keeps its instrument's own CSS, with the old dark tokens renamed
   (--lg-*) by instruments.py. This file prints all of it on paper: the hero
   case, the journey as a form you fill in, the report as a stamped sheet.
   ========================================================================== */

/* ==== 1. THE HERO: the instrument, out of its case ======================== */
.ins-hero{grid-template-columns:minmax(300px,500px) minmax(0,1fr)}
.ins-hero .h1{text-wrap:balance}
.ins-back{display:flex;width:fit-content;align-items:center;gap:.5em;margin-bottom:22px;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:6px 0}
.ins-back span{display:inline-block;transition:transform .4s var(--spring)}
.ins-back:hover{color:var(--ink)}
.ins-back:hover span{transform:translateX(-4px)}
.ins-hero .h1{margin-top:16px}
.ins-hero .lede2{max-width:52ch}
.ins-arr{display:inline-block;transition:transform .4s var(--spring)}
.pill:hover .ins-arr{transform:translateX(3px)}
.ins-meta{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ins-meta li{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 6px;background:#fbf9f4;border:1.5px solid var(--ink);border-radius:3px;font-size:.74rem;font-weight:560;letter-spacing:.02em;box-shadow:2px 2px 0 rgba(20,19,17,.28)}
.ins-meta li:nth-child(odd){transform:rotate(-1deg)}.ins-meta li:nth-child(even){transform:rotate(.8deg)}
.ins-meta li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 1.3px var(--ink)}
.ins-meta li:last-child{background:var(--ink);color:var(--paper)}
.ins-meta li:last-child::before{box-shadow:none}

/* the case: a lid with a felt lining, a tray, and the instrument standing up out of it */
.icase{--hc:clamp(340px,min(40vw,62svh),540px);--oh:.74;--ar:.77;--tx:0;--ty:0;position:relative;width:min(560px,100%);height:var(--hc);margin:0 auto;padding:0}
.icase::after{content:"";position:absolute;left:4%;right:4%;bottom:calc(var(--hc) * -.005);height:calc(var(--hc) * .06);background:radial-gradient(rgba(20,19,17,.55) 1.1px,transparent 1.5px) 0 0/5px 5px;-webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);z-index:0}
.ic-lid{position:absolute;left:5%;right:5%;bottom:calc(var(--hc) * .205);height:calc(var(--hc) * .64);z-index:1;padding:0;border-radius:8px 8px 2px 2px;transform-origin:50% 100%;animation:icLid 1.1s var(--ease) .25s both}
.ic-lid::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grain-c),var(--coral-2);transform:translate(var(--mx),var(--my))}
.ic-lid::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2.5px solid var(--ink);pointer-events:none}
@keyframes icLid{from{transform:perspective(1100px) rotateX(-86deg)}to{transform:perspective(1100px) rotateX(0)}}
.ic-lining{position:absolute;inset:13px 13px 9px;border:2px solid var(--ink);border-radius:4px 4px 0 0;overflow:hidden;background:var(--paper-2)}
.ic-quilt{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 50%,#f58c8a 0 2.2px,rgba(20,19,17,.55) 2.3px 3px,transparent 3.3px) 0 0/24px 24px,
  repeating-linear-gradient(45deg,rgba(20,19,17,.13) 0 1px,transparent 1px 16.97px),
  repeating-linear-gradient(-45deg,rgba(20,19,17,.13) 0 1px,transparent 1px 16.97px),
  #efe6dc;
  box-shadow:inset 0 14px 18px -10px rgba(20,19,17,.45),inset 0 -8px 10px -8px rgba(20,19,17,.3)}
.ic-maker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:3px 10px 4px;background:#fbf9f4;border:1.5px solid var(--ink);font-size:.56rem;font-weight:650;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;box-shadow:1.5px 1.5px 0 rgba(20,19,17,.4)}
/* the specimen window: the instrument's old moving picture, behind glass in the lid */
.ic-window{position:absolute;inset:0;background:var(--ink);overflow:hidden}
.ic-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ic-glass{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(112deg,transparent 12%,rgba(255,255,255,.13) 12.4%,rgba(255,255,255,.04) 21%,transparent 21.4%,transparent 64%,rgba(255,255,255,.09) 64.4%,transparent 69%);box-shadow:inset 0 0 0 5px rgba(245,242,236,.07),inset 0 18px 22px -14px rgba(0,0,0,.6)}
.ic-wlabel{position:absolute;left:10px;top:9px;z-index:3;max-width:40%;line-height:1.15;padding:2px 9px 3px;border-radius:99px;background:rgba(20,19,17,.78);font-family:var(--serif);font-style:italic;font-size:.92rem;color:rgba(245,242,236,.9)}
.ic-felt{position:absolute;left:3.5%;right:3.5%;bottom:calc(var(--hc) * .165);height:calc(var(--hc) * .055);z-index:2;background:radial-gradient(rgba(20,19,17,.4) .9px,transparent 1.3px) 0 0/4px 4px,var(--grain-c),#e3807b;border:2.5px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0;box-shadow:inset 0 7px 8px -5px rgba(20,19,17,.55)}
.ic-pit{position:absolute;left:-12%;right:-12%;top:calc(var(--hc) * -.32);bottom:calc(var(--hc) * .04);overflow:hidden;z-index:3;pointer-events:none}
.ic-obj{position:absolute;left:50%;bottom:calc(var(--hc) * .115);height:calc(var(--hc) * var(--oh));aspect-ratio:var(--ar);pointer-events:auto;-webkit-tap-highlight-color:transparent;transform:translateX(-50%);animation:icRise 1.15s var(--spring) .85s both;cursor:pointer;border-radius:8px}
@keyframes icRise{from{transform:translate(-50%,72%)}to{transform:translate(-50%,0)}}
.ic-obj:focus-visible{outline:2px dashed var(--ink);outline-offset:6px}
.ic-art{display:block;width:100%;height:100%;transform-origin:50% 100%;transform:rotate(calc(var(--tx) * 2.6deg)) translateY(calc(var(--ty) * -5px));transition:transform .7s var(--spring)}
.ic-art svg{width:100%;height:100%;overflow:visible}
.ic-obj:hover .ic-art{transform:rotate(calc(var(--tx) * 2.6deg)) translateY(calc(var(--ty) * -5px - 6px))}
.icase.go .ic-art{animation:icHop .8s var(--spring)}
@keyframes icHop{0%{transform:translateY(0)}35%{transform:translateY(-14px) rotate(-2deg)}70%{transform:translateY(0) rotate(1deg)}100%{transform:none}}
.ic-tray{position:absolute;left:1.5%;right:1.5%;bottom:calc(var(--hc) * .04);height:calc(var(--hc) * .13);z-index:4;border-radius:2px 2px 9px 9px}
.ic-tray::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%),var(--grain-c),var(--coral-2);transform:translate(var(--mx),var(--my))}
.ic-tray::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2.5px solid var(--ink);box-shadow:inset 0 -6px 0 rgba(20,19,17,.12)}
.ic-clasp{position:absolute;z-index:2;top:-6px;width:26px;height:24px;border:2px solid var(--ink);border-radius:3px 3px 6px 6px;background:#fbf9f4;box-shadow:1.5px 1.5px 0 rgba(20,19,17,.35)}
.ic-clasp::after{content:"";position:absolute;left:50%;top:7px;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:1.6px solid var(--ink)}
.ic-clasp.l{left:14%}.ic-clasp.r{right:14%}
.ic-key{position:absolute;z-index:2;left:50%;top:50%;width:14px;height:20px;margin:-10px 0 0 -7px;background:radial-gradient(circle at 50% 34%,var(--ink) 0 3.4px,transparent 3.8px),linear-gradient(var(--ink),var(--ink)) 50% 72%/2.6px 8px no-repeat;opacity:.85}
.ic-tag{position:absolute;z-index:5;right:-1%;top:calc(var(--hc) * .08);display:grid;justify-items:start;gap:1px;padding:8px 12px 9px 20px;background:#fbf9f4;border:1.6px solid var(--ink);border-radius:3px 2px 2px 3px;box-shadow:2px 3px 0 rgba(20,19,17,.38);transform-origin:-30px 0;animation:icTag 5.6s ease-in-out infinite;max-width:180px}
.ic-tag::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1.4px solid var(--ink);background:var(--paper-2)}
.ic-tag::after{content:"";position:absolute;left:-28px;top:50%;width:30px;height:1.6px;background:var(--ink);transform:rotate(-18deg);transform-origin:right center}
.ic-tag b{font-size:.58rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-ink)}
.ic-tag span{font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.12}
.ic-tag small{font-size:.54rem;font-weight:640;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
@keyframes icTag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(2deg)}}
.ic-hint{position:absolute;left:0;right:0;bottom:calc(var(--hc) * -.11);display:flex;justify-content:center;align-items:center;gap:9px;font-size:.84rem;color:var(--ink-2);transition:opacity .6s}
.ic-hand{width:16px;height:16px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 1.5px var(--ink);animation:tap 1.8s var(--ease) infinite}
.icase.tried .ic-hint{opacity:0}
.ins-hero .phero-vis{padding-bottom:40px}

/* per instrument: how tall it stands, and its shape */
.ic-ground{--oh:.8;--ar:148/192}
.ic-mirror{--oh:.84;--ar:132/216}
.ic-self{--oh:.74;--ar:144/180}
.ic-energy{--oh:.62;--ar:182/178}
.ic-scan{--oh:.76;--ar:176/210}
/* Thinking Fit: no case; the dummy wheels up to a cheval mirror, and the mirror goes down the rabbit hole */
.ic-fit{--oh:.95;--ar:220/420}
.ic-fit .ic-tray,.ic-fit .ic-felt{display:none}
.ic-fit .ic-lid{left:43%;right:3%;bottom:calc(var(--hc) * .16);height:calc(var(--hc) * .76);border-radius:50% / 44%;animation:icTurn 1.2s var(--ease) .2s both;transform-origin:50% 50%}
@keyframes icTurn{from{transform:perspective(900px) rotateY(80deg)}to{transform:perspective(900px) rotateY(0)}}
.ic-fit .ic-lining{inset:11px;border-radius:50% / 44%}
.ic-fit .ic-maker{display:none}
.ic-fit .ic-wlabel{left:50%;transform:translateX(-50%);top:12%;white-space:nowrap;max-width:none}
.ic-fit .ic-lid::before{transform:translate(var(--mx),var(--my))}
.ic-fit::before{content:"";position:absolute;z-index:0;left:46%;right:8%;bottom:calc(var(--hc) * .012);height:calc(var(--hc) * .19);background:linear-gradient(var(--ink),var(--ink)) 50% 0/5px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 50% 100%/72% 5px no-repeat}
.ic-fit .ic-pit{left:-6%;right:auto;width:56%;top:calc(var(--hc) * -.2);bottom:0}
.ic-fit .ic-obj{left:42%;bottom:calc(var(--hc) * .005);animation:icRoll 1.2s var(--spring) .7s both}
@keyframes icRoll{from{transform:translate(-160%,0) rotate(-6deg)}to{transform:translate(-50%,0)}}
.ic-fit .ic-tag{right:-3%;left:auto;top:auto;bottom:calc(var(--hc) * .2)}
.ic-fit .ic-hint{bottom:calc(var(--hc) * -.1)}
.ic-fit.has-window .ic-glass{border-radius:inherit}

/* ---- the drawings come alive: the same classes as the store's, keyed to the case ---- */
.cs-b{transform-box:view-box;transition:transform .9s var(--spring)}
.icase.go .cs-b{animation:insCsShift 1.6s var(--ease)}
@keyframes insCsShift{0%,100%{transform:none}35%{transform:translateX(var(--dx,4px))}65%{transform:translateX(calc(var(--dx,4px) * -.4))}}
@media (hover:hover) and (pointer:fine){.ic-obj:hover .cs-b,.ins-sh:hover .cs-b{transform:translateX(var(--dx,4px))}}
.cs-am{transform-box:fill-box;transform-origin:50% 50%;transition:transform .8s var(--spring)}
.icase.on .cs-am,.icase.go .cs-am,.ins-rhead .cs-am{transform:scale(1.25) rotate(40deg)}
.cs-glow{opacity:0;transition:opacity .6s}
.icase.on .cs-glow,.ins-rhead .cs-glow{opacity:.85}
.cs-hm{transform-box:fill-box;transform-origin:80% 100%}
.icase.go .cs-hm{animation:insCsTap .9s var(--ease)}
@keyframes insCsTap{30%{transform:rotate(-14deg)}55%{transform:rotate(3deg)}100%{transform:none}}

.sm-sp{transform-box:view-box;transform-origin:100px 84px;animation:insSmSpin 26s linear infinite}
.icase.on .sm-sp,.ic-obj:hover .sm-sp,.ins-sh:hover .sm-sp{animation-duration:4.2s}
@keyframes insSmSpin{to{transform:rotate(360deg)}}
.sm-gl{transform:translateX(-120px);opacity:.9}
.icase.go .sm-gl,.ins-sh:hover .sm-gl{animation:insSmGlint 1.1s var(--ease)}
@media (hover:hover) and (pointer:fine){.ic-obj:hover .sm-gl{animation:insSmGlint 1.1s var(--ease)}}
@keyframes insSmGlint{to{transform:translateX(130px)}}
.sm-fr{transform-box:view-box;transform-origin:100px 198px;transition:transform .8s var(--spring)}
.icase.on .sm-fr{transform:rotate(-4deg)}
.icase.go .sm-fr{animation:insSmTurn 1.2s var(--ease)}
@keyframes insSmTurn{30%{transform:rotate(7deg)}60%{transform:rotate(-6deg)}100%{transform:rotate(-4deg)}}

.sf-pel{transform-box:view-box}
.icase.go .sf-pel{animation:insSfPel 1.1s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes insSfPel{0%{transform:none}45%{transform:translate(20px,-118px)}100%{transform:translate(41px,-96px) scale(.8)}}
.sf-patch{opacity:0;transition:opacity .3s .95s}
.icase.go .sf-patch,.icase.tried .sf-patch,.ins-rhead .sf-patch{opacity:1}
.icase.tried:not(.go) .sf-pel{opacity:0}
.sf-tk{animation:insSfTick 9s linear infinite}
.icase.on .sf-tk,.ins-sh:hover .sf-tk{animation-duration:1.6s}
@keyframes insSfTick{to{stroke-dashoffset:-48}}
.sf-bust{transform-box:fill-box;transform-origin:50% 100%}
.icase.go .sf-bust{animation:insSfTurn 1.4s var(--ease)}
@keyframes insSfTurn{30%{transform:scaleX(.93)}60%{transform:scaleX(1.03)}100%{transform:none}}

.en-nd{transform-box:view-box;transform-origin:84px 168px;transform:rotate(-62deg);transition:transform 1.1s var(--spring)}
.icase.on .en-nd{transform:rotate(46deg)}
.ins-rhead .en-nd{transform:rotate(-8deg)}
.icase.go .en-nd{animation:insEnSwing 1.3s var(--ease)}
@keyframes insEnSwing{0%{transform:rotate(-62deg)}40%{transform:rotate(64deg)}62%{transform:rotate(36deg)}80%{transform:rotate(52deg)}100%{transform:rotate(46deg)}}
@media (hover:hover) and (pointer:fine){.ins-sh:hover .en-nd{transform:rotate(30deg)}}
.en-glow,.en-rays{opacity:0;transition:opacity .5s}
.icase.on .en-glow,.icase.on .en-rays{opacity:1}
.icase.go .en-glow{animation:insFlick 1s linear .5s backwards}
@keyframes insFlick{0%,18%,36%{opacity:0}9%,27%,46%,100%{opacity:1}}
.en-fil{transition:stroke .4s}
.icase.on .en-fil{stroke:#a13f39}

.sc-w{transition:fill .35s;transition-delay:calc(var(--i) * 70ms)}
.icase.on .sc-w.on,.icase.go .sc-w.on,.ins-rhead .sc-w.on,.sc-w.lit{fill:#f58c8a}
@media (hover:hover) and (pointer:fine){.ins-sh:hover .sc-w.on{fill:#f9b7b2}}
.sc-pl{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.icase.go .sc-pl,.icase.on .sc-pl,.ins-buddy.beat .sc-pl{animation:insScPulse 1.8s var(--ease) infinite}
.icase.go .sc-pl.b,.icase.on .sc-pl.b,.ins-buddy.beat .sc-pl.b{animation-delay:.28s}
@keyframes insScPulse{0%{opacity:.9;transform:scale(1)}60%,100%{opacity:0;transform:scale(2.6)}}
.sc-ch{transform-box:fill-box;transform-origin:50% 50%}
.icase.go .sc-ch{animation:insScBeat 1.8s ease-in-out infinite}
@keyframes insScBeat{0%,40%,100%{transform:none}10%{transform:scale(1.08)}22%{transform:scale(1.03)}}
.ft-coil{transform-box:fill-box;transform-origin:50% 50%}

/* ==== 2. THE INSTRUMENT'S OWN TOKENS, PRINTED ON PAPER ===================== */
.ins{
  --lg-ground:#f5f2ec; --lg-raised:#fbf9f4; --lg-deep:#ece6db;
  --bone:#141311; --bone-70:rgba(20,19,17,.82); --bone-55:rgba(20,19,17,.68); --bone-35:rgba(20,19,17,.6);
  --line:rgba(20,19,17,.26); --line-soft:rgba(20,19,17,.14);
  --lg-accent:#a13f39; --lg-accent-2:#a13f39;
  --lg-serif:var(--serif); --lg-body:var(--sans);
  --w-page:1180px; --w-prose:640px; --pad-x:var(--gut); --sect:clamp(80px,10vw,140px);
  --card:#fbf9f4;
  color:var(--ink);
}
.ins section{position:relative;padding:var(--sect) 0}
.ins .hairline{border-top:0}
.js .ins .reveal{opacity:1;transform:none}
.ins p+p{margin-top:0}
.ins h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.02;font-size:clamp(2rem,3.7vw,3.2rem);text-wrap:balance}
.ins h3{font-family:var(--display);font-weight:700;letter-spacing:-.005em;line-height:1.1}
.ins .eyebrow{display:flex;align-items:center;gap:.6em;margin:0 0 16px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ins .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral-2);box-shadow:var(--mx) var(--my) 0 -1px var(--ink);flex:none}
.ins .eyebrow:has(.idx)::before{display:none}
.ins .eyebrow .idx{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;margin-right:.15em;border:2px solid var(--ink);border-radius:99px;background:var(--grain-c),var(--coral-l);font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;font-size:1rem;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.ins .textlink{color:var(--coral-ink);text-decoration:underline;text-underline-offset:3px}
.ins em{font-family:var(--serif)}

/* every old button becomes a printed pill you press into */
.ins .btn{--sh:var(--coral-2);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:auto;min-height:46px;padding:.55em 1.25em;border-radius:99px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:560;font-size:.95rem;letter-spacing:-.005em;line-height:1.2;text-decoration:none;box-shadow:3px 3px 0 0 var(--sh);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .3s,color .3s,opacity .3s;white-space:nowrap;cursor:pointer}
.ins .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--sh)}
.ins .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--sh)}
.ins .btn-solid{background:var(--ink);color:var(--paper)}
.ins .btn-ghost{background:transparent}
.ins .btn[disabled]{opacity:.34;transform:none;box-shadow:3px 3px 0 0 var(--sh);pointer-events:none}
.ins .contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:2.2rem}

/* ==== 3. WHAT THIS IS: instructions for use, on three pinned cards ========= */
.ins :is(.gb-about,.sm-about,.sy-about,.ep-about,.ss-about,.tf-about){padding-top:clamp(60px,7vw,100px)}
.ins :is(.gb-about,.sm-about,.sy-about,.ep-about,.ss-about,.tf-about) h2{max-width:20ch!important}
.ins .grid3{counter-reset:ab;gap:clamp(18px,2.4vw,30px)!important;margin-top:clamp(30px,4vw,52px)!important;align-items:start}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab){counter-increment:ab;position:relative;padding:26px 22px 22px;background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--coral-2);transition:transform .6s var(--spring)}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab):nth-child(1){transform:rotate(-1.1deg)}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab):nth-child(2){transform:rotate(.7deg) translateY(10px)}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab):nth-child(3){transform:rotate(-.4deg)}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab):hover{transform:rotate(0) translateY(-4px)}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab)::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab) h3{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.12;margin-bottom:.7rem}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab) h3::before{content:counter(ab);flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border:1.6px solid var(--ink);border-radius:50%;font-family:var(--sans);font-size:.72rem;font-weight:650;background:var(--coral-l);transform:translateY(-2px)}
.ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab) p{color:var(--ink-2);font-size:.98rem;line-height:1.55}
.ins :is(.gb-judge,.sm-judge,.sy-judge,.ep-judge,.ss-judge,.tf-judge){position:relative;margin-top:clamp(44px,5vw,64px)!important;padding:18px 0 0 0!important;border-top:2px solid var(--ink)!important;color:var(--ink)!important;font-size:1.12rem!important;line-height:1.5!important;max-width:62ch}
.ins :is(.gb-judge,.sm-judge,.sy-judge,.ep-judge,.ss-judge,.tf-judge) em{color:var(--coral-ink);font-size:1.08em}
.ins :is(.sy-family,.ep-family,.ss-family){margin-top:1.4rem;color:var(--ink-2);font-size:.98rem;line-height:1.6;max-width:66ch}
.ins :is(.sy-family,.ep-family,.ss-family) a{color:var(--ink);font-weight:560;text-decoration:underline;text-decoration-color:var(--coral-2);text-decoration-thickness:2px;text-underline-offset:3px}
.ins :is(.sy-family,.ep-family,.ss-family) a:hover{color:var(--coral-ink)}
.ins :is(.ep-care,.tf-care,.sm-attrib){position:relative;margin-top:1.6rem;padding:12px 14px 12px 46px;max-width:66ch;border:1.5px solid var(--ink);background:var(--paper-2);color:var(--ink-2);font-size:.9rem;line-height:1.5}
.ins :is(.ep-care,.tf-care,.sm-attrib)::before{content:"!";position:absolute;left:12px;top:12px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:700;font-size:.8rem}
.ins .sm-attrib:empty{display:none}

/* ==== 4. THE JOURNEY: a form you fill in, on the bench ===================== */
.ins [id$="Journey"]{padding:clamp(40px,6vw,90px) 0 clamp(70px,8vw,120px)}
.ins :is(.gb-shell,.sm-shell,.sy-shell,.ep-shell,.ss-shell,.tf-shell){position:relative;max-width:820px;min-height:0;margin:0 auto;padding:clamp(22px,3.4vw,46px) clamp(18px,3.6vw,52px) clamp(24px,3.4vw,44px);background:var(--card);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--coral-2)}
.ins :is(.gb-shell,.sm-shell,.sy-shell,.ep-shell,.ss-shell,.tf-shell)::before{content:"";position:absolute;left:clamp(10px,1.6vw,22px);top:0;bottom:0;width:1.5px;background:rgba(245,140,138,.65)}
.ins :is(.gb-top,.sm-top,.sy-top,.ep-top,.ss-top,.tf-top){font-size:.7rem;font-weight:600;letter-spacing:.16em;color:var(--ink-2);margin-bottom:12px}
.ins :is(.gb-top,.sm-top,.sy-top,.ep-top,.ss-top,.tf-top) > span:last-child{white-space:nowrap}
.ins :is(.gb-top,.sm-top,.sy-top,.ep-top,.ss-top,.tf-top) .mv em{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--coral-ink)}
.ins :is(.gb-bar,.sm-bar,.sy-bar,.ep-bar,.ss-bar,.tf-bar){position:relative;height:16px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1.5px),rgba(20,19,17,.28) calc(10% - 1.5px) 10%),var(--paper);margin-bottom:clamp(26px,4vh,40px)}
.ins :is(.gb-bar,.sm-bar,.sy-bar,.ep-bar,.ss-bar,.tf-bar) i{background:var(--grain-c),var(--coral-2);border-right:2px solid var(--ink);border-radius:0;transition:width .7s var(--spring)}
.ins :is(.gb-card,.sm-card,.sy-card,.ep-card,.ss-card,.tf-card) .kicker{display:inline-flex;font-size:.7rem;font-weight:620;letter-spacing:.16em;color:var(--coral-ink);margin-bottom:14px}
.ins :is(.gb-card,.sm-card,.sy-card,.ep-card,.ss-card,.tf-card) h2{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.7vw,2.25rem);line-height:1.08;letter-spacing:-.005em;margin-bottom:16px;max-width:24ch}
.ins :is(.gb-card,.sm-card,.sy-card,.ep-card,.ss-card,.tf-card) .body{color:var(--ink-2);font-size:1.08rem;line-height:1.55;margin-bottom:26px}
/* a new movement: its numeral on a coin */
.ins :is(.gb-stage,.sm-stage,.sy-stage,.ep-stage,.ss-stage) .num{display:inline-grid;place-items:center;min-width:78px;height:78px;padding:0 14px;margin-bottom:22px;border:2.5px solid var(--ink);border-radius:99px;background:var(--grain-c),var(--coral-2);box-shadow:4px 4px 0 var(--ink);font-family:var(--display);font-style:normal;font-weight:700;font-size:2rem;line-height:1;color:var(--ink);animation:insCoin .7s var(--spring)}
@keyframes insCoin{from{transform:rotate(-120deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
/* the answers: paper slips you press down */
.ins :is(.gb-opts,.sm-opts,.sy-opts,.ep-opts,.ss-opts){gap:12px;margin-bottom:10px}
.ins :is(.gb-opt,.sm-opt,.sy-opt,.ep-opt,.ss-opt,.tf-fopt){position:relative;display:block;width:100%;padding:14px 52px 15px 18px;background:#fffdf8;border:2px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--coral-l);color:var(--ink);font-size:1.02rem;line-height:1.45;transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .25s}
.ins :is(.gb-opt,.sm-opt,.sy-opt,.ep-opt,.ss-opt,.tf-fopt):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--coral-2);border-color:var(--ink);color:var(--ink)}
.ins :is(.gb-opt,.sm-opt,.sy-opt,.ep-opt,.ss-opt,.tf-fopt)::after{content:"";position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);transition:background .25s,transform .4s var(--spring)}
.ins :is(.gb-opt,.sm-opt,.sy-opt,.ep-opt,.ss-opt,.tf-fopt)[aria-pressed="true"]{background:var(--grain-c),var(--coral-l);border-color:var(--ink);color:var(--ink);transform:translate(3px,3px);box-shadow:0 0 0 var(--coral-2)}
.ins :is(.gb-opt,.sm-opt,.sy-opt,.ep-opt,.ss-opt,.tf-fopt)[aria-pressed="true"]::after{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23f5f2ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transform:scale(1.12)}
.ins .sm-opt.least[aria-pressed="true"]{background:repeating-linear-gradient(-45deg,rgba(20,19,17,.07) 0 1.2px,transparent 1.2px 6px),var(--paper-2);border-style:dashed;text-decoration:line-through;text-decoration-color:var(--coral-2);text-decoration-thickness:2px}
.ins .sm-opt.least[aria-pressed="true"]::after{background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='%23141311' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ins .sm-picked{font-family:var(--serif);color:var(--ink-2)}
.ins .sm-body2{color:var(--ink);font-weight:520}
.ins .sm-card .kicker.shift{display:inline-flex;padding:6px 12px;background:var(--ink);color:var(--paper);border:0;border-radius:3px;box-shadow:2px 2px 0 var(--coral-2);transform:rotate(-1.2deg)}
.ins .sm-card .kicker.shift::before{box-shadow:none}
/* the margin note the instrument leaves after each answer */
.ins :is(.gb-reflect,.sm-reflect,.sy-reflect,.ep-reflect,.ss-reflect){position:relative;margin:22px 0 0;padding:12px 16px 13px 18px;max-width:56ch;background:#fffdf8;border:1.5px solid var(--ink);border-left:6px solid var(--coral-2);box-shadow:2px 3px 0 rgba(20,19,17,.25);font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--ink);transform:translateY(8px) rotate(-.6deg)}
.ins :is(.gb-reflect,.sm-reflect,.sy-reflect,.ep-reflect,.ss-reflect).in{transform:rotate(-.6deg)}
.ins :is(.gb-reflect,.sm-reflect,.sy-reflect,.ep-reflect,.ss-reflect):empty{display:none}
.ins :is(.gb-ctrl,.sm-ctrl,.sy-ctrl,.ep-ctrl,.ss-ctrl,.tf-ctrl){margin-top:clamp(26px,4vh,40px);padding-top:18px;border-top:1.5px dashed rgba(20,19,17,.3)}
.ins :is(.gb-back,.sm-back,.sy-back,.ep-back,.ss-back,.tf-back){min-height:44px;color:var(--ink-2);font-weight:520;font-size:.95rem}
.ins :is(.gb-back,.sm-back,.sy-back,.ep-back,.ss-back,.tf-back):hover{color:var(--ink)}

/* The Ground Beneath: two readings on cards, and a scale of five studs */
.ins .gb-poles{gap:14px;margin-bottom:26px}
.ins .gb-pole{padding:18px 18px 16px;background:#fffdf8;border:2px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--coral-l);color:var(--ink);font-size:1.02rem;line-height:1.5;transition:background .3s,box-shadow .3s,transform .3s var(--spring)}
.ins .gb-pole .pl{font-size:.64rem;font-weight:640;letter-spacing:.16em;color:var(--coral-ink)}
.ins .gb-pole.on{background:var(--grain-c),var(--coral-l);box-shadow:4px 4px 0 var(--ink);transform:translateY(-3px)}
.ins .gb-cue{color:var(--ink-2)}
.ins .gb-cue b{font-family:var(--serif);color:var(--coral-ink)}
.ins .gb-scale::before{height:3px;left:24px;right:24px;margin-top:-1.5px;background:repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 13px)}
.ins .gb-dot{width:50px;height:50px;border:2px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--coral-2)}
.ins .gb-dot::after{width:11px;height:11px;background:var(--ink);opacity:.3}
.ins .gb-dot:hover{border-color:var(--ink);background:var(--coral-l)}
.ins .gb-dot[aria-pressed="true"]{background:var(--grain-c),var(--coral-2);transform:translate(2px,2px) scale(1.1);box-shadow:0 0 0 var(--ink)}
.ins .gb-dot[aria-pressed="true"]::after{background:var(--ink);opacity:1;transform:scale(1.3)}
.ins .gb-scale.untouched .gb-dot{animation:insStud 2.6s var(--ease) infinite}
@keyframes insStud{0%,100%{box-shadow:2px 2px 0 var(--coral-2)}50%{box-shadow:4px 4px 0 var(--coral-2)}}
.ins .gb-scale-ends{font-size:.64rem;font-weight:620;color:var(--ink-3)}
.ins .gb-scale-lab{font-family:var(--serif);color:var(--coral-ink);font-size:1.02rem}

/* Thinking Fit: a legend and a row of five keys under each statement */
.ins .tf-legend{border-bottom:1.5px dashed rgba(20,19,17,.3);font-size:.68rem;font-weight:600;color:var(--ink-2)}
.ins .tf-legend span b{display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:50%;font-family:var(--sans);font-style:normal;font-weight:650;font-size:.7rem;color:var(--ink);background:var(--coral-l);margin-right:.4rem}
.ins .tf-item{border-top:1.5px dashed rgba(20,19,17,.24)}
.ins .tf-q{font-size:1.1rem;color:var(--ink)}
.ins .tf-scale{gap:8px}
.ins .tf-s{display:grid;place-items:center;padding:0;text-align:center;height:48px;border:2px solid var(--ink);border-radius:9px;background:#fffdf8;box-shadow:3px 3px 0 var(--coral-l);color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.15rem;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .25s}
.ins .tf-s:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--coral-2);border-color:var(--ink);color:var(--ink)}
.ins .tf-s[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translate(3px,3px);box-shadow:0 0 0 var(--coral-2)}
.ins .tf-ends{font-size:.66rem;font-weight:620;color:var(--ink-3)}

/* ==== 5. THE REPORT: one printed sheet, stamped ========================== */
.ins [id$="Report"]{padding:clamp(40px,6vw,90px) 0 clamp(60px,8vw,110px)}
.ins .ins-sheet{position:relative;max-width:900px;padding:clamp(22px,3.6vw,56px) clamp(18px,4.2vw,62px) clamp(26px,4vw,52px);background:var(--card);border:2px solid var(--ink);box-shadow:9px 9px 0 var(--coral-2)}
.ins .ins-sheet::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:radial-gradient(circle at 7px 0,transparent 5px,var(--card) 5.5px) 0 100%/14px 14px repeat-x;display:none}
.ins-rhead{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 22px;padding:0 0 22px;margin-bottom:6px;border-bottom:3px double var(--ink)}
.ins-rh-art{width:clamp(60px,8vw,92px);aspect-ratio:1/1.1;grid-row:span 1}
.ins-rh-art svg{width:100%;height:100%;overflow:visible}
.ins-rh-k{font-size:.68rem;font-weight:640;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.ins-rh-n{margin-top:4px;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.04}
.ins-rh-d{margin-top:6px;font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:1rem}
.ins-rhead .stamp{right:0;top:-6px}
.ins .ins-sheet :is(.gb-rsec,.sm-rsec,.sy-rsec,.ep-rsec,.ss-rsec,.tf-rsec){padding:clamp(30px,4.4vw,52px) 0;border-top:1.5px dashed rgba(20,19,17,.32)}
.ins .ins-sheet .ins-rhead + :is(.gb-rsec,.sm-rsec,.sy-rsec,.ep-rsec,.ss-rsec,.tf-rsec){border-top:0}
.ins .ins-sheet :is(.gb-rsec,.sm-rsec,.sy-rsec,.ep-rsec,.ss-rsec,.tf-rsec):last-child{padding-bottom:0}
.ins :is(.gb-rsec,.sm-rsec,.sy-rsec,.ep-rsec,.ss-rsec,.tf-rsec) > h2{margin-bottom:20px}
.ins :is(.gb-rsec,.sm-rsec,.sy-rsec,.ep-rsec,.ss-rsec,.tf-rsec) h3{font-family:var(--display)!important;font-weight:700!important}
.ins :is(.gb-verdict,.sm-verdict,.sy-verdict,.ep-verdict,.ss-verdict,.tf-verdict){color:var(--ink);font-size:clamp(1.16rem,1.8vw,1.34rem);line-height:1.5;letter-spacing:-.005em;font-weight:420}
.ins :is(.gb-verdict,.sm-verdict,.sy-verdict,.ep-verdict,.ss-verdict) + :is(.gb-verdict,.sm-verdict,.sy-verdict,.ep-verdict,.ss-verdict){color:var(--ink-2);font-size:1.06rem}
.ins :is(.gb-lead,.sm-lead,.sy-lead,.ep-lead,.ss-lead,.tf-lead){color:var(--ink);font-size:1.08rem;line-height:1.55}
.ins :is(.ep-labp,.tf-labp){color:var(--ink-2);font-size:1.04rem;line-height:1.6}
.ins :is(.sm-mapnote,.sy-mapnote,.ep-mapnote,.ss-mapnote,.tf-mapnote){font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--ink-2)}
.ins :is(.gb-sents) p{color:var(--ink-2)}
.ins .gb-sents p::before,.ins .sm-edgesmap p::before{background:var(--coral-2);box-shadow:inset 0 0 0 1.2px var(--ink);width:8px;height:8px;top:.5em}

/* findings: slips of paper, pinned in order */
.ins :is(.gb-find,.sm-find,.sy-find,.ep-find,.ss-find,.tf-find){position:relative;padding:20px 22px 20px;background:var(--paper);border:2px solid var(--ink);border-radius:4px;box-shadow:4px 4px 0 var(--coral-l)}
.ins :is(.gb-finds,.sm-finds,.sy-finds,.ep-finds,.ss-finds,.tf-finds) > :nth-child(odd){transform:rotate(-.25deg)}
.ins :is(.gb-finds,.sm-finds,.sy-finds,.ep-finds,.ss-finds,.tf-finds) > :nth-child(even){transform:rotate(.2deg)}
.ins :is(.gb-find,.sm-find,.sy-find,.ep-find,.ss-find,.tf-find) .fk{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:640;letter-spacing:.16em;color:var(--coral-ink);margin-bottom:10px}
.ins :is(.gb-find,.sm-find,.sy-find,.ep-find,.ss-find,.tf-find) .fk::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 1.3px var(--ink)}
.ins :is(.gb-find,.sm-find,.sy-find,.ep-find,.ss-find,.tf-find) h3{font-size:1.3rem;margin-bottom:8px;line-height:1.15}
.ins :is(.gb-find,.sm-find,.sy-find,.ep-find,.ss-find,.tf-find) p{color:var(--ink-2);font-size:1rem;line-height:1.55}
.ins :is(.sm-find,.sy-find,.ep-find,.ss-find,.tf-find).calm .fk,.ins .gb-find.alignment .fk,.ins .gb-find.tension .fk{color:var(--ink-3)}
.ins :is(.sm-find,.sy-find,.ep-find,.ss-find,.tf-find).calm .fk::before,.ins .gb-find.alignment .fk::before,.ins .gb-find.tension .fk::before{background:var(--paper)}
.ins :is(.gb-find.contradiction,.gb-find.inconsistency,.tf-find.flag){box-shadow:4px 4px 0 var(--coral-2);background:#fffaf6}
.ins .tf-find.flag{background:var(--grain-c),#fde6e2}
.ins .gb-more summary{min-height:44px;color:var(--ink);font-weight:560}
.ins .gb-more summary::after{color:var(--coral-ink)}
/* the highlighted card: the one thing to take away */
.ins :is(.gb-chal,.sm-edge,.sy-edge,.ss-produce,.ep-big){background:var(--grain-c),var(--coral-l);border:2.5px solid var(--ink);border-radius:4px;box-shadow:5px 5px 0 var(--ink);padding:clamp(20px,3vw,34px)}
.ins :is(.sm-edge,.sy-edge,.ss-produce,.ep-big) p,.ins .gb-chal q{color:var(--ink);font-family:var(--serif);font-style:italic}
.ins .gb-chal .fk{color:var(--ink);font-weight:640}
.ins .gb-chal b{font-family:var(--display);font-weight:700}
.ins .ep-peat{background:var(--paper-2);border:1.5px solid var(--ink);border-radius:3px;color:var(--ink-2)}
.ins .tf-band{background:var(--grain-c),var(--coral-l);border:2.5px solid var(--ink);border-radius:4px;box-shadow:5px 5px 0 var(--ink)}
.ins .tf-band .bk{color:var(--ink);font-weight:640}
.ins .tf-band .bn{font-family:var(--display);font-weight:700;font-size:1.6rem}
.ins .tf-band .bn i{font-family:var(--serif);color:var(--coral-ink)}
.ins .tf-band p.bf{border-top:1.5px dashed rgba(20,19,17,.35);color:var(--coral-ink);font-weight:520}
/* chips, questions, practice and thinkers */
.ins .gb-chip{border:1.5px solid var(--ink);color:var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--coral-l);font-weight:520}
.ins .gb-chip.bal{border-style:dashed;color:var(--ink-2);box-shadow:none}
.ins .sy-chip,.ins .gb-loopchip{border:1.5px solid var(--ink);color:var(--ink);background:var(--coral-l);font-weight:620}
.ins :is(.gb-q,.sy-q){font-family:var(--serif);border-left:4px solid var(--coral-2);color:var(--ink)}
.ins .gb-signature{font-family:var(--serif);color:var(--ink)}
.ins .gb-signature em{font-family:var(--serif);color:inherit}
.ins :is(.gb-prac,.sm-prac,.sy-prac,.ss-prac,.ep-exps) .ctx{font-weight:640;color:var(--coral-ink)}
.ins :is(.gb-prac,.sm-prac,.sy-prac,.ss-prac,.ep-exps) > div,.ins :is(.gb-prac,.sm-prac,.sy-prac,.ss-prac,.ep-exps) > p{position:relative}
.ins :is(.gb-th,.sm-lens,.sy-lens,.ss-lens,.sy-trap){background:var(--paper);border:2px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 var(--coral-l)}
.ins .sy-trap.hit{box-shadow:4px 4px 0 var(--coral-2);background:#fffaf6}
.ins :is(.gb-th,.sm-lens,.sy-lens,.ss-lens) b,.ins .sy-trap b{font-family:var(--display);font-weight:700}
.ins :is(.gb-th,.sy-lens) .tg{font-family:var(--serif);font-size:.98rem;letter-spacing:0;color:var(--ink-2)}
.ins :is(.sm-lens,.ss-lens) dt{font-weight:640;color:var(--coral-ink)}
.ins .sy-lens .lq{font-family:var(--serif);color:var(--coral-ink)}
.ins .sm-practice span{font-family:var(--serif);border-top:2px solid var(--ink)}
.ins .sm-practice span::before{font-family:var(--serif);color:var(--coral-ink)}
.ins :is(.gb-moves) p::before{color:var(--coral-ink)}
.ins :is(.gb-actions,.sm-actions,.sy-actions,.ep-actions,.ss-actions,.tf-actions){gap:12px}
.ins :is(.gb-note,.sm-note,.sy-note,.ep-note,.ss-note,.tf-note){color:var(--ink-3);font-size:.88rem;line-height:1.5}
.ins :is(.sy-note,.ep-note,.ss-note,.tf-note) a{color:var(--coral-ink);border-bottom-color:currentColor}
/* tables */
.ins :is(.sm-tablewrap,.ep-scalewrap,.tf-scalewrap){border:2px solid var(--ink);border-radius:4px;background:var(--paper)}
.ins :is(.ep-scale,.tf-table){margin-top:0}
.ins :is(.ep-scale,.tf-table) th,.ins .sm-table thead th{font-family:var(--sans);font-weight:640;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--coral-l);padding:.8rem 1rem;border-bottom:2px solid var(--ink)}
.ins :is(.ep-scale,.tf-table) td{padding:.85rem 1rem;color:var(--ink-2);border-bottom:1px solid rgba(20,19,17,.16)}
.ins :is(.ep-scale,.tf-table) td:first-child{color:var(--ink);font-weight:520}
.ins .sm-table td:first-child{font-family:var(--serif);font-style:italic;color:var(--ink)}
.ins :is(.ep-scale,.tf-table) tbody tr:last-child td{border-bottom:0}
.ins .ep-orgline{font-family:var(--serif);border-left:4px solid var(--coral-2);color:var(--ink)}
.ins :is(.ep-limits,.tf-limits){border-top:1.5px dashed rgba(20,19,17,.3);color:var(--ink-2)}

/* the bars: an ink tube, filled with the reading */
.ins :is(.sm-b,.sy-b,.ep-b,.ss-b) .tr,.ins .tf-tr{height:12px;border:1.6px solid var(--ink);border-radius:99px;background:var(--paper-2);overflow:hidden}
.ins :is(.sm-b,.sy-b,.ep-b,.ss-b) .f{border-radius:0;border-right:1.6px solid var(--ink)}
.ins :is(.sm-b,.sy-b,.ss-b) .f.do,.ins .ep-b .f.week,.ins .tf-tr i{background:var(--grain-c),var(--coral-2)}
.ins :is(.sm-b,.sy-b,.ss-b) .f.say,.ins .ep-b .f.acct{background:var(--ink)}
.ins :is(.sm-b,.sy-b,.ss-b) .f.pr,.ins .ep-b .f.cost{background:repeating-linear-gradient(-45deg,var(--ink) 0 1.4px,transparent 1.4px 5px),var(--coral-l)}
.ins .tf-tr i{border-radius:0;border-right:1.6px solid var(--ink)}
.ins :is(.sm-b,.sy-b,.ep-b,.ss-b) .bl{font-size:.62rem;font-weight:620;color:var(--ink-2)}
.ins .sm-b.hot .bl{color:var(--coral-ink)}
.ins :is(.gb-row,.sm-row,.sy-row,.ep-row,.ss-row,.tf-row) .nm b{font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:0}
.ins :is(.sy-row,.ep-row,.ss-row,.tf-row) .qq{color:var(--ink-2);font-family:var(--serif);font-style:italic;font-size:1rem}
.ins .tf-row .nm u{font-family:var(--display);font-weight:700;color:var(--coral-ink)}
.ins :is(.ep-poles .pp,.tf-poles){font-weight:600;color:var(--ink-3)}
.ins .sm-swatch{box-shadow:0 0 0 1.5px var(--ink)}
/* The Ground Beneath: the coherence map, said and done */
.ins .gb-map .dom{font-weight:640;color:var(--coral-ink)}
.ins .gb-badge{font-weight:620;color:var(--ink-3)}
.ins .gb-badge.warn{color:var(--paper);background:var(--coral-ink);padding:2px 7px;border-radius:2px}
.ins .gb-track .pole{color:var(--ink-2)}
.ins .gb-axis::before{height:2px;margin-top:-1px;background-image:linear-gradient(90deg,rgba(20,19,17,.45) 0 5px,transparent 5px 11px)}
.ins .gb-axis::after{width:2px;height:16px;background:var(--ink)}
.ins .gb-pt.say{width:15px;height:15px;background:var(--coral-2);border:2px solid var(--ink);box-shadow:none}
.ins .gb-pt.do{width:15px;height:15px;background:var(--paper);border:2px solid var(--ink)}
.ins .gb-gapline{height:3px;margin-top:-1.5px;background:var(--coral-2)}
.ins .gb-legend{color:var(--ink-2)}
.ins .gb-legend .l-say i{background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink)}
.ins .gb-legend .l-do i{background:var(--paper);border:2px solid var(--ink)}
/* the quadrants (Energy, Scan): a printed chart, the dots inked */
.ins :is(.ep-quad,.ss-quad){border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);background:linear-gradient(rgba(20,19,17,.05) 1px,transparent 1px) 0 0/10% 10%,linear-gradient(90deg,rgba(20,19,17,.05) 1px,transparent 1px) 0 0/10% 10%,radial-gradient(circle at 100% 0,rgba(249,183,178,.55),transparent 55%)}
.ins :is(.ep-ql,.ss-ql){font-weight:620;color:var(--ink-2)}
.ins :is(.ep-axis-x,.ep-axis-y,.ss-axis-x,.ss-axis-y){font-weight:620;color:var(--ink)}
.ins :is(.ep-axis-y,.ss-axis-y){transform:rotate(-90deg) translateX(-50%)}
.ins :is(.ss-quadwrap,.ep-fieldwrap){padding-left:1.5rem}
.ins .ep-pt,.ins .ep-key .n{background:var(--coral-2);border:2px solid var(--ink);color:var(--ink);font-family:var(--sans);font-weight:650;box-shadow:2px 2px 0 var(--ink)}
.ins .ep-key b{font-family:var(--display);font-weight:700}
.ins .ep-key i{color:var(--coral-ink)}
.ins .ss-pt.do{width:16px;height:16px;background:var(--coral-2);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.ins .ss-pt.say{width:16px;height:16px;background:var(--paper);border:2px solid var(--ink)}
.ins .ss-pt.pr{width:12px;height:12px;background:var(--ink);border:0}
.ins .ss-quad svg line{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5}
.ins .ss-legend{color:var(--ink-2)}
.ins .ss-legend .l-do i{background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink)}
.ins .ss-legend .l-say i{background:var(--paper);border:2px solid var(--ink)}
.ins .ss-legend .l-pr i{background:var(--ink);border:0}
/* Thinking Fit: the radar, in ink and coral */
.ins .tf-radar .ring{stroke:rgba(20,19,17,.16)}
.ins .tf-radar .ring.mark{stroke:rgba(20,19,17,.45);display:inline;width:auto;height:auto;background:none;-webkit-mask:none;mask:none}
.ins .tf-radar .spoke{stroke:rgba(20,19,17,.16)}
.ins .tf-radar .shape{fill:rgba(245,140,138,.5);stroke:var(--ink);stroke-width:2}
.ins .tf-radar .node{fill:var(--coral-2);stroke:var(--ink);stroke-width:1.6}
.ins .tf-radar .lab{fill:var(--ink-2);font-weight:560}
.ins .tf-radar .val{font-family:var(--sans);font-weight:650;fill:var(--coral-ink)}
.ins .tf-fopt b{font-family:var(--serif);color:var(--coral-ink)}
.ins .tf-fanswer p.tension{font-family:var(--serif);border-left-color:var(--coral-2);color:var(--ink)}

/* ==== 6. THE INSTRUMENT AT WORK: a small copy keeps up with you ============= */
.ins .ins-jwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,820px) minmax(0,1fr);column-gap:clamp(16px,2.6vw,44px);align-items:start;max-width:1440px}
.ins-jwrap > [class$="-shell"]{grid-column:2;grid-row:1;width:100%}
.ins-buddy{grid-column:1;grid-row:1;justify-self:end;position:sticky;top:calc(var(--nav-h) + 36px);width:min(170px,100%);margin-top:30px;display:grid;justify-items:center;gap:12px;text-align:center}
.ib-art{width:100%;aspect-ratio:1/1.1;transform-origin:50% 100%}
.ib-art svg{width:100%;height:100%;overflow:visible}
.ib-fit .ib-art{aspect-ratio:220/420;width:62%}
.ins-buddy.bump .ib-art{animation:insBump .6s var(--spring)}
@keyframes insBump{0%{transform:none}35%{transform:translateY(-6px) rotate(-2deg)}100%{transform:none}}
.ib-cap{font-size:.8rem;line-height:1.3;color:var(--ink-2);padding:6px 10px 7px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:2px 2px 0 rgba(20,19,17,.3);transform:rotate(-1.5deg)}
.ib-cap b{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ib-scan .sc-w{transition-delay:0s}

/* ==== 7. NEXT STEP, AND THE OTHER INSTRUMENTS ============================== */
.ins-close{padding-top:clamp(30px,5vw,70px)}
.ins-next{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(26px,4.4vw,60px);background:var(--grain-c),var(--coral-l);border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.ins-next .h2{max-width:16ch}
.ins-next .sec-p{color:var(--ink);max-width:44ch}
.ins-next .wall-cta{margin-top:28px}
.ins-next-vis{display:grid;justify-items:center;gap:16px}
.ins-next-art{position:relative;width:min(230px,72%);aspect-ratio:1/1;padding:9%;isolation:isolate}
.ins-next-art::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#fbf9f4;border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.ins-next-art::after{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;border:1.5px dashed rgba(20,19,17,.35)}
.ins-next-art svg{width:100%;height:100%;overflow:visible}
.ins-next-cap{font-family:var(--serif);font-style:italic;font-size:1.05rem;text-align:center;max-width:24ch}
.ins-next .mini-box{background:#c9bfaf}
.ins-next-art .sc-w.on{fill:#f58c8a}
.ins-next-art .sc-pl{animation:insScPulse 2.4s var(--ease) infinite}.ins-next-art .sc-pl.b{animation-delay:.3s}
.ins-shelf{margin-top:clamp(56px,7vw,96px)}
.ins-shelf-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;padding-bottom:14px;margin-bottom:26px;border-bottom:2px solid var(--ink)}
.ins-shelf-h span{font-size:.76rem;font-weight:640;letter-spacing:.18em;text-transform:uppercase}
.ins-shelf-h a{font-size:.9rem;font-weight:560;color:var(--ink);text-underline-offset:3px}
.ins-shelf-row{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,2vw,28px);align-items:end;padding-bottom:16px}
.ins-shelf-row::after{content:"";position:absolute;left:-10px;right:-10px;bottom:0;height:10px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(249,183,178,.6));border-top:1.8px solid var(--ink);border-bottom:1px solid rgba(20,19,17,.45);box-shadow:0 8px 10px -6px rgba(20,19,17,.3)}
.ins-sh{position:relative;display:grid;justify-items:center;gap:8px;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent;outline-offset:3px}
.ins-sh-art{display:block;width:100%;max-width:150px;aspect-ratio:1/1.1;transition:transform .55s var(--spring)}
.ins-sh-art svg{width:100%;height:100%;overflow:visible}
.ins-sh:hover .ins-sh-art,.ins-sh:focus-visible .ins-sh-art{transform:translateY(-6px)}
.ins-sh-tag{position:relative;display:grid;justify-items:center;max-width:100%;padding:4px 10px 5px 17px;background:#fbf9f4;border:1.6px solid var(--ink);border-radius:3px 2px 2px 3px;box-shadow:2px 2px 0 rgba(20,19,17,.35);text-align:center;transform:rotate(-2deg);transition:transform .7s var(--spring),background .3s,color .3s}
.ins-sh:nth-child(even) .ins-sh-tag{transform:rotate(1.8deg)}
.ins-sh-tag::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1.4px solid var(--ink);background:var(--paper-2)}
.ins-sh-tag b{font-family:var(--serif);font-style:italic;font-weight:440;font-size:.95rem;line-height:1.1}
.ins-sh-tag small{font-size:.54rem;margin-top:2px;font-weight:640;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ins-sh:hover .ins-sh-tag,.ins-sh:focus-visible .ins-sh-tag{background:var(--ink);color:var(--paper);transform:rotate(-5deg)}
.ins-sh:hover .ins-sh-tag small,.ins-sh:focus-visible .ins-sh-tag small{color:var(--coral)}

/* the instrument in flight, from its case to the bench */
.ins-flyer{z-index:96}
.ins-buddy.waiting .ib-art{opacity:0}
.ins-buddy .ib-art{transition:opacity .2s}
/* seven days of noticing: a little checklist card */
.ins .ep-exps > *{position:relative;padding-left:40px}
.ins .ep-exps > *::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border:2px solid var(--ink);border-radius:4px;background:var(--paper);box-shadow:2px 2px 0 var(--coral-2)}

/* off-screen, everything holds still */
.ins-off *,.ins-off::before,.ins-off::after{animation-play-state:paused!important}

/* ==== 8. SMALLER SCREENS =================================================== */
@media (max-width:1180px){
  .ins .ins-jwrap{display:block}
  .ins-buddy{position:relative;top:0;display:flex;align-items:center;justify-content:center;gap:14px;width:auto;max-width:820px;margin:0 auto 18px}
  .ib-art{width:64px;flex:none}
  .ib-fit .ib-art{width:40px}
  .ib-cap{text-align:left}
  .ib-cap b{display:inline;font-size:1.2rem;margin-right:4px}
}
@media (max-width:980px){
  .ins-hero{grid-template-columns:minmax(0,1fr)}
  .ins-hero .phero-vis{min-height:0;padding:10px 0 52px}
  .icase{--hc:clamp(300px,64vw,440px);width:min(520px,100%)}
  .ins-next{grid-template-columns:1fr}
  .ins-shelf-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);gap:16px;padding:10px 4px 22px;margin:0 calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:thin}
  .ins-shelf-row::after{left:0;right:0;width:auto}
  .ins-sh{flex:0 0 clamp(120px,32vw,160px);scroll-snap-align:start}
}
@media (max-width:640px){
  .icase{--hc:min(78vw,330px)}
  .ic-tag{right:-2%;top:calc(var(--hc) * .02);padding:6px 9px 7px 17px;max-width:132px}
  .ic-tag span{font-size:.88rem}
  .ic-clasp{width:20px;height:19px}
  .ic-maker{font-size:.5rem;letter-spacing:.14em;padding:2px 7px 3px}
  .ic-wlabel{font-size:.8rem;left:9px;bottom:7px}
  .ins-meta li{font-size:.7rem}
  .ins :is(.gb-ab,.sm-ab,.sy-ab,.ep-ab,.ss-ab,.tf-ab):nth-child(n){transform:none}
  .ins :is(.gb-opt,.sm-opt,.sy-opt,.ep-opt,.ss-opt,.tf-fopt){padding:13px 46px 14px 14px;font-size:.98rem}
  .ins :is(.gb-opt,.sm-opt,.sy-opt,.ep-opt,.ss-opt,.tf-fopt)::after{right:12px}
  .ins .gb-dot{width:44px;height:44px}
  .ins .tf-s{height:46px}
  .ins .gb-track{grid-template-columns:1fr 1fr;row-gap:0}
  .ins .gb-track .gb-axis{grid-column:1/-1;grid-row:1}
  .ins .gb-track .pole{grid-row:2;font-size:.76rem}
  .ins-rhead{grid-template-columns:auto minmax(0,1fr);padding-top:54px}
  .ins-rhead .stamp{top:-4px;right:-4px}
  .ins .ins-sheet{box-shadow:6px 6px 0 var(--coral-2)}
  .ins :is(.gb-shell,.sm-shell,.sy-shell,.ep-shell,.ss-shell,.tf-shell){box-shadow:5px 5px 0 var(--coral-2)}
  .ins :is(.gb-shell,.sm-shell,.sy-shell,.ep-shell,.ss-shell,.tf-shell)::before{display:none}
}

/* ==== 9. PRINT: the report alone, on white =================================== */
@media print{
  .ins-hero,.ins-close,.ring,.foot,.fontpick,.nav,.ins-buddy,.skip,.ins [id$="Journey"],.ins :is(.gb-about,.sm-about,.sy-about,.ep-about,.ss-about,.tf-about){display:none!important}
  body{background:#fff!important}
  .ins [id$="Report"]{padding:0!important}
  .ins .ins-sheet{box-shadow:none!important;border:0!important;padding:0!important;background:#fff!important;max-width:none}
  .ins-rhead{padding-top:10px}
  .ins-rhead .stamp{top:8px;opacity:.92!important;transform:rotate(-13deg) scale(.86)!important;animation:none!important}
  .ins :is(.gb-find,.sm-find,.sy-find,.ep-find,.ss-find,.tf-find,.gb-th,.sm-lens,.sy-lens,.ss-lens,.sy-trap){box-shadow:none!important}
  .ins :is(.gb-chal,.sm-edge,.sy-edge,.ss-produce,.ep-big,.tf-band){box-shadow:none!important}
}