/* harrhys.com · core.css · colours, base elements, motion, page layout (load first) */
:root{
  --paper:#EFF2EE;--card:#FFFFFF;--ink:#0C130F;--muted:#56625A;--line:#CFD8D0;
  --sage:#1FD16A;--sage-d:#0B7F3A;--sage-l:#DEF8E7;--blue:#E8CF00;--blue-l:#FFF8C7;--blue-ink:#7A6A00;
  --done:#14B85A;--skip:#8E998F;--danger:#E0234E;--focus:#0B7F3A;
  --glow:rgba(31,209,106,.28);--grid:rgba(12,19,15,.045);
  --shadow:0 1px 2px rgba(12,19,15,.06),0 4px 14px rgba(12,19,15,.07);
  box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0px);
}
/* --mac is only used by the Spotlight search's open/close */
:root{color-scheme:light;--spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);--mac:cubic-bezier(.32,.72,0,1)}
:root[data-theme="dark"]{color-scheme:dark;
  --paper:#070A08;--card:#0F1411;--ink:#E6F2EA;--muted:#8A9A90;--line:#1F2B24;
  --sage:#2BFF88;--sage-d:#7CFFB2;--sage-l:#0C2A19;--blue:#FCEE0A;--blue-l:#2A2808;--blue-ink:#FFF27A;
  --done:#2BFF88;--skip:#55635A;--danger:#FF3B5C;--focus:#FCEE0A;
  --glow:rgba(43,255,136,.30);--grid:rgba(43,255,136,.045);--shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35)}
:root[data-theme="dark"] .primary{color:#04140B}
:root[data-theme="dark"] .primary:hover{background-color:#7CFFB2}
:root[data-theme="dark"] ul.steps input[type=checkbox]:checked::after{border-color:#04140B}
body{transition:background-color .35s var(--ease),color .35s var(--ease)}
.panel,.tool,.stat,.tag,button,.btn,input,textarea,select,header.top{transition:background-color .35s var(--ease),border-color .2s,color .35s,transform .25s var(--spring),box-shadow .25s}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;translate:0 14px;scale:.98}to{opacity:1;translate:none;scale:none}}
/* something new appearing on a page that's already open (an added item, a result, a mode switch): a short fade-up.
   Set by router.js (in-place redraws, and results filled in just after a button press) */
/* the hidden attribute always hides, whatever display a class gives the element (tools search, QR download button) */
[hidden]{display:none!important}
@keyframes mNew{from{opacity:0;translate:0 6px}}
.m-new{animation:mNew .28s var(--ease) both}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes rowflash{0%{background:var(--sage-l)}100%{background:transparent}}
@keyframes toastin{0%{opacity:0;transform:translate(-50%,24px) scale(.9)}60%{opacity:1;transform:translate(-50%,-4px) scale(1.02)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.page.enter>*{animation:rise .32s var(--ease) backwards}
.page.swap .pane2>section{animation:rise .26s var(--ease) backwards}
.page.enter>*:nth-child(2){animation-delay:.03s}.page.enter>*:nth-child(3){animation-delay:.06s}.page.enter>*:nth-child(4){animation-delay:.09s}.page.enter>*:nth-child(5){animation-delay:.12s}.page.enter>*:nth-child(n+6){animation-delay:.14s}
.page.enter .tools>*,.page.enter .stats>*,.page.enter .blist>*,.page.enter ul.steps>li{animation:rise .32s var(--ease) backwards}
.page.enter .tools>*:nth-child(1),.page.enter .stats>*:nth-child(1){animation-delay:.04s}
.page.enter .tools>*:nth-child(2),.page.enter .stats>*:nth-child(2){animation-delay:.07s}
.page.enter .tools>*:nth-child(3),.page.enter .stats>*:nth-child(3){animation-delay:.1s}
.page.enter .tools>*:nth-child(4){animation-delay:.13s}
.page.enter .tools>*:nth-child(n+5){animation-delay:.16s}
.page.enter .blist>*{animation-delay:calc(min(var(--i,0),8) * 20ms + .06s)}
.page.enter ul.steps>li{animation-delay:calc(min(var(--i,0),12) * 12ms + .05s)}
.tool:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 10px 26px rgba(38,53,46,.12)}
.tool:active{transform:translateY(-1px) scale(.98)}
.tool .ic{transition:transform .35s var(--spring)}
.tool:hover .ic{transform:scale(1.15) rotate(-6deg)}
button:active,.btn:active{transform:scale(.95)}
.tl{transition:background-color .25s var(--ease),color .25s,transform .25s var(--spring)}
.tl:active{transform:scale(.94)}
.bitem{transition:background-color .2s,transform .25s var(--spring)}
ul.steps li{transition:background-color .3s}
ul.steps input[type=checkbox]{transition:background-color .2s,border-color .2s,transform .2s var(--spring)}
ul.steps input[type=checkbox]:hover{transform:scale(1.1)}
ul.steps li.pop input[type=checkbox]{animation:pop .45s var(--spring)}
ul.steps li.pop{animation:rowflash .9s var(--ease)}
ul.steps li label{transition:color .3s}
.bar span{transition:width .7s var(--spring)!important}
.mini span{transition:width .7s var(--spring)}
.toast.show{animation:toastin .45s var(--spring) both}
.themebtn{margin-left:auto;flex:none;width:38px;height:38px;padding:0;display:grid;place-content:center;border-radius:999px;font-size:1.05rem}
/* theme helmet: size and spin are separate properties so they never fight.
   Hover only changes `scale` (always a smooth transition, even mid-spin); the click spin only animates
   `rotate`, and a full turn ends where it started, so nothing ever snaps. */
.themebtn span{display:inline-block;transition:scale .35s var(--ease),filter .35s var(--ease)}
.themebtn:hover span{scale:1.12;filter:drop-shadow(0 0 6px var(--glow))}
.themebtn.spin span{animation:helmetspin .6s var(--ease)}
@keyframes helmetspin{from{rotate:0deg}to{rotate:360deg}}
.confetti{position:fixed;top:0;left:0;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:20}
.syncdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sage);margin-right:6px;vertical-align:middle;transition:background-color .3s ease}
.syncdot.busy{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}

