/* Arizal portfolio. All colors and fonts are tokens in the first :root block. */
/* Reset: the preview environment applied these automatically, a normal page needs them. */
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

/* LAYOUT: fixed vertical rail on the left, then a stage of hairline cells. A wordmark band on top, then a split:
   sticky left cell holds a 3D ASCII object that changes form and spins with scroll (plus three layers of drifting
   character dust for parallax), right column is a stack of cells: intro, work, profile, contact.
   Placeholder content: replace projects, experience, email and links. */
:root{
  --bg:#13201a; --fg:#e8ecdf; --dim:#9fb2a4; --line:rgba(232,236,223,.34); --ghost:rgba(232,236,223,.2);
  --accent:#f2c14e; --on-accent:#13201a; --panel:#1b2c23;
  --f-display:"Martian Mono","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-body:"Geist","Helvetica Neue",Arial,sans-serif;
  --rail:48px; --pad:clamp(16px,2.4vw,32px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#e3e9df; --fg:#12201a; --dim:#4d5f53; --line:rgba(18,32,26,.4); --ghost:rgba(18,32,26,.2);
    --accent:#8a5a00; --on-accent:#ffffff; --panel:#d6dfd1; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#e3e9df; --fg:#12201a; --dim:#4d5f53; --line:rgba(18,32,26,.4); --ghost:rgba(18,32,26,.2);
  --accent:#8a5a00; --on-accent:#ffffff; --panel:#d6dfd1; color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font:500 .72rem/1.4 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.clock{font-variant-numeric:tabular-nums}

/* rail */
/* The rail is sized to the LARGE viewport (lvh) so it never resizes when the mobile browser's URL bar hides or shows.
   Its content is laid out against the SMALL viewport (svh) via the bottom padding, so the theme button and clock stay
   put and always remain visible (the URL bar never covers them). */
.rail{position:fixed;top:0;left:0;width:var(--rail);height:100vh;height:100lvh;z-index:30;background:var(--bg);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 calc(env(safe-area-inset-bottom,0px) + 14px);
  padding-bottom:calc(100vh - 100svh + env(safe-area-inset-bottom,0px) + 14px);
  padding-bottom:calc(100lvh - 100svh + env(safe-area-inset-bottom,0px) + 14px)}
@supports not (height:100svh){.rail{height:100%;bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}}
.rail-brand{display:block;width:30px;line-height:0;color:var(--fg)}
.rail-brand svg{display:block;width:100%;height:auto}
.rail-brand .cur{animation:blink 1.1s steps(1) infinite}
.rail-nav{display:flex;flex-direction:column;align-items:center;gap:26px}
.rail a,.rail button{font:500 .72rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.rail-nav a{writing-mode:vertical-rl;transform:rotate(180deg);padding:4px 6px}
.rail-nav a[data-on]{color:var(--accent)}
.rail-nav a[data-on]{font-weight:700}
.rail-tools{display:flex;flex-direction:column;align-items:center;gap:14px}
.rail-clock{writing-mode:vertical-rl;transform:rotate(180deg);font:500 .66rem var(--f-display);letter-spacing:.1em;color:var(--dim)}
#themeBtn{width:32px;height:32px;display:grid;place-items:center;background:none;border:1px solid var(--line);cursor:pointer;font-size:.95rem}
@media (max-width:640px){:root{--rail:44px}.rail-clock{display:none}}

.stage{margin-left:var(--rail);border-bottom:1px solid var(--line)}

/* top strip + wordmark + ticker */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.strip p{background:var(--bg);padding:11px var(--pad)}
@media (max-width:700px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip p:nth-child(3){display:none}}
.mark{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.mark canvas{display:block;width:100%;height:clamp(230px,27vw,440px);touch-action:pan-y}
@media (max-width:760px){.mark canvas{height:240px}}
/* wordmark: the letters shrink on scroll inside the canvas (see drawMark in js/app.js), so the background grid keeps its full size. */
.ticker{border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding-block:.45em}
.track{display:flex;width:max-content;animation:slide 70s linear infinite}
.track span{flex:none;padding-right:2ch;font:300 clamp(1rem,2.2vw,1.6rem)/1.3 var(--f-display)}
.track b{font-weight:700}
.track i{font-style:normal;color:var(--dim)}
@keyframes slide{to{transform:translateX(-50%)}}

/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
.obj{position:sticky;top:0;height:100vh;height:100svh;min-height:420px;border-right:1px solid var(--line);background:var(--bg);overflow:hidden}
.obj canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;margin:10px var(--pad);padding:5px 8px;background:var(--bg);font:500 .66rem/1.5 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums;pointer-events:none;max-width:calc(100% - 2 * var(--pad))}
.hud.tl{left:0;top:0}.hud.tr{right:0;top:0;text-align:right}.hud.bl{left:0;bottom:0}.hud.br{right:0;bottom:0;text-align:right}
.hud b{color:var(--fg);font-weight:600}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .obj{height:clamp(210px,60vw,340px);min-height:0;border-right:0;border-bottom:1px solid var(--line);z-index:6}
  .hud.bl,.hud.br{display:none}
  section[id]{scroll-margin-top:clamp(210px,60vw,340px)}
}

/* cells */
.flow{min-width:0}
.cell{border-bottom:1px solid var(--line);padding:var(--pad)}
.cells{display:grid;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.cells>*{background:var(--bg);padding:var(--pad);min-width:0}
.head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px 20px;border-bottom:1px solid var(--line);padding:var(--pad)}
.head h2{font:700 clamp(2.6rem,8vw,7rem)/.9 var(--f-display);letter-spacing:-.045em;text-transform:uppercase}

/* intro */
.intro{display:grid;gap:clamp(20px,3vw,40px);padding:clamp(22px,4vw,56px) var(--pad) var(--pad)}
.lead{font-size:clamp(1.35rem,2.4vw,2.25rem);line-height:1.25;letter-spacing:-.015em;text-wrap:pretty}
.hint{display:flex;gap:10px;align-items:center}
.blink{color:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.facts{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:0}
.facts dd{margin-top:8px;font-size:.95rem}
@media (max-width:1100px){.facts{grid-template-columns:minmax(0,1fr)}}

/* projects */
.proj{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);border-bottom:1px solid var(--line);transition:background .2s}
.ptext{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:var(--pad);min-height:clamp(240px,26vw,330px);min-width:0}
.pmeta{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}
.ttl{font:600 clamp(1.7rem,3.6vw,3rem)/1.05 var(--f-display);letter-spacing:-.035em;overflow-wrap:anywhere}
.desc{margin-top:.8em;max-width:46ch;color:var(--dim);font-size:.95rem;text-wrap:pretty}
.pcan{position:relative;border-left:1px solid var(--line);min-height:150px}
.pcan canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (hover:hover){.proj:hover{background:var(--panel)}.proj:hover .ttl{color:var(--accent)}}
@media (max-width:700px){
  .proj{grid-template-columns:minmax(0,1fr)}
  .pcan{border-left:0;border-top:1px solid var(--line);height:220px}
  .ptext{min-height:0}
}

/* profile */
.statement{font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.second{margin-top:1.2em;color:var(--dim);max-width:56ch}
.svc{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc strong{display:block;font:600 1rem/1.3 var(--f-display);letter-spacing:-.01em}
.svc span{display:block;margin-top:8px;color:var(--dim);font-size:.93rem}
@media (max-width:640px){.svc{grid-template-columns:minmax(0,1fr)}}
.exp li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:4px 16px;padding-block:12px;border-top:1px solid var(--line)}
.exp li:first-of-type{border-top:0;padding-top:0}
.exp li:last-of-type{padding-bottom:0}
.exp time{font:500 .78rem var(--f-display);color:var(--dim);font-variant-numeric:tabular-nums}
.exp strong{font-weight:600}
.exp em{display:block;margin:3px 0 4px;font:600 .68rem/1.4 var(--f-display);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.exp span{display:block;color:var(--dim);font-size:.92rem}
@media (max-width:480px){.exp li{grid-template-columns:minmax(0,1fr)}}
.rampcell p{max-width:46ch;color:var(--dim);margin-bottom:18px}
.ramp{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));border:1px solid var(--line)}
.ramp li{display:grid;justify-items:center;gap:6px;padding:12px 0 8px;border-left:1px solid var(--line)}
.ramp li:first-child{border-left:0}
.ramp b{font:600 clamp(1rem,2.4vw,1.8rem)/1 var(--f-display)}
.ramp small{font:500 .6rem var(--f-display);color:var(--dim)}

/* contact */
.big{margin-top:16px;font:700 clamp(2.4rem,6.4vw,5.6rem)/.95 var(--f-display);letter-spacing:-.05em;white-space:pre-line;overflow-wrap:anywhere}
.mailcell{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.mail{font:500 clamp(1.05rem,2.4vw,1.9rem)/1.2 var(--f-display);overflow-wrap:anywhere;user-select:all}
.btn{font:600 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:.9em 1.2em;border:1px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,color .15s}
.soc{grid-template-columns:repeat(3,minmax(0,1fr))}
.soc a{display:flex;justify-content:space-between;gap:10px;font:500 .85rem var(--f-display)}
@media (max-width:640px){.soc{grid-template-columns:minmax(0,1fr)}}
.foot{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:0}
@media (max-width:640px){.foot{grid-template-columns:minmax(0,1fr)}}

/* project links on the landing page */
.proj{position:relative}
.ttl a{color:inherit}
.ttl a::after{content:"";position:absolute;inset:0;z-index:1}
.go{margin-top:1.1em;color:var(--accent)}
.badge,.ab{font:600 .7rem/1.4 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.badge{margin-bottom:.9em}
.ab{display:block;margin-top:.6em}
.more{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;gap:8px clamp(14px,3vw,40px);padding:var(--pad);border-bottom:1px solid var(--line);transition:background .2s,color .2s}
.more-t{font:700 clamp(1.8rem,4.4vw,3.6rem)/1 var(--f-display);letter-spacing:-.04em;text-transform:uppercase}
.more-n{font:500 .74rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.more-a{font:600 clamp(1.4rem,3vw,2.4rem)/1 var(--f-display)}
@media (hover:hover){.more:hover{background:var(--fg);color:var(--bg)}.more:hover .more-n{color:inherit}}
@media (max-width:640px){.more{grid-template-columns:minmax(0,1fr) auto}.more>.label{grid-column:1/-1}.more-n{grid-column:1/-1}}

/* archive view */
.mark.sm canvas{height:clamp(150px,17vw,270px)}
@media (max-width:760px){.mark.sm canvas{height:160px}}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:12px var(--pad);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:.6em .9em;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,color .15s}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.arow{display:grid;grid-template-columns:4.2rem minmax(0,1fr) 7rem 8.5rem;gap:6px clamp(10px,1.6vw,24px);align-items:baseline;padding:clamp(16px,2vw,24px) var(--pad);border-bottom:1px solid var(--line);color:inherit;transition:background .2s}
.arow[data-on]{background:var(--panel)}
.ay{font:500 .78rem var(--f-display);color:var(--dim);font-variant-numeric:tabular-nums}
.am{display:block;min-width:0}
.at{display:block;font:600 clamp(1.25rem,2.3vw,1.9rem)/1.1 var(--f-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.ad{display:block;margin-top:.5em;color:var(--dim);font-size:.92rem;max-width:50ch}
.ak{font:500 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.al{font:600 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--dim)}
a.arow .al{color:var(--accent)}
@media (max-width:760px){
  .arow{grid-template-columns:minmax(0,1fr) auto}
  .ay{grid-column:1;grid-row:1}
  .ak{grid-column:2;grid-row:1}
  .am{grid-column:1 / -1;grid-row:2}
  .al{grid-column:1 / -1;grid-row:3;text-align:left}
}
.arlist li[hidden]{display:none}

/* case study view */
.cs-head{display:grid;gap:18px;padding:clamp(22px,4vw,56px) var(--pad);border-bottom:1px solid var(--line)}
.cs-head h1{margin:0;font:700 clamp(2.6rem,9vw,8.5rem)/.92 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;overflow-wrap:anywhere}
.cs-lead{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.3;max-width:48ch;text-wrap:pretty}
.cs-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-facts dd{margin-top:8px;font-size:.95rem}
@media (max-width:900px){.cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cs-facts{grid-template-columns:minmax(0,1fr)}}
.cmp{border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.cmp-stage canvas{display:block;width:100%;height:clamp(240px,34vw,520px);touch-action:pan-y;cursor:ew-resize}
.cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px var(--pad);border-top:1px solid var(--line)}
.cmp-bar input[type=range]{flex:1 1 220px;min-width:0;accent-color:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px}
.legend span{font:500 .72rem var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.legend b{font-weight:700;color:var(--fg);margin-right:.5em}
.legend .a b{color:var(--accent)}
.note{padding:10px var(--pad);border-top:1px solid var(--line)}
.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-grid .wide{grid-column:1 / -1}
.cs-grid p{max-width:60ch}
.cs-grid h2{margin-bottom:14px}
@media (max-width:760px){.cs-grid{grid-template-columns:minmax(0,1fr)}}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:12px;padding-block:12px;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0;padding-top:0}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 .78rem var(--f-display);color:var(--dim);padding-top:.2em}
.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics strong{display:block;margin-top:10px;font:700 clamp(1.8rem,4vw,3.2rem)/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media (max-width:560px){.metrics{grid-template-columns:minmax(0,1fr)}}
.cs-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-nav a{display:block}
.cs-nav .nt{display:block;margin-top:8px;font:600 clamp(1rem,1.8vw,1.4rem)/1.2 var(--f-display);letter-spacing:-.02em;overflow-wrap:anywhere}
@media (max-width:640px){.cs-nav{grid-template-columns:minmax(0,1fr)}}

/* boot loader (ASCII scan). Hidden unless the head script in index.html adds .booting to <html>.
   It sits right of the rail and under #fx (z 35), so the page wipe can run over it. */
#boot{display:none}
html.booting #boot{position:fixed;top:0;bottom:0;right:0;left:var(--rail);z-index:34;display:grid;place-items:center;padding:var(--pad);background:var(--bg);color:var(--fg);animation:bootkill .01s 8s forwards}
@keyframes bootkill{to{opacity:0;visibility:hidden}}
.boot-box{width:min(92%,520px);display:grid;gap:14px}
.boot-top,.boot-bot{display:flex;justify-content:space-between;gap:12px}
.boot-scan{margin:0;padding:14px 16px;height:calc(11em + 30px);border:1px solid var(--line);white-space:pre;overflow:hidden;font:500 clamp(.62rem,2.9vw,1rem)/1.1 var(--f-display)}
.boot-scan .m{color:var(--fg)}
.boot-scan .u{color:var(--dim)}
.boot-scan .s{color:var(--accent);font-weight:500}
.boot-pct{font-variant-numeric:tabular-nums;color:var(--fg)}

/* page transition overlay */
#fx{position:fixed;top:0;bottom:0;right:0;left:var(--rail);width:calc(100% - var(--rail));height:100%;z-index:35;pointer-events:none;display:none}
#fx.on{display:block}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track,.blink,.rail-brand .cur{animation:none}
  .proj,.btn,.more,.arow,.chip{transition:none}
}

/* hover styles only where a real hover exists; on touch screens :hover sticks after a tap */
@media (hover:hover) and (pointer:fine){
  .rail-brand:hover,.rail-nav a:hover,.soc a:hover,.foot a:hover,.cs-nav a:hover .nt,a.arow:hover .at{color:var(--accent)}
  #themeBtn:hover{border-color:var(--accent);color:var(--accent)}
  .btn:hover{background:var(--fg);color:var(--bg)}
  .chip:hover{border-color:var(--fg)}
}
a.arow:focus-visible .at{color:var(--accent)}
.rail a,.rail button{-webkit-tap-highlight-color:transparent}

/* ---------- scroll ruler (custom scrollbar) ----------
   The native bar is hidden (it was an overlay that also resized the layout on some phones) and replaced by #sbar, built in
   app.js. Same trick as .rail: the box is sized to the large viewport so it never resizes when the URL bar hides, and its
   padding keeps the ruler inside the small viewport. All colors are theme tokens. */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
#sbar{--sbw:14px;position:fixed;top:0;right:0;width:var(--sbw);height:100vh;height:100lvh;z-index:31;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 calc(env(safe-area-inset-bottom,0px) + 14px);
  padding-bottom:calc(100vh - 100svh + env(safe-area-inset-bottom,0px) + 14px);
  padding-bottom:calc(100lvh - 100svh + env(safe-area-inset-bottom,0px) + 14px);
  opacity:.55;transition:opacity .25s;touch-action:none}
@supports not (height:100svh){#sbar{height:100%;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}}
@media (min-width:1000px){#sbar{--sbw:22px}}
html.booting #sbar{opacity:0;visibility:hidden}
html.sb-on #sbar{opacity:1}
.sb-track{position:relative;width:100%;height:100%}
/* ticks: short minor tick every 8px, long major tick every 40px (a ruler / pixel grid) */
.sb-track::before,.sb-fill{content:"";position:absolute;top:0;right:0;width:100%;
  background-image:linear-gradient(to bottom,var(--tick) 1px,transparent 1px),linear-gradient(to bottom,var(--tick) 1px,transparent 1px);
  background-size:6px 8px,100% 40px;background-position:right top,right top;background-repeat:repeat-y}
.sb-track::before{--tick:var(--ghost);bottom:0}
.sb-fill{--tick:var(--fg);height:0;overflow:hidden}
.sb-notches{position:absolute;inset:0}
.sb-notches i{position:absolute;right:0;width:calc(100% + 6px);height:2px;margin-top:-1px;background:var(--accent)}
.sb-thumb{position:absolute;top:0;left:0;right:0;height:30px;border:1px solid var(--accent);border-left-width:2px;
  background:var(--panel);background:color-mix(in srgb,var(--accent) 16%,transparent);will-change:transform}
.sb-thumb::after{content:"";position:absolute;top:50%;right:0;width:calc(100% + 8px);height:1px;background:var(--accent)}   /* the scan head */
.sb-chip{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);padding:5px 7px;white-space:nowrap;
  font:600 10px/1 var(--f-display);letter-spacing:.08em;color:var(--accent);background:var(--bg);border:1px solid var(--accent);
  opacity:0;transition:opacity .2s,transform .2s}
html.sb-on .sb-chip,#sbar:hover .sb-chip{opacity:1;transform:translate(0,-50%)}
@media (hover:hover) and (pointer:fine){   /* mouse: the ruler is interactive (on touch it stays display-only) */
  #sbar{pointer-events:auto;cursor:grab}
  #sbar:hover{opacity:1}
  html.sb-drag #sbar{cursor:grabbing}
  html.sb-drag{scroll-behavior:auto;user-select:none}
}
@media (prefers-reduced-motion:reduce){#sbar,.sb-chip{transition:none}}