/* tools menu + tool UI */
.tbtn{border:0;background:transparent;font:600 1rem "Exo 2",sans-serif;cursor:pointer;color:var(--ink)}
.tbtn .car{display:inline-block;transition:transform .3s var(--spring);font-size:.8em}
.tbtn[aria-expanded="true"] .car{transform:rotate(180deg)}
.tbtn:active{transform:scale(.94)}
.tmenu{position:fixed;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(20,30,25,.18);padding:14px;display:block;columns:190px;column-gap:18px;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top left;pointer-events:none;transition:opacity .2s var(--ease),transform .3s var(--spring);max-height:calc(100vh - 90px);overflow:auto}
.tmenu.open{opacity:1;transform:none;pointer-events:auto}.tmenu .mh{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 8px 4px;padding-top:4px}
.tmenu a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;transition:background-color .15s,transform .2s var(--spring)}
.tmenu a:hover{background:var(--sage-l);transform:translateX(3px)}
.tmenu .mi{width:28px;height:22px;border-radius:6px;background:var(--blue-l);color:var(--blue-ink);display:grid;place-content:center;font-size:.7rem;font-weight:800;flex:none}
.tmenu .mcat{break-inside:avoid;margin-bottom:12px}
.tmenu .mall{column-span:all;justify-content:flex-end;color:var(--sage-d);border-top:1px solid var(--line);border-radius:0;margin-top:6px;padding-top:10px}
.tools.small{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tools.small .tool{padding:16px}.tools.small .tool h3{font-size:1.05rem;margin:10px 0 2px}.tools.small .tool p{font-size:.88rem}
.tool .ic{min-width:36px;width:auto;padding:0 6px}
.out{font:500 .92rem/1.5 "Share Tech Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px;white-space:pre-wrap;word-break:break-all;margin:8px 0 0;min-height:44px;overflow:auto;max-height:60vh}
.mono{font-family:"Share Tech Mono",ui-monospace,"Cascadia Mono",Consolas,monospace!important}
textarea.mono{font-size:.92rem}
.wrap{word-break:break-all}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:10px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:7px}
.seg button.on{background:var(--card);box-shadow:var(--shadow);color:var(--sage-d)}
.cp{padding:3px 9px;font-size:.8rem;border:1px solid var(--line)}
.good{color:var(--done)}.bad{color:var(--danger)}
tr.match td{color:var(--done);font-weight:700}
mark{background:var(--blue);color:var(--blue-ink);border-radius:3px;padding:0 1px}
.diff div{white-space:pre-wrap}.diff .add{background:rgba(111,154,126,.18);color:var(--done)}.diff .del{background:rgba(194,85,75,.14);color:var(--danger)}
.nb{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.big{font-size:2rem;font-weight:800;margin:6px 0}
.qrbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:280px}
.qrbox svg{width:min(260px,100%);height:auto;background:#fff;border-radius:10px;padding:6px}
.panel h3{margin-bottom:6px}
.spread h3{margin:0}
@media (max-width:640px){.nb{grid-template-columns:1fr}}
.badge{font-size:.78rem;font-weight:700;background:var(--blue-l);color:var(--blue-ink);border-radius:999px;padding:3px 10px;white-space:nowrap}
.fix{margin:0;padding:10px 12px;background:var(--sage-l);border-radius:8px}
.cmd{overflow-wrap:anywhere;font:600 .92rem "Share Tech Mono",ui-monospace,Consolas,monospace;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
/* .ecard had an entrance animation that replayed on every keystroke (the error decoder updates as you type); results that
   follow a button press (the example chips) now fade in via .m-new instead */
.chips{gap:6px}
/* press ripples */
@keyframes press{0%{transform:scale(1)}35%{transform:scale(.93)}70%{transform:scale(1.03)}100%{transform:scale(1)}}
.pressed{animation:press .4s var(--spring)!important}
@keyframes tapgo{0%{transform:none}35%{transform:scale(.92) rotate(-1.2deg)}70%{transform:scale(1.04) translateY(-6px)}100%{transform:scale(1.02) translateY(-4px)}}
@keyframes rowgo{0%{transform:translateY(-3px) scale(1.01)}35%{transform:scale(.97)}100%{transform:translateY(-5px) scale(1.02);background:var(--sage-l)}}
.tool.tapgo{animation:tapgo .18s var(--spring) forwards!important;border-color:var(--sage)}
.bitem.tapgo{animation:rowgo .18s var(--spring) forwards!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(var(--hh,64px) + 8px);scrollbar-gutter:stable;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 "Exo 2",system-ui,"Segoe UI",sans-serif}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05;font-weight:700;letter-spacing:.01em}
h1,h2,h3,.logo,.big,.stat strong{font-family:Rajdhani,"Exo 2",sans-serif;font-weight:700}
h1{font-size:clamp(2rem,5vw,3rem)}h2{font-size:1.5rem}h3{font-size:1.2rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* the header itself fills the iPhone status-bar / Dynamic Island strip, so nothing shows above it when scrolling */
header.top{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topin{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:10px 18px;overflow-x:auto}
.logo{font-weight:800;font-size:1.25rem;text-decoration:none;margin-right:10px;white-space:nowrap}
.logo span{color:var(--sage-d);margin-left:1px}
.tl{text-decoration:none;font-weight:600;padding:6px 11px;border-radius:999px;white-space:nowrap}
.tl:hover{background:var(--card)}
.tl.on{background:var(--sage-l);color:var(--sage-d)}
/* same gap under the nav on every page (home included); phones get a little less */
.page{max-width:1000px;margin:0 auto;padding:80px 18px 80px}
@media (max-width:699px){.page{padding-top:44px}}
.lede{color:var(--muted);margin:8px 0 24px;font-size:1.05rem}
.crumb{font-size:.9rem;color:var(--muted);margin-bottom:8px}.crumb a{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}

button,.btn{font:600 .95rem "Exo 2",sans-serif;border-radius:8px;cursor:pointer;padding:9px 15px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;display:inline-block;transition:background .15s,border-color .15s}
button:hover,.btn:hover{border-color:var(--sage)}
.primary{background:var(--sage);border-color:var(--sage);color:#22352A}.primary:hover{background:#9CC0A8}
.armed{background:var(--danger)!important;color:#fff!important}
.ghost{border-color:transparent;background:transparent;padding:4px 8px}.ghost:hover{box-shadow:none;border-color:var(--line)}
input[type=text],input[type=search],input[type=number],input[type=date],input[type=datetime-local],textarea,select{font:500 1rem "Exo 2",sans-serif;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--sage)}
label.f{display:flex;flex-direction:column;font-size:.88rem;font-weight:700;gap:4px}

/* hero + tool grid */
.hero{margin-bottom:28px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
/* tiles are slightly see-through so the drifting background lights show through them */
:root{--tile:color-mix(in srgb,var(--card) 86%,transparent)}
.tool{display:block;text-decoration:none;background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow);transition:border-color .15s}
.tool:hover{border-color:var(--sage)}
.tool .ic{width:36px;height:36px;border-radius:9px;display:grid;place-content:center;font-weight:800;font-size:.95rem}
.tool:nth-child(odd) .ic{background:var(--sage-l);color:var(--sage-d)}.tool:nth-child(even) .ic{background:var(--blue-l);color:var(--blue-ink)}
.tool h3{margin:12px 0 4px}
.tool p{margin:0;color:var(--muted);font-size:.95rem}
.panel{background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 26px}
.stat{background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat strong{display:block;font-size:2.2rem;line-height:1;font-weight:800}.stat span{color:var(--muted);font-size:.92rem}

/* builds */
.blist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.bitem{display:grid;grid-template-columns:1fr 160px 70px;gap:14px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line);text-decoration:none}
.bitem:hover{background-color:var(--card)}
.bitem .name{font-weight:800}.bitem .meta{font-size:.86rem;color:var(--muted)}
.mini{height:10px;background:var(--line);border-radius:5px;overflow:hidden}.mini span{display:block;height:100%;background:var(--done)}
.pct{font-weight:800;text-align:right}
.empty{padding:28px 18px;border:1px dashed var(--line);border-radius:10px;text-align:center;color:var(--muted)}.empty p{margin:0 0 12px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs .on{background:var(--sage-l);border-color:var(--sage);color:var(--sage-d)}

.tag{background:var(--blue-l);color:var(--blue-ink);border:1px solid var(--blue);border-radius:12px;padding:16px 18px 14px;margin:14px 0 8px}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tag label{display:flex;flex-direction:column;font-size:.82rem;font-weight:700}
.tag input{margin-top:3px;font:600 1rem "Exo 2",sans-serif;padding:7px 9px;border:1px solid var(--blue);border-radius:6px;background:var(--card);color:var(--ink);width:100%}
/* builds: make / model / user / asset, plus the saved-model bar under them */
.fields.f4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.fields.f4{grid-template-columns:1fr 1fr}}
.mbar{gap:6px;margin-top:10px}.mbar [hidden],.mbar:has(>[hidden]:only-child){display:none}
.mbar button{padding:4px 10px;font-size:.85rem}
.mlabel{font:400 .78rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;margin-right:2px}
.mchip{display:inline-flex;border:1px solid var(--blue);border-radius:3px;background:var(--card);overflow:hidden}
.mchip button{border:0;border-radius:0;background:transparent;color:var(--ink)}
.mchip button+button{border-left:1px solid var(--blue);color:var(--muted);padding:4px 8px}
.mchip button+button:hover{color:var(--danger)}
.meter{display:flex;align-items:center;gap:12px;margin-top:14px}
.bar{flex:1;height:10px;background:var(--card);border-radius:5px;overflow:hidden}.bar span{display:block;height:100%;background:var(--sage);transition:width .3s}
.count{font-weight:800;font-size:1.2rem;min-width:64px;text-align:right}
.win{margin:16px 0 0;padding:12px 16px;border:1px solid var(--sage);background:var(--card);border-radius:8px;font-weight:700}
section.sec{margin-top:26px}
.shead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px}
.scount{color:var(--muted);font-weight:700;font-size:.9rem}
ul.steps{list-style:none;margin:0;padding:0}
ul.steps li{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line)}
ul.steps input[type=checkbox]{appearance:none;width:24px;height:24px;flex:none;border:1.5px solid var(--skip);border-radius:6px;margin:0;cursor:pointer;display:grid;place-content:center;background:var(--card)}
ul.steps input[type=checkbox]:checked{background:var(--done);border-color:var(--done)}
ul.steps input[type=checkbox]:checked::after{content:"";width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
ul.steps li label{flex:1;cursor:pointer}
ul.steps li.is-done label{color:var(--muted);text-decoration:line-through}
ul.steps li.is-na label{color:var(--skip);text-decoration:line-through}
.opt{font-size:.75rem;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-left:6px}
.na{padding:3px 9px;font-size:.8rem}li.is-na .na{background:var(--skip);color:#fff}
.tstep{display:grid;grid-template-columns:1fr auto auto auto auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.addform{display:grid;grid-template-columns:1fr 180px auto auto;gap:8px;align-items:end;margin-top:20px}
.chk{display:flex;gap:6px;align-items:center;font-size:.9rem;font-weight:700;white-space:nowrap}

/* password */
.pw{font:700 clamp(1.1rem,3vw,1.6rem)/1.3 "Share Tech Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;word-break:break-all;padding:16px;border:1px dashed var(--sage);border-radius:10px;background:var(--sage-l);margin-bottom:14px}
.strength{height:10px;border-radius:5px;background:var(--line);overflow:hidden;margin:6px 0 2px}.strength span{display:block;height:100%;transition:width .35s cubic-bezier(.22,1,.36,1),background-color .35s ease}
input[type=range]{width:100%;accent-color:var(--sage-d)}
.opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0}

/* subnet */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
table.kv{width:100%;border-collapse:collapse}
table.kv td{padding:8px 4px;border-bottom:1px solid var(--line)}
table.kv td:first-child{color:var(--muted);font-weight:600;width:45%}
table.kv td:last-child{font:600 1rem "Share Tech Mono",ui-monospace,Consolas,monospace}
.err{color:var(--danger);font-weight:700;margin-top:8px}
textarea.big{min-height:55vh;font:500 1rem/1.6 "Exo 2",sans-serif}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
.toast.show{opacity:1}
footer{max-width:1000px;margin:0 auto;padding:0 18px 40px;color:var(--muted);font-size:.85rem}

@media (max-width:640px){
  
  .fields,.fields.f4,.stats,.grid2{grid-template-columns:1fr}
  .bitem{grid-template-columns:1fr 54px}.bitem .mini{display:none}
  .addform{grid-template-columns:1fr}
  .tstep{grid-template-columns:1fr auto auto auto}.tstep .optb{display:none}
  
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* fluid hovers (override earlier per-element transitions that skipped transform) */
.tool{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .3s ease,background-color .35s ease;will-change:transform;backface-visibility:hidden}
.tool:hover{transform:translate3d(0,-5px,0);box-shadow:0 16px 32px rgba(38,53,46,.13)}
:root[data-theme="dark"] .tool:hover{box-shadow:0 16px 32px rgba(0,0,0,.35)}
.tool:active{transform:translate3d(0,-2px,0) scale(.98)}
.tool .ic{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.bitem{position:relative;border-radius:10px;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),background-color .3s ease;will-change:transform}
.bitem:hover{z-index:1;transform:translate3d(0,-3px,0) scale(1.01);box-shadow:0 10px 24px rgba(38,53,46,.12)}
:root[data-theme="dark"] .bitem:hover{box-shadow:0 10px 24px rgba(0,0,0,.35)}
button,.btn{transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .35s ease}
.tl{transition:background-color .3s ease,color .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.tmenu a{transition:background-color .25s ease,transform .4s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.tool,.bitem,button,.btn,.tl,.tmenu a{transition:none!important}}