:root{
  color-scheme: light;
  /* theme colours (the dark theme redefines them at the end of this file): the page, surfaces on it (cards, panels, the
     workspace), raised ones (menus, pop-ups); the rgb of hairlines and tints, and of shadows; ink as a surface (primary
     buttons, pressed segments) and what is written on it */
  --bg:#fff; --sf:#fff; --sf2:#fff; --lnc:20,17,46; --shd:20,17,46; --solid:#14112E; --on-solid:#fff;
  --ink:#14112E; --ink2:#4A4763; --ink3:#77738E; --ink4:#A6A3B7;
  --canvas:#FAF8F3; --canvas2:#F4F0E7; --canvas3:#ECE6D9;
  --hair:rgba(var(--lnc),.08); --hair2:rgba(var(--lnc),.12);
  --night:#0F0C29; --night2:#17133A;
  --honey:#FFD166; --honey-soft:#FFF4D6; --amber:#F5A524; --gold:#D98E12; --cocoa:#3B2410;
  --indigo:#2E2A78; --violet:#6D4AFF; --ok:#16A34A;
  --max:1560px; --gut:clamp(20px,3.4vw,48px);
  --disp:"Manrope","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --sans:"Inter","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sh1:0 1px 2px rgba(var(--shd),.05),0 6px 16px -8px rgba(var(--shd),.14);
  --sh2:0 2px 4px rgba(var(--shd),.04),0 22px 44px -22px rgba(var(--shd),.26);
  --sh3:0 4px 10px rgba(var(--shd),.04),0 48px 96px -40px rgba(var(--shd),.40);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink2);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg{display:block;flex-shrink:0}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-family:var(--disp);text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:10px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--amber)}
.h2{font-size:clamp(34px,4vw,58px);font-weight:800;line-height:1.04;letter-spacing:-.04em}
:lang(zh) .h2{letter-spacing:-.01em;line-height:1.18}
.lede{font-size:clamp(16px,1.3vw,19px);line-height:1.65;color:var(--ink2)}
em.accent{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-.01em;padding:0 .04em .06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C52 4 128 3 197 7' fill='none' stroke='%23FFD166' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/100% .2em no-repeat}
:lang(zh) em.accent{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit;padding:0 .08em;background:linear-gradient(180deg,transparent 62%,var(--honey) 62%,var(--honey) 92%,transparent 92%)}
.sec-head{max-width:780px}
.sec-head .h2{margin-top:18px}
.sec-head .lede{margin-top:18px;max-width:620px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lede{margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 20px;border-radius:13px;font:700 15px/1 var(--sans);white-space:nowrap;transition:background .15s,box-shadow .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn svg.go{transition:transform .15s}
.btn:hover svg.go{transform:translateX(3px)}
.btn-honey{color:var(--cocoa);background:linear-gradient(180deg,#FFDA7E,#FFC847);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(59,36,16,.18),0 10px 24px -10px rgba(217,142,18,.75)}
.btn-honey:hover{background:linear-gradient(180deg,#FFD46B,#FFC033)}
.btn-dark{color:var(--on-solid);background:var(--solid);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -10px rgba(var(--shd),.6)}
.btn-dark:hover{background:#262151}
.btn-ghost{color:var(--ink);background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2),0 1px 2px rgba(var(--shd),.05)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(var(--lnc),.2),0 1px 2px rgba(var(--shd),.05)}
/* a sentence-long button ("See all 211 tools in Convert") wraps on a phone instead of widening the page */
.dm-more .btn{max-width:100%;height:auto;min-height:48px;padding-block:14px;white-space:normal;text-align:center;line-height:1.25}
.btn-sm{height:40px;padding:0 16px;border-radius:11px;font-size:14.5px}
.btn-lg{height:58px;padding:0 28px;border-radius:16px;font-size:16.5px}

/* file tiles: format label, or glyph + label; AI squares */
.ft{--w:36px;--bgc:var(--sf);position:relative;flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;width:var(--w);height:calc(var(--w)*1.24);padding-bottom:calc(var(--w)*.16);border-radius:calc(var(--w)*.2);border-top-right-radius:calc(var(--w)*.06);background:var(--c);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 8px -3px rgba(var(--shd),.3)}
@supports (background:color-mix(in srgb,red 50%,white)){
  .ft{background:linear-gradient(165deg,color-mix(in srgb,var(--c) 76%,#fff) 0%,var(--c) 64%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 10px -4px color-mix(in srgb,var(--c) 75%,transparent)}
}
.ft::before{content:"";position:absolute;top:0;right:0;width:calc(var(--w)*.32);height:calc(var(--w)*.32);border-bottom-left-radius:calc(var(--w)*.09);background:linear-gradient(225deg,var(--bgc) 50%,rgba(255,255,255,.5) 50%)}
.ft>b{display:block!important;margin:0!important;padding:0!important;background:none!important;font:800 calc(var(--w)*.26)/1 var(--disp)!important;letter-spacing:.02em!important;color:#fff!important;white-space:nowrap!important}
.ft>b.l4{font-size:calc(var(--w)*.23)!important;letter-spacing:0!important}
.ft>b.l5{font-size:calc(var(--w)*.2)!important;letter-spacing:-.02em!important}
.ft.g{justify-content:space-between;padding-top:calc(var(--w)*.3)}
.ft.g svg{width:calc(var(--w)*.46);height:calc(var(--w)*.46);stroke-width:2.3}
.ft.g.bare svg{width:calc(var(--w)*.56);height:calc(var(--w)*.56)}
.ft.g.bare{justify-content:center;padding:calc(var(--w)*.12) 0 0}
.ft .tg,.at .tg{font:800 calc(var(--w)*.34)/1 var(--disp);font-style:normal}
.at{--w:40px;position:relative;flex:none;display:grid;place-items:center;width:var(--w);height:var(--w);border-radius:calc(var(--w)*.3);background:linear-gradient(145deg,#9377FF 0%,#6146F2 52%,#3F28C2 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -6px rgba(97,70,242,.7)}
.at svg{width:48%;height:48%}
.at::after{content:"";position:absolute;top:calc(var(--w)*-.08);right:calc(var(--w)*-.08);width:calc(var(--w)*.3);height:calc(var(--w)*.3);background:var(--honey);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.pair{display:inline-flex;align-items:center;gap:7px}
.pair .pa{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--canvas2);color:var(--ink3)}
.ci{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(var(--lnc),.05);color:var(--c)}
@supports (background:color-mix(in srgb,red 50%,white)){.ci{background:color-mix(in srgb,var(--c) 11%,#fff)}}
.ci svg{width:16px;height:16px}
.ci .tg{font:800 14px/1 var(--disp);font-style:normal}
[aria-current="true"]>.ci{background:var(--c);color:#fff}
.bdg{display:inline-flex;align-items:center;height:21px;padding:0 7px;border-radius:7px;font:700 11px/1 var(--sans);letter-spacing:.01em;white-space:nowrap}
.bdg.new{background:var(--honey-soft);color:#B36F00}
.bdg.pro{background:#ECEAFF;color:var(--indigo)}

/* header */
.hd{position:sticky;top:0;z-index:60;background:var(--sf);box-shadow:0 1px 0 var(--hair)}
.hd-in{position:relative;display:flex;align-items:center;gap:22px;height:72px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo .bear{width:40px;height:37px}
.wm{font:800 25px/1 var(--disp);letter-spacing:-.035em;color:#15133A;white-space:nowrap}
.wm .c{color:var(--honey)}
.wm .i{position:relative;display:inline-block}
.wm .i::after{content:"";position:absolute;left:50%;top:-.06em;width:.19em;height:.23em;margin-left:-.1em;background:var(--honey);border-radius:.03em;clip-path:polygon(0 0,58% 0,100% 36%,100% 100%,0 100%)}
.logo .cn{display:none;font:800 21px/1 var(--disp);letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.logo .cn small{display:block;margin-top:5px;font:800 10px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
:lang(zh) .logo .wm{display:none}
:lang(zh) .logo .cn{display:block}
.nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.nl{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border-radius:10px;font:600 15px/1 var(--sans);color:var(--ink);white-space:nowrap;transition:background .12s}
.nl:hover,.nl[aria-expanded="true"]{background:var(--canvas2)}
.nl svg{width:14px;height:14px;color:var(--ink3);transition:transform .16s}
.nl[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--ink)}
.hr{display:flex;align-items:center;gap:8px;margin-left:auto}
.sbtn{display:flex;align-items:center;gap:10px;width:248px;height:40px;padding:0 7px 0 12px;border-radius:11px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);font:500 14px/1 var(--sans);color:var(--ink3);transition:box-shadow .12s,background .12s}
.sbtn:hover{background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2)}
.sbtn>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}
kbd{display:inline-flex;align-items:center;height:22px;padding:0 6px;border-radius:6px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:600 11px/1 var(--sans);color:var(--ink3);white-space:nowrap}
.langsw{display:flex;padding:3px;border-radius:11px;background:var(--canvas2)}
.langsw button{height:32px;min-width:40px;padding:0 10px;border-radius:8px;font:700 13px/1 var(--sans);color:var(--ink3);transition:color .12s}
.langsw button:hover{color:var(--ink)}
.langsw button[aria-pressed="true"]{background:var(--sf);color:var(--ink);box-shadow:0 1px 2px rgba(var(--shd),.08),0 2px 6px -2px rgba(var(--shd),.12)}
.ib{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--ink2);transition:background .12s}
.ib:hover,.ib[aria-expanded="true"]{background:var(--canvas2);color:var(--ink)}
.login{display:inline-flex;align-items:center;height:40px;padding:0 10px;font:600 15px/1 var(--sans);color:var(--ink);white-space:nowrap}
.login:hover{color:var(--indigo)}
.mbtn{display:none}
/* steps core.js takes when a language's menu words don't fit the width (each adds to the one before). "Log in" stays
   to the end: a visitor must always find it */
.hd.fit1 .hd-in{gap:16px}
.hd.fit1 .nav{margin-left:4px}
.hd.fit1 .nl{padding:0 10px}
.hd.fit1 .lbtn span,.hd.fit1 .sbtn>span,.hd.fit1 .sbtn kbd{display:none}
.hd.fit1 .sbtn{width:auto}
.hd.fit2 .nl{padding:0 8px;font-size:14px;gap:4px}
.hd.fit2 .nl svg{display:none}
.hd.fit3 .hr .ib[data-menu="apps"]{display:none}
.hd.fit3 .login{padding:0 6px}
.hd.fit4 .nav,.hd.fit4 .hr .ib[data-menu]{display:none}
.hd.fit4 .mbtn{display:grid}
.hd.fit5 .hr .btn-sm{display:none}
.hd.fit6 .hr{gap:2px}
.hd.fit6 .acct .me{gap:0;padding:0 2px}
.hd.fit6 .acct .me .dia{position:absolute;right:-3px;bottom:0;width:18px;height:18px;border-radius:6px;box-shadow:0 0 0 2px var(--bg)}
.hd.fit6 .acct .me .dia svg{width:11px;height:11px}
.hd.fit7 .hr .thm{display:none}

/* mega menu + scrim */
.scrim{position:fixed;inset:0;z-index:55;background:rgba(15,12,41,.18);animation:fade .16s ease-out}
@keyframes fade{from{opacity:0}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--sf);box-shadow:inset 0 1px 0 var(--hair),0 40px 70px -40px rgba(var(--shd),.32);animation:drop .16s ease-out}
.mg{display:grid;grid-template-columns:268px minmax(0,1fr) 300px;min-height:448px}
.mg-rail{padding:24px 18px 24px 0;box-shadow:inset -1px 0 0 var(--hair)}
.mg-h{margin:0 0 10px;padding-left:10px;font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mg-cat{display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 10px;border-radius:12px;text-align:left;font:600 15px/1.2 var(--sans);color:var(--ink2);transition:background .1s,color .1s}
.mg-cat:hover{color:var(--ink);background:rgba(250,248,243,.8)}
.mg-cat[aria-current="true"]{background:var(--canvas);color:var(--ink)}
.mg-cat .nm{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mg-cat .ct{font:600 12.5px/1 var(--sans);color:var(--ink4);font-variant-numeric:tabular-nums}
.mg-cat .car{width:14px;height:14px;color:var(--ink3);opacity:0;transition:opacity .1s}
.mg-cat[aria-current="true"] .car{opacity:1}
.mg-all{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0 10px;font:700 14px/1 var(--sans);color:var(--indigo)}
.mg-all:hover svg{transform:translateX(2px)}
.mg-main{min-width:0;padding:24px 28px}
.mg-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 10px 16px;margin-bottom:10px;box-shadow:inset 0 -1px 0 var(--hair)}
.mg-top b{display:block;font:800 20px/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.mg-top span{display:block;margin-top:5px;font-size:14px;color:var(--ink3)}
.mg-va{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;background:var(--canvas);font:600 13.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.mg-va:hover{background:var(--canvas2)}
.mg-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px}
.mi{display:flex;align-items:center;gap:12px;min-width:0;padding:9px 10px;border-radius:12px;transition:background .1s}
.mi:hover{background:var(--canvas)}
.mi:hover .ft{--bgc:var(--canvas)}
.mi>span:last-child{min-width:0}
.mi>span>b{display:flex;align-items:center;gap:6px;font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.mi>span>small{display:block;margin-top:2px;overflow:hidden;font-size:12.5px;line-height:1.35;color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.mi .ft{--w:30px}
.mi .at{--w:32px}
.mg-side{padding:24px 0 24px 6px}
.feat{display:flex;flex-direction:column;height:100%;padding:8px;border-radius:22px;background:var(--canvas)}
.fv{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;height:168px;border-radius:16px;overflow:hidden}
.fv .ft{--w:56px;--bgc:#E9E7FB}
.fv.v0{background:linear-gradient(140deg,#F1F0FD,#E2E0F8)}
.fv.v1{background:linear-gradient(140deg,#FFF6DE,#FFE6A6)}
.fv.v1 .ft{--bgc:#FFEFC4}
.fv.v2{background:linear-gradient(140deg,#F3F0FF,#E3DBFF)}
.fv .fx{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sf);color:var(--ink);box-shadow:var(--sh1)}
.fv .stack{position:relative;width:120px;height:90px}
.fv .stack .ft{position:absolute;left:32px;top:10px}
.fv .stack .ft:nth-child(1){transform:translate(-26px,8px) rotate(-12deg)}
.fv .stack .ft:nth-child(2){transform:translate(26px,8px) rotate(12deg)}
.fv .n50{position:absolute;right:-4px;top:-6px;display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:999px;background:var(--solid);color:var(--on-solid);font:800 14px/1 var(--disp);box-shadow:var(--sh1)}
.mdoc-s{display:flex;flex-direction:column;gap:6px;width:84px;height:104px;padding:12px 10px;border-radius:10px;background:var(--sf);box-shadow:var(--sh1)}
.mdoc-s b{font:800 15px/1 var(--disp);color:var(--ink)}
.mdoc-s i{display:block;height:5px;border-radius:3px;background:var(--canvas3)}
.mdoc-s i:nth-of-type(2){width:80%}
.mdoc-s i:nth-of-type(4){width:60%}
.fb{padding:16px 12px 8px}
.fb .eyebrow{font-size:11px}
.fb h5{margin-top:10px;font:800 18px/1.25 var(--disp);letter-spacing:-.02em}
.fb p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.lk{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:700 14px/1 var(--sans);color:var(--ink)}
.lk:hover svg{transform:translateX(2px)}
.mg-foot{box-shadow:inset 0 1px 0 var(--hair)}
.mg-foot .wrap{display:flex;align-items:center;gap:8px;height:56px;font-size:13.5px;color:var(--ink3);overflow:hidden}
.mg-foot .lab{margin-right:4px;font-weight:600}
.chip-s{height:30px;padding:0 11px;border-radius:8px;background:var(--canvas);font:600 13px/30px var(--sans);color:var(--ink2);white-space:nowrap}
.chip-s:hover{background:var(--canvas2);color:var(--ink)}
.mg-foot .req{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink2);white-space:nowrap}
.mg-foot .req:hover{color:var(--ink)}

/* apps pop */
.apps-pop{position:absolute;right:0;top:100%;z-index:3;display:grid;grid-template-columns:1.2fr 1fr;width:640px;background:var(--sf);border-radius:0 0 22px 22px;box-shadow:0 0 0 1px var(--hair),0 40px 70px -34px rgba(var(--shd),.4);overflow:hidden;animation:drop .16s ease-out}
.ap-l{padding:22px 22px 18px;background:var(--canvas)}
.ap-r{padding:22px 24px 18px}
.ap-h{margin:0 0 10px;font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.plat{display:flex;align-items:center;gap:12px;padding:8px 10px;margin:0 -10px;border-radius:13px;transition:background .1s}
.plat:hover{background:var(--sf)}
.plat .pi{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),0 2px 4px -2px rgba(var(--shd),.12);color:var(--ink)}
.plat b{display:block;font:700 14.5px/1.3 var(--sans);color:var(--ink)}
.plat small{display:block;font-size:12.5px;color:var(--ink3)}
.soon{margin-left:auto;padding:4px 8px;border-radius:7px;background:var(--honey-soft);font:700 11px/1 var(--sans);color:#B36F00;white-space:nowrap}
.ap-r a{display:flex;align-items:flex-start;gap:12px;padding:9px 0}
.ap-r a .pi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--canvas);color:var(--ink2)}
.ap-r a b{display:block;font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.ap-r a small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--ink3)}
.ap-r a:hover b{color:var(--indigo)}
.ap-note{margin-top:12px;padding-top:12px;box-shadow:inset 0 1px 0 var(--hair);font-size:12.5px;color:var(--ink3)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--canvas)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--lnc),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--lnc),.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(75% 80% at 72% 42%,#000 20%,transparent 72%);mask-image:radial-gradient(75% 80% at 72% 42%,#000 20%,transparent 72%)}
.hero::after{content:"";position:absolute;right:-10%;top:-18%;width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,209,102,.42),rgba(255,209,102,.12) 55%,transparent);pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:56px;padding-block:76px 96px}
.pill-new{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px 0 5px;border-radius:999px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),0 1px 2px rgba(var(--shd),.04);font:600 14px/1 var(--sans);color:var(--ink2);transition:box-shadow .15s}
.pill-new:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh1)}
.pill-new b{flex:none;padding:6px 10px;border-radius:999px;background:var(--solid);color:var(--on-solid);font-size:12px;white-space:nowrap}
.pill-new svg{color:var(--ink3)}
.hero h1{margin-top:28px;font-size:clamp(44px,5.4vw,86px);font-weight:800;line-height:.98;letter-spacing:-.05em}
:lang(zh) .hero h1{font-size:clamp(38px,4.5vw,68px);line-height:1.16;letter-spacing:-.01em}
.hero .lede{max-width:560px;margin-top:28px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hint{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;color:var(--ink3)}
.stats{display:flex;flex-wrap:wrap;gap:12px 44px;margin-top:44px;padding-top:28px;box-shadow:inset 0 1px 0 var(--hair2)}
.stats b{display:block;font:800 32px/1 var(--disp);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink3)}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font:500 14px/1.4 var(--sans);color:var(--ink2)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{color:var(--ok)}

.stage{position:relative;width:100%;max-width:700px;aspect-ratio:1.1/1;justify-self:end}
.peek{position:absolute;left:9%;top:0;z-index:0;width:19%;height:auto;filter:drop-shadow(0 10px 18px rgba(59,36,16,.18))}
.win{position:absolute;left:3%;right:1%;top:13%;bottom:11%;z-index:1;display:flex;flex-direction:column;background:var(--sf);border-radius:20px;box-shadow:0 0 0 1px var(--hair),var(--sh3);overflow:hidden}
.chrome{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;flex:none;background:#FCFBF8;box-shadow:inset 0 -1px 0 var(--hair)}
.chrome i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.chrome i:nth-child(2){background:#FEBC2E}
.chrome i:nth-child(3){background:#28C840}
.chrome .u{display:flex;align-items:center;gap:6px;height:26px;margin-inline:auto;padding:0 14px;border-radius:8px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:500 12.5px/1 var(--sans);color:var(--ink3)}
.wbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:22px 24px 20px}
.wtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wt-l{display:flex;align-items:center;gap:8px;min-width:0}
.wt-l .ft{--w:26px}
.wt-l .pa{display:grid;place-items:center;color:var(--ink4)}
.wt-l>b{margin-left:6px;font:800 19px/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.okp{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:#E7F6EC;font:700 12.5px/1 var(--sans);color:#15803D;white-space:nowrap}
.jobs{display:flex;flex-direction:column;gap:8px}
.bar{display:block;height:7px;border-radius:99px;background:var(--canvas3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--honey))}
.wfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair);font-size:13px;color:var(--ink3)}
.addm{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--sans);color:var(--ink2)}
.wdl{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:12px;background:var(--solid);color:var(--on-solid);font:700 14px/1 var(--sans);white-space:nowrap}
.float{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh2)}
.float b{display:block;font:700 13.5px/1.3 var(--sans);color:var(--ink);white-space:nowrap}
.float small{display:block;font-size:12px;color:var(--ink3);white-space:nowrap}
.f1{right:-1%;top:1%;transform:rotate(2deg)}
.f2{right:-3%;bottom:1%;transform:rotate(-1.5deg)}
.f3{left:-5%;bottom:3%;transform:rotate(-2deg)}
.thumbs{display:flex}
.thumbs i{width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 2px #fff}
.thumbs i+i{margin-left:-10px}
.thumbs i:nth-child(1){background:linear-gradient(135deg,#FDBA74,#F97316)}
.thumbs i:nth-child(2){background:linear-gradient(135deg,#7DD3FC,#0284C7)}
.thumbs i:nth-child(3){background:linear-gradient(135deg,#86EFAC,#16A34A)}
.cut{position:relative;width:42px;height:42px;border-radius:10px;overflow:hidden;background:repeating-conic-gradient(#EFEAE0 0% 25%,#fff 0% 50%) 0 0/10px 10px}
.cut::before{content:"";position:absolute;left:50%;top:8px;width:14px;height:14px;border-radius:50%;background:var(--amber);transform:translateX(-50%)}
.cut::after{content:"";position:absolute;left:50%;bottom:-4px;width:30px;height:18px;border-radius:14px 14px 0 0;background:var(--amber);transform:translateX(-50%)}
.meter{display:block;width:104px}
.meter .bar i{background:linear-gradient(90deg,#16A34A,#4ADE80)}
.meter .mt{display:flex;justify-content:space-between;margin-top:6px;font:700 11.5px/1 var(--sans);color:var(--ink3)}
.meter .mt b{display:inline;font-size:11.5px;color:#15803D}

/* formats strip */
.fstrip{background:var(--sf);box-shadow:inset 0 -1px 0 var(--hair)}
.fs-in{display:flex;align-items:center;gap:28px;padding-block:24px}
.fs-in>p{flex:none;font:700 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.fchips{flex:1;display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 8px;border-radius:10px;background:var(--canvas);font:700 12.5px/1 var(--disp);letter-spacing:.03em;color:var(--ink)}
.fchip .ft{--w:15px;--bgc:var(--canvas);padding:0;box-shadow:none}
.fchip.more{background:transparent;padding:0 6px;color:var(--ink3);font-family:var(--sans);letter-spacing:0;font-weight:600}

/* directory */
.dir{padding:120px 0 128px;background:var(--sf)}
.dir-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:44px}
.search{flex:none;display:flex;align-items:center;gap:12px;width:min(420px,100%);height:56px;padding:0 10px 0 18px;border-radius:16px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink3);transition:box-shadow .15s,background .15s}
.search:focus-within{background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2),0 0 0 4px rgba(255,209,102,.35)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
.search input::placeholder{color:var(--ink3)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}
.colc{position:relative;display:flex;align-items:center;gap:18px;min-width:0;padding:22px 24px;border-radius:22px;background:var(--canvas);text-align:left;transition:background .15s,box-shadow .15s}
.colc:hover{background:var(--canvas2)}
.colc[aria-selected="true"]{background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh2)}
.cico{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.cico svg{width:26px;height:26px}
.colc[data-col="0"] .cico{background:linear-gradient(150deg,#4B45B5,#2E2A78 55%,#1B1750);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 20px -10px rgba(46,42,120,.8)}
.colc[data-col="1"] .cico{background:linear-gradient(150deg,#FFD978,#F5A524);color:var(--cocoa);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -10px rgba(217,142,18,.8)}
.colc[data-col="2"] .cico{background:linear-gradient(150deg,#9377FF,#6146F2 52%,#3F28C2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px -10px rgba(97,70,242,.8)}
.ctx{flex:1;min-width:0}
.ctx b{display:flex;align-items:center;gap:10px;font:800 21px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.ctx .cnt{padding:5px 9px;border-radius:999px;background:rgba(var(--lnc),.06);font:700 12.5px/1 var(--sans);letter-spacing:0;color:var(--ink3)}
.colc[aria-selected="true"] .cnt{background:var(--honey);color:var(--cocoa)}
.ctx>span{display:block;margin-top:7px;font-size:14px;line-height:1.45;color:var(--ink3)}
.colc .car{flex:none;color:var(--ink4);transition:transform .18s,color .18s}
.colc[aria-selected="true"] .car{color:var(--ink);transform:rotate(90deg)}
.dir-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:22px;background:var(--canvas)}
.rail-h{margin:10px 12px 10px;font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.rc{display:flex;align-items:center;gap:12px;width:100%;height:48px;padding:0 12px 0 9px;border-radius:14px;text-align:left;font:600 14.5px/1.2 var(--sans);color:var(--ink2);transition:background .12s,color .12s}
.rc:hover{color:var(--ink);background:rgba(255,255,255,.65)}
.rc[aria-current="true"]{background:var(--sf);color:var(--ink);box-shadow:0 1px 2px rgba(var(--shd),.06),0 6px 14px -8px rgba(var(--shd),.18)}
.rc>span:nth-child(2){flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rc .ct{font:600 12.5px/1 var(--sans);color:var(--ink4);font-variant-numeric:tabular-nums}
.rc[aria-current="true"] .ct{color:var(--ink3)}
.rail-sep{height:1px;margin:6px 12px;background:var(--hair)}
.rail-note{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:16px;border-radius:16px;background:var(--sf);font-size:13px;line-height:1.45;color:var(--ink3)}
.rail-note b{font:700 14px/1.3 var(--sans);color:var(--ink)}
.rail-note a{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font:700 13px/1 var(--sans);color:var(--indigo)}
.dm{min-width:0}
.dm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;padding-bottom:20px;box-shadow:inset 0 -1px 0 var(--hair)}
.dm-head h3{display:flex;align-items:center;gap:12px;font:800 28px/1.15 var(--disp);letter-spacing:-.025em}
.dm-head h3 small{padding:5px 10px;border-radius:999px;background:var(--canvas2);font:700 13px/1 var(--sans);letter-spacing:0;color:var(--ink3)}
.dm-head p{margin-top:8px;font-size:15px;color:var(--ink3)}
.fmts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:440px}
.fmt{height:26px;padding:0 9px;border-radius:8px;background:var(--canvas);font:700 11.5px/26px var(--disp);letter-spacing:.04em;color:var(--ink2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px}
.tc{position:relative;display:flex;flex-direction:column;min-width:0;min-height:198px;padding:22px 22px 18px;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);transition:box-shadow .18s,transform .18s}
.tc:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--hair2),var(--sh2)}
.tc-ico{display:flex;align-items:center;height:48px}
.tc .bdg{position:absolute;top:20px;right:18px}
.tc h4{margin-top:18px;font:700 17px/1.3 var(--disp);letter-spacing:-.015em}
.tc p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--ink3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-meta{display:flex;align-items:center;gap:7px;min-height:30px;margin-top:auto;padding-top:14px;font:500 12.5px/1.2 var(--sans);color:var(--ink3)}
.tc-meta svg{color:var(--ok)}
.tc-meta .path{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tc .go{margin-left:auto;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--canvas);color:var(--ink);opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s,background .18s}
.tc .go svg{color:var(--ink)}
.tc:hover .go{opacity:1;transform:none;background:var(--honey)}
.dm-more{display:flex;justify-content:center;margin-top:30px}
.empty{grid-column:1/-1;padding:56px 12px;border-radius:20px;background:var(--canvas);text-align:center;color:var(--ink3)}
.empty b{display:block;margin-bottom:6px;font:800 18px/1.3 var(--disp);color:var(--ink)}

/* why (bento) */
.why{padding:128px 0;background:var(--canvas)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:56px}
.bx{position:relative;display:flex;flex-direction:column;min-width:0;min-height:370px;padding:34px;border-radius:28px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.bx h3{font:800 25px/1.2 var(--disp);letter-spacing:-.025em}
.bx>p{margin-top:12px;max-width:470px;font-size:15.5px;line-height:1.6;color:var(--ink3)}
.bx .vis{margin-top:auto;padding-top:30px}
.b1{grid-column:span 7;background:var(--night);box-shadow:none;color:#B9B5DA}
.b1::before{content:"";position:absolute;right:-20%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,209,102,.18),transparent);pointer-events:none}
.b1 h3{color:#fff}
.b1>p{color:#B9B5DA}
.b2{grid-column:span 5}
.b3,.b4,.b5{grid-column:span 4}
.life{position:relative;display:flex;align-items:flex-start;gap:0}
.lf{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:120px;text-align:center}
.lf-i{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff}
.lf-i.hot{background:var(--honey);box-shadow:none;color:var(--cocoa)}
.lf b{margin-top:6px;font:700 14.5px/1.2 var(--sans);color:#fff}
.lf small{font-size:12.5px;color:#9E9AC6}
.lf-ln{flex:1;height:2px;margin-top:26px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px)}
.lf-local{display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:600 13.5px/1.3 var(--sans);color:#fff;align-self:flex-start}
.lf-local svg{color:var(--honey)}
.twin{display:flex;align-items:center;justify-content:center;gap:18px}
.mdoc{position:relative;display:flex;flex-direction:column;gap:7px;width:150px;height:186px;padding:16px 14px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh2)}
.mdoc .mh{height:10px;width:60%;border-radius:4px;background:var(--c)}
.mdoc i{display:block;height:6px;border-radius:3px;background:var(--canvas3)}
.mdoc .mt{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:4px 0}
.mdoc .mt i{height:13px;border-radius:3px;background:var(--canvas2)}
.mdoc .mt i:nth-child(-n+3){background:var(--canvas3)}
.mdoc .lbl{position:absolute;right:-10px;bottom:-10px}
.mdoc .lbl.ft{--w:34px}
.tw-a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--honey);color:var(--cocoa);box-shadow:0 8px 18px -8px rgba(217,142,18,.8)}
.fan{position:relative;height:150px}
.fan .ft{--w:58px;position:absolute;left:50%;bottom:6px;margin-left:-29px;transform:translateX(var(--x)) rotate(var(--r));transform-origin:50% 130%}
.fan .zip{position:absolute;right:6%;top:0;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--solid);color:var(--on-solid);font:800 16px/1 var(--disp);box-shadow:var(--sh1)}
.aiv{display:flex;align-items:center;justify-content:center;gap:16px}
.aiv .mdoc-s{width:104px;height:128px;box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.aiv .at{--w:48px}
.devs{display:flex;flex-wrap:wrap;gap:10px}
.devs span{display:flex;flex-direction:column;align-items:center;gap:8px;width:calc(20% - 8px);min-width:56px;font:600 12px/1.2 var(--sans);color:var(--ink3);text-align:center}
.devs i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--canvas);color:var(--ink)}

/* apps band */
.apps{position:relative;overflow:hidden;padding:128px 0;background:var(--night);color:#B9B5DA}
.apps::before{content:"";position:absolute;left:-12%;bottom:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(109,74,255,.22),transparent);pointer-events:none}
.apps::after{content:"";position:absolute;right:-8%;top:-30%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,209,102,.16),transparent);pointer-events:none}
.apps-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:72px}
.apps .eyebrow{color:var(--honey)}
.apps .eyebrow::before{background:var(--honey)}
.apps .h2{margin-top:18px;color:#fff}
.apps .lede{margin-top:18px;max-width:540px;color:#B9B5DA}
:lang(zh) .apps em.accent{background:linear-gradient(180deg,transparent 62%,rgba(255,209,102,.45) 62%,rgba(255,209,102,.45) 92%,transparent 92%)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:40px;max-width:600px}
.pbtn{position:relative;display:flex;align-items:center;gap:12px;min-width:0;height:70px;padding:0 16px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;transition:background .15s}
.pbtn:hover{background:rgba(255,255,255,.09)}
.pbtn svg{width:24px;height:24px}
.pbtn small{display:block;font:500 11.5px/1.2 var(--sans);color:#A29ECA;white-space:nowrap}
.pbtn b{display:block;margin-top:3px;font:700 16px/1.1 var(--disp);letter-spacing:-.01em;white-space:nowrap}
.pbtn .soon{position:absolute;top:-8px;right:10px;margin:0;background:#2A2560;color:var(--honey);box-shadow:inset 0 0 0 1px rgba(255,209,102,.25)}
.pbtn.live{background:var(--honey);box-shadow:none;color:var(--cocoa)}
.pbtn.live small{color:rgba(59,36,16,.7)}
.pbtn.live:hover{background:#FFC847}
.notify{display:flex;gap:8px;margin-top:22px;max-width:520px}
.notify input{flex:1;min-width:0;width:0;height:48px;padding:0 16px;border-radius:12px;border:0;outline:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff}
.notify input::placeholder{color:#8F8BB8}
.notify input:focus{box-shadow:inset 0 0 0 1px rgba(255,209,102,.5)}
.notify-l{margin-top:26px;font-size:13.5px;color:#A29ECA}
.devices{position:relative;width:100%;max-width:720px;aspect-ratio:1.3/1;justify-self:end}
.laptop{position:absolute;left:0;top:4%;width:88%}
.lap-lid{padding:2.2% 2.2% 2.4%;border-radius:18px 18px 6px 6px;background:#1D1945;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 50px 90px -40px rgba(0,0,0,.7)}
.lap-scr{aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--sf)}
.lap-base{position:relative;height:16px;margin:0 -5%;border-radius:2px 2px 18px 18px;background:linear-gradient(180deg,#39346E,#1C1843);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;margin-left:-8%;border-radius:0 0 8px 8px;background:#14112E}
.mu{display:flex;height:100%;font-size:0}
.mu-side{display:flex;flex-direction:column;gap:9px;width:17%;padding:12px 10px;background:var(--canvas);box-shadow:inset -1px 0 0 var(--hair)}
.mu-side svg{width:26px;height:24px;margin-bottom:8px}
.mu-side i{display:block;height:7px;border-radius:4px;background:var(--canvas3)}
.mu-side i.on{background:var(--honey)}
.mu-side i:nth-of-type(3){width:70%}
.mu-side i:nth-of-type(5){width:80%}
.mu-main{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 14px}
.mu-top{display:flex;align-items:center;justify-content:space-between}
.mu-top i{display:block;width:44%;height:18px;border-radius:6px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair)}
.mu-top b{display:block;width:18px;height:18px;border-radius:50%;background:var(--honey)}
.mu-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:36%;border-radius:10px;background:#FFF9EA;box-shadow:inset 0 0 0 1px rgba(245,165,36,.3)}
.mu-drop svg{width:34px;height:31px}
.mu-drop i{display:block;width:34%;height:6px;border-radius:3px;background:var(--canvas3)}
.mu-drop b{display:block;width:18%;height:12px;border-radius:5px;background:var(--honey)}
.mu-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mu-c{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:8px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.mu-c .ft{--w:14px;padding:0}
.mu-c i{display:block;height:5px;border-radius:3px;background:var(--canvas3)}
.mu-c i:last-child{width:60%}
.phone{position:absolute;right:0;bottom:0;width:28%;aspect-ratio:9/19;padding:2.4%;border-radius:34px;background:#1D1945;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 70px -24px rgba(0,0,0,.7)}
.ph-scr{position:relative;display:flex;flex-direction:column;gap:9px;height:100%;padding:26px 10px 10px;border-radius:26px;overflow:hidden;background:var(--canvas)}
.ph-scr::before{content:"";position:absolute;left:50%;top:8px;width:34%;height:12px;margin-left:-17%;border-radius:10px;background:#1D1945}
.ph-top{display:flex;align-items:center;gap:6px}
.ph-top svg{width:22px;height:20px}
.ph-top i{display:block;width:44%;height:7px;border-radius:4px;background:var(--canvas3)}
.ph-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:12px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.ph-hero i{display:block;width:70%;height:7px;border-radius:4px;background:var(--canvas3)}
.ph-hero i.s{width:50%}
.ph-hero b{display:block;width:60%;height:18px;margin-top:4px;border-radius:7px;background:var(--honey)}
.ph-row{display:flex;align-items:center;gap:8px;padding:7px;border-radius:10px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.ph-row .ft{--w:16px;padding:0}
.ph-row i{display:block;flex:1;height:6px;border-radius:3px;background:var(--canvas3)}

/* pricing */
.pricing{padding:128px 0;background:var(--sf)}
.bill{display:inline-flex;align-items:center;gap:2px;margin-top:28px;padding:4px;border-radius:13px;background:var(--canvas2)}
.bill button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;font:600 14px/1 var(--sans);color:var(--ink3)}
.bill button[aria-pressed="true"]{background:var(--sf);color:var(--ink);box-shadow:0 1px 2px rgba(var(--shd),.08),0 2px 6px -2px rgba(var(--shd),.12)}
.save{padding:4px 7px;border-radius:6px;background:var(--honey);font:800 11px/1 var(--sans);color:var(--cocoa)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1240px;margin:52px auto 0}
.plan{position:relative;display:flex;flex-direction:column;padding:36px 34px 34px;border-radius:28px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.plan h3{font:800 20px/1.2 var(--disp);letter-spacing:-.01em}
.plan .pd{margin-top:8px;font-size:14.5px;color:var(--ink3)}
.price{display:flex;align-items:baseline;gap:6px;margin-top:26px}
.price b{font:800 56px/1 var(--disp);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.price span{font-size:15px;color:var(--ink3)}
.plan .sub{min-height:20px;margin-top:10px;font-size:13.5px;color:var(--ink3)}
.plan ul{display:grid;gap:13px;margin:28px 0 32px;padding:28px 0 0;list-style:none;box-shadow:inset 0 1px 0 var(--hair)}
.plan li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:var(--ink2)}
.plan li svg{flex:none;margin-top:2px;color:var(--ok)}
.plan .btn{width:100%;margin-top:auto}
.plan.hot{background:var(--night);box-shadow:0 50px 90px -46px rgba(15,12,41,.8);color:#B9B5DA}
.plan.hot h3,.plan.hot .price b{color:#fff}
.plan.hot .pd,.plan.hot .price span,.plan.hot .sub{color:#A29ECA}
.plan.hot ul{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.plan.hot li{color:#DAD7F0}
.plan.hot li svg{color:var(--honey)}
.plan .tag{position:absolute;top:28px;right:28px;padding:6px 10px;border-radius:999px;background:var(--honey);font:800 11.5px/1 var(--sans);color:var(--cocoa)}

/* faq */
.faq{padding:128px 0 48px;background:var(--canvas)}
.faq-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:72px;align-items:start}
.faq-in .sec-head{position:sticky;top:110px}
.faq-in .lk{margin-top:22px;color:var(--indigo)}
details.q{margin-bottom:10px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
details.q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;list-style:none;cursor:pointer;font:700 17px/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink)}
details.q summary::-webkit-details-marker{display:none}
details.q .pm{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--canvas);color:var(--ink);transition:transform .18s,background .18s}
details.q[open] .pm{transform:rotate(45deg);background:var(--honey)}
details.q p{margin-top:-4px;padding:0 24px 22px;font-size:15.5px;line-height:1.65;color:var(--ink2)}

/* cta */
.cta-sec{padding:48px 0 128px;background:var(--canvas)}
.cta-box{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:center;gap:40px;padding:76px 80px;border-radius:40px;background:linear-gradient(125deg,#FFDF8C 0%,#FFCB4A 48%,#F7AE2E 100%)}
.cta-box::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(59,36,16,.09) 1.2px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);pointer-events:none}
.cta-box>*{position:relative}
.cta-box h2{color:var(--cocoa);font-size:clamp(36px,4.4vw,66px);font-weight:800;line-height:1.02;letter-spacing:-.045em}
:lang(zh) .cta-box h2{line-height:1.18;letter-spacing:-.01em}
.cta-box em.accent{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C52 4 128 3 197 7' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/100% .2em no-repeat}
:lang(zh) .cta-box em.accent{background:linear-gradient(180deg,transparent 62%,rgba(255,255,255,.7) 62%,rgba(255,255,255,.7) 92%,transparent 92%)}
.cta-box>div>p{margin-top:18px;font-size:18px;color:rgba(59,36,16,.78)}
.btn-cream{color:var(--cocoa);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(59,36,16,.12)}
.btn-cream:hover{background:rgba(255,255,255,.75)}
.cta-art{position:relative;justify-self:center;width:300px;height:300px}
.appicon{position:absolute;inset:40px;display:grid;place-items:center;border-radius:28%;background:linear-gradient(180deg,#2E2A78,#16133E);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 40px 60px -30px rgba(59,36,16,.7);transform:rotate(-6deg)}
.appicon svg{width:74%;height:auto}
.cta-art .ft{position:absolute;--w:46px;--bgc:#FFCB4A}
.cta-art .o1{left:-6px;top:26px;transform:rotate(-14deg)}
.cta-art .o2{right:-2px;top:0;transform:rotate(10deg)}
.cta-art .o3{right:6px;bottom:4px;transform:rotate(-8deg)}

/* footer */
.site-ft{position:relative;overflow:hidden;padding:88px 0 0;background:var(--night);color:#A29ECA}
.fs-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr));gap:40px}
.site-ft .wm{color:#fff}
.site-ft .logo .cn{color:#fff}
.fs-brand p{margin-top:20px;max-width:330px;font-size:14.5px;line-height:1.65}
.fs-lang{display:inline-flex;align-items:center;gap:8px;margin-top:24px;height:40px;padding:0 14px;border-radius:11px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:600 14px/1 var(--sans);color:#fff}
.fs-col h4{margin:0 0 16px;font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.fs-col a{display:block;padding:6px 0;font-size:14.5px;color:#A29ECA;transition:color .12s}
.fs-col a:hover{color:#fff}
.fs-apps{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:64px;padding-top:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fs-apps>span{margin-right:10px;font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.store{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 16px 0 14px;border-radius:13px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;transition:background .12s}
.store:hover{background:rgba(255,255,255,.09)}
.store svg{width:22px;height:22px}
.store small{display:block;font-size:10.5px;line-height:1.1;color:#A29ECA}
.store b{display:block;font:700 14.5px/1.15 var(--disp)}
.fs-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px 0;font-size:13.5px}
.fs-bot nav{display:flex;flex-wrap:wrap;gap:20px}
.fs-bot a:hover{color:#fff}
.giant{margin:0 0 -.16em;font:800 clamp(110px,21vw,340px)/.9 var(--disp);letter-spacing:-.065em;text-align:center;color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 78%);-webkit-background-clip:text;background-clip:text;user-select:none;white-space:nowrap}

/* tool view */
.tv-hero{position:relative;overflow:hidden;padding:30px 0 96px;background:var(--canvas)}
.tv-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--lnc),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--lnc),.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 70% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 70% at 50% 30%,#000 20%,transparent 75%)}
.tv-hero>.wrap{position:relative}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--ink3)}
.crumbs a:hover{color:var(--ink)}
.crumbs svg{color:var(--ink4)}
.crumbs b{font-weight:600;color:var(--ink2)}
.tv-head{max-width:880px;margin:40px auto 0;text-align:center}
.tv-icon{display:inline-flex}
.tv-icon .ft{--w:54px;--bgc:var(--canvas)}
.tv-icon .at{--w:60px}
.tv-icon .pair{gap:12px}
.tv-icon .pair .pa{width:26px;height:26px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.tv-head h1{margin-top:26px;font-size:clamp(38px,4.6vw,70px);font-weight:800;line-height:1.02;letter-spacing:-.045em}
:lang(zh) .tv-head h1{line-height:1.15;letter-spacing:-.01em}
.tv-head p{max-width:640px;margin:18px auto 0;font-size:clamp(16px,1.3vw,19px);color:var(--ink2)}
.up{position:relative;max-width:1000px;margin:52px auto 0}
.up-bear{position:absolute;right:8%;top:-66px;z-index:0;width:112px;height:auto;filter:drop-shadow(0 8px 14px rgba(59,36,16,.18))}
.up-card{position:relative;z-index:1;padding:12px;border-radius:32px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3)}
.up-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:340px;padding:40px 24px;border-radius:24px;border:2px dashed rgba(var(--lnc),.12);background:linear-gradient(180deg,#FFFDF8,#FFF7E3);text-align:center;transition:background .15s,border-color .15s}
.up-zone.over{border-color:rgba(245,165,36,.55);background:#FFF3D1}
.up-ic{display:grid;place-items:center;width:66px;height:66px;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh1);color:var(--gold)}
.up-zone h3{font:800 23px/1.3 var(--disp);letter-spacing:-.02em}
.up-or{font-size:14px;color:var(--ink3)}
.up-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.up-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:8px;font-size:13px;color:var(--ink3)}
.up-meta span{display:inline-flex;align-items:center;gap:6px}
.up-meta svg{color:var(--ok)}
.seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--canvas2)}
.seg button{height:32px;padding:0 12px;border-radius:8px;font:700 13px/1 var(--sans);color:var(--ink3)}
.seg button[aria-pressed="true"]{background:var(--sf);color:var(--ink);box-shadow:0 1px 2px rgba(var(--shd),.08)}
.tv-sec{padding:112px 0}
.tv-rel{background:var(--canvas)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.step{padding:32px;border-radius:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.step .n{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--honey);font:800 17px/1 var(--disp);color:var(--cocoa)}
.step h4{margin-top:22px;font:800 20px/1.25 var(--disp);letter-spacing:-.015em}
.step p{margin-top:8px;font-size:15px;color:var(--ink3)}
.tv-rel .grid{margin-top:40px}
.tv-faq{max-width:900px;margin:40px auto 0}

/* palette, drop overlay, drawer, proto switch, toast */
.pal{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(15,12,41,.3);animation:fade .12s ease-out}
.pal-box{display:flex;flex-direction:column;width:min(660px,100%);max-height:72vh;border-radius:22px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),0 50px 110px -30px rgba(15,12,41,.55);overflow:hidden;animation:drop .14s ease-out}
.pal-in{flex:none;display:flex;align-items:center;gap:12px;height:62px;padding:0 18px;box-shadow:inset 0 -1px 0 var(--hair);color:var(--ink3)}
.pal-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:17px;color:var(--ink)}
.pal-res{overflow:auto;padding:8px}
.pal-g{padding:10px 12px 8px;font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.pr{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border-radius:12px;text-align:left}
.pr[aria-selected="true"]{background:var(--canvas)}
.pr[aria-selected="true"] .ft{--bgc:var(--canvas)}
.pr .ft{--w:28px}
.pr .at{--w:30px}
.pr .pt{flex:1;min-width:0}
.pr .pt>b{display:block;font:600 15px/1.3 var(--sans);color:var(--ink)}
.pr .pt>small{display:block;overflow:hidden;font-size:12.5px;color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.pr .path{flex:none;font-size:12.5px;color:var(--ink4);white-space:nowrap}
.pr .ret{display:none;flex:none}
.pr[aria-selected="true"] .ret{display:inline-flex}
.pal-empty{padding:36px 12px;text-align:center;font-size:14.5px;color:var(--ink3)}
.pal-ft{flex:none;display:flex;flex-wrap:wrap;gap:16px;padding:10px 18px;box-shadow:inset 0 1px 0 var(--hair);font-size:12.5px;color:var(--ink3)}
.pal-ft span{display:inline-flex;align-items:center;gap:6px}
.dropov{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px;background:rgba(250,248,243,.94);animation:fade .12s ease-out}
.dz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:min(760px,100%);height:min(440px,70vh);border-radius:36px;border:2px dashed rgba(var(--lnc),.16);background:var(--sf);text-align:center;pointer-events:none}
.dz svg.b{width:120px;height:auto}
.dz h3{font:800 28px/1.2 var(--disp);letter-spacing:-.02em}
.dz p{font-size:15.5px;color:var(--ink3)}
.mdrawer{position:fixed;inset:0;z-index:85;overflow:auto;background:var(--sf);animation:fade .12s ease-out}
.md-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px;background:var(--sf);box-shadow:inset 0 -1px 0 var(--hair)}
.md-sec{padding:16px 20px;box-shadow:inset 0 -1px 0 var(--hair)}
.md-sec details summary{display:flex;align-items:center;justify-content:space-between;height:48px;list-style:none;cursor:pointer;font:800 18px/1 var(--disp);color:var(--ink)}
.md-sec details summary::-webkit-details-marker{display:none}
.md-sec details[open] summary svg{transform:rotate(180deg)}
.md-sec details a{display:flex;align-items:center;gap:12px;padding:9px 0;font:600 15px/1.2 var(--sans);color:var(--ink2)}
.md-sec>a{display:flex;align-items:center;height:48px;font:800 18px/1 var(--disp);color:var(--ink)}
.md-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px}
.proto{position:fixed;left:50%;bottom:18px;z-index:80;display:flex;align-items:center;gap:4px;padding:5px;border-radius:14px;background:rgba(15,12,41,.92);box-shadow:0 14px 30px -12px rgba(15,12,41,.6);transform:translateX(-50%)}
.proto>span{padding:0 10px 0 8px;font:600 12px/1 var(--sans);color:#A29ECA;white-space:nowrap}
.proto button{height:34px;padding:0 14px;border-radius:10px;font:600 13px/1 var(--sans);color:#fff;white-space:nowrap}
.proto button[aria-pressed="true"]{background:var(--honey);color:var(--cocoa)}
.toast{position:fixed;left:50%;bottom:76px;z-index:99;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:12px;background:var(--solid);box-shadow:0 0 0 1px rgba(255,255,255,.16),var(--sh2);font:600 14px/1.4 var(--sans);color:var(--on-solid);transform:translateX(-50%);animation:drop .16s ease-out;pointer-events:none}

/* converter rows (hero window + converter page) */
.cvr{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:16px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.cvr .ft{--w:32px}
.cvr-n{flex:1;min-width:0}
.cvr-n b{display:block;overflow:hidden;font:600 14.5px/1.3 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.cvr-n small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.cvr-to{flex:none;font-size:13px;color:var(--ink3)}
.fmtb{flex:none;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-width:100px;height:38px;padding:0 10px 0 14px;border-radius:10px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:800 13.5px/1 var(--disp);letter-spacing:.03em;color:var(--ink);transition:box-shadow .12s,background .12s}
button.fmtb:hover{box-shadow:inset 0 0 0 1px rgba(var(--lnc),.2)}
.fmtb svg{color:var(--ink3)}
.fmtb.empty{background:var(--honey-soft);box-shadow:inset 0 0 0 1px rgba(245,165,36,.3);color:#B36F00}
.fmtb[aria-expanded="true"]{box-shadow:inset 0 0 0 1px rgba(var(--lnc),.2),0 0 0 4px rgba(255,209,102,.45)}
.st{flex:none;display:inline-flex;align-items:center;gap:6px;min-width:120px;height:28px;padding:0 10px;border-radius:8px;font:700 12px/1 var(--sans);white-space:nowrap}
.st.ok{background:#EEF7F1;color:#15803D}
.st.warn{background:var(--honey-soft);color:#B36F00}
.st.done{background:#E7F6EC;color:#15803D}
.st.run{background:var(--canvas);color:var(--ink)}
.st.wait{background:var(--canvas2);color:var(--ink3)}
.st.run .bar{flex:1;height:6px}
.st.run em{font-style:normal;font-variant-numeric:tabular-nums}
.cvr-act{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:40px}
.cvr .x{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--ink3)}
.cvr .x:hover{background:var(--canvas);color:var(--ink)}
.win .cvr{gap:10px;padding:10px 12px;border-radius:13px;background:var(--canvas);box-shadow:none}
.win .cvr .ft{--w:26px;--bgc:var(--canvas)}
.win .cvr-n b{font-size:13.5px}
.win .cvr-n small{font-size:11.5px}
.win .fmtb{min-width:76px;height:30px;padding:0 8px 0 10px;font-size:12px}
.win .st{min-width:92px;height:26px}
.win .cvr-to{font-size:12px}

/* convert hub (home) */
.hub{display:flex;flex-direction:column;gap:16px}
.uni{display:flex;align-items:center;gap:22px;padding:22px 24px 22px 22px;border-radius:24px;background:linear-gradient(115deg,#FFFBEF,#FFF1CC);box-shadow:inset 0 0 0 1px rgba(245,165,36,.2)}
.uni-ic{flex:none;display:grid;place-items:center;width:66px;height:66px;border-radius:19px;background:var(--sf);box-shadow:var(--sh1)}
.uni-ic svg{width:46px;height:auto}
.uni-t{flex:1;min-width:0}
.uni-t b{display:block;font:800 22px/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.uni-t span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink2)}
.uni-t kbd{margin:0 1px}
.uni-t .uni-s{display:block;margin-top:10px;font:700 12.5px/1 var(--sans);font-style:normal;letter-spacing:.02em;color:#B36F00}
.cvt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cvt{display:flex;flex-direction:column;min-width:0;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);transition:box-shadow .18s,transform .18s}
.cvt:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--hair2),var(--sh2)}
.cvt-main{display:flex;align-items:center;gap:14px;padding:20px 20px 14px;text-align:left}
.cvt-ic,.cvh-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(var(--lnc),.05);color:var(--c)}
@supports (background:color-mix(in srgb,red 50%,white)){.cvt-ic,.cvh-ic,.sfmt .ci{background:color-mix(in srgb,var(--c) 11%,#fff)}}
.cvt-ic svg{width:24px;height:24px}
.cvt-ic .tg,.cvh-ic .tg{font:800 17px/1 var(--disp);font-style:normal}
.cvt-main>span:nth-child(2){flex:1;min-width:0}
.cvt-main b{display:block;font:700 16.5px/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.cvt-main small{display:block;margin-top:5px;overflow:hidden;font-size:12.5px;color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.cvt-main>svg{color:var(--ink4);transition:transform .15s,color .15s}
.cvt:hover .cvt-main>svg{color:var(--ink);transform:translateX(2px)}
.cvt-pop{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 18px}
.cvt-pop a{height:28px;padding:0 10px;border-radius:8px;background:var(--canvas);font:600 12.5px/28px var(--sans);color:var(--ink2);white-space:nowrap}
.cvt-pop a:hover{background:var(--canvas2);color:var(--ink)}
.hub-h{margin-top:26px}
.hub-h h3{font:800 22px/1.2 var(--disp);letter-spacing:-.02em}
.pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pc{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border-radius:16px;background:var(--canvas);transition:background .12s}
.pc:hover{background:var(--canvas2)}
.pc .pair{gap:5px}
.pc .ft{--w:28px;--bgc:var(--canvas)}
.pc:hover .ft{--bgc:var(--canvas2)}
.pc .pa{width:14px;height:14px;background:transparent}
.pc>b{min-width:0;overflow:hidden;font:600 14px/1.3 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 22px}
.pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:600 14px/1 var(--sans);color:var(--ink2);transition:box-shadow .12s,background .12s,color .12s}
.pill:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(var(--lnc),.2)}
.pill small{font:700 11.5px/1 var(--sans);color:var(--ink4)}
.pill[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
.pill[aria-pressed="true"] small{color:rgba(255,255,255,.6)}
.mg-fmts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding:14px 10px 0;box-shadow:inset 0 1px 0 var(--hair);font-size:13px;color:var(--ink3)}
.mg-fmts span{margin-right:4px;font-weight:600}
.mg-fmts a{height:26px;padding:0 9px;border-radius:7px;background:var(--canvas);font:700 11.5px/26px var(--disp);letter-spacing:.04em;color:var(--ink2)}
.mg-fmts a:hover{background:var(--canvas2);color:var(--ink)}

/* converter page */
.cv-hero{position:relative;padding:30px 0 88px;background:var(--canvas)}
.cv-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--lnc),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--lnc),.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 60% at 50% 25%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 60% at 50% 25%,#000 20%,transparent 75%);pointer-events:none}
.cv-hero>.wrap{position:relative}
.cv-head{max-width:900px;margin:36px auto 0;text-align:center}
.cv-head .tv-icon .ft{--w:50px}
.cvh-ic{width:64px;height:64px;border-radius:19px}
.cvh-ic svg{width:30px;height:30px}
.cv-head h1{display:table;margin:22px auto 0;padding:0 .2em;border-radius:14px;font-size:clamp(36px,4.4vw,64px);font-weight:800;line-height:1.04;letter-spacing:-.045em}
:lang(zh) .cv-head h1{line-height:1.16;letter-spacing:-.01em}
.cv-head p{max-width:680px;margin:16px auto 0;font-size:clamp(16px,1.25vw,18px);color:var(--ink2)}
@keyframes flash{0%{background:rgba(255,209,102,.6)}100%{background:rgba(255,209,102,0)}}
.cv-head h1.flash{animation:flash 1.4s ease-out}
.cv-card{position:relative;max-width:1080px;margin:40px auto 0;border-radius:28px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3)}
.cv-drop{display:flex;flex-direction:column;align-items:center;gap:14px;margin:12px;padding:50px 24px 38px;border-radius:20px;border:2px dashed rgba(var(--lnc),.12);background:linear-gradient(180deg,#FFFDF8,#FFF7E3);text-align:center}
.cv-drop h3{font:800 23px/1.3 var(--disp);letter-spacing:-.02em}
.cv-hint{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;font-size:13px;color:var(--ink3)}
.cv-hint>span{display:inline-flex;align-items:center;gap:5px}
.cv-src{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:760px;margin-top:6px;font-size:12.5px;color:var(--ink3)}
.cv-src .fmt{background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.tgts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:18px 24px 22px;box-shadow:inset 0 1px 0 var(--hair)}
.tgts>span{margin-right:6px;font:600 14px/1 var(--sans);color:var(--ink2)}
.tgts button{height:36px;padding:0 14px;border-radius:10px;background:var(--canvas);font:800 13px/1 var(--disp);letter-spacing:.03em;color:var(--ink);transition:background .12s}
.tgts button:hover{background:var(--honey)}
.cv-list{display:flex;flex-direction:column;gap:8px;padding:14px 14px 4px}
.cv-all{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 6px;font-size:13.5px;color:var(--ink3)}
.cv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px;padding:16px 18px;border-radius:0 0 28px 28px;background:var(--canvas);box-shadow:inset 0 1px 0 var(--hair)}
.cv-tip{flex:1;min-width:200px;font-size:13px;color:var(--ink3)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.cv-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:1080px;margin:22px auto 0;font-size:13.5px;color:var(--ink3)}
.cv-more>span{margin-right:4px;font-weight:600}
.cv-more a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 8px;border-radius:11px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:600 13.5px/1 var(--sans);color:var(--ink);transition:box-shadow .12s}
.cv-more a:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh1)}
.cv-more .ft{--w:22px;padding-bottom:0}
.cv-more .at{--w:24px}
.cv-more .at::after{display:none}
.fp{position:absolute;z-index:30;width:min(480px,calc(100vw - 32px));border-radius:18px;background:var(--night);box-shadow:0 34px 70px -24px rgba(15,12,41,.7),0 0 0 1px rgba(255,255,255,.06);color:#fff;overflow:hidden;animation:drop .14s ease-out}
.fp-s{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);color:#8F8BB8}
.fp-s input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15px;color:#fff}
.fp-s input::placeholder{color:#8F8BB8}
.fp-b{display:grid;grid-template-columns:164px minmax(0,1fr);min-height:180px}
.fp-g,.fp-f{max-height:330px}
.fp-g{padding:8px;overflow:auto;box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
.fp-g button{display:flex;align-items:center;justify-content:space-between;width:100%;height:38px;padding:0 10px;border-radius:9px;font:600 13.5px/1 var(--sans);color:#B9B5DA;text-align:left}
.fp-g button:hover{background:rgba(255,255,255,.05);color:#fff}
.fp-g button[aria-current="true"]{background:rgba(255,255,255,.09);color:var(--honey)}
.fp-g small{font-size:11.5px;color:#7F7BA8}
.fp-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:6px;padding:10px;overflow:auto}
.fp-f button{height:40px;border-radius:9px;background:rgba(255,255,255,.07);font:800 13px/1 var(--disp);letter-spacing:.03em;color:#fff;transition:background .1s,color .1s}
.fp-f button:hover{background:var(--honey);color:var(--cocoa)}
.fp-f button.cur{box-shadow:inset 0 0 0 1.5px var(--honey);color:var(--honey)}
.fp-e{grid-column:1/-1;padding:28px 8px;text-align:center;font-size:13.5px;color:#8F8BB8}
.fp.flat .fp-b{grid-template-columns:1fr}
.fp.flat .fp-g{display:none}
.fp.flat .fp-f{grid-template-columns:repeat(4,minmax(0,1fr))}
.cv-sec{padding:104px 0;background:var(--sf)}
.cv-sec.alt{background:var(--canvas)}
.about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1080px;margin:44px auto 0}
.about.one{grid-template-columns:1fr;max-width:720px}
.about>div{display:flex;gap:18px;padding:30px;border-radius:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.cv-sec:not(.alt) .about>div{background:var(--canvas);box-shadow:none}
.cv-sec:not(.alt) .about .ft{--bgc:var(--canvas)}
.about .ft{--w:46px}
.about h4{font:800 19px/1.25 var(--disp)}
.about h4 small{display:block;margin-top:4px;font:600 13px/1.3 var(--sans);color:var(--ink3)}
.about p{margin-top:10px;font-size:15px;color:var(--ink2)}
.sfmt{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:40px}
.sfmt button{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--canvas);text-align:left;transition:background .15s}
.sfmt button:hover{background:var(--canvas2)}
.sfmt .ft{--w:32px;--bgc:var(--canvas)}
.sfmt button:hover .ft{--bgc:var(--canvas2)}
.sfmt b{display:block;font:700 15px/1.25 var(--sans);color:var(--ink)}
.sfmt small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink3)}
.cv-sec .pairs{margin-top:40px}
.cv-sec.alt .pc{background:var(--sf)}
.cv-sec.alt .pc .ft{--bgc:var(--sf)}

/* edit / AI workspace */
.ws{display:grid;grid-template-columns:minmax(0,1fr) 380px;height:calc(100vh - 72px);min-height:560px;background:var(--canvas)}
.ws-main{position:relative;min-width:0;overflow:auto;padding:26px 32px 40px}
.ws-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:22px}
.ws-bar>b{font:800 19px/1.2 var(--disp);color:var(--ink)}
.ws-bar>span{font-size:13.5px;color:var(--ink3)}
.ws-bar .sp{flex:1}
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px}
.wf{position:relative;display:flex;flex-direction:column;padding:10px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh1);transition:box-shadow .15s,transform .15s}
.wf[draggable="true"]{cursor:grab}
.wf.dragging{opacity:.4}
.wf.over{box-shadow:0 0 0 2px var(--amber),var(--sh1)}
.wf-th{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border-radius:11px;overflow:hidden;background:var(--canvas)}
.wf-th img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.wf-th>.ft{position:absolute;right:8px;bottom:8px;--w:24px;--bgc:var(--canvas);padding-bottom:3px}
.wf-n{padding:10px 4px 2px}
.wf-n b{display:block;overflow:hidden;font:600 13px/1.3 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.wf-n small{font-size:12px;color:var(--ink3)}
.wf-act{position:absolute;top:16px;right:16px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.wf:hover .wf-act,.wf:focus-within .wf-act{opacity:1}
.wf-act button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sf);box-shadow:var(--sh1);color:var(--ink)}
.wf-act button:hover{background:var(--honey)}
.wf-idx{position:absolute;top:16px;left:16px;z-index:1;display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--solid);font:800 12px/1 var(--disp);color:var(--on-solid)}
.wf-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:250px;border-radius:18px;border:2px dashed rgba(var(--lnc),.12);font:600 14px/1.3 var(--sans);color:var(--ink2);transition:background .15s}
.wf-add:hover{background:rgba(255,255,255,.7)}
.wf-add small{font-weight:500;color:var(--ink3)}
.wf-add .pl{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--honey);color:var(--cocoa);box-shadow:0 8px 18px -8px rgba(217,142,18,.8)}
.th-doc{display:flex;flex-direction:column;gap:6px;width:70%;height:80%;padding:13% 10%;border-radius:6px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.th-doc i{display:block;height:5px;border-radius:3px;background:var(--canvas3)}
.th-doc i:first-child{width:62%;height:9px;margin-bottom:4px;background:var(--c)}
.th-doc i:nth-child(4){width:70%}
.th-doc i:nth-child(6){width:50%}
.th-img{position:absolute;inset:0;background:linear-gradient(180deg,#9AD4F5 0%,#DDF1FB 52%,#7FD39B 52%,#3FA968 100%)}
.th-img::before{content:"";position:absolute;right:22%;top:18%;width:22%;aspect-ratio:1;border-radius:50%;background:#FFD166}
.th-img::after{content:"";position:absolute;left:-10%;bottom:34%;width:80%;height:30%;border-radius:50% 50% 0 0;background:#56B87A}
.th-aud{display:flex;align-items:center;gap:3px;height:36%}
.th-aud i{display:block;width:4px;border-radius:2px;background:#DB2777}
.th-vid{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,#2B2660,#0F0C29);color:#fff}
.th-vid svg{width:34px;height:34px;padding:9px;border-radius:50%;background:rgba(255,255,255,.14);box-sizing:content-box}
.ws-side{display:flex;flex-direction:column;min-height:0;background:var(--sf);box-shadow:-1px 0 0 var(--hair)}
.ws-head{display:flex;align-items:flex-start;gap:14px;padding:26px 26px 20px;box-shadow:inset 0 -1px 0 var(--hair)}
.ws-head .ft{--w:34px}
.ws-head .at{--w:36px}
.ws-head h2{font:800 22px/1.2 var(--disp);letter-spacing:-.02em}
.ws-head p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.ws-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:18px;padding:22px 26px}
.ws-foot{padding:18px 26px 22px;box-shadow:inset 0 1px 0 var(--hair)}
.ws-foot .btn{width:100%}
.ws-foot small{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--ink3)}
.fl{display:flex;flex-direction:column;gap:8px}
.fl>.lab{font:700 13px/1.2 var(--sans);color:var(--ink)}
.inp{width:100%;height:44px;padding:0 14px;border-radius:12px;border:0;outline:0;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);font-size:15px;color:var(--ink)}
.inp:focus{background-color:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2),0 0 0 4px rgba(255,209,102,.35)}
select.inp{appearance:none;-webkit-appearance:none;padding-right:36px;background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377738E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);cursor:pointer}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--amber)}
.oc{display:flex;flex-direction:column;gap:8px}
.oc button{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);text-align:left;transition:box-shadow .12s,background .12s}
.oc button[aria-pressed="true"]{background:#FFF8E6;box-shadow:inset 0 0 0 1.5px rgba(245,165,36,.55)}
.oc b{display:block;font:700 14.5px/1.3 var(--sans);color:var(--ink)}
.oc small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink3)}
.oc .rd{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(var(--lnc),.22)}
.oc button[aria-pressed="true"] .rd{box-shadow:inset 0 0 0 5px var(--amber)}
.posg{display:grid;grid-template-columns:repeat(3,38px);gap:6px}
.posg button{width:38px;height:38px;border-radius:9px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair)}
.posg button[aria-pressed="true"]{background:var(--honey);box-shadow:none}
input[type=range]{width:100%;accent-color:var(--amber)}
.ws-note{padding:14px 16px;border-radius:14px;background:var(--canvas);font-size:13.5px;line-height:1.55;color:var(--ink2)}
.sigp{display:grid;place-items:center;height:96px;border-radius:14px;background:var(--canvas);font:italic 400 40px/1 var(--serif);color:var(--ink)}
.ws .seg,.tx-opts .seg,.mk .seg{align-self:flex-start;flex-wrap:wrap}
.ws-run{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(250,248,243,.92);animation:fade .15s ease-out}
.ws-run>div{width:min(420px,80%);text-align:center}
.ws-run h3{margin-bottom:16px;font:800 22px/1.3 var(--disp)}
.ws-run .bar{height:10px}
.ws-run .bar i{width:0;transition:width 1.5s cubic-bezier(.3,.7,.4,1)}
.ws-run p{margin-top:12px;font-size:13.5px;color:var(--ink3)}
.res{padding:72px 0 112px;background:var(--canvas);text-align:center}
.okc{display:grid;place-items:center;width:72px;height:72px;margin:0 auto;border-radius:50%;background:#E7F6EC;color:#15803D}
.res h1{margin-top:22px;font-size:clamp(34px,4vw,58px);font-weight:800;line-height:1.06;letter-spacing:-.04em}
:lang(zh) .res h1{line-height:1.2;letter-spacing:-.01em}
.res-stat{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;border-radius:999px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:600 15px/1.2 var(--sans);color:var(--ink2)}
.res-stat svg{color:var(--ok)}
.res-stat b{color:#15803D}
.res-dl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:34px}
.btn-xl{height:68px;padding:0 36px;border-radius:18px;font-size:18px}
.res-sub{display:flex;gap:8px}
.res-sub button{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);color:var(--ink);transition:box-shadow .12s}
.res-sub button:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh1)}
.res-note{margin-top:18px;font-size:13.5px;color:var(--ink3)}
.res-next{max-width:1240px;margin:76px auto 0;text-align:left}
.res-next h3{margin-bottom:22px;font:800 24px/1.2 var(--disp);letter-spacing:-.02em}
.tx{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1180px;margin:44px auto 0;text-align:left}
.tx.one{grid-template-columns:1fr;margin-top:12px}
.tx-p{display:flex;flex-direction:column;min-height:380px;border-radius:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh2);overflow:hidden}
.tx-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:0 12px 0 18px;box-shadow:inset 0 -1px 0 var(--hair);font:700 13.5px/1 var(--sans);color:var(--ink)}
.tx-h small{font-weight:500;color:var(--ink3)}
.tx textarea{flex:1;width:100%;min-height:320px;padding:18px;border:0;outline:0;resize:vertical;background:transparent;font:15px/1.65 var(--sans);color:var(--ink)}
.tx-o{flex:1;padding:18px;overflow:auto;font:15px/1.65 var(--sans);color:var(--ink);white-space:pre-wrap;word-break:break-word}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;font-size:13.5px!important}
.tx-o .ph{color:var(--ink4)}
.tx-o .err{color:#DC2626}
.tx-o .add{display:block;margin:0 -18px;padding:2px 18px;background:#E7F6EC}
.tx-o .del{display:block;margin:0 -18px;padding:2px 18px;background:#FDECEC;text-decoration:line-through;color:#9F1239}
.tx-opts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;max-width:1180px;margin:18px auto 0}
.wc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;white-space:normal}
.wc div{padding:16px;border-radius:14px;background:var(--canvas)}
.wc b{display:block;font:800 28px/1 var(--disp);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.wc span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink3)}
.mk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:1080px;margin:44px auto 0;text-align:left}
.mk-p{display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh2)}
.mk-p .btn{align-self:flex-start}
.mk-prev{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:380px;padding:24px;border-radius:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh2)}
.mk-prev small{font-size:12.5px;color:var(--ink3)}
.qr{display:grid;grid-template-columns:repeat(25,1fr);width:224px;height:224px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.qr i{display:block}
.bc{display:flex;align-items:stretch;gap:0;height:120px;padding:16px 18px 8px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.bc i{display:block;background:var(--solid)}
.bc-n{font:600 15px/1 ui-monospace,Consolas,monospace;letter-spacing:.2em;color:var(--ink)}
.sw{display:flex;gap:8px}
.sw button{width:32px;height:32px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--hair2)}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--amber)}
/* was ".rec": no page uses the big round record button any more, and the bare class leaked onto the webmaster tools'
   record boxes (an SPF / DMARC record shown in a 116 px square) and the translator's microphone while listening */
.mk-rec{display:grid;place-items:center;width:116px;height:116px;border-radius:50%;background:#E5484D;color:#fff;box-shadow:0 0 0 12px rgba(229,72,77,.14),0 18px 34px -12px rgba(229,72,77,.7)}
.rec-t{font:800 34px/1 var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.gen{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.gen i{aspect-ratio:1;border-radius:14px}

/* responsive */
@media (max-width:1439px){
  .sbtn{width:auto}
  .sbtn>span{display:none}
  .mg{grid-template-columns:250px minmax(0,1fr) 270px}
}
@media (max-width:1279px){
  .hd-in{gap:16px}
  .nav{margin-left:4px}
  .nl{padding:0 10px}
  .login{padding:0 6px}
  .mg{grid-template-columns:240px minmax(0,1fr)}
  .mg-side{display:none}
  .mg-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-in{gap:36px}
  .fs-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fs-brand{grid-column:1/-1}
  .b1,.b2{grid-column:span 6}
}
@media (max-width:1079px){
  .nav,.hr .ib[data-menu],.sbtn kbd{display:none}
  .mbtn{display:grid}
  .hero-in{grid-template-columns:minmax(0,1fr);padding-block:56px 72px}
  .stage{justify-self:center;max-width:640px}
  .dir-body{grid-template-columns:1fr;gap:18px}
  .rail{position:static;flex-direction:row;overflow-x:auto;padding:6px;border-radius:16px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-h,.rail-sep,.rail-note{display:none}
  .rc{flex:none;width:auto;height:44px}
  .rc .ct{margin-left:2px}
  .cols{grid-template-columns:1fr;gap:8px}
  .colc{padding:16px 18px}
  .colc .ctx>span{display:none}
  .colc .cico{width:44px;height:44px;border-radius:13px}
  .colc .cico svg{width:22px;height:22px}
  .apps-in,.faq-in,.cta-box{grid-template-columns:1fr}
  .faq-in{gap:36px}
  .faq-in .sec-head{position:static}
  .devices{justify-self:center}
  .cta-box{padding:56px 40px}
  .cta-art{display:none}
  .plans{grid-template-columns:1fr;max-width:560px}
  .bento{grid-template-columns:1fr}
  .b1,.b2,.b3,.b4,.b5{grid-column:auto}
  .steps{grid-template-columns:1fr}
}
@media (max-width:719px){
  .hd-in{height:64px}
  .langsw button{min-width:34px;padding:0 8px}
  .hr .btn-sm{display:none}
  .hero h1{letter-spacing:-.04em}
  .stage{aspect-ratio:auto;height:auto}
  .stage .peek,.stage .float{display:none}
  .win{position:relative;inset:auto}
  .js .bar{width:56px}
  .fs-in{flex-direction:column;align-items:flex-start;gap:14px}
  .dir,.why,.apps,.pricing,.tv-sec{padding-block:80px}
  .faq{padding-top:80px}
  .dir-head{flex-direction:column;align-items:stretch}
  .search{width:100%}
  .dm-head{flex-direction:column;align-items:flex-start}
  .fmts{justify-content:flex-start}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .tc{min-height:0;padding:16px}
  .tc h4{font-size:15.5px}
  .tc p{font-size:13px}
  .tc .bdg{top:14px;right:12px}
  .tc-ico .ft{--w:30px}
  .tc-ico .at{--w:34px}
  .tc .go{display:none}
  .pgrid{grid-template-columns:1fr 1fr}
  .bx{padding:26px;min-height:0}
  .lf{width:84px}
  .cta-box{padding:44px 24px;border-radius:28px}
  .fs-top{grid-template-columns:1fr 1fr}
  .proto>span{display:none}
  .up-bear{width:84px;top:-50px}
  .up-zone{min-height:280px}
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr}
  .logo .wm{font-size:22px}
  .hr{gap:4px}
}

@media (max-width:1279px){
  .cvt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pairs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ws{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:1079px){
  .cvt-grid,.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uni{flex-wrap:wrap}
  .ws{grid-template-columns:1fr;height:auto;min-height:0}
  .ws-main{overflow:visible}
  .ws-side{box-shadow:0 -1px 0 var(--hair)}
  .ws-foot{position:sticky;bottom:0;z-index:2;background:var(--sf)}
  .about,.tx,.mk{grid-template-columns:1fr}
}
@media (max-width:719px){
  .cvt-grid,.pairs{grid-template-columns:1fr}
  .cvr{flex-wrap:wrap;gap:10px}
  .cvr-n{flex-basis:calc(100% - 60px)}
  .cvr-to{display:none}
  .cv-bar .btn{flex:1}
  .ws-main{padding:18px 16px 28px}
  .ws-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fp-b{grid-template-columns:118px minmax(0,1fr)}
  .fp-f{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-dl .btn-xl{width:100%}
  .uni{flex-direction:column;align-items:flex-start;gap:16px}
  .uni .btn{width:100%}
  .h2{font-size:30px}
  .cv-head h1,.tv-head h1{font-size:34px}
}

/* ================= site (static pages) ================= */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-greek-ext.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
svg.ic{display:inline-block;vertical-align:middle}
.h3{font:800 clamp(22px,2vw,28px)/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.h4{font:800 17px/1.3 var(--disp);color:var(--ink)}
:lang(zh) .h3,:lang(zh) .h4{letter-spacing:0}
.lk{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--sans);color:var(--indigo)}
.lk svg{transition:transform .15s}
.lk:hover svg{transform:translateX(2px)}
.bdg.soon{background:rgba(var(--lnc),.06);color:var(--ink3)}
.bdg{margin-left:8px;vertical-align:2px}

/* language menu, account, language suggestion bar */
.lmenu{position:relative}
.lbtn{display:inline-flex;align-items:center;gap:7px;width:auto;padding:0 10px;font:600 14px/1 var(--sans);white-space:nowrap}
.lbtn span{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.lpop{position:absolute;right:0;top:calc(100% + 10px);z-index:70;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:540px;padding:10px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),0 30px 60px -28px rgba(var(--shd),.35);animation:drop .14s ease-out}
.lpop a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpop a:hover{background:var(--canvas);color:var(--ink)}
.lpop a[aria-current="true"]{background:var(--honey-soft);color:var(--cocoa);font-weight:700}
.acct{display:flex;align-items:center;gap:8px}
.acct .av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--canvas2);font:800 14px/1 var(--disp);color:var(--ink);overflow:hidden}
.acct .av img{width:100%;height:100%;object-fit:cover}
.acct .me{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 4px;border-radius:12px}
.acct .me:hover{background:var(--canvas2)}
.dia{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;margin-right:6px;vertical-align:-4px;color:#fff}
.dia-month{background:linear-gradient(145deg,#E6E8EE,#A9AFBD);color:#3D4454}
.dia-half{background:linear-gradient(145deg,#FFE08A,#E5A21A);color:#5A3A00}
.dia-year{background:linear-gradient(145deg,#8FD3FF,#3F7CF5);color:#fff}
.dia-life{background:linear-gradient(145deg,#4A4763,#0F0C29);color:var(--honey)}
.langbar{position:relative;z-index:61;background:var(--night);color:#DAD7F0;font-size:14px}
.langbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding-block:6px;flex-wrap:wrap}
.langbar a{font-weight:700;color:var(--honey)}
.langbar button{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#A29ECA}
.langbar button:hover{background:rgba(255,255,255,.08);color:#fff}

/* home extras */
.favs{padding:28px 0 8px;background:var(--canvas)}
.favs-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.favs-h h2{display:flex;align-items:center;gap:8px}
.favs-h h2 svg{color:var(--amber)}
.favs-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.favs-row a{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 10px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:600 14.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.favs-row a:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh1)}
.favs-row .ft{--w:26px}
.favs-row .at{--w:28px}
a.fchip:hover{background:var(--canvas2)}
.fchip .ft{--w:20px}
.catg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.catc{display:flex;flex-direction:column;padding:10px;border-radius:22px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);transition:box-shadow .18s,transform .18s}
.catc:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh2)}
.catc-h{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px}
.catc-h:hover{background:var(--canvas)}
.catc-h .ci{width:40px;height:40px;border-radius:12px}
.catc-h .ci svg{width:20px;height:20px}
.catc-h>span:nth-child(2){flex:1;min-width:0}
.catc-h b{display:block;font:800 17px/1.25 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.catc-h small{display:block;margin-top:3px;font-size:13px;color:var(--ink3)}
.catc-h .car{flex:none;color:var(--ink4);transition:transform .15s,color .15s}
.catc-h:hover .car{color:var(--ink);transform:translateX(3px)}
.catc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:4px 0 0;padding:0;list-style:none}
.catc li{min-width:0}
.catc li a{display:flex;align-items:center;gap:9px;min-width:0;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--ink2)}
.catc li a:hover{background:var(--canvas);color:var(--ink)}
.catc li a>span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.catc li .ft{--w:18px;padding:0;box-shadow:none}
.catc li .ft>b{display:none!important}
.catc li .ft.g svg{width:11px;height:11px}
.catc li .at{--w:20px;border-radius:6px}
.catc li .at::after{display:none}
.catc li .at svg{width:12px;height:12px}
.colc[data-col="convert"] .cico{background:linear-gradient(150deg,#4B45B5,#2E2A78 55%,#1B1750);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 20px -10px rgba(46,42,120,.8)}
.colc[data-col="edit"] .cico{background:linear-gradient(150deg,#FFD978,#F5A524);color:var(--cocoa);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -10px rgba(217,142,18,.8)}
.colc[data-col="ai"] .cico{background:linear-gradient(150deg,#9377FF,#6146F2 52%,#3F28C2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px -10px rgba(97,70,242,.8)}
.dq{margin-bottom:28px}
.dq .grid{margin-top:14px}
.fan .fanp{position:absolute;left:50%;bottom:6px;margin-left:-29px;transform:translateX(var(--x)) rotate(var(--r));transform-origin:50% 130%}
.fan .fanp .ft{--w:58px}
.mdoc .lbl .ft{--w:34px}
.cta-art>span{position:absolute}
.cta-art>span .ft{position:static}
.pr-note{margin-top:22px;text-align:center;font-size:13.5px;color:var(--ink3)}
details.q .qa{margin-top:-4px;padding:0 24px 22px;font-size:15.5px;line-height:1.7;color:var(--ink2)}
/* a Chinese FAQ title keeps its words whole (keep-all), so "加密解密与密钥生成常见问题" was the narrowest the grid column
   could get: wider than a phone, it widened the whole page and the phone tests tapped beside the buttons. The column may
   now shrink and the title wraps; a long identifier in an answer (openssl_public_encrypt…) wraps too */
.faq-in>*{min-width:0}
details.q .qa,details.q summary{overflow-wrap:anywhere}
.faq-l{min-width:0}

/* page heads, breadcrumbs */
.phead{position:relative;overflow:hidden;padding:26px 0 52px;background:var(--canvas)}
.phead.slim{padding-bottom:30px}
.phead::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--lnc),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--lnc),.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 90% at 70% 10%,#000 20%,transparent 70%);mask-image:radial-gradient(70% 90% at 70% 10%,#000 20%,transparent 70%);pointer-events:none}
.phead>.wrap{position:relative}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"";width:6px;height:6px;border-right:1.6px solid var(--ink4);border-top:1.6px solid var(--ink4);transform:rotate(45deg);margin-right:4px}
.crumbs [aria-current]{font-weight:600;color:var(--ink2)}
.phead-in{display:flex;align-items:flex-start;gap:22px;margin-top:30px}
.phead h1{font-size:clamp(34px,3.8vw,56px);font-weight:800;line-height:1.05;letter-spacing:-.04em}
:lang(zh) .phead h1{line-height:1.2;letter-spacing:0}
.phead .lede{max-width:760px;margin-top:14px}
.cico.lg{width:64px;height:64px;border-radius:20px;background:linear-gradient(150deg,#4B45B5,#2E2A78 55%,#1B1750)}
.ci.lg{width:64px;height:64px;border-radius:20px;background:var(--c);color:#fff}
.ci.lg svg{width:30px;height:30px}
.uni{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px;padding:22px 24px 22px 28px;border-radius:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.uni-t b{display:block;font:800 21px/1.25 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.uni-t span{display:block;margin-top:5px;font-size:14.5px;color:var(--ink3)}

/* column and category pages */
.colbody,.catbody{padding:44px 0 96px;background:var(--sf)}
.colnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.colnav a{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 6px;border-radius:12px;background:var(--canvas);font:600 14px/1 var(--sans);color:var(--ink2)}
.colnav a:hover{background:var(--canvas2);color:var(--ink)}
.colnav .ci{width:28px;height:28px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 28px}
.pills button{height:36px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair2);font:600 14px/1 var(--sans);color:var(--ink2)}
.pills button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(var(--lnc),.2)}
.pills button[aria-pressed="true"]{background:var(--solid);box-shadow:none;color:var(--on-solid)}
.catsec{padding-top:34px;scroll-margin-top:90px}
.catsec+.catsec{margin-top:26px;box-shadow:inset 0 1px 0 var(--hair)}
.catsec-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-bottom:18px}
.catsec-h h2{font:800 23px/1.2 var(--disp);letter-spacing:-.02em}
.catsec-h h2 a{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.catsec-h p{flex:1;min-width:220px;font-size:14.5px;color:var(--ink3)}
.catbody-h{margin-bottom:20px}
.tc{min-height:0;padding:18px 18px 16px;flex-direction:row;align-items:flex-start;gap:14px}
.tc-i{flex:none;display:flex;align-items:center;min-height:44px}
.tc-i .pair{gap:5px}
.tc-i .pair .pa{width:14px;height:14px}
.tc-i .ft{--w:30px}
.tc-i .at{--w:34px}
.tc-t{flex:1;min-width:0}
.tc-a{display:inline;font:700 16px/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.tc-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tc-t small{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--ink3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc .bdg{position:static}
.fav{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-4px -6px 0 0;border-radius:10px;color:var(--ink4);opacity:0;transition:opacity .15s,color .15s,background .15s}
.tc:hover .fav,.fav[aria-pressed="true"],.fav:focus-visible{opacity:1}
.fav:hover{background:var(--canvas);color:var(--ink)}
.fav[aria-pressed="true"]{color:var(--amber)}
.fav[aria-pressed="true"] svg{fill:currentColor}
.fav.big{opacity:1;display:inline-flex;gap:8px;width:auto;height:44px;margin:0;padding:0 16px;border-radius:13px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2);font:600 14px/1 var(--sans);color:var(--ink2)}
.fav.big:hover{box-shadow:0 0 0 1px rgba(var(--shd),.2)}
.fav.big[aria-pressed="true"]{color:var(--cocoa);background:var(--honey-soft);box-shadow:0 0 0 1px rgba(245,165,36,.4)}
.cvhub{padding:0 0 12px;background:var(--canvas)}
.cvhub .cv-card{max-width:1000px;margin:-18px auto 0;padding:12px;border-radius:30px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3)}
.cv-drop,.dropz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:300px;padding:36px 24px;border-radius:22px;border:2px dashed rgba(var(--lnc),.12);background:linear-gradient(180deg,#FFFDF8,#FFF7E3);text-align:center;transition:background .15s,border-color .15s}
.cv-drop.over,.dropz.over{border-color:rgba(245,165,36,.6);background:#FFF1CC}
.cv-drop svg.b,.dropz svg.b{width:86px;height:auto;filter:drop-shadow(0 8px 14px rgba(59,36,16,.16))}
.cv-dt{font:800 21px/1.3 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.cv-fmts,.dz-fmt{max-width:620px;font-size:13px;line-height:1.55;color:var(--ink3)}
.dz-or{font-size:14px;color:var(--ink3)}
.dz-note{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink3)}
.dz-url{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;width:min(540px,100%);margin-top:6px;padding-top:14px;box-shadow:0 -1px 0 var(--hair)}
.dz-urlor{font-size:13.5px;color:var(--ink3)}
.dz-urlrow{display:flex;gap:8px;width:100%}
.dz-urlrow input{flex:1;min-width:0;width:0;height:46px;padding:0 14px;border:0;border-radius:12px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:inherit;color:var(--ink);outline:0}
.dz-urlrow input:focus{box-shadow:inset 0 0 0 1px rgba(245,165,36,.7),0 0 0 4px rgba(255,209,102,.3)}
.dz-urlrow .btn{height:46px}
.dz-note svg{color:var(--ok)}
.relc{padding:64px 0 96px;background:var(--canvas)}
.relc-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.relc-a{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 8px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:600 14.5px/1 var(--sans);color:var(--ink)}
.relc-a:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh1)}

/* tool page */
.thero{position:relative;overflow:hidden;padding:24px 0 30px;background:var(--canvas)}
.thero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--lnc),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--lnc),.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 90% at 50% 0%,#000 20%,transparent 72%);mask-image:radial-gradient(60% 90% at 50% 0%,#000 20%,transparent 72%);pointer-events:none}
.thero>.wrap{position:relative}
.thero-in{display:flex;align-items:center;gap:22px;margin-top:26px}
.thero-i .ft{--w:48px;--bgc:var(--canvas)}
.thero-i .at{--w:54px}
.thero-i .pair{gap:10px}
.thero-i .pair .pa{width:24px;height:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.thero-t{flex:1;min-width:0}
.thero h1{font-size:clamp(32px,3.4vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.04em}
:lang(zh) .thero h1{line-height:1.2;letter-spacing:0}
.thero .lede{margin-top:8px}
.tapp{padding:6px 0 40px;background:var(--canvas)}
.app{position:relative;max-width:1180px;margin:0 auto;padding:12px;border-radius:30px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3)}
.soonbox{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:28px;border-radius:22px;background:var(--canvas)}
.soonbox>div{flex:1;min-width:240px}
.soonbox b{font:800 20px/1.3 var(--disp);color:var(--ink)}
.soonbox p{margin-top:4px;font-size:14.5px;color:var(--ink3)}
.soon-i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--sf);color:var(--gold);box-shadow:0 0 0 1px var(--hair)}
.soonbox .notify{margin:0;flex-basis:100%;min-width:0}
.soonbox .notify input,.pricepage .notify input{background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink)}
.app-shell{display:grid;gap:12px;padding:12px}
.skel{height:160px;border-radius:18px;background:linear-gradient(90deg,var(--canvas) 25%,#F7F4EC 50%,var(--canvas) 75%);background-size:200% 100%;animation:skel 1.2s linear infinite}
.skel.s2{height:60px;width:60%}
@keyframes skel{to{background-position:-200% 0}}
.nojs{padding:16px;text-align:center;color:var(--ink3)}
.tinfo{padding:72px 0 40px;background:var(--sf)}
.tinfo-in{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.prose{font-size:16.5px;line-height:1.75;color:var(--ink2);overflow-wrap:anywhere}  /* ".com、.cn、.net…" has no break point by the rules: let it wrap */
.prose h2{margin:40px 0 14px;font:800 26px/1.25 var(--disp);letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 10px;font:800 19px/1.3 var(--disp)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:1.3em}
.prose li{margin:6px 0}
.prose a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(46,42,120,.3)}
.prose strong{color:var(--ink)}
.prose table{width:100%;margin:12px 0 20px;border-collapse:collapse;font-size:15px}
.prose th,.prose td{padding:10px 12px;text-align:left;box-shadow:inset 0 -1px 0 var(--hair)}
.prose.narrow,.wrap.narrow{max-width:820px}
.prose ol.steps{counter-reset:none;display:grid;gap:12px;margin:18px 0 8px;padding:0;list-style:none}
.prose ol.steps li{display:flex;gap:16px;margin:0;padding:18px 20px;border-radius:18px;background:var(--canvas)}
.prose ol.steps .n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--honey);font:800 15px/1 var(--disp);color:var(--cocoa)}
.prose ol.steps b,.prose ul.feats b{display:block;font:700 16.5px/1.35 var(--disp);color:var(--ink)}
.prose ol.steps p,.prose ul.feats p{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--ink3)}
.prose ul.feats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 8px;padding:0;list-style:none}
.prose ul.feats li{margin:0;padding:18px 20px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--hair)}
.tside{position:sticky;top:96px;display:grid;gap:14px}
.facts{padding:22px;border-radius:22px;background:var(--canvas)}
.facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;margin:14px 0 0;font-size:14px}
.facts dt{color:var(--ink3)}
.facts dd{margin:0;font-weight:600;color:var(--ink)}
.fmtnote{display:flex;gap:14px;padding:18px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--hair)}
.fmtnote b{display:block;font:700 15px/1.3 var(--disp);color:var(--ink)}
.fmtnote p{margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--ink3)}
.rel{padding:64px 0 96px;background:var(--canvas)}
.rel .grid{margin-top:20px}
.rel .tc{background:var(--sf)}

/* pricing page, content pages, 404 */
.pricepage .pricing{padding-top:40px}
.cmp{padding:24px 0 96px;background:var(--sf)}
.cmp-wrap{overflow-x:auto;margin-top:18px;border-radius:22px;box-shadow:0 0 0 1px var(--hair)}
.cmp-t{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.cmp-t th,.cmp-t td{padding:16px 20px;text-align:left;box-shadow:inset 0 -1px 0 var(--hair)}
.cmp-t thead th{background:var(--canvas);font:700 14px/1.2 var(--sans);color:var(--ink)}
.cmp-t tbody th{font-weight:600;color:var(--ink2)}
.cmp-t td:last-child{font-weight:700;color:var(--ink)}
.prose-sec{padding:44px 0 96px;background:var(--sf)}
.upd{margin-top:10px;font-size:14px;color:var(--ink3)}
.docpage h1{margin-top:24px;font-size:clamp(32px,3.4vw,50px);font-weight:800;letter-spacing:-.035em}
.contact{padding:0 0 96px}
.cform{display:grid;gap:16px}
.cform label{display:grid;gap:8px;font:600 14px/1.3 var(--sans);color:var(--ink)}
.cform input,.cform select,.cform textarea,.aform input{width:100%;padding:12px 14px;border-radius:12px;border:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:inherit;color:var(--ink);outline:0}
.cform input:focus,.cform select:focus,.cform textarea:focus,.aform input:focus{box-shadow:inset 0 0 0 1px rgba(245,165,36,.7),0 0 0 4px rgba(255,209,102,.3)}
.cform .btn{justify-self:start}
.nf{background:var(--canvas)}
.nf-in{display:flex;flex-direction:column;align-items:center;padding-block:80px 110px;text-align:center}
.nf-b{width:120px;height:auto}
.nf h1{margin-top:22px;font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em}
.nf .lede{max-width:560px;margin-top:12px}
.nf .cta{justify-content:center}
.nf-pop{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:880px;margin-top:40px}
.nf-pop a{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 10px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:600 14px/1 var(--sans);color:var(--ink)}
.nf-pop .ft{--w:22px}
.nf-pop .at{--w:26px}

/* auth and account shells */
.authpage{background:var(--canvas)}
.auth-in{display:flex;justify-content:center;padding-block:64px 110px}
.auth-card{width:min(460px,100%);padding:40px 36px 34px;border-radius:30px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3);text-align:center}
.auth-b{width:64px;height:auto;margin:0 auto}
.auth-card h1{margin-top:18px;font-size:28px;font-weight:800;letter-spacing:-.025em}
.auth-card .lede{margin-top:8px;font-size:15px}
.oauth{display:grid;gap:10px;margin-top:26px}
.oa{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:13px;box-shadow:inset 0 0 0 1px var(--hair2);font:600 15px/1 var(--sans);color:var(--ink)}
.oa:hover{background:var(--canvas)}
.or{display:flex;align-items:center;gap:12px;margin:8px 0 0;font-size:13px;color:var(--ink3)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--hair2)}
.aform{display:grid;gap:14px;margin-top:22px;text-align:left}
.aform label{display:grid;gap:7px;font:600 14px/1.3 var(--sans);color:var(--ink)}
.aform label.chk{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:var(--ink2)}
.aform label.chk input{width:auto;margin-top:3px;box-shadow:none}
.aform a{color:var(--indigo);text-decoration:underline}
.aform .btn{width:100%;margin-top:6px}
.aerr{padding:10px 12px;border-radius:10px;background:#FDECEC;font-size:14px;color:#B42318}
.alinks{margin-top:18px;font-size:14px;color:var(--ink3)}
.alinks a{color:var(--indigo);font-weight:600}
.acctpage{background:var(--canvas)}
.acct-in{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding-block:40px 96px;align-items:start}
.acct-nav{position:sticky;top:96px;display:grid;gap:2px;padding:10px;border-radius:22px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.acct-me{display:grid;justify-items:center;gap:4px;padding:18px 10px 16px;margin-bottom:6px;box-shadow:inset 0 -1px 0 var(--hair);text-align:center}
.acct-me .av{width:56px;height:56px;border-radius:50%;background:var(--canvas2)}
.acct-me b{margin-top:8px;font:700 16px/1.3 var(--disp);color:var(--ink)}
.acct-me small{font-size:13px;color:var(--ink3)}
.acct-nav a,.acct-out{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:12px;font:600 14.5px/1 var(--sans);color:var(--ink2);text-align:left}
.acct-nav a:hover,.acct-out:hover{background:var(--canvas);color:var(--ink)}
.acct-nav a[aria-current="true"]{background:var(--honey-soft);color:var(--cocoa)}
.acct-main{min-width:0;padding:28px;border-radius:26px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.acct-main:focus{outline:0}
.acct-me .av{display:grid;place-items:center;overflow:hidden;font:800 22px/1 var(--disp);color:var(--ink)}
.acct-me .av img{width:100%;height:100%;object-fit:cover}
.acct-tier{display:inline-flex;align-items:center;margin-top:8px;padding:4px 11px;border-radius:99px;background:var(--canvas);font:700 12.5px/1.3 var(--sans);color:var(--ink2)}
.acct-tier.vip{padding-left:5px;background:var(--honey-soft);color:var(--cocoa)}
.acct-tier .dia{width:19px;height:19px;border-radius:6px;margin-right:6px;vertical-align:0}
.ahint{font:500 12.5px/1.4 var(--sans);color:var(--ink3)}
.pwf{position:relative;display:block}
.pwf input{padding-right:48px}
.pwf-eye{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;border-radius:10px;color:var(--ink3)}
.pwf-eye:hover{background:var(--canvas);color:var(--ink)}
.pwf-eye[aria-pressed="true"]{color:var(--indigo)}
.alink{margin-left:4px;color:var(--indigo);font-weight:700;text-decoration:underline}
.asent{display:grid;justify-items:center;gap:12px;margin-top:22px;font-size:14px;color:var(--ink3)}
.asent .btn{min-width:180px}
.bspin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.btn[aria-busy="true"]{opacity:.8;cursor:progress}
.btn-danger{color:#fff;background:#B42318}
.btn-danger:hover{background:#912018}
.ac-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:22px}
.ac-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.ac-head p{margin-top:4px;font-size:14px;color:var(--ink3)}
.ac-plan{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;padding:20px 22px;border-radius:20px;background:var(--canvas)}
.ac-plan.vip{background:linear-gradient(120deg,#FFF3D1,#FFFBF0 65%)}
.ac-plan.v-life{background:linear-gradient(120deg,#1C1840,#2E2A78)}
.ac-plan.v-life .ac-plan-t b{color:#fff}
.ac-plan.v-life .ac-plan-t small,.ac-plan.v-life .ac-plan-t span{color:#C9C5E6}
.ac-plan-i{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);color:var(--ink3)}
.ac-plan-i .dia{width:34px;height:34px;border-radius:11px;margin:0}
.ac-plan-t{flex:1;min-width:200px;display:grid;gap:3px}
.ac-plan-t small{font:700 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.ac-plan-t b{font:800 20px/1.3 var(--disp);color:var(--ink)}
.ac-plan-t span{font-size:14px;color:var(--ink2)}
.ac-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.ac-stat{display:grid;align-content:start;gap:7px;padding:18px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--hair)}
.ac-stat>small{font:600 13px/1.3 var(--sans);color:var(--ink3)}
.ac-stat>b{font:800 26px/1.1 var(--disp);color:var(--ink)}
.ac-stat>b small{font-size:15px;font-weight:700;color:var(--ink3)}
.ac-stat>span{font-size:13px;line-height:1.45;color:var(--ink3)}
.ac-stat .bar{height:6px}
.ac-sec{margin-top:32px}
.ac-sec>h3,.ac-sh h3{font:800 18px/1.3 var(--disp);color:var(--ink)}
.ac-sec>h3{margin-bottom:12px}
.ac-sh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ac-sh>a{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--sans);color:var(--indigo)}
.ac-list{display:grid;gap:8px}
.ac-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair)}
.ac-row:hover{background:var(--canvas)}
.ac-ico{display:grid;place-items:center}
.ac-ico .ft{--w:30px}
.ac-ico .at{--w:34px}
.ac-ico .pair{gap:2px}
.ac-ico .pair .ft{--w:20px}
.ac-txt{display:grid;gap:2px;min-width:0}
.ac-txt b{overflow:hidden;font:700 15px/1.35 var(--sans);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.ac-txt b a:hover{text-decoration:underline}
.ac-txt small{overflow:hidden;font-size:13px;color:var(--ink3);text-overflow:ellipsis;white-space:nowrap}
.ac-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.ac-act .btn-sm{height:34px;padding:0 12px;font-size:13.5px}
.ac-gone{font-size:13px;color:var(--ink4)}
.ast{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;background:var(--canvas2);font:700 12px/1 var(--sans);color:var(--ink2);white-space:nowrap}
.ast-done{background:#E7F6EC;color:#157A3A}
.ast-failed{background:#FDECEC;color:#B42318}
.ast-running,.ast-queued{background:var(--honey-soft);color:#B36F00}
.ac-more{display:flex;justify-content:center;margin-top:16px}
.ac-favs{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ac-tw{overflow-x:auto;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair)}
.ac-t{width:100%;border-collapse:collapse;font-size:14px}
.ac-t th,.ac-t td{padding:12px 16px;text-align:left;white-space:nowrap;box-shadow:inset 0 -1px 0 var(--hair)}
.ac-t tr:last-child td{box-shadow:none}
.ac-t thead th{background:var(--canvas);font:700 13px/1.2 var(--sans);color:var(--ink)}
.ac-t td svg{color:var(--ok)}
.ac-form{max-width:460px;margin-top:0}
.ac-form select{width:100%;padding:12px 14px;border:0;border-radius:12px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink);outline:0}
.ac-form input:disabled{background:var(--canvas);color:var(--ink3)}
.ac-form .btn{width:auto;justify-self:start;margin-top:2px}
.ac-note{margin-bottom:12px;font-size:14px;color:var(--ink3)}
.ac-provs{display:grid;gap:8px;max-width:580px}
.ac-prov{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair)}
.ac-prov .ac-txt{flex:1}
.ac-prov-i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--canvas);color:var(--ink)}
.ac-danger details{padding:2px 18px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(180,35,24,.22)}
.ac-danger summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;font:700 15px/1.3 var(--sans);color:#B42318;list-style:none;cursor:pointer}
.ac-danger summary::-webkit-details-marker{display:none}
.ac-danger details[open] summary svg{transform:rotate(180deg)}
.ac-danger p{font-size:14px;color:var(--ink2)}
.ac-danger form{margin:14px 0 18px}

/* motion */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:1279px){
  .catg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tinfo-in{grid-template-columns:minmax(0,1fr) 300px;gap:36px}
  .lpop{width:420px;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1079px){
  .lbtn span{display:none}
  .tinfo-in,.acct-in{grid-template-columns:1fr}
  .tside,.acct-nav{position:static}
  .acct-in{gap:16px;padding-top:24px}
  .acct-nav{display:flex;flex-wrap:wrap;gap:4px}
  .acct-me{flex-basis:100%}
  .acct-nav a,.acct-out{flex:1 1 auto;justify-content:center}
  .acct-nav .acct-out{flex:0 1 auto}
  .ac-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uni{flex-direction:column;align-items:flex-start}
}
@media (max-width:719px){
  .catg{grid-template-columns:minmax(0,1fr)}
  .phead-in,.thero-in{flex-direction:column;gap:14px}
  .thero-in .fav.big{align-self:flex-start}
  .prose ul.feats{grid-template-columns:1fr}
  .lpop{position:fixed;left:12px;right:12px;top:72px;width:auto;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
  .acct .btn{display:none}
  .auth-card{padding:32px 22px 28px}
  .acct-main{padding:20px 16px}
  .acct-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px}
  .acct-me{grid-column:1/-1;grid-template-columns:48px minmax(0,1fr);column-gap:12px;row-gap:1px;justify-items:start;padding:8px 8px 14px;text-align:left}
  .acct-me .av{grid-row:1/span 3;width:48px;height:48px;font-size:18px}
  .acct-me b{margin-top:0}
  .acct-me small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acct-tier{margin-top:4px}
  .acct-nav a,.acct-out{justify-content:center;height:40px;padding:0 6px;font-size:13px;white-space:nowrap}
  .acct-nav a svg,.acct-out svg{display:none}
  .ac-plan{padding:16px}
  .ac-plan-t{min-width:150px}
  .ac-plan .btn{width:100%}
  .ac-row{grid-template-columns:36px minmax(0,1fr) auto}
  .ac-row .ac-act{grid-column:2/-1;justify-content:flex-start}
  .ac-stat>b{font-size:22px}
  .fav{opacity:1}
  .tc .fav{display:none}
}

/* tool workspace inside the tool card */
.app.on{padding:0;overflow:hidden}
.app .ws{grid-template-columns:minmax(0,1fr) 372px;height:auto;min-height:560px;border-radius:30px;background:var(--canvas)}
.app .ws-main{overflow:visible;padding:24px 26px 30px;border-radius:30px 0 0 30px}
.app .ws-side{border-radius:0 30px 30px 0}
.app .ws-head{padding:22px 24px 18px}
.app .ws-body{padding:20px 24px;max-height:620px}
.app .ws-foot{padding:16px 24px 20px}
.ws-hint{font-size:13px;color:var(--ink3)}
.ws-foot small[data-quota]{margin-top:12px;font-weight:600;color:var(--ink2)}
.wf.bad{box-shadow:0 0 0 1.5px rgba(229,72,77,.55),var(--sh1)}
.wf-up{position:absolute;left:10px;right:10px;bottom:10px;height:6px;border-radius:999px;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.wf-up i{display:block;height:100%;width:0;border-radius:999px;background:var(--amber);transition:width .2s}
.wf-err{position:absolute;inset:auto 8px 8px;padding:8px 10px;border-radius:10px;background:rgba(229,72,77,.95);font:600 12px/1.35 var(--sans);color:#fff;text-align:left}
.wf-tag{position:absolute;top:16px;left:16px;z-index:1;height:24px;padding:0 9px;border-radius:999px;background:var(--solid);font:700 11.5px/24px var(--sans);color:var(--on-solid)}
.wf-th img{background:repeating-conic-gradient(#F3F0E8 0% 25%,#fff 0% 50%) 50%/16px 16px}
.wf-th img[src$=".pdf"],.wf-th img[src^="data:image/jpeg"]{object-fit:contain;background:#fff}
.fl .hint{font-size:12.5px;line-height:1.5;color:var(--ink3)}
.ws-body .chk{align-items:flex-start;line-height:1.4}
.ws-body .chk input{flex:none;margin-top:1px}
.adv{border-radius:14px;background:var(--canvas)}
.adv>summary{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;list-style:none;cursor:pointer;font:700 13.5px/1 var(--sans);color:var(--ink2)}
.adv>summary::-webkit-details-marker{display:none}
.adv>summary>svg:last-child{margin-left:auto;transition:transform .15s}
.adv[open]>summary>svg:last-child{transform:rotate(180deg)}
.adv>div{padding:0 14px 16px}
.adv>div+div{padding-top:2px}
.adv .inp{background-color:var(--sf)}
.rng{display:flex;align-items:center;gap:12px}
.rng output{flex:none;min-width:58px;height:32px;padding:0 8px;border-radius:9px;background:var(--canvas);font:700 13px/32px var(--sans);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.clr{display:flex;align-items:center;gap:10px}
.clr input[type=color]{width:44px;height:36px;padding:2px;border:0;border-radius:10px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);cursor:pointer}
.clr code{font:600 13px/1 ui-monospace,Consolas,monospace;color:var(--ink2)}
.ofile{display:flex;align-items:center;gap:8px;min-width:0}
.ofile .btn{max-width:100%;overflow:hidden}
.ofile .btn span{overflow:hidden;text-overflow:ellipsis}
.ofile em{font:600 12.5px/1 var(--sans);font-style:normal;color:var(--ink3)}
.ofile .x{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--ink3)}
.ofile .x:hover{background:var(--canvas);color:var(--ink)}
.inp.ta{height:auto;min-height:84px;padding:10px 14px;line-height:1.5;resize:vertical}
.posg.g6{grid-template-rows:repeat(2,38px)}
.ws-body .seg{flex-wrap:wrap}
.ws-body .seg button{height:34px}
.oc button:hover{box-shadow:inset 0 0 0 1px rgba(var(--lnc),.2)}
/* VIP features in a tool's settings: a small mark on the option / choice, and a line saying what using it takes */
.vipt{display:inline-flex;align-items:center;height:18px;margin-left:6px;padding:0 6px;border-radius:6px;background:linear-gradient(135deg,#2E2A78,#5B4FD6);font:800 10px/1 var(--sans);letter-spacing:.04em;color:#FFE7A3;vertical-align:2px;white-space:nowrap}
.seg button .vipt{margin-left:5px;vertical-align:1px}
.chk .vipt{margin-left:2px;flex:none}
.vipn{display:flex;align-items:flex-start;gap:8px;margin-top:4px;padding:11px 14px;border-radius:12px;background:#EEEBFF;font:600 13px/1.45 var(--sans);color:#3B3591}
.vipn svg{flex:none;margin-top:1px;color:#5B4FD6}
.vipn[hidden]{display:none}
/* a number with common values one tap away (target size: 200 KB, 500 KB, 1 MB …) and a box for any other */
.chips{display:flex;flex-direction:column;gap:10px}
.chip-own{display:flex;align-items:center;gap:8px}
.chip-own .inp{max-width:170px}
.chip-own span{font:600 13.5px/1 var(--sans);color:var(--ink3)}
/* common wordings under a text box, one tap fills it (a watermark's "for … only") */
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sugg button{max-width:100%;min-height:32px;padding:5px 11px;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair2);font:600 12.5px/1.35 var(--sans);color:var(--ink2);text-align:left;cursor:pointer}
.sugg button:hover{background:var(--sf);color:var(--ink)}
.adv .sugg button{background:var(--sf)}
.spin{display:block;width:38px;height:38px;margin:0 auto 16px;border-radius:50%;border:3.5px solid rgba(245,165,36,.25);border-top-color:var(--amber);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ws-run .btn{margin-top:16px}
.bar{position:relative;display:block;height:8px;border-radius:999px;background:var(--canvas2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#FFC847,#F5A524);transition:width .4s ease-out}

/* result */
.res.in{padding:44px 24px 40px;border-radius:30px;background:var(--canvas);animation:fade .2s ease-out}
.res-h{margin-top:18px;font:800 clamp(28px,3vw,42px)/1.12 var(--disp);letter-spacing:-.03em;color:var(--ink)}
:lang(zh) .res-h{letter-spacing:0;line-height:1.25}
.res-notes{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:18px auto 0;text-align:left}
.res-notes .ws-note{background:var(--sf)}
.res-prev{max-width:520px;margin:26px auto 0}
.res-prev img{display:block;max-width:100%;max-height:360px;margin:0 auto;border-radius:16px;background:repeating-conic-gradient(#F3F0E8 0% 25%,#fff 0% 50%) 50%/18px 18px;box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.res-files{display:flex;flex-direction:column;gap:8px;max-width:680px;margin:26px auto 0;text-align:left}
.rf{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.rf .ft{--w:30px}
.rf-n{flex:1;min-width:0}
.rf-n b{display:block;overflow:hidden;font:600 14px/1.3 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.rf-n small{font-size:12.5px;color:var(--ink3)}
.res-text{max-width:860px;margin:26px auto 0;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);text-align:left;overflow:hidden}
.res-text .tx-h{padding:0 10px 0 18px}
.res-text .sp{flex:1}
.res-text textarea{display:block;width:100%;min-height:260px;padding:16px 18px;border:0;outline:0;resize:vertical;background:transparent;font:14.5px/1.65 var(--sans);color:var(--ink)}
.app .res-next{margin-top:48px}
.app .res-next .grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* converter on category pages */
.cvhub .cv-card{min-height:120px}
.cvhub .cv-list{padding:4px 2px 2px}
.cvhub .cv-bar{margin:12px 0 0;border-radius:20px}
.cvhub .cv-more{max-width:1000px}
.cvr.bad{box-shadow:0 0 0 1.5px rgba(229,72,77,.45)}
.st.bad{background:#FDECEC;color:#B42318}
.fp-f button.off{opacity:.4;cursor:not-allowed}
.fp-f button.off:hover{background:rgba(255,255,255,.07);color:#fff}
.fp-f button small{display:block;margin-top:3px;font:600 9.5px/1 var(--sans);letter-spacing:0;color:#B9B5DA}
.fp-f button.off{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* paywall */
.pw{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:20px;background:rgba(15,12,41,.42);animation:fade .12s ease-out}
.pw-box{position:relative;width:min(460px,100%);padding:36px 32px 24px;border-radius:26px;background:var(--sf);box-shadow:0 50px 110px -30px rgba(15,12,41,.6);text-align:center;animation:drop .16s ease-out}
.pw-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--ink3)}
.pw-x:hover{background:var(--canvas);color:var(--ink)}
.pw-i{display:grid;place-items:center;width:64px;height:64px;margin:0 auto;border-radius:20px;background:var(--honey-soft);color:var(--gold)}
.pw h2{margin-top:18px;font:800 24px/1.25 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.pw p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink2)}
.pw-acts{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.pw-acts .btn{width:100%}
.pw-li{display:flex;flex-direction:column;gap:8px;margin:20px 0 0;padding:16px 18px;border-radius:16px;background:var(--canvas);list-style:none;text-align:left;font-size:14px;color:var(--ink2)}
.pw-li li{display:flex;align-items:center;gap:10px}
.pw-li svg{flex:none;color:var(--ok)}
.pw-later{margin-top:14px;padding:8px 12px;border-radius:10px;font:600 13.5px/1 var(--sans);color:var(--ink3)}
.pw-later:hover{background:var(--canvas);color:var(--ink)}
.pw-later.pw-alt{display:block;width:100%;margin-top:16px;padding:12px;border-radius:12px;background:var(--canvas);font-weight:700;color:var(--ink2);line-height:1.35}
.pw-later.pw-alt+.pw-later{margin-top:6px}

@media (max-width:959px){
  .app .ws{grid-template-columns:1fr;min-height:0}
  .app .ws-main{border-radius:30px 30px 0 0;padding:20px 16px 24px}
  .app .ws-side{border-radius:0 0 30px 30px;box-shadow:0 -1px 0 var(--hair)}
  .app .ws-body{max-height:none}
  .ws-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .wf-add{min-height:180px}
  .wf-act{opacity:1}
}
@media (max-width:719px){
  .app{border-radius:24px;padding:8px}
  .app.on{padding:0}
  .app .ws-main{border-radius:24px 24px 0 0}
  .app .ws-side{border-radius:0 0 24px 24px}
  .ws-bar .ws-hint{display:none}
  .res.in{padding:34px 14px 30px;border-radius:24px}
  .res-dl{flex-direction:column;align-items:stretch}
  .res-dl .btn-xl{width:100%;height:60px;padding:0 20px}
  .res-sub{justify-content:center}
  .cvr{flex-wrap:wrap;gap:10px}
  .cvr-n{flex-basis:calc(100% - 50px)}
  .cvr-to{margin-left:46px}
  .cvhub .cv-bar .btn-lg{flex:1}
  .cv-tip{order:3;flex-basis:100%}
  .fp{left:8px!important;right:8px;width:auto}
  .fp-b{grid-template-columns:120px minmax(0,1fr)}
  .fp-f{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-box{padding:32px 20px 20px}
}
.res-fn{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin:16px auto 0;padding:10px 16px 10px 10px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);text-align:left}
.res-fn .ft{--w:30px}
.res-fn span{min-width:0}
.res-fn b{display:block;overflow:hidden;max-width:420px;font:600 14px/1.3 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.res-fn small{font-size:12.5px;color:var(--ink3)}
/* result 2.0 (2026-09-29): rename, share / send to phone / compare buttons, before-after, PDF pages, live countdown, VIP line */
.res-fn .rf-ed{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:2px;border-radius:9px;color:var(--ink3)}
.res-fn .rf-ed:hover{background:var(--canvas);color:var(--ink)}
.res-fn .rf-in{width:min(300px,52vw);height:30px;padding:0 8px;border-radius:8px;border:0;background:var(--canvas);box-shadow:inset 0 0 0 1.5px var(--amber);font:600 14px/1 var(--sans);color:var(--ink)}
.res-fn b em{margin-left:2px;font-style:normal;color:var(--ink3)}
.res-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.res-acts .btn{height:44px;padding:0 16px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.res-acts .btn[aria-expanded="true"]{box-shadow:0 0 0 1.5px var(--amber);background:var(--honey-soft)}
.res-cmp{max-width:760px;margin:18px auto 0;padding:12px;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.res-cmp>.spin{margin:28px auto}
.bac-view{border-radius:12px;overflow:hidden;background:repeating-conic-gradient(#F3F0E8 0% 25%,#fff 0% 50%) 50%/16px 16px}
.res-cmp.zoomed .bac-view{overflow:auto;max-height:70vh}
.bac{position:relative;width:100%;touch-action:pan-y}
.bac.zoom{width:220%}
.bac-a,.bac-b{position:absolute;inset:0}
.bac-b{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.bac-a>*,.bac-b>*{display:block;width:100%;height:100%;object-fit:contain}
.bac-h{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(var(--shd),.25);pointer-events:none}
.bac-h::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(var(--shd),.3);
  background-image:linear-gradient(90deg,transparent 11px,var(--ink) 11px,var(--ink) 13px,transparent 13px,transparent 21px,var(--ink) 21px,var(--ink) 23px,transparent 23px)}
.bac input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.bac-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font:600 12.5px/1.3 var(--sans);color:var(--ink3)}
.res-pages{max-width:880px;margin:22px auto 0;text-align:left}
.rp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 4px}
.rp-h b{font:700 14px/1.3 var(--sans);color:var(--ink)}
.rp-h span{font-size:12.5px;color:var(--ink3)}
.rp-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rp-p{flex:none;position:relative;width:132px;scroll-snap-align:start;border-radius:10px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh1);overflow:hidden}
.rp-p canvas{display:block;width:100%;height:auto;min-height:120px}
.rp-p span{position:absolute;right:6px;bottom:6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(var(--lnc),.72);font:700 11.5px/22px var(--sans);color:#fff}
.rp-more{flex:none;display:grid;place-items:center;width:80px;font:700 14px/1 var(--sans);color:var(--ink3)}
.pv{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:rgba(var(--lnc),.94);animation:fade .15s ease-out}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px calc(10px) 18px;color:#fff}
.pv-top b{font:700 15px/1 var(--sans)}
.pv .ib{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff}
.pv .ib:hover{background:rgba(255,255,255,.12)}
.pv .ib:disabled{opacity:.3}
.pv-body{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:8px}
.pv-body canvas{display:block;max-width:100%;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.4);cursor:zoom-in}
.pv-zoom .pv-body{justify-content:flex-start}
.pv-zoom .pv-body canvas{max-width:none;cursor:zoom-out}
.pv-nav{display:flex;justify-content:center;gap:28px;padding:8px 0 calc(12px + env(safe-area-inset-bottom))}
html.pv-on,html.pv-on body{overflow:hidden}
.rf-th{flex:none;display:block;width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--canvas)}
.rf-th img{display:block;width:100%;height:100%;object-fit:cover}
.res-note[data-left]{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.res-note[data-left] svg{flex:none}
.res-note[data-left] button{margin-left:4px;padding:4px 8px;border-radius:8px;font:600 13px/1.2 var(--sans);color:#B42318}
.res-note[data-left] button:hover{background:#FDECEC}
.res-vip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;max-width:640px;margin:14px auto 0;padding:11px 16px;border-radius:14px;background:#EEEBFF;
  font:600 13.5px/1.45 var(--sans);color:#3B3591}
.res-vip svg{flex:none;color:#5B4FD6}
.res-vip a{font-weight:800;color:#2E2A78;white-space:nowrap}
/* phone workspace (2026-09-29): camera, ◀ ▶ moves, the start button docked at the bottom while the files are in view */
.dz-cam{display:none}
@media (pointer:coarse){.dz-cam{display:inline-flex;margin-top:10px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2)}}
.wf-cam .pl{background:#EEEBFF;color:#3B3591;box-shadow:none}
.wf-act button:disabled{opacity:.35;pointer-events:none}
/* ◀ ▶ under a file's name: move it one place (phones can't drag cards; on a computer they show on hover, for the keyboard too) */
.wf-mv{display:flex;gap:8px;padding:8px 2px 2px}
.wf-mv button{flex:1;display:grid;place-items:center;height:34px;border-radius:10px;background:var(--canvas);color:var(--ink2)}
.wf-mv button:hover{background:var(--honey-soft);color:var(--ink)}
.wf-mv button:disabled{opacity:.3;pointer-events:none}
@media (pointer:fine) and (min-width:960px){.wf-mv{display:none}.wf:hover .wf-mv,.wf:focus-within .wf-mv{display:flex}}
.ws-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);box-shadow:0 -1px 0 var(--hair),0 -12px 30px -18px rgba(var(--shd),.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:dockin .18s ease-out}
.ws-dock[hidden]{display:none}
.ws-dock>span{flex:none;max-width:34%;font:700 13.5px/1.25 var(--sans);color:var(--ink2)}
.ws-dock .btn{flex:1;min-width:0;height:50px}
.ws-dock .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes dockin{from{transform:translateY(100%)}to{transform:none}}
html.dock-on .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
html.dock-on body{padding-bottom:76px}
/* text tools */
.app.txapp{padding:14px}
.txw{display:flex;flex-direction:column;gap:12px}
.txw .tx{margin:0;max-width:none}
.txw .tx-p{min-height:0}
.tx-h{gap:8px}
.tx-h>span:first-child{display:inline-flex;align-items:center;gap:8px;min-width:0}
.tx-hb{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.tx-hb small{font:500 12.5px/1.2 var(--sans);color:var(--ink3)}
.tx-hb small.err,.tx-h small.err{color:#B42318}
.tx-hb small.warn{color:#B36F00}
/* the panel title never gets squeezed by a long note beside it (a diff summary may wrap) */
.tx-h>span:first-child{flex:none}
.diff .tx-h>span:first-child{flex:1 1 auto}
.tx-note{padding:10px 16px;background:#FFF8E6;box-shadow:inset 0 -1px 0 var(--hair);font:500 13.5px/1.6 var(--sans);color:#8A5300}
.tx-note[hidden]{display:none}
.tx-note.err{background:#FDECEC;color:#B42318}
.tx-note.ok{background:#E7F6EC;color:#15603A}
@media (max-width:719px){ .tx-hb small:not(:empty){flex:1 1 100%;text-align:right} }
.txw textarea{min-height:300px;font:15px/1.65 var(--sans)}
.txw textarea.mono,.txw .mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13.5px}
.txw textarea.drag{background:#FFF8E6}
.txw .tx-opts{justify-content:flex-start;margin:0;padding:12px 14px;border-radius:16px;background:var(--canvas)}
.txw .tx-opts .chk{font-size:13.5px}
.txw .tx-opts .seg{flex-wrap:wrap}
.txw .tx-opts .lab{font:700 13px/1 var(--sans);color:var(--ink2)}
.txw .tx-opts select.inp{width:auto;min-width:260px;height:38px;background-color:var(--sf)}
.cases{gap:8px}
.cases .pill{height:36px}
.wc6{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wc6 div{padding:16px;border-radius:14px;background:var(--canvas)}
.wc6 b{display:block;font:800 26px/1 var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.wc6 span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink3)}
.kw{padding:16px 18px;border-radius:16px;background:var(--canvas)}
.kw>b{font:700 13.5px/1 var(--sans);color:var(--ink)}
.kw ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px;margin:12px 0 0;padding:0;list-style:none}
.kw li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.kw li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw li b{font-variant-numeric:tabular-nums;color:var(--ink)}
.kw li em{width:52px;font-style:normal;text-align:right;color:var(--ink3);font-variant-numeric:tabular-nums}
.kw li.none{display:block;color:var(--ink3)}
.diff .tx-h{position:sticky;top:0;z-index:1;background:var(--sf)}
.diff-b{max-height:620px;overflow:auto;font:13.5px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.dtab{width:100%;border-collapse:collapse;table-layout:fixed}
.dtab td{padding:1px 10px;vertical-align:top;white-space:pre-wrap;word-break:break-word}
.dtab td.ln{width:46px;padding:1px 8px;text-align:right;color:var(--ink4);background:var(--canvas);user-select:none}
.dtab tr.del td.tx-c:nth-child(2),.dl.del{background:#FDECEC}
.dtab tr.ins td.tx-c:nth-child(4),.dl.ins{background:#E7F6EC}
.dtab tr.chg td.tx-c{background:#FFF8E6}
.diff-b del{background:#F9C7C7;text-decoration:line-through;color:#9F1239}
.diff-b ins{background:#B7EBC6;text-decoration:none;color:#14532D}
.dl{padding:1px 14px;white-space:pre-wrap;word-break:break-word}
.dl.chg{background:#FFF8E6}
/* 2026-09-29 text compare: folded unchanged lines, previous / next change; documents opened on the server */
.dfold{padding:3px 14px;background:var(--canvas);font:600 12.5px/1.6 var(--sans);color:var(--ink3);text-align:center;cursor:pointer;user-select:none}
.dfold:hover,tr.dfold:hover td{color:var(--ink)}
tr.dfold td{padding:3px 14px;background:var(--canvas);font:600 12.5px/1.6 var(--sans);color:var(--ink3);text-align:center;white-space:normal}
.dtab tr.cur td.ln,.dl.cur{box-shadow:inset 3px 0 0 var(--amber)}
.diff-nav{display:inline-flex;align-items:center;gap:2px}
.diff-nav[hidden]{display:none}
.diff-nav .btn{width:34px;padding:0;justify-content:center}
.diff-nav [data-a="prev"] svg{transform:rotate(180deg)}
.diff-nav b{min-width:52px;font:700 12.5px/1 var(--sans);color:var(--ink2);text-align:center;font-variant-numeric:tabular-nums}
.diff .tx-h{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.diff .tx-h .chk{font-size:13px}
.tx-docs{display:flex;align-items:center;gap:6px;margin:0 4px;font-size:12.5px;line-height:1.5;color:var(--ink3)}
.tx-docs svg{flex:none}
.tx-wait{position:fixed;left:50%;bottom:24px;z-index:80;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;background:var(--solid);box-shadow:var(--sh2);font:600 13.5px/1.4 var(--sans);color:var(--on-solid);transform:translateX(-50%)}
.tx-wait span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-wait .spin{flex:none;width:20px;height:20px;margin:0;border-width:3px}
/* word counter: a goal with its progress, sentence length, 1–3 word phrases */
.wc-goal{display:grid;grid-template-columns:auto auto minmax(80px,1fr) auto;align-items:center;gap:8px 14px;padding:12px 16px;border-radius:16px;background:var(--canvas)}
.wc-goal>label{font:700 13.5px/1 var(--sans);color:var(--ink)}
.wc-gi{display:flex;gap:6px}
.wc-gi .inp{height:38px;background-color:var(--sf)}
.wc-gi input{width:110px}
.wc-gi select{width:auto;padding-right:30px}
.wc-bar{height:8px;border-radius:99px;background:rgba(var(--lnc),.08);overflow:hidden}
.wc-bar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--amber);transition:width .25s}
.wc-goal.done .wc-bar i{background:#22A55A}
.wc-goal small{font:600 13px/1.3 var(--sans);color:var(--ink2);font-variant-numeric:tabular-nums}
.wc-goal:not(.on) .wc-bar,.wc-goal:not(.on) small{opacity:.45}
.kw-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.kw-h .seg button{height:28px;padding:0 10px;font-size:12.5px}
.wc-sen p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--ink2)}
.wc-sen ol{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.wc-sen ol:empty{display:none}
.wc-sen li button{display:flex;align-items:flex-start;gap:12px;width:100%;padding:9px 12px;border-radius:10px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:14px/1.5 var(--sans);color:var(--ink2);text-align:left}
.wc-sen li button:hover{box-shadow:0 0 0 1px var(--amber)}
.wc-sen li span{flex:1;min-width:0}
.wc-sen li b{flex:none;font-variant-numeric:tabular-nums;color:var(--ink)}
.wc-sen li b.long{color:#B42318}
.wc-sen>small{display:block;margin-top:10px;font-size:12px;line-height:1.5;color:var(--ink3)}
@media (max-width:719px){
  .wc-goal{grid-template-columns:auto minmax(0,1fr)}
  .wc-goal .wc-bar{grid-column:1/-1}
  .wc-goal small{grid-column:1/-1}
  .wc-gi{justify-content:flex-end}
  .wc-gi input{width:96px}
  .diff .tx-h{padding-left:14px}
}
.frs{display:flex;flex-direction:column;gap:8px;flex-basis:100%}
.fr{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 44px 34px;align-items:center;gap:8px}
.fr .inp{height:40px;background-color:var(--sf)}
.fr>span{display:grid;place-items:center;color:var(--ink3)}
.fr .x{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--ink3)}
.fr .x:hover{background:var(--sf);color:var(--ink)}
.fr-o{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
/* 2026-09-29 find & replace: each rule's count, a pasted list of rules; text cleaner presets; duplicate lines by column */
.frn{grid-column:4;justify-self:center;min-width:28px;padding:3px 7px;border-radius:99px;background:var(--honey-soft);font:700 12px/1.2 var(--sans);color:#B36F00;text-align:center;font-variant-numeric:tabular-nums}
.frn.zero{background:var(--canvas2);color:var(--ink3)}
.frn.bad{background:#FDECEC;color:#B42318}
.fr .x{grid-column:5}
.fr-bulk{display:flex;flex-direction:column;gap:8px;flex-basis:100%}
.fr-bulk[hidden]{display:none}
.fr-bulk textarea.inp{height:auto;min-height:140px;padding:12px 14px;background-color:var(--sf);font:14px/1.6 var(--sans);resize:vertical}
.fr-bulk>div{display:flex;flex-wrap:wrap;gap:8px}
.cl-pre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex-basis:100%}
.dd-col{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.txw .tx-opts .dd-col select.inp{min-width:0;width:auto;height:36px}
/* JSON tree */
.jt{display:flex;flex-direction:column;flex:1;min-height:300px}
.jt[hidden],.txw textarea[hidden]{display:none}
.jt-bar{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;background:var(--canvas);box-shadow:inset 0 -1px 0 var(--hair)}
.jt-bar code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink)}
.jt-b{flex:1;max-height:560px;overflow:auto;padding:6px 0;font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink2)}
.jr{display:flex;align-items:center;gap:3px;padding:0 12px 0 calc(var(--d) * 16px + 6px);white-space:nowrap;cursor:pointer}
.jr:hover{background:var(--canvas)}
.jr.on{background:var(--honey-soft)}
.jtg,.jtg0{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;color:var(--ink3)}
.jtg::before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.jtg[aria-expanded="true"]::before{transform:rotate(90deg)}
.jtg:hover{background:var(--canvas2);color:var(--ink)}
.jr i{font-style:normal;color:var(--ink4)}
.jk{color:#7C3AED}
.jv-s{color:#15803D}
.jv-n{color:#1D4ED8}
.jv-b{color:#B45309}
.jv-z{color:var(--ink3)}
.jbr{color:var(--ink3)}
.jr em{margin-left:6px;font:500 12px/1 var(--sans);font-style:normal;color:var(--ink3)}
.jmore{color:var(--gold);font-family:var(--sans);font-weight:600}
.jnone{margin:0;padding:16px;font:14px/1.6 var(--sans);color:var(--ink3);white-space:normal}
.gen{display:grid;grid-template-columns:320px minmax(0,1fr);gap:12px}
.gen-o{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:20px;background:var(--canvas)}
.gen-o .inp{background-color:var(--sf)}
.gen-o .btn{width:100%}
.gen-r{display:flex;flex-direction:column;min-height:360px;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.gen-r textarea{flex:1;width:100%;min-height:300px;padding:16px 18px;border:0;outline:0;resize:vertical;background:transparent;font:14px/1.7 ui-monospace,Consolas,monospace;color:var(--ink)}
.gen-r .tx-h b.ok{color:#15803D}.gen-r .tx-h b.mid{color:#B36F00}.gen-r .tx-h b.low{color:#B42318}
.pwl{margin:0;padding:8px;list-style:none;overflow:auto}
.pwl li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.pwl li:hover{background:var(--canvas)}
.pwl code{flex:1;min-width:0;overflow-wrap:anywhere;font:15px/1.4 ui-monospace,Consolas,monospace;color:var(--ink)}
.pwl .x,.gen .x{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--ink3)}
.pwl .x:hover{background:var(--sf);color:var(--ink)}
.money{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;padding:12px 6px}
.money .inp.big{height:64px;font:700 28px/1 var(--disp);letter-spacing:.02em}
.money-o{display:grid;gap:10px}
.money-o>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:18px 20px;border-radius:18px;background:var(--canvas)}
.money-o span{width:88px;font:700 13px/1.3 var(--sans);color:var(--ink3)}
.money-o b{flex:1;min-width:200px;font:800 24px/1.35 var(--disp);color:var(--ink);letter-spacing:.04em;word-break:break-all}
.money-o b.err{font-size:15px;letter-spacing:0;color:#B42318}
.rx{display:flex;flex-direction:column;gap:12px}
.rx-p{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:16px;background:var(--canvas);font:700 18px/1 ui-monospace,Consolas,monospace;color:var(--ink3)}
.rx-p .inp{flex:1;min-width:0;height:44px;background-color:var(--sf)}
.rx-f{display:flex;gap:4px}
.rx-f label{position:relative;cursor:pointer}
.rx-f input{position:absolute;opacity:0}
.rx-f span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font-size:14px;color:var(--ink3)}
.rx-f input:checked+span{background:var(--solid);box-shadow:none;color:var(--on-solid)}
.rx-err{padding:10px 14px;border-radius:12px;background:#FDECEC;font-size:13.5px;color:#B42318}
.rx-hl{flex:1;min-height:300px;padding:18px;overflow:auto;font:14px/1.65 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.rx-hl mark{padding:1px 0;border-radius:3px;background:#FFE08A;color:inherit;box-shadow:0 0 0 1px rgba(217,142,18,.45)}
.rx-l{max-height:280px;overflow:auto;padding:8px 14px}
.rx-l>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:6px 0;box-shadow:inset 0 -1px 0 var(--hair);font-size:13px}
.rx-l b{min-width:26px;color:var(--ink4)}
.rx-l code{padding:1px 6px;border-radius:6px;background:#FFF4D6;font:13px/1.5 ui-monospace,Consolas,monospace}
.rx-l span{color:var(--ink3)}
.rx-l em{font-style:normal;font-weight:700;color:var(--indigo)}
.rx-rep{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--canvas)}
.rx-rep .inp{background-color:var(--sf)}
.rx-rep pre{max-height:220px;margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:13px;color:var(--ink2)}
.rx-rep pre:empty{display:none}
.exg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.exg textarea{width:100%;min-height:150px;padding:12px 16px;border:0;outline:0;resize:vertical;font:13.5px/1.6 ui-monospace,Consolas,monospace;color:var(--ink)}
.exg .tx-h small{margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--canvas);font:700 12px/1.2 var(--sans);color:var(--ink2)}
.qp{padding-bottom:6px}
.kv{width:100%;border-collapse:collapse;font-size:13.5px}
.kv th,.kv td{padding:8px 16px;text-align:left;vertical-align:top;box-shadow:inset 0 -1px 0 var(--hair);word-break:break-all}
.kv th{width:30%;font-weight:700;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
@media (max-width:560px){.kv th,.kv td{padding:8px 10px}}
.kv td{font-family:ui-monospace,Consolas,monospace;color:var(--ink2)}
.txw iframe{flex:1;width:100%;min-height:300px;border:0;background:#fff}
.code-err{margin:0;padding:10px 16px;background:#FDECEC;font-size:13px;color:#B42318}
.code-o{display:flex;flex-wrap:wrap;gap:14px 22px;flex-basis:100%}
.code-o>div{min-width:180px}
.code-o .inp{background-color:var(--sf)}
.inp.sm{width:140px;height:36px;background-color:var(--sf)}
.inl{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--sans);color:var(--ink2);white-space:nowrap}
.tin-tabs{align-self:flex-start;margin:0 0 12px}
.tin-tabs button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px}
.tin{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px}
.tin .tx-p{display:flex;flex-direction:column;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.tin textarea{flex:1;min-height:380px;padding:18px;border:0;outline:0;resize:vertical;font:15px/1.65 var(--sans);color:var(--ink)}
.tin-side{display:flex;flex-direction:column;border-radius:20px;background:var(--canvas);overflow:hidden}
.tin-side .ws-body{padding:18px 20px}
.tin-side .ws-foot{padding:16px 20px 20px;box-shadow:inset 0 1px 0 var(--hair)}
.tin-run,.tin-done{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;padding:16px 18px;border-radius:16px;background:var(--canvas);font-size:14.5px;color:var(--ink2)}
.tin-run .spin{margin:0;width:22px;height:22px;border-width:3px}
.tin-done svg{color:var(--ok)}
.tin-done b{color:var(--ink)}
.tin-done small{color:var(--ink3)}
.tin-done .btn{margin-left:auto}
@media (max-width:959px){
  .gen,.tin{grid-template-columns:1fr}
  .txw textarea{min-height:220px}
}
@media (max-width:719px){
  .app.txapp{padding:8px}
  .txw .tx{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr 34px}
  .fr>span{display:none}
  .fr .inp[data-r]{grid-column:1}
  .fr .x{grid-column:2;grid-row:1}
  .frn{grid-column:2;grid-row:2}
  .fr+.fr{padding-top:8px;box-shadow:inset 0 1px 0 var(--hair)}
  .txw .tx-opts select.inp{min-width:0;width:100%}
  .rx-p{flex-wrap:wrap}
}

/* local file tools */
.dropz.lz{min-height:280px}
.txw .tx-opts .sp{flex:1}
.lzl{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.rf .x{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--ink3)}
.rf .x:hover{background:var(--canvas);color:var(--ink)}
.lz-go{display:flex;align-items:center;gap:14px}
.lz-go small{font-size:13px;color:var(--ink3)}
.encf select.inp{width:auto;height:34px;padding:0 30px 0 10px;font-size:13px}
.encf .tx-h small{margin-left:8px;font-weight:500;color:var(--ink3)}
.encp{max-height:220px;margin:0;padding:14px 18px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:13px/1.6 ui-monospace,Consolas,monospace;color:var(--ink2)}
.b64i{display:grid;grid-template-columns:160px minmax(0,1fr)}
.b64-th{display:grid;place-items:center;padding:12px;background:repeating-conic-gradient(#F3F0E8 0% 25%,#fff 0% 50%) 50%/16px 16px}
.b64-th img{max-width:100%;max-height:140px}
.b64-b{display:flex;flex-direction:column;min-width:0}
.b64-b textarea{flex:1;min-height:140px;padding:12px 16px;border:0;outline:0;resize:vertical;font:12.5px/1.5 ui-monospace,Consolas,monospace;word-break:break-all;color:var(--ink2)}
.b64-b .tx-h small{margin-left:8px;font-weight:500;color:var(--ink3)}
.hexp{flex:1}
.hexp .inp{flex:1;min-width:0;height:40px;background-color:var(--sf)}
.hashf .tx-h small{margin-left:8px;font-weight:500;color:var(--ink3)}
.hashf .kv td{display:flex;align-items:center;gap:8px}
.hashf .kv code{flex:1;min-width:0;word-break:break-all;font-size:13px}
.hashf .kv tr.match td,.hashf .kv tr.match th{background:#E7F6EC}
.hbar{height:8px;margin:14px 18px 18px;border-radius:999px;background:var(--canvas2);overflow:hidden}
.hbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFC847,#F5A524);transition:width .2s}
.hash-v{margin:0;padding:12px 16px;border-radius:14px;font:700 14.5px/1.4 var(--sans)}
.hash-v:empty{display:none}
.hash-v.ok{background:#E7F6EC;color:#15803D}
.hash-v.no{background:#FDECEC;color:#B42318}
.crypt{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto;padding:12px 4px}
.crypt .btn-lg{width:100%}
.crypt .hbar{margin:0}
.pwm{height:6px;margin-top:-8px;border-radius:999px;background:var(--canvas2);overflow:hidden}
.pwm i{display:block;height:100%;width:4%;transition:width .2s,background .2s}
.pwm i.low{background:#E5484D}.pwm i.mid{background:#F5A524}.pwm i.ok{background:#16A34A}
.cp{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px}
.cp-img{position:relative;display:grid;place-items:center;min-height:360px;padding:12px;border-radius:20px;background:repeating-conic-gradient(#F3F0E8 0% 25%,#fff 0% 50%) 50%/18px 18px}
.cp-img canvas#cv{max-width:100%;max-height:640px;cursor:crosshair;box-shadow:var(--sh1)}
.loupe{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:14px;background:var(--sf);box-shadow:var(--sh2);pointer-events:none}
.loupe canvas{width:120px;height:120px;border-radius:9px;image-rendering:pixelated}
.loupe b{font:700 12.5px/1 ui-monospace,Consolas,monospace;color:var(--ink)}
.cp-side{display:flex;flex-direction:column;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.cp-l{display:flex;flex-direction:column;gap:6px;padding:10px 12px 14px;max-height:300px;overflow:auto}
.sw-c{display:grid;grid-template-columns:34px minmax(0,1fr) 30px;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;padding:6px;border-radius:12px}
.sw-c:hover{background:var(--canvas)}
.sw-c>span{grid-row:1/4;width:34px;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sw-c code{font:700 13.5px/1.2 ui-monospace,Consolas,monospace;color:var(--ink)}
.sw-c small{grid-column:2;font:11.5px/1.3 ui-monospace,Consolas,monospace;color:var(--ink3)}
.sw-c .x{grid-column:3;grid-row:1/4;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--ink3)}
.qtypes{flex-wrap:wrap}
.qf{display:flex;flex-direction:column;gap:12px}
.gen-o input[type=color]{width:100%;height:40px;padding:3px;border:0;border-radius:10px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);cursor:pointer}
.gen-o .adv{background:var(--sf)}
.gen-o .adv>div{padding:0 14px 14px}
.qr-r{align-items:center;justify-content:center;gap:16px;padding:24px}
.qr-prev{display:grid;place-items:center;width:100%}
.qr-prev canvas{width:min(360px,100%);height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.qr-dl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.qr-info{font-size:12.5px;color:var(--ink3)}
.qr-warn{max-width:360px;color:#92400E;background:#FFF7E6}
.bc-prev{min-height:200px;padding:12px;overflow:auto}
.bc-prev svg{max-width:100%;height:auto}
.ws-note.err{background:#FDECEC;color:#B42318}
.rec-w{display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 4px}
.rec-stage{position:relative;display:grid;place-items:center;width:100%;max-width:880px;min-height:200px;border-radius:20px;background:var(--night);overflow:hidden}
.rec-stage video{display:block;width:100%;max-height:480px;background:#000}
.rec-stage canvas{width:100%;height:140px}
.rec-t{position:absolute;top:12px;left:14px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);font:700 14px/1.4 ui-monospace,Consolas,monospace;color:#fff}
.rec-o{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px}
/* 2026-09-29: format and quality, the countdown, the camera bubble, and what a phone can do instead */
.rec-f{display:inline-flex;align-items:center;gap:8px}
.rec-f small{font:700 13px/1 var(--sans);color:var(--ink2)}
.rec-cd{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(15,12,41,.55);font:800 96px/1 var(--disp);color:#fff}
.rec-cam{width:160px;height:120px;border-radius:14px;background:#000;object-fit:cover}
.rec-cam[hidden]{display:none}
.rec-camn{max-width:520px;text-align:center}
.rec-mobile{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px;margin:0 auto;padding:30px 18px;border-radius:24px;background:var(--canvas);text-align:center}
.rec-mobile h3{font:800 20px/1.3 var(--disp);color:var(--ink)}
.rec-mobile p{font-size:14px;line-height:1.6;color:var(--ink2)}
.rec-mobile ul{display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.rec-mobile li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:var(--sf)}
.rec-mobile li b{font:700 14px/1.3 var(--sans);color:var(--ink)}
.rec-mobile li span{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.rec-b{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.rec-res{display:flex;flex-direction:column;gap:10px;width:100%;max-width:880px}
.rec-i{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;background:var(--canvas)}
.rec-i video{width:100%;max-height:360px;border-radius:12px;background:#000}
.rec-i audio{width:100%}
.rec-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rec-a b{font:600 14px/1.3 var(--sans);color:var(--ink)}
.rec-a small{margin-right:auto;font-size:12.5px;color:var(--ink3)}
@media (max-width:959px){
  .cp{grid-template-columns:1fr}
  .b64i{grid-template-columns:1fr}
}

/* PDF page editors */
.app.pgapp{padding:0;overflow:hidden;overflow:clip}
.pgw .ws-main{min-height:560px}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 16px;align-items:start}
.pg-grid.split{grid-template-columns:repeat(auto-fill,minmax(150px,1fr) 26px)}
.pg-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 6px;border-radius:14px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh1);cursor:pointer;transition:box-shadow .12s,transform .12s,opacity .12s;user-select:none}
.pg-c:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh2)}
.pg-c[draggable="true"]{cursor:grab}
.pg-c.dragging{opacity:.35}
.pg-c.over{box-shadow:0 0 0 2px var(--amber),var(--sh1)}
.pg-th{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1.3;overflow:hidden;border-radius:8px;background:var(--canvas)}
.pg-img{display:grid;place-items:center;width:100%;height:100%;transition:transform .2s}
.pg-img canvas{max-width:100%;max-height:100%;background:#fff;box-shadow:0 1px 3px rgba(var(--shd),.18)}
.pg-img.blank::after{content:"";width:72%;height:92%;background:#fff;box-shadow:0 1px 3px rgba(var(--shd),.18)}
.pg-n{font:700 12.5px/1 var(--sans);color:var(--ink3)}
.pg-mark{position:absolute;inset:0;display:none;place-items:center;border-radius:8px}
.pg-mark svg{width:34px;height:34px;padding:8px;border-radius:50%;box-sizing:content-box;color:#fff}
.pg-c.del .pg-mark.x{display:grid;background:rgba(229,72,77,.18)}
.pg-c.del .pg-mark.x svg{background:#E5484D}
.pg-c.del{box-shadow:0 0 0 2px #E5484D}
.pg-c.pick .pg-mark.ok{display:grid;background:rgba(22,163,74,.14)}
.pg-c.pick .pg-mark.ok svg{background:#16A34A}
.pg-c.pick{box-shadow:0 0 0 2px #16A34A}
.pg-a{position:absolute;top:12px;left:50%;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.95);box-shadow:var(--sh1);opacity:0;transform:translateX(-50%);transition:opacity .12s}
.pg-c:hover .pg-a,.pg-c:focus-within .pg-a{opacity:1}
.pg-a button{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--ink)}
.pg-a button:hover{background:var(--honey)}
.pg-cut{align-self:center;display:grid;place-items:center;width:26px;height:26px;margin-top:-20px;border-radius:50%;background:transparent;color:var(--ink4);transition:background .12s,color .12s}
.pg-cut:hover{background:var(--sf);color:var(--ink);box-shadow:var(--sh1)}
.pg-cut.on{background:var(--solid);color:var(--on-solid)}
.pg-grid.split .pg-c[data-g="0"]{box-shadow:0 0 0 2px #F5A524}
.pg-grid.split .pg-c[data-g="1"]{box-shadow:0 0 0 2px #2F6FEB}
.pg-grid.split .pg-c[data-g="2"]{box-shadow:0 0 0 2px #16A34A}
.pg-grid.split .pg-c[data-g="3"]{box-shadow:0 0 0 2px #DB2777}
.pg-grid.split .pg-c[data-g="4"]{box-shadow:0 0 0 2px #7C3AED}
.pg-grid.split .pg-c[data-g="5"]{box-shadow:0 0 0 2px #0891B2}
.pg-grid.split .pg-c.off{opacity:.45}
.pg-sum{margin:0;font:600 13.5px/1.5 var(--sans);color:var(--ink2)}
.pg-sum:empty{display:none}
.crop-stage{display:grid;place-items:center;padding:8px 0}
.crop-page{position:relative;display:inline-block;touch-action:none;cursor:crosshair;box-shadow:var(--sh2)}
.crop-page canvas{display:block;max-width:100%}
.crop-box{position:absolute;box-shadow:0 0 0 9999px rgba(15,12,41,.45);outline:2px solid var(--honey);cursor:move}
.crop-box i{position:absolute;width:14px;height:14px;border-radius:4px;background:#fff;box-shadow:0 0 0 2px var(--amber)}
.crop-box i[data-h="nw"]{left:-7px;top:-7px;cursor:nwse-resize}
.crop-box i[data-h="ne"]{right:-7px;top:-7px;cursor:nesw-resize}
.crop-box i[data-h="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}
.crop-box i[data-h="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}
.crop-page{overflow:hidden}
.sg-pages{display:flex;flex-direction:column;align-items:center;gap:18px}
.sg-pg{position:relative;width:min(760px,100%);aspect-ratio:1/1.294;background:#fff;box-shadow:var(--sh2);cursor:copy;touch-action:pan-y}
.sg-pg .pg-img canvas{width:100%;height:100%;box-shadow:none}
.sg-n{position:absolute;right:10px;bottom:8px;font:700 12px/1 var(--sans);color:var(--ink4)}
.sg-st{position:absolute;outline:1.5px dashed rgba(245,165,36,.9);cursor:move;touch-action:none}
.sg-st img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.sg-del{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E5484D;color:#fff}
.sg-rs{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:3px;background:var(--sf);box-shadow:0 0 0 2px var(--amber);cursor:nwse-resize}
.sg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sg-list:empty{display:none}
.sg-item{display:grid;place-items:center;height:64px;padding:6px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair)}
.sg-item img{max-width:100%;max-height:52px;object-fit:contain}
.sg-item.on{background:#FFF8E6;box-shadow:inset 0 0 0 2px var(--amber)}
.sg-add{display:flex;flex-direction:column;gap:8px}
.sg-add .btn{width:100%}
.sgm{width:min(640px,100%);text-align:left}
.sgm h2{margin:0 0 14px}
.sgt{margin-bottom:12px}
.sg-draw{display:block;width:100%;height:auto;aspect-ratio:3/1;margin-bottom:8px;border-radius:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair2);touch-action:none;cursor:crosshair}
.sg-fonts{display:grid;gap:8px;margin-top:10px}
.sg-fonts button{height:62px;border-radius:12px;background:var(--canvas);font-size:30px;color:#111}
.sg-fonts button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--amber);background:#FFF8E6}
.sg-upv img{max-width:100%;max-height:160px;margin-top:10px}
.sg-colors{display:flex;gap:10px;margin:14px 0 0}
.sg-colors button{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--hair2)}
.sg-colors button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--amber)}
/* sign PDF 2026-09-29: a mark on every page, the seal maker, the cross-page seal */
.sg-all{position:absolute;top:-10px;right:18px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1F2937;color:#fff}
.sg-seam{display:grid;gap:8px;margin-top:14px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair)}
.sg-seam .ws-note{margin:0}
.sg-seam-opts{display:grid;gap:10px}
.sg-seam-opts .fld{display:grid;gap:6px;font:600 13px/1.3 var(--sans);color:var(--ink2)}
.sg-seam-opts input[type=range]{width:100%;accent-color:var(--amber)}
.sg-sm{position:absolute;background-repeat:no-repeat;pointer-events:none;outline:1px dashed rgba(210,20,30,.45)}
.sg-seal{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:14px;align-items:start}
.sg-sealv{width:100%;height:auto;border-radius:14px;background:repeating-conic-gradient(#F3F1EC 0% 25%,#fff 0% 50%) 50%/16px 16px;box-shadow:inset 0 0 0 1px var(--hair2)}
.sg-sealf{display:grid;gap:8px}
.sg-sealf .fld{display:flex;align-items:center;gap:8px;font:600 13px/1.3 var(--sans);color:var(--ink2)}
.sg-sealf .fld .inp{width:80px}
.sg-sealf .ws-note{margin:0;font-size:12px}
@media (max-width:560px){.sg-seal{grid-template-columns:1fr}.sg-sealv{max-width:220px;justify-self:center}}
.rd{display:flex;flex-direction:column;height:min(86vh,1100px);border-radius:30px;background:var(--canvas);overflow:hidden}
.rd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;background:var(--sf);box-shadow:inset 0 -1px 0 var(--hair)}
.rd-bar b{max-width:320px;overflow:hidden;font:700 14px/1.2 var(--sans);white-space:nowrap;text-overflow:ellipsis}
.rd-bar .sp{flex:1}
.rd-bar #zv{min-width:48px;text-align:center;font:600 13px/1 var(--sans);color:var(--ink2)}
.rd-pg{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink3)}
.rd-pg .inp.sm{width:56px;height:34px;text-align:center}
.rd-s{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:10px;background:var(--canvas);color:var(--ink3)}
.rd-s input{width:150px;border:0;outline:0;background:transparent;font-size:13.5px;color:var(--ink)}
.rd-body{flex:1;overflow:auto;padding:16px;text-align:center}
.rd-body .rd-pg{display:block;margin:0 auto 16px;background:#fff;box-shadow:var(--sh2)}
.rd-body .rd-pg .pg-img canvas{width:100%;height:100%;box-shadow:none}
.rd-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:8px;font-size:12.5px;color:var(--ink3);background:var(--sf);box-shadow:inset 0 1px 0 var(--hair)}
/* 2026-09-29: webmaster generators — the notes under the form (errors, warnings, what is fine) and the schema @graph list */
#dvMsg:empty{display:none}
#dvMsg{display:flex;flex-direction:column;gap:6px}
.dv-msg{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 12px;border-radius:12px;background:var(--canvas);font-size:13px;line-height:1.55;color:var(--ink2);word-break:break-word}
.dv-msg svg{flex:none;margin-top:2px}
.dv-msg.err{background:#FDEEEE;color:#B42318}
.dv-msg.warn{background:#FFF6E0;color:#7A4F00}
.dv-msg.ok{background:#EEF8F2;color:#15803D}
.dv-sep{margin:6px 0 -4px;font:800 14px/1.3 var(--sans);color:var(--ink)}
.dv-code{overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sg-bag{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:var(--canvas)}
.sg-bh b{display:block;font:700 13.5px/1.3 var(--sans);color:var(--ink)}
.sg-bh small{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--ink3)}
.sg-bag ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.sg-bag li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 10px;border-radius:9px;background:var(--sf);font-size:13px;color:var(--ink2)}
.sg-bag li .x{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:var(--ink4)}
.sg-bag li .x:hover{background:var(--canvas2);color:var(--ink)}
.sg-bb{display:flex;flex-wrap:wrap;gap:6px}
/* 2026-09-29: the reader's side panel, menu, night mode, password screen, links and the pdf.js text layer */
.rd-main{position:relative;flex:1;min-height:0;display:flex}
.rd-main .rd-body{min-width:0}
.rd-body .rd-pg{position:relative}
.rd-side{flex:none;display:flex;flex-direction:column;gap:10px;width:236px;padding:12px;background:var(--sf);box-shadow:inset -1px 0 0 var(--hair);overflow:hidden}
.rd-side[hidden]{display:none}
.rd-side .seg{align-self:stretch}
.rd-side .seg button{flex:1}
.rd-sb{flex:1;min-height:0;overflow:auto}
.rd-th{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:6px 10px;border-radius:10px}
.rd-th .pg-img{display:block;width:100%;min-height:80px;background:#fff;box-shadow:0 0 0 1px var(--hair)}
.rd-th canvas{display:block;width:100%;height:auto}
.rd-th small{font-size:12px;color:var(--ink3)}
.rd-th:hover{background:var(--canvas)}
.rd-ol{margin:0;padding:0;list-style:none;font-size:13px;text-align:left}
.rd-ol ul{margin:0;padding-left:14px;list-style:none}
.rd-ol button{display:block;width:100%;padding:6px 8px;border-radius:8px;line-height:1.35;text-align:left;color:var(--ink2)}
.rd-ol button:hover{background:var(--canvas);color:var(--ink)}
.rd-nav,.rd-zoom{display:inline-flex;align-items:center;gap:4px}
.rd-s small{min-width:26px;font:600 12px/1 var(--sans);color:var(--ink3);text-align:center}
.rd-s button{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--ink3)}
.rd-s button:hover{background:var(--sf);color:var(--ink)}
.rd-s input[type=search]::-webkit-search-cancel-button{display:none}
.rd-menu{position:relative}
.rd-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;min-width:200px;padding:6px;border-radius:14px;background:var(--sf);box-shadow:0 10px 30px rgba(var(--shd),.16),0 0 0 1px var(--hair)}
.rd-pop[hidden]{display:none}
.rd-pop button{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:9px;font:600 13.5px/1 var(--sans);color:var(--ink2);text-align:left;white-space:nowrap}
.rd-pop button:hover{background:var(--canvas);color:var(--ink)}
.rd-link{position:absolute;z-index:2;display:block;border-radius:2px}
.rd-link:hover{background:rgba(245,165,36,.2)}
.rd.night .rd-body{background:#1C1A22}
.rd.night .rd-body .rd-pg{background:#111}
.rd.night .rd-body .rd-pg canvas{filter:invert(1) hue-rotate(180deg)}
.rd-pw{display:grid;place-items:center;min-height:420px;padding:30px 16px;border-radius:30px;background:var(--canvas);text-align:center}
.rd-pw>div{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(420px,100%)}
.rd-pw h3{font:800 20px/1.3 var(--disp)}
.rd-pw form{display:flex;gap:8px;width:100%}
.rd-pw .inp{flex:1;min-width:0}
.rd-pw-n{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink3)}
.textLayer{position:absolute;inset:0;z-index:1;overflow:clip;opacity:1;line-height:1;text-align:initial;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText}
.textLayer :is(span,br){position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%}
.textLayer span.markedContent{top:0;height:0}
.textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:0;cursor:default;user-select:none}
.textLayer ::selection{background:rgba(0,90,255,.3)}
.textLayer br::selection{background:transparent}
.textLayer[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}
.textLayer[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}
.textLayer[data-main-rotation="270"]{transform:rotate(270deg) translateX(-100%)}
.textLayer mark.rd-hit{padding:0;border-radius:2px;background:rgba(255,196,0,.45);color:transparent}
.textLayer mark.rd-hit.on{background:rgba(255,106,0,.55);box-shadow:0 0 0 2px rgba(255,106,0,.55)}
@media (max-width:760px){
  .rd-side{position:absolute;left:0;top:0;bottom:0;z-index:15;width:min(280px,82vw);box-shadow:8px 0 30px rgba(var(--shd),.18)}
  /* two rows on a phone: the name and the menu, then page turning and search; zooming is the fingers' job */
  .rd-bar{gap:6px;padding:10px 12px}
  .rd-bar .btn-sm{height:36px;min-width:36px;padding:0 9px}
  .rd-bar b{flex:1;min-width:0;max-width:none}
  .rd-bar .sp{display:none}
  .rd-menu{order:1}
  .rd-nav,.rd-s{order:2}
  .rd-zoom{display:none}
  .rd-nav .rd-pg .inp.sm{width:46px}
  .rd-s{flex:1;min-width:150px}
  .rd-s input{flex:1;width:auto;min-width:40px}
}
.rd-note svg{color:var(--ok)}
@media (max-width:719px){
  .pg-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
  .pg-grid.split{grid-template-columns:repeat(auto-fill,minmax(110px,1fr) 22px)}
  .pg-a{opacity:1}
  .rd-bar b{max-width:140px}
  .rd-s input{width:90px}
}

/* image area and editors */
.crop-page .crop-img{display:block;max-width:100%;max-height:640px;user-select:none;-webkit-user-drag:none;pointer-events:none}
.crop-page.round .crop-box{border-radius:50%}
/* 2026-09-29: the shape being cut (drawn as the server cuts it), and the box in exact pixels */
.crop-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.crop-shape *{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
/* 2026-09-29: blur and pixelate take several areas — each one tinted, the chosen one with its corners, a × to remove it */
.crop-page.areas .crop-box.area{box-shadow:none;outline:2px solid var(--honey);background:rgba(255,184,28,.18)}
.crop-page.areas .crop-box.area.on{outline:3px solid var(--amber);background:rgba(255,184,28,.28);z-index:2}
.crop-page.areas .crop-box.area.oval{border-radius:50%}
.area-x{position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:24px;height:24px;padding:0;border-radius:50%;background:var(--solid);color:var(--on-solid);font:700 15px/24px var(--sans);text-align:center;box-shadow:var(--sh1);cursor:pointer}
.crop-box.area.low .area-x{top:auto;bottom:-30px}
.area-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.crop-num{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 8px;margin-top:12px}
.crop-num label{display:flex;flex-direction:column;gap:4px;font:700 11.5px/1 var(--sans);color:var(--ink3)}
.crop-num .inp{width:100%;min-width:0;height:36px;padding:0 8px;font-variant-numeric:tabular-nums}
.crop-num small{grid-column:1/-1;font-size:12px;color:var(--ink4)}
.tx-cv{display:block;max-width:100%;max-height:680px;box-shadow:var(--sh2);touch-action:none;cursor:move;background:repeating-conic-gradient(#F3F0E8 0% 25%,#fff 0% 50%) 50%/18px 18px}
.tx-tip{margin-top:10px}
.lays{display:flex;flex-wrap:wrap;gap:6px}
.lays:empty{display:none}
.lay{height:32px;padding:0 10px;border-radius:9px;background:var(--canvas);font:600 12.5px/1 var(--sans);color:var(--ink2)}
.lay.on{background:var(--solid);color:var(--on-solid)}
.lay-bar{display:flex;flex-direction:column;gap:8px}
.lay-add{display:flex;flex-wrap:wrap;gap:6px}
.emo-i{font-size:15px;line-height:1}
.emo{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:8px;border-radius:12px;background:var(--canvas)}
.emo[hidden]{display:none}
.emo button{height:38px;border-radius:9px;font-size:22px;line-height:38px}
.emo button:hover{background:var(--sf)}
.tx-more{border-radius:12px;background:var(--canvas)}
.tx-more>summary{padding:10px 14px;font:700 13px/1.3 var(--sans);color:var(--ink2);cursor:pointer}
.tx-more-b{display:flex;flex-direction:column;gap:12px;padding:4px 14px 14px}
@media (max-width:420px){.emo{grid-template-columns:repeat(6,minmax(0,1fr))}}
#lform,#oform{display:flex;flex-direction:column;gap:14px}
#lform:empty{display:none}
#lform input[type=color],#pe input[type=color]{width:100%;height:40px;padding:3px;border:0;border-radius:10px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);cursor:pointer}
.pe-tabs{flex-wrap:wrap}
#pe{display:flex;flex-direction:column;gap:14px}
.pe-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pe-f button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 6px 8px;border-radius:12px;background:var(--canvas);font:600 12.5px/1.2 var(--sans);color:var(--ink2)}
.pe-f canvas{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#fff}
.pe-f button[aria-pressed="true"]{background:#FFF8E6;box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--ink)}
.pe-ratio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pe-ratio button{height:36px;border-radius:9px;background:var(--canvas);font:700 12.5px/1 var(--sans);color:var(--ink2)}
.pe-ratio button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
.pe-redo svg{transform:scaleX(-1)}
.pe-hist{display:inline-flex;gap:6px}
.pe-bar .btn:disabled{opacity:.4}
.pe-out>summary{font-weight:700}
.crop-page canvas{max-height:640px}
@media (pointer:coarse){
  .crop-box i{width:26px;height:26px;border-radius:7px}
  .crop-box i[data-h="nw"]{left:-13px;top:-13px}.crop-box i[data-h="ne"]{right:-13px;top:-13px}
  .crop-box i[data-h="sw"]{left:-13px;bottom:-13px}.crop-box i[data-h="se"]{right:-13px;bottom:-13px}
  .area-x{width:32px;height:32px;line-height:32px;top:-40px}.crop-box.area.low .area-x{bottom:-40px}
}
.pe-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pe-r .btn{height:42px;padding:0 10px;font-size:13px}

/* PDF editors: annotate, edit, fill, create forms, redact, bookmarks */
.pe .ws-main{display:flex;flex-direction:column;gap:12px}
.pe-tools{position:sticky;top:88px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.pe-tool{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:10px;background:transparent;font:600 13px/1 var(--sans);color:var(--ink2);transition:background .12s,color .12s}
.pe-tool:hover{background:var(--canvas);color:var(--ink)}
.pe-tool[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
.pe-pages{display:flex;flex-direction:column;align-items:center;gap:18px;padding:4px 0 24px}
.pe-pg{position:relative;width:min(900px,100%);background:#fff;box-shadow:var(--sh2);touch-action:pan-y;--k:1}
/* 2026-09-30 a finger: a swipe on a page scrolls the pages, a tap places (app-pdfedit.js); what is on the page drags, and so does
   the pen or an arrow while chosen */
.pe-pages[data-tool="pen"] .pe-pg,.pe-pages[data-tool="arrow"] .pe-pg{touch-action:none}
.pe-pg .pg-img canvas{width:100%;height:100%;box-shadow:none}
.pe-pages[data-tool]:not([data-tool="select"]) .pe-pg{cursor:crosshair}
.pe-pages[data-tool="retype"] .pe-pg{cursor:text}
.pe-n{position:absolute;right:10px;bottom:8px;font:700 12px/1 var(--sans);color:var(--ink4);pointer-events:none}
.pe-layer{position:absolute;inset:0}
.pe-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pe-sv{pointer-events:stroke;cursor:move;touch-action:none}
.pe-sv.on{filter:drop-shadow(0 0 2px rgba(245,165,36,.95))}
.pe-band{position:absolute;border:1.5px dashed var(--amber);background:rgba(245,165,36,.08);pointer-events:none}
.pe-it{position:absolute;box-sizing:border-box;cursor:move;touch-action:none}
.pe-it.on{outline:1.5px dashed rgba(245,165,36,.95);outline-offset:2px}
.pe-del{position:absolute;top:-11px;right:-11px;z-index:2;display:none;place-items:center;width:22px;height:22px;border-radius:50%;background:#E5484D;color:#fff;box-shadow:var(--sh1)}
.pe-rs{position:absolute;right:-6px;bottom:-6px;z-index:2;display:none;width:12px;height:12px;border-radius:3px;background:var(--sf);box-shadow:0 0 0 2px var(--amber);cursor:nwse-resize}
.pe-it.on .pe-del,.pe-it:hover .pe-del{display:grid}
.pe-it.on .pe-rs{display:block}
.pe-highlight i,.pe-underline i,.pe-strike i{position:absolute;pointer-events:none}
.pe-highlight i{background:var(--c);opacity:.42;mix-blend-mode:multiply}
.pe-underline i{border-bottom:max(1px,calc(var(--k) * 1.2px)) solid var(--c)}
.pe-strike i::after{content:"";position:absolute;left:0;right:0;top:55%;border-top:max(1px,calc(var(--k) * 1.2px)) solid var(--c)}
.pe-rect,.pe-ellipse{border:max(1px,calc(var(--k) * var(--bw) * 1px)) solid var(--c)}
.pe-ellipse{border-radius:50%}
.pe-note{display:grid;place-items:center;border-radius:4px;background:var(--c);color:#3b3000;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pe-note svg{width:70%;height:70%}
.pe-text,.pe-fld-text{cursor:move}
.pe-tx{min-height:100%;padding:1px 2px;font:calc(var(--k) * var(--fs) * 1px)/1.25 "Microsoft YaHei","PingFang SC",Arial,sans-serif;white-space:pre-wrap;word-break:break-word;outline:0;cursor:inherit}
.pe-tx[contenteditable="true"]{cursor:text;background:rgba(255,248,230,.6)}
.pe-tx:empty::before{content:attr(data-ph);color:rgba(var(--lnc),.35)}
.pe-it:not(.on) .pe-text{outline:1px dashed rgba(var(--lnc),.18)}
.pe-image img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.pe-whiteout{background:#fff;box-shadow:0 0 0 1px rgba(var(--shd),.12)}
.pe-check{display:grid;place-items:center}
.pe-check svg{width:100%;height:100%;stroke-width:3}
.pe-link{border:1.5px dashed #2F6FEB;background:rgba(47,111,235,.08)}
.pe-url{position:absolute;left:0;bottom:100%;max-width:240px;padding:2px 6px;border-radius:6px;background:#2F6FEB;color:#fff;font:600 11px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-redact{background:rgba(15,12,20,.72);outline:1.5px solid #E5484D}
.pe-field{position:absolute;box-sizing:border-box}
.pe-field input,.pe-field textarea,.pe-field select{box-sizing:border-box;width:100%;height:100%;padding:0 3px;border:0;border-radius:2px;background:rgba(255,236,150,.38);color:#111;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;box-shadow:inset 0 0 0 1px rgba(245,165,36,.55);outline:0}
.pe-field textarea{padding:2px 3px;resize:none}
.pe-field input:focus,.pe-field textarea:focus,.pe-field select:focus{background:rgba(255,236,150,.6);box-shadow:inset 0 0 0 2px var(--amber)}
.pe-field input[type="checkbox"],.pe-field input[type="radio"]{margin:0;accent-color:#111;box-shadow:none;background:transparent}
.pe-fld-text,.pe-fld-multiline,.pe-fld-checkbox,.pe-fld-radio,.pe-fld-dropdown,.pe-fld-signature{border:1.5px solid #2F6FEB;background:rgba(47,111,235,.1);border-radius:3px}
.pe-fld-radio{border-radius:50%}
.pe-fld-signature{border-style:dashed}
.pe-fl{position:absolute;left:0;bottom:100%;display:inline-flex;align-items:center;gap:4px;max-width:220px;padding:2px 6px;border-radius:6px 6px 0 0;background:#2F6FEB;color:#fff;font:600 11px/1.3 var(--sans);white-space:nowrap}
.pe-fl b{overflow:hidden;text-overflow:ellipsis}
.pe-colors{display:flex;flex-wrap:wrap;gap:8px}
.pe-c{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;cursor:pointer}
.pe-c input[type="radio"]{position:absolute;opacity:0}
.pe-c i{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--hair2)}
.pe-c input:checked + i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--amber)}
.pe-cx input{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.pe-align{margin-top:4px}
/* 2026-09-29: on every page (shown on the others, changed on its own), copy, layers, last time's draft */
.pe-ghost{pointer-events:none}
.pe-ghost::after,.pe-every::after{content:"";position:absolute;inset:-3px;border:1px dashed rgba(47,111,235,.55);border-radius:3px;pointer-events:none}
.pe-arr{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid var(--hair)}
.pe-arr .btn[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
.pe-draft{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px 12px;border-radius:14px;background:#EEF2FF;color:#3730A3;font:600 13.5px/1.4 var(--sans)}
.pe-draft>span{flex:1;min-width:180px}
.pe-find{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--canvas)}
.pe-find h3{margin:0;font:700 14px/1.2 var(--sans)}
.pe-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#pe-props{display:flex;flex-direction:column;gap:12px}
#pe-props:empty{display:none}
.bm-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;min-height:520px}
.bm-list{display:flex;flex-direction:column;gap:6px;max-height:72vh;overflow:auto;padding:2px}
.bm-row{display:grid;grid-template-columns:1fr 50px auto;align-items:center;gap:6px;padding:6px 6px 6px calc(8px + var(--lv) * 22px);border-radius:12px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.bm-row.on{box-shadow:0 0 0 2px var(--amber)}
.bm-row .inp{height:34px}
.bm-p{text-align:center}
.bm-b{display:flex;gap:2px}
.bm-b button{width:22px;height:30px;border-radius:8px;font:700 14px/1 var(--sans);color:var(--ink2)}
.bm-b button:hover{background:var(--canvas);color:var(--ink)}
.bm-empty{margin:24px 8px;color:var(--ink3);font-size:14px;line-height:1.6}
.bm-view{display:flex;flex-direction:column;align-items:center;gap:10px}
.bm-nav{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);color:var(--ink2)}
.bm-page canvas{max-width:100%;height:auto;box-shadow:var(--sh2)}
.bm-acts{display:flex;flex-direction:column;gap:8px}
.bm-acts .btn{width:100%}
@media (max-width:719px){
  .pe-tools{top:68px}
  .pe-tool span{display:none}
  .pe-tool{padding:0 9px}
  .bm-body{grid-template-columns:1fr}
  .bm-view{order:-1}
}

/* subtitle editor */
.se{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.se-l{position:sticky;top:96px;display:flex;flex-direction:column;gap:10px}
.se-v{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:18px;background:#0f0e14;overflow:hidden}
.se-v video{width:100%;height:100%;background:#000}
.se-cap{position:absolute;left:6%;right:6%;bottom:12%;text-align:center;font:600 clamp(14px,2.2vw,22px)/1.35 "Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;white-space:pre-line;pointer-events:none}
.se-nov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;color:#d8d6e4}
.se-nov[hidden]{display:none}
.se-nov p{max-width:340px;margin:0;font-size:13.5px;line-height:1.6}
.se-bar,.se-shift,.se-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.se-now{min-width:108px;font:600 13px/1 ui-monospace,Consolas,monospace;color:var(--ink2)}
.se-shift label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.se-shift .inp.sm{width:90px;height:32px}
.se-help{flex-basis:100%;font-size:12px;color:var(--ink3)}
.se-top .sp{flex:1}
.se-sum{margin:8px 0 6px;font:600 13px/1.4 var(--sans);color:var(--ink2)}
.se-sum:empty{display:none}
.se-list{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto;padding:2px}
.se-row{display:grid;grid-template-columns:28px 108px 108px minmax(0,1fr) 24px;align-items:start;gap:6px;padding:6px;border-radius:12px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.se-row.on{box-shadow:0 0 0 2px var(--amber)}
.se-row.play{background:#FFF8E6}
.se-row.bad .se-s,.se-row.bad .se-e{box-shadow:inset 0 0 0 1.5px #E5484D;color:#B42318}
.se-n{padding-top:8px;text-align:center;font:700 12px/1 var(--sans);color:var(--ink4)}
.se-row .inp.sm{height:32px;padding:0 6px;font:12.5px/1 ui-monospace,Consolas,monospace}
.se-t{min-height:32px;padding:6px 8px;resize:vertical;font:14px/1.4 "Microsoft YaHei","PingFang SC",Arial,sans-serif}
.se-x{display:grid;place-items:center;width:24px;height:24px;margin-top:4px;border-radius:50%;color:var(--ink3)}
.se-x:hover{background:#FDE8E8;color:#E5484D}
.se-empty,.se-restore{margin:18px 6px;font-size:14px;line-height:1.6;color:var(--ink3)}
.se-restore{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
@media (max-width:959px){
  .se{grid-template-columns:1fr}
  .se-l{position:static}
  .se-row{grid-template-columns:24px 1fr 1fr 24px}
  .se-row .se-t{grid-column:2 / 4}
}

/* webmaster column: home tabs, mega menu feature */
.cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.colc[data-col="web"] .cico{background:linear-gradient(150deg,#34D399,#0F9F6E 52%,#0B6E52);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px -10px rgba(15,159,110,.8)}
.fv.v3{background:linear-gradient(140deg,#EAFBF3,#CDF3E1)}
@media (max-width:1279px){ .cols .colc .ctx>span{display:none} .colc{padding:18px 18px} }
@media (max-width:1079px){ .cols{grid-template-columns:1fr} }

/* webmaster tools: form */
.app.webapp-on{padding:18px;overflow:visible}
@media (max-width:599px){ .app.webapp-on{padding:10px} }
.webapp{display:flex;flex-direction:column;gap:14px;max-width:1180px;margin:0 auto;text-align:left}
.app-shell[data-shell="web"] .skel.s-in{height:64px;border-radius:18px}
.app-shell[data-shell="web"] .skel.s-opt{height:40px;width:60%;border-radius:12px}
.wf{display:flex;flex-direction:column;gap:12px}
.wf-row{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 18px;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2),var(--sh1);transition:box-shadow .15s}
.wf-row:focus-within{box-shadow:0 0 0 1px var(--hair2),0 0 0 4px rgba(255,209,102,.35),var(--sh1)}
.wf-ic{flex:none;color:var(--ink3)}
.wf-in{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;font-size:17px;color:var(--ink)}
.wf-in::placeholder{color:var(--ink4)}
.wf-go{flex:none}
.wf-go.ld{opacity:.7;pointer-events:none}
.wf-list{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:20px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2),var(--sh1)}
.wf-list textarea.wf-in{height:auto;min-height:140px;padding:10px 12px;border-radius:12px;background:var(--canvas);font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}
.wf-lfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:6px}
.wf-lfoot small{font-size:13px;color:var(--ink3)}
.wf-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 16px;border-radius:16px;background:var(--canvas)}
.wf-o{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1.2 var(--sans);color:var(--ink2)}
.wf-o>span:first-child small{font-weight:500;color:var(--ink4)}
.wf-o.wide{flex-basis:100%;flex-direction:column;align-items:stretch;gap:6px}
.wf-o .inp.sm{height:38px;background-color:var(--sf)}
.wf-o select.inp.sm{width:auto;min-width:150px;padding-right:30px}
.wf-o input.inp.sm{width:240px;max-width:100%}
.wf-o.wide textarea{min-height:110px;background:var(--sf);font:13.5px/1.6 ui-monospace,Consolas,monospace}
.wf-keyrow{display:flex;gap:6px;align-items:center}
.wf-more{flex-basis:100%}
.wf-more summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:600 13.5px/1.4 var(--sans);color:var(--ink2);list-style:none}
.wf-more summary::-webkit-details-marker{display:none}
.wf-more[open] summary svg{transform:rotate(180deg)}
.wf-more textarea{margin-top:8px;background:var(--sf)}
.wf-more small{display:block;margin-top:4px;font-size:12.5px;color:var(--ink3)}
.wf-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--ink3)}
.wf-recent .chip-s{height:28px;line-height:28px;font-size:12.5px;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.wf-clr{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--ink4)}
.wf-clr:hover{background:var(--canvas2);color:var(--ink2)}
.pchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pchip{height:32px;min-width:52px;padding:0 10px;border-radius:9px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:600 13px/32px ui-monospace,Consolas,monospace;color:var(--ink2)}
.pchip[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
.pchips .inp.sm{width:170px;height:32px}
.kd-tabs,.rq-tabs{align-self:flex-start}
.kf-spots{margin:4px 14px 14px;border-radius:12px;background:var(--canvas)}
.kf-spots summary{padding:10px 14px;font:600 13px/1.4 var(--sans);color:var(--ink2);cursor:pointer}
.kf-spots ol{margin:0;padding:0 14px 12px 34px;font-size:13px;line-height:1.65;color:var(--ink3);word-break:break-word}
.kf-spots li+li{margin-top:6px}
.kf-spots mark{padding:0 2px;border-radius:4px;background:#FFE7A3;color:var(--ink)}
.rq-tabs{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wf-row.rq{padding-left:8px}
.rq-m{flex:none;width:auto;height:44px;font-weight:700}

/* webmaster tools: report */
.wr{display:flex;flex-direction:column;gap:14px;scroll-margin-top:90px}
.wr-busy{display:flex;flex-direction:column;align-items:center;gap:6px;padding:44px 20px;border-radius:20px;background:var(--canvas);text-align:center}
.wr-busy .spin{margin:0 0 10px}
.wr-busy b{font:700 15px/1.4 var(--sans);color:var(--ink)}
.wr-busy small{font-size:13px;color:var(--ink3)}
.wr-busy .pbar{width:min(420px,90%);height:8px;margin-top:10px;border-radius:99px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.wr-busy .pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--honey),var(--amber));transition:width .4s}
.wr-busy .btn{margin-top:10px}
.wr-h{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--canvas)}
.wr-hi{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--sf);box-shadow:0 1px 2px rgba(var(--shd),.06)}
.wr-ht{flex:1;min-width:0}
.wr-ht b{display:block;font:800 18px/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);word-break:break-word}
.wr-ht small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink3);word-break:break-all}
.s-pass.wr-h{background:#EEF8F2}.s-pass .wr-hi{color:#15803D}
.s-warn.wr-h{background:#FFF6E0}.s-warn .wr-hi{color:#B36F00}
.s-fail.wr-h{background:#FDEEEE}.s-fail .wr-hi{color:#B42318}
.s-info.wr-h{background:#F2F4F8}.s-info .wr-hi{color:#475569}
.ring{position:relative;flex:none;width:62px;height:62px}
.ring svg{width:62px;height:62px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.2}
.ring .rb{stroke:rgba(var(--lnc),.08)}
.ring .rf{stroke-linecap:round}
.ring.g .rf{stroke:#16A34A}.ring.a .rf{stroke:#F5A524}.ring.r .rf{stroke:#E5484D}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 18px/1 var(--disp);color:var(--ink)}
.grade{flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:16px;font:800 28px/1 var(--disp);color:#fff;background:#94A3B8}
.grade.g-Ap,.grade.g-A{background:#16A34A}.grade.g-B{background:#65A30D}.grade.g-C{background:#D97706}.grade.g-D{background:#EA580C}.grade.g-E,.grade.g-F{background:#DC2626}
.wr-s{border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.wr-sh{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;min-height:52px;padding:8px 12px 8px 18px;box-shadow:inset 0 -1px 0 var(--hair)}
.wr-sh h3{font:700 14.5px/1.4 var(--sans);color:var(--ink)}
.wr-sh h3 small{margin-left:4px;font-weight:600;color:var(--ink4)}
.wr-sh>small{font-size:12.5px;color:var(--ink3)}
.wr-tb{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wr-tb .inp.sm{width:180px;height:34px}
.wr-tb small{font-size:12.5px;color:var(--ink3)}
.cnts{display:flex;gap:6px;flex-wrap:wrap}
.cnt{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:99px;background:var(--canvas);font:700 12px/1 var(--sans);color:var(--ink2)}
.cnt.s-pass{background:#EEF8F2;color:#15803D}.cnt.s-warn{background:#FFF6E0;color:#B36F00}.cnt.s-fail{background:#FDEEEE;color:#B42318}
.cks{margin:0;padding:6px 8px;list-style:none}
.ck{display:flex;gap:12px;padding:11px 10px;border-radius:12px}
.ck+.ck{box-shadow:inset 0 1px 0 var(--hair)}
.ck-i{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%}
.s-pass .ck-i,.ck.s-pass .ck-i{background:#E3F4EA;color:#15803D}
.s-warn .ck-i,.ck.s-warn .ck-i{background:#FFEFC7;color:#B36F00}
.s-fail .ck-i,.ck.s-fail .ck-i{background:#FBDCDC;color:#B42318}
.s-info .ck-i,.ck.s-info .ck-i{background:#E8ECF3;color:#475569}
.ck b{display:block;font:600 14.5px/1.5 var(--sans);color:var(--ink);word-break:break-word}
.ck b code,.ck p code{font-size:12.5px}
.ck p{margin-top:3px;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.ckg+.ckg{box-shadow:inset 0 1px 0 var(--hair)}
.ckg h4{padding:14px 18px 0;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.wr-kv th{width:32%;min-width:120px;font-weight:600;color:var(--ink3);white-space:nowrap}
.wr-kv td{color:var(--ink);word-break:break-word;font-family:var(--sans)}
.wr-kv td small,.hdrs th small{display:block;margin-top:2px;font-weight:400;font-size:12.5px;line-height:1.5;color:var(--ink3);white-space:normal}
.wr-kv td b.ok{color:#15803D}.wr-kv td b.mid{color:#B36F00}.wr-kv td b.bad{color:#B42318}
.epp{display:block;margin:2px 0}
.epp code{font-size:12.5px}
.epp small{display:block;font-size:12px;color:var(--ink3)}
.wr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dt{width:100%;border-collapse:collapse;font-size:13.5px}
.dt th{position:sticky;top:0;padding:10px 14px;background:var(--canvas);text-align:left;font:700 12px/1.3 var(--sans);letter-spacing:.02em;color:var(--ink3);white-space:nowrap}
.dt td{padding:9px 14px;vertical-align:top;box-shadow:inset 0 -1px 0 var(--hair);color:var(--ink);word-break:break-word;max-width:520px}
.dt td[data-c="url"],.dt td[data-c="final_url"],.dt td[data-c="loc"],.dt td[data-c="src"],.dt td[data-c="record"],.dt td[data-c="data"]{word-break:break-all;min-width:220px}
.dt tr:last-child td{box-shadow:none}
/* 2026-09-29 robots.txt generator: which crawler may fetch the page being tried */
.rb-test{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--hair);background:var(--sf)}
.rb-test td small{margin-left:4px;font-size:12px;color:var(--ink3)}
.rb-test td.ok{color:#15803D;font-weight:700;white-space:nowrap}
.rb-test td.bad{color:#B42318;font-weight:700;white-space:nowrap}
.rb-test td svg{vertical-align:-2px}
.dt a{color:var(--indigo)}
.dt a:hover,.wr a.go:hover,.wr-kv a:hover{text-decoration:underline}
.wr a.go{color:var(--indigo);text-decoration:underline dotted;text-underline-offset:3px}
.dt .thumb{float:left;width:44px;height:44px;margin:0 10px 0 0;border-radius:8px;object-fit:cover;background:var(--canvas)}
.wr-more{margin:10px 18px 14px}
.wr-empty{padding:18px;font-size:14px;color:var(--ink3)}
.sb{display:inline-block;min-width:38px;padding:3px 7px;border-radius:7px;text-align:center;font:700 12.5px/1.2 ui-monospace,Consolas,monospace;background:#EEF1F6;color:#475569}
.sb.s2{background:#E3F4EA;color:#15803D}.sb.s3{background:#E6EEFF;color:#2F55D4}.sb.s4,.sb.s5,.sb.s0{background:#FBDCDC;color:#B42318}
.sb.s0{font-family:var(--sans);font-weight:600}
.vb{display:inline-block;padding:3px 8px;border-radius:7px;background:#EEF1F6;font:600 12.5px/1.3 var(--sans);color:#475569;white-space:nowrap}
.vb.v-ok,.vb.v-pass,.vb.v-available,.vb.v-genuine,.vb.v-valid,.vb.v-open,.vb.v-up,.vb.v-fast,.vb.v-complete{background:#E3F4EA;color:#15803D}
.vb.v-taken,.vb.v-broken,.vb.v-invalid,.vb.v-fake,.vb.v-fail,.vb.v-error,.vb.v-down,.vb.v-weak,.vb.v-slow,.vb.v-loop,.vb.v-multiple,.vb.v-none{background:#FBDCDC;color:#B42318}
.vb.v-risky,.vb.v-redirect,.vb.v-warn,.vb.v-blocked,.vb.v-filtered,.vb.v-short,.vb.v-revoked,.vb.v-average,.vb.v-typo,.vb.v-disposable,.vb.v-unknown,.vb.v-not_bot{background:#FFEFC7;color:#8A5300}
.vb.v-closed{background:#EEF1F6;color:#475569}
.yn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%}
.yn.y{background:#E3F4EA;color:#15803D}.yn.n{background:#FBDCDC;color:#B42318}
.dim{color:var(--ink4)}
.wr-raw{border-radius:16px;background:var(--canvas)}
.wr-raw summary{display:flex;align-items:center;gap:8px;padding:14px 18px;cursor:pointer;font:600 14px/1.3 var(--sans);color:var(--ink2);list-style:none}
.wr-raw summary::-webkit-details-marker{display:none}
.wr-rawb{position:relative;padding:0 14px 14px}
.wr-rawb .btn{position:absolute;right:22px;top:8px}
.wr-raw pre,.wr-rec,.rq-body,.sd pre{max-height:520px;margin:0;padding:14px 16px;overflow:auto;border-radius:12px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair);font:12.5px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink);white-space:pre-wrap;word-break:break-all}
.wr-s .wr-rec,.wr-s .rq-body{margin:12px 14px 14px}
.wr-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wr-foot small{margin-left:auto;font-size:12.5px;color:var(--ink4)}
.wr-note{font-size:13px;line-height:1.6;color:var(--ink3)}
.wr-s>.wr-note,.wr-s>.wr-meta{padding:0 18px 14px}
.wr-meta{font-size:13.5px;line-height:1.6;color:var(--ink2);word-break:break-all}
.wr-meta code{font-size:12.5px}
/* 2026-09-29: files to fix with (dead links for Baidu, a list of links to change), server configuration for security headers */
.wr-exp{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 6px}
.wr-cfgtabs button{height:32px;padding:0 10px;font-size:12.5px}
.wr-cfg{position:relative;padding:12px 14px 0}
.wr-cfg .btn{position:absolute;right:22px;top:20px}
.wr-cfg .wr-rec{margin:0}
.wr-s>.wr-note:last-child{padding-top:10px}
/* 2026-09-29: a report shared by link, and printed (or saved as PDF) with a letterhead — the site's or the member's own */
.wr-more-acts:empty{display:none}
.wr-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-radius:14px;background:var(--canvas)}
.wr-link .inp{flex:1 1 260px;min-width:0;height:38px;font-size:13px}
.wr-link small{flex-basis:100%;font-size:12.5px;color:var(--ink3)}
.wr-pdf{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px;border-radius:14px;background:var(--canvas)}
.wr-brand{width:100%}
.wr-brand summary{display:flex;align-items:center;gap:6px;cursor:pointer;font:600 14px/1.3 var(--sans);color:var(--ink2);list-style:none}
.wr-brand summary::-webkit-details-marker{display:none}
.wr-brand[open] summary .ic{transform:rotate(180deg)}
.wb-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:12px}
.wb-f .wf-o{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.wb-f .wf-o .inp{width:100%}
.wb-f>small{grid-column:1/-1;font-size:12.5px;line-height:1.5;color:var(--ink3)}
.wb-logo{display:flex;align-items:center;gap:10px}
.wb-logo img{max-width:140px;max-height:48px;padding:4px;border-radius:8px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--hair)}
.wr-shared{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:12px 14px;border-radius:14px;background:#EEF2FF;color:#3730A3}
.wr-shared>span{flex:1;min-width:200px}
.wr-shared b{display:block;font:700 14px/1.4 var(--sans)}
.wr-shared small{display:block;font-size:12.5px;line-height:1.5;color:#4B5563}
.wr-print,.wr-printf{display:none}
@media (max-width:599px){
  .wb-f{grid-template-columns:minmax(0,1fr)}
  .wr-foot small{flex-basis:100%;margin-left:0}
  .wr-shared .btn{width:100%}
}
@media print{
  html.pr-web body{background:#fff}
  html.pr-web body>*:not(main),html.pr-web main>section:not(.tapp){display:none!important}
  html.pr-web .wf,html.pr-web .wf-recent,html.pr-web .wr-foot,html.pr-web .wr-more-acts,html.pr-web .wr-tb,html.pr-web .wr-shared,html.pr-web .wr-more,
  html.pr-web .tin-tabs,html.pr-web .wr-rawb .btn,html.pr-web .kd-opts,html.pr-web .wr-filter{display:none!important}
  html.pr-web .tapp,html.pr-web .tapp .wrap,html.pr-web .app{margin:0!important;padding:0!important;max-width:none!important;box-shadow:none!important;background:none!important}
  html.pr-web .wr{gap:10px}
  html.pr-web .wr-print{display:flex!important;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px;padding-bottom:10px;border-bottom:2px solid #14112E}
  html.pr-web .wp-mark{display:flex;align-items:center;gap:10px;font:800 17px/1.2 var(--disp);color:#14112E}
  html.pr-web .wp-mark img{max-width:180px;max-height:42px}
  html.pr-web .wp-mark svg.bear{width:40px;height:37px}
  html.pr-web .wp-mark .cn small{display:block;font-size:8pt;letter-spacing:.2em;color:#B7791F}
  html.pr-web .wp-t{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;font-size:10pt;color:#334155}
  html.pr-web .wp-t b{font-size:13pt;color:#14112E}
  html.pr-web .wr-printf{display:block!important;margin-top:8px;padding-top:8px;border-top:1px solid #CBD5E1;font-size:9pt;color:#64748B;text-align:center}
  html.pr-web .wr-s,html.pr-web .wr-h,html.pr-web .wr-raw{box-shadow:0 0 0 1px #CBD5E1!important}
  html.pr-web .ck,html.pr-web .dt tr,html.pr-web .wr-kv tr,html.pr-web .wr-h{break-inside:avoid}
  html.pr-web .wr-scroll,html.pr-web .wr-raw pre,html.pr-web .wr-rec{overflow:visible!important;max-height:none!important}
  html.pr-web .dt th{position:static}
  html.pr-web .dt td{max-width:none}
  html.pr-web *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:14mm 12mm}
}
.wr-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.wr-2>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stats>div{padding:16px;border-radius:16px;background:var(--canvas)}
.stats b{display:block;font:800 24px/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;word-break:break-word}
.stats span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink3)}
.stats .st-broken b{color:#B42318}.stats .st-redirect b{color:#2F55D4}.stats .st-blocked b{color:#B36F00}.stats .st-ok b{color:#15803D}
.bar{display:grid;grid-template-columns:48px minmax(0,1fr) 90px;align-items:center;gap:10px;padding:6px 18px}
.bar-l{font:600 12.5px/1 var(--sans);color:var(--ink3)}
.bar-t{height:10px;border-radius:99px;background:var(--canvas);overflow:hidden}
.bar-t i{display:block;height:100%;border-radius:99px;background:#16A34A}
.bar-t i.mid{background:#F5A524}.bar-t i.bad{background:#E5484D}
.bar-v{font:600 12.5px/1 var(--sans);color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.prop{display:flex;flex-direction:column}
.prop .pr{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) 70px 24px;align-items:center;gap:12px;padding:10px 18px;box-shadow:inset 0 -1px 0 var(--hair)}
.prop .pr:last-child{box-shadow:none}
.pr-n{font-size:13.5px;color:var(--ink2)}
.pr-n b{color:var(--ink);font-weight:600}
.pr-v{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.pr-v code{padding:2px 6px;border-radius:6px;background:var(--canvas);font-size:12.5px;word-break:break-all}
.pr-v em{font-style:normal;font-size:13px;color:var(--ink3)}
.pr-v small{flex-basis:100%;font-size:12px;color:var(--ink4)}
.pr-t{font:600 12.5px/1 var(--sans);color:var(--ink3);text-align:right}
.pr-i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.pr.s-pass .pr-i{background:#E3F4EA;color:#15803D}.pr.s-warn .pr-i{background:#FFEFC7;color:#B36F00}.pr.s-fail .pr-i{background:#FBDCDC;color:#B42318}
.avl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.av{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair)}
.av b{font:700 15px/1.3 var(--sans);color:var(--ink);word-break:break-all}
.av .vb{align-self:flex-start}
.av small{font-size:12.5px;color:var(--ink3)}
.av.v-available{background:#EEF8F2;box-shadow:inset 0 0 0 1px rgba(21,128,61,.18)}
.serps{display:flex;flex-direction:column;gap:14px;padding:16px 18px}
.serp{position:relative;padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hair);font-family:Arial,sans-serif}
.serp-l{position:absolute;right:12px;top:10px;font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink4)}
.serp-u{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#4d5156}
.serp-u img{border-radius:50%;background:#F1F3F4}
.serp.g b{display:block;margin-top:6px;font:400 20px/1.3 Arial,sans-serif;color:#1a0dab}
.serp.g p{margin-top:4px;font:400 14px/1.58 Arial,sans-serif;color:#4d5156}
.serp.bd b{display:block;font:400 18px/1.4 Arial,"Microsoft YaHei",sans-serif;color:#2440b3;text-decoration:underline}
.serp.bd p{margin-top:4px;font:400 13px/1.6 Arial,"Microsoft YaHei",sans-serif;color:#333}
.serp.bd .serp-u{margin-top:4px;color:#626675}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 18px;align-items:start}
.oc{position:relative;border-radius:12px;overflow:hidden;background:var(--sf);box-shadow:0 0 0 1px var(--hair2)}
.oc-l{position:absolute;left:8px;top:8px;z-index:1;padding:3px 7px;border-radius:6px;background:rgba(15,12,41,.72);font:700 10.5px/1 var(--sans);color:#fff}
.oc-img{aspect-ratio:1.91/1;background:var(--canvas2);overflow:hidden}
.oc-img img{width:100%;height:100%;object-fit:cover}
.noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;color:var(--ink4)}
.noimg small{font-size:12px}
.oc-b{padding:10px 12px 12px;font-family:Helvetica,Arial,sans-serif}
.oc-b small{display:block;font-size:11.5px;color:#65676b;text-transform:none}
.oc-b b{display:block;margin-top:3px;font-size:15px;line-height:1.3;color:#050505;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.oc-b p{margin-top:3px;font-size:13px;line-height:1.4;color:#65676b;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.oc.x{border-radius:16px}
.oc.x.sm{display:grid;grid-template-columns:120px 1fr}
.oc.x.sm .oc-img{aspect-ratio:1/1}
.oc.wx{padding-top:30px;background:#F7F7F7}
.oc.wx .oc-b{margin:0 10px 10px;padding:12px;border-radius:6px;background:var(--sf)}
.oc.wx .oc-row{display:grid;grid-template-columns:1fr 56px;gap:10px;margin-top:6px}
.oc.wx .oc-img{width:56px;height:56px;aspect-ratio:1}
.oc.wx b{font-size:15px;color:#191919}
.oc.wx p{margin:0;font-size:12.5px;color:#888;-webkit-line-clamp:3}
.techs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tg-c{padding:14px 16px;border-radius:16px;background:var(--canvas)}
.tg-c h4{margin-bottom:10px;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.tg-c>div{display:flex;flex-wrap:wrap;gap:6px}
.tech{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:10px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);font:600 13.5px/1.2 var(--sans);color:var(--ink)}
.tech small{font-weight:500;color:var(--ink3)}
.src{max-height:70vh;overflow:auto;background:#FCFCFD;font:12.5px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}
.src.small{max-height:420px}
.src ol{margin:0;padding:8px 0 8px 0;list-style:none;counter-reset:ln}
.src li{position:relative;padding:0 14px 0 64px;min-height:1.65em;white-space:pre;color:var(--ink)}
.src.wrap li{white-space:pre-wrap;word-break:break-all}
.src li::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:48px;padding-right:8px;text-align:right;color:var(--ink4);user-select:none}
.src li.hit{background:#FFF4CC}
.src li.bad{background:#FDEEEE}
.src .hc{font-style:normal;color:#8A8F98}.src .ht{font-style:normal;color:#2F55D4}.src .ha{font-style:normal;color:#A3470D}.src .hs{font-style:normal;color:#15803D}
.outline{margin:0;padding:10px 12px;list-style:none}
.outline li{display:flex;align-items:baseline;gap:10px;padding:5px 8px 5px calc((var(--lv) - 1) * 22px + 8px);border-radius:8px}
.outline li.skip{background:#FFF6E0}
.outline .hl{flex:none;padding:2px 6px;border-radius:6px;background:var(--canvas2);font:700 11.5px/1.2 var(--sans);color:var(--ink2)}
.outline li[style*="--lv:1"] .hl{background:var(--solid);color:var(--on-solid)}
.outline .ht{font-size:14px;line-height:1.5;color:var(--ink);word-break:break-word}
.outline .ht em{color:#B42318}
.tree{margin:0;padding:10px 18px 14px;list-style:none;font-size:13.5px}
.tree ul{margin:6px 0 4px 10px;padding-left:16px;list-style:none;border-left:2px solid var(--hair2)}
.tree li{padding:4px 0}
.tree li>b{color:var(--ink)}
.tree li>code{display:block;margin-top:3px;padding:6px 8px;border-radius:8px;background:var(--canvas);font-size:12px;word-break:break-all}
.hops{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--ink2)}
.hops li{display:flex;align-items:center;gap:8px;word-break:break-all}
.hdrs th{width:34%;min-width:140px;font:600 13px/1.4 ui-monospace,Consolas,monospace;color:var(--ink)}
.hdrs td code{font-size:12.5px;word-break:break-all;white-space:pre-wrap}
.steps-v{display:flex;flex-direction:column;gap:0;margin:0;padding:6px 8px;list-style:none;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.steps-v li{display:grid;grid-template-columns:24px 150px minmax(0,1fr);align-items:center;gap:12px;padding:12px 10px}
.steps-v li+li{box-shadow:inset 0 1px 0 var(--hair)}
.steps-v b{font:600 14px/1.3 var(--sans);color:var(--ink)}
.steps-v span:last-child{font-size:13.5px;color:var(--ink2);word-break:break-all}
.ix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ixc{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.ixh{display:flex;align-items:center;gap:10px}
.ixh b{font:800 17px/1.2 var(--disp);color:var(--ink)}
.ixh span{margin-left:auto;font:700 13px/1 var(--sans)}
.ixc.s-pass .ixh{color:#15803D}.ixc.s-warn .ixh{color:#B36F00}.ixc.s-fail .ixh{color:#B42318}
.ixc ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7;color:var(--ink2)}
.ixc .btn{align-self:flex-start}
.cmp{padding:14px 16px}
.cmp h4{margin-bottom:8px;font:700 13.5px/1.2 var(--sans)}
.sptext{max-height:360px;margin:12px 14px 14px;padding:14px 16px;overflow:auto;border-radius:12px;background:var(--canvas);font-size:13.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.wf-bar{display:flex;height:22px;margin:16px 18px 8px;border-radius:8px;overflow:hidden;background:var(--canvas)}
.wf-bar i{display:block;min-width:4px}
.t-dns{background:#8B5CF6}.t-connect{background:#0EA5E9}.t-tls{background:#14B8A6}.t-ttfb{background:#F5A524}.t-download{background:#16A34A}
.wf-legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 18px 12px;font-size:12.5px;color:var(--ink3)}
.wf-legend span{display:inline-flex;align-items:center;gap:6px}
.wf-legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.wf-legend b{color:var(--ink)}
.kinds{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 18px 12px;font-size:13px;color:var(--ink2)}
.sd{margin:0 14px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--hair)}
.sd:last-child{box-shadow:none;margin-bottom:8px}
.sd summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;cursor:pointer}
.sd summary b{font-size:14.5px;color:var(--ink)}
.sd pre{margin-top:10px}
.ipcard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px;border-radius:24px;background:linear-gradient(160deg,#FFF8E6,#FFF1CC);text-align:center}
.ipcard .lab{font:700 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.ipv{font:800 clamp(28px,5.4vw,52px)/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink);word-break:break-all}
.ipacts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.ipwhere{display:inline-flex;align-items:center;gap:6px;max-width:100%;font:600 14.5px/1.4 var(--sans);color:var(--ink2)}
.ipwhere svg{flex:none;color:var(--gold)}
.ip-host{margin-top:12px}
.myip{display:flex;flex-direction:column;gap:14px}
.rq-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;border-radius:16px;background:var(--canvas);font-size:13.5px;color:var(--ink2)}
.rq-st b{color:var(--ink)}
.wr-dl{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.wr-dl small{font-size:13px;color:var(--ink3)}
.wr-dl .wr-more{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:959px){
  .wr-2,.ix,.cards{grid-template-columns:1fr}
  .prop .pr{grid-template-columns:minmax(0,1fr) auto 22px}
  .pr-v{grid-column:1 / -1;grid-row:2}
}
@media (max-width:599px){
  .wf-row{flex-wrap:wrap;padding:8px}
  .wf-ic{display:none}
  .wf-in{flex-basis:100%;height:44px;padding:0 8px;font-size:16px}
  .wf-row .wf-go{width:100%}
  .wf-row.rq .rq-m{flex:1}
  .wf-lfoot{flex-direction:column;align-items:stretch}
  .wf-opts{padding:12px}
  .wf-o{flex-wrap:wrap}
  .wf-o select.inp.sm,.wf-o input.inp.sm{width:100%;min-width:0}
  .wr-h{flex-wrap:wrap;padding:14px}
  .wr-kv th{width:40%;min-width:0;white-space:normal}
  .steps-v li{grid-template-columns:24px minmax(0,1fr)}
  .steps-v li span:last-child{grid-column:2}
  .bar{grid-template-columns:36px minmax(0,1fr) 70px;padding:6px 12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wr-tb .inp.sm{width:100%}
  .dt td{max-width:none}
}

/* ================= 2026-09-27: pricing rows, favorites, sharing, sign-in options ================= */

/* stars: always visible where there is no hover (phones, tablets) */
@media (hover:none){ .fav{opacity:1} }
.thero-act{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.phead-t{flex:1;min-width:0}
.phead-in .thero-act{align-self:center}
.catsec-h .fav{opacity:1;margin:0}
.catc-top{display:flex;align-items:center;gap:2px}
.catc-top .catc-h{flex:1;min-width:0}
.catc-top .fav{margin:0 4px 0 0}
.catc:hover .catc-top .fav{opacity:1}

/* home: favorites first */
.favs{padding:26px 0 6px;background:var(--canvas)}
.cf-in #favs[hidden]{display:block!important;min-height:176px}
.cf-in #favs[hidden]::after{content:"";display:block;max-width:calc(var(--max) - 2*var(--gut));height:150px;margin:0 auto;border-radius:26px;background:linear-gradient(90deg,#fff 30%,#FFF8E6 50%,#fff 70%);background-size:200% 100%;box-shadow:0 0 0 1px var(--hair)}
.favs-box{padding:22px 24px 24px;border-radius:26px;background:linear-gradient(135deg,#FFF9EA 0%,#FFFFFF 58%);box-shadow:0 0 0 1px rgba(245,165,36,.18),var(--sh2)}
.favs-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.favs-ht{display:flex;align-items:center;gap:14px;min-width:0}
.favs-i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--honey);color:var(--cocoa);box-shadow:0 8px 18px -10px rgba(217,142,18,.8)}
.favs-h h2{display:flex;align-items:center;gap:10px;font:800 22px/1.2 var(--disp);letter-spacing:-.02em}
.favs-h h2 .cnt{background:var(--honey-soft);color:var(--cocoa)}
.favs-h p{margin-top:3px;font-size:14.5px;color:var(--ink3)}
.favs-act{display:flex;flex-wrap:wrap;gap:8px}
.favs-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fvc{display:inline-flex;align-items:center;height:42px;padding:0 4px 0 6px;border-radius:13px;background:var(--sf);box-shadow:0 0 0 1px var(--hair)}
.fvc>a{display:inline-flex;align-items:center;gap:9px;height:100%;padding-right:4px;font:600 14px/1 var(--sans);color:var(--ink)}
.fvc>a:hover{color:var(--indigo)}
.fvc .ci{width:30px;height:30px}
.fvx{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:var(--ink4);transition:background .12s,color .12s}
.fvx:hover{background:#FDECEC;color:#B42318}
.favs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px;margin-top:16px}
.fvt{position:relative;display:flex;align-items:center;min-width:0;border-radius:16px;background:var(--sf);box-shadow:0 0 0 1px var(--hair);transition:box-shadow .15s}
.fvt:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh1)}
.fvt>a{flex:1;display:flex;align-items:center;gap:12px;min-width:0;padding:12px 6px 12px 14px}
.fvt>a>span{display:grid;min-width:0}
.fvt b{overflow:hidden;font:700 14.5px/1.3 var(--sans);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.fvt small{overflow:hidden;font-size:12.5px;line-height:1.4;color:var(--ink3);text-overflow:ellipsis;white-space:nowrap}
.fvt .ft{--w:28px}
.fvt .at{--w:32px}
.fvt>.fvx,.fvt>.fav{margin:0 8px 0 0}
.fvt>.fvx{opacity:0}
.fvt:hover>.fvx,.fvt>.fvx:focus-visible{opacity:1}
@media (hover:none){ .fvt>.fvx{opacity:1} }
.fvt-s>.fav{opacity:1}
.favs-empty>p{margin-top:16px;font-size:14.5px;color:var(--ink2)}

/* the favorites shortcut: a tab on the right edge; a round button on phones */
.fdock{position:fixed;right:0;top:58%;z-index:70;display:flex;flex-direction:column;align-items:center;gap:6px;width:52px;padding:14px 0 12px;border-radius:16px 0 0 16px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2),var(--sh2);color:var(--amber);transform:translateY(-50%);transition:width .18s,background .15s}
.fdock:hover{background:var(--honey-soft)}
.fdock-l{writing-mode:vertical-rl;font:700 12.5px/1 var(--sans);letter-spacing:.04em;color:var(--ink2);white-space:nowrap}
:lang(zh) .fdock-l,:lang(ja) .fdock-l{letter-spacing:.2em}
.fdock-n{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--solid);font:700 11.5px/22px var(--sans);font-style:normal;color:var(--on-solid);text-align:center}
.fdock.zero .fdock-n{display:none}
.fpn-open .fdock{visibility:hidden}
.fpanel{position:fixed;inset:0;z-index:88;display:flex;justify-content:flex-end;background:rgba(15,12,41,.22);animation:fade .12s ease-out}
.fpn-box{display:flex;flex-direction:column;width:min(420px,100%);height:100%;background:var(--sf);box-shadow:var(--sh3);animation:slidein .18s ease-out}
@keyframes slidein{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.fpn-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 12px 22px}
.fpn-h h2{display:flex;align-items:center;gap:10px;font:800 20px/1.2 var(--disp)}
.fpn-h h2 svg{color:var(--amber)}
.fpn-h .cnt:empty{display:none}
.fpn-q{display:flex;align-items:center;gap:10px;margin:0 18px;padding:0 14px;height:44px;border-radius:12px;background:var(--canvas);color:var(--ink3)}
.fpn-q input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;color:var(--ink)}
.fpn-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 18px 18px}
.fpn-g{margin:18px 0 8px;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.fpn-body .favs-cats{margin-top:0}
.fpn-list{display:grid;gap:8px}
.fpn-list .fvt>.fvx{opacity:1}
.fpn-empty{display:grid;justify-items:center;gap:6px;margin-top:22px;padding:26px 16px;border-radius:18px;background:var(--canvas);text-align:center}
.fpn-empty svg{color:var(--amber)}
.fpn-empty b{font:800 17px/1.3 var(--disp);color:var(--ink)}
.fpn-empty p{font-size:14px;color:var(--ink3)}
.fpn-none{margin-top:22px;text-align:center;font-size:14px;color:var(--ink3)}
.fpn-ft{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:14px 18px calc(14px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--hair)}
@media (max-width:719px){
  .fdock{top:auto;right:14px;bottom:calc(18px + env(safe-area-inset-bottom));flex-direction:row;justify-content:center;gap:0;width:50px;height:50px;padding:0;border-radius:50%;transform:none;transition:transform .22s,opacity .22s}
  .fdock-l{display:none}
  .fdock-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;line-height:20px;padding:0 5px;font-size:11px;box-shadow:0 0 0 2px #fff}
  .fdock.away{transform:translateY(90px);opacity:0;pointer-events:none}
  /* while a tool has files in it, its own action bar owns the bottom of the screen */
  body:has(.ws-foot) .fdock{display:none}
  .fpanel{align-items:flex-end}
  .fpn-box{width:100%;height:auto;max-height:86vh;max-height:86dvh;border-radius:24px 24px 0 0;animation:sheet .2s ease-out}
  @keyframes sheet{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
  .favs-box{padding:18px 16px 18px}
  .favs-h h2{font-size:19px}
  .favs-grid{grid-template-columns:1fr}
  .thero-act,.phead-in .thero-act{align-self:flex-start}
}
@media print{ .fdock,.fpanel,.shbar,.shsec,.fs-share{display:none!important} }

/* sharing */
.shr{position:relative}
.shr-b{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:13px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2);font:600 14px/1 var(--sans);color:var(--ink2)}
.shr-b:hover,.shr-b[aria-expanded="true"]{box-shadow:0 0 0 1px rgba(var(--shd),.2);color:var(--ink)}
.shr-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:max-content;max-width:min(330px,calc(100vw - 32px));padding:14px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3);animation:drop .14s ease-out}
.shr-t{margin-bottom:10px;font:700 13px/1.3 var(--sans);color:var(--ink)}
.shr-nets{display:flex;flex-wrap:wrap;gap:8px}
.shn{--b:#14112E;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--b);transition:background .12s,color .12s,box-shadow .12s,transform .12s}
.shn:hover{background:var(--b);color:#fff;box-shadow:none;transform:translateY(-1px)}
.shn-facebook{--b:#1877F2}.shn-x{--b:#14171A}.shn-whatsapp{--b:#25D366}.shn-linkedin{--b:#0A66C2}.shn-telegram{--b:#229ED9}.shn-reddit{--b:#FF4500}
.shn-pinterest{--b:#E60023}.shn-line{--b:#06C755}.shn-vk{--b:#0077FF}.shn-weibo{--b:#E6162D}.shn-wechat{--b:#07C160}.shn-email{--b:#4A4763}.shn-copy{--b:#2E2A78}.shn-more{--b:#4A4763}
.shsec{padding:8px 0 44px;background:var(--sf)}
.faq+.shsec{padding-top:0}
.shbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:20px 24px;border-radius:22px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair)}
.shbar-t{display:grid;gap:3px}
.shbar-t b{font:800 18px/1.3 var(--disp);color:var(--ink)}
.shbar-t span{font-size:14px;color:var(--ink3)}
.fs-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fs-share>span{font:600 13px/1 var(--sans);color:#C9C6E6}
.site-ft .shn{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#DAD7F0}
.site-ft .shn svg{width:16px;height:16px}
.site-ft .shn:hover{background:var(--b);color:#fff}
.sqr{position:fixed;inset:0;z-index:97;display:grid;place-items:center;padding:20px;background:rgba(15,12,41,.42);animation:fade .12s ease-out}
.sqr-box{position:relative;display:grid;justify-items:center;gap:8px;width:min(340px,100%);padding:30px 26px 24px;border-radius:26px;background:#fff;box-shadow:var(--sh3);text-align:center}
.sqr-box>.ib{position:absolute;top:10px;right:10px}
.sqr-i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#E7F9EF;color:#07C160}
.sqr-box h2{font:800 20px/1.3 var(--disp)}
.sqr-box p{font-size:14px;color:var(--ink3)}
.sqr-c{width:220px;height:220px;margin-top:8px;border-radius:12px;box-shadow:0 0 0 1px var(--hair)}
.sqr-box code{max-width:100%;overflow:hidden;font-size:12px;color:var(--ink3);text-overflow:ellipsis;white-space:nowrap}
@media (max-width:719px){
  .shbar{padding:18px 16px}
  .shr-pop{right:auto;left:0}
  .fs-share{width:100%}
}

/* sign-in: WhatsApp, the email / username choice, codes, the recovery key */
.oa-whatsapp{width:100%}
.oa-whatsapp svg{color:#25D366}
.oa-facebook svg{color:#1877F2}
.atabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:20px;padding:4px;border-radius:14px;background:var(--canvas)}
.atabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:11px;font:600 14px/1 var(--sans);color:var(--ink3)}
.atabs button[aria-selected="true"]{background:var(--sf);box-shadow:0 1px 2px rgba(var(--shd),.08),0 0 0 1px var(--hair);color:var(--ink)}
.aform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ahint{font:500 12.5px/1.45 var(--sans);color:var(--ink3)}
.ahint.good{color:var(--ok)}
.ahint.bad{color:#B42318}
.waform{margin-top:22px}
.wa-h{display:flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1.3 var(--sans);color:var(--ink)}
.wa-h svg{color:#25D366}
.wa-step{display:grid;gap:14px}
.wa-to{font-size:14px;color:var(--ink2);text-align:center}
.telf{display:flex;gap:8px}
.telf select{flex:0 0 42%;min-width:0;padding:12px 10px;border:0;border-radius:12px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:inherit;font-size:14px;color:var(--ink);outline:0}
.telf input{flex:1;min-width:0}
.code-in{font:700 24px/1 var(--disp)!important;letter-spacing:.45em;text-align:center}
.key-in{font:600 16px/1.2 ui-monospace,Consolas,Menlo,monospace!important;letter-spacing:.06em;text-transform:uppercase}
.code-f{width:100%;margin-top:4px}
.fg-alt{margin-top:2px;text-align:center}
.fg-alt .alink{margin:0}
.rkey{display:grid;justify-items:center;gap:10px;width:100%;padding:18px;border-radius:18px;background:var(--honey-soft);box-shadow:inset 0 0 0 1px rgba(245,165,36,.3)}
.rkey-l{font:700 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.rkey-c{font:700 clamp(15px,4.4vw,19px)/1.3 ui-monospace,Consolas,Menlo,monospace;letter-spacing:.06em;color:var(--cocoa);word-break:break-all}
.rkey-a{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rkey-n{font-size:13px;line-height:1.5;color:var(--ink2)}
.rkey-ok{display:flex;align-items:flex-start;gap:10px;margin-top:6px;font-size:14px;color:var(--ink2);text-align:left}
.rkey-ok input{margin-top:3px}
.asent .rkey-ok+.btn{width:100%}
.asent a.btn[aria-disabled="true"]{opacity:.5}

/* account centre */
.ac-warn{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:18px;padding:16px 18px;border-radius:18px;background:#FFF4E5;box-shadow:inset 0 0 0 1px rgba(217,142,18,.25);color:#8A5300}
.ac-warn>div{flex:1;min-width:220px}
.ac-warn b{font:700 15px/1.35 var(--sans);color:var(--cocoa)}
.ac-warn p{margin-top:2px;font-size:13.5px}
.ac-ids{display:grid;gap:8px;max-width:640px}
.ac-id{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair)}
.ac-id .ac-txt{flex:1}
.ac-id small em{font-style:normal;color:var(--ink4)}
.ac-id .ac-prov-i svg{color:var(--ink2)}
.ac-inline{max-width:none;margin:0 0 6px;padding:14px;border-radius:16px;background:var(--canvas)}
.ac-inline .rkey{margin-top:4px}
.ac-favchips{display:flex;flex-wrap:wrap;gap:8px}
.fvp{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 14px 0 8px;border-radius:13px;box-shadow:inset 0 0 0 1px var(--hair);font:600 14px/1 var(--sans);color:var(--ink)}
.fvp:hover{background:var(--canvas)}
.fvp .ft{--w:24px}
.fvp .at{--w:28px}
.fvp .ci{width:28px;height:28px}
.ac-fadd{margin-top:0}
.ac-fq{display:flex;align-items:center;gap:10px;max-width:560px;height:46px;padding:0 14px;border-radius:13px;box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink3)}
.ac-fq input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;color:var(--ink)}
.ac-fres{display:grid;gap:6px;max-width:560px;margin-top:8px}
.ac-fres:empty{display:none}
.ac-flist{display:grid;gap:8px;max-width:640px}
.ac-fr{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair)}
.ac-fr .ac-txt{flex:1}
.ac-fr .fav{opacity:1;margin:0}
.ac-fr .ft{--w:26px}
.ac-fr .at{--w:30px}
.ac-fr.drag{opacity:.5}
.ac-fr .grip{color:var(--ink4);cursor:grab}
.ac-mv{display:flex}
.ac-mv .ib{width:32px;height:32px}
.ac-mv svg.rot180{transform:rotate(180deg)}
.ac-sec>h3 .cnt{margin-left:6px;vertical-align:2px}
@media (max-width:719px){
  .ac-fr .grip{display:none}
  .ac-id{flex-wrap:wrap}
  .ac-id .btn{margin-left:54px}
}

/* ---------------- home: the converter card in the hero (desktop and tablet; phones keep the "choose files" button) ---------------- */
.hconv{position:relative;width:100%;max-width:560px;justify-self:end;padding-top:58px}
.hconv .peek{position:absolute;left:auto;right:13%;top:0;z-index:0;width:98px;height:auto;filter:drop-shadow(0 10px 18px rgba(59,36,16,.18))}
.hc-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;padding:26px 26px 22px;border-radius:24px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3)}
.hc-head{display:flex;align-items:center;gap:14px}
.hc-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--honey-soft);color:var(--cocoa)}
.hc-h{font:800 22px/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.hc-head p{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.hc-drop{border-radius:18px;background:var(--canvas);box-shadow:inset 0 0 0 1.5px var(--hair2);transition:box-shadow .2s,background .2s}
.hc-drop.over{background:var(--honey-soft);box-shadow:inset 0 0 0 2px var(--amber)}
.hc-add{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px 18px;text-align:center}
.hc-or{font-size:13px;color:var(--ink3)}
.hc-drop.has .hc-add{display:none}
.hc-file{display:flex;align-items:center;gap:12px;padding:14px 10px 14px 16px}
.hc-file .ft{--w:32px;--bgc:var(--canvas)}
.hc-fn{flex:1;min-width:0}
.hc-fn b{display:block;font:700 14.5px/1.3 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-fn small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink3)}
.hc-file .x{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:var(--ink3)}
.hc-file .x:hover{background:var(--sf);color:var(--ink)}
.hc-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:10px}
.hc-sel{display:flex;flex-direction:column;gap:7px;min-width:0;font:600 12.5px/1 var(--sans);color:var(--ink3)}
.hc-sel select{width:100%;height:48px;padding:0 36px 0 14px;border-radius:13px;background:var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377738E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px;box-shadow:0 0 0 1px var(--hair2);font:700 15px/1 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.hc-sel select:hover{box-shadow:0 0 0 1px rgba(var(--shd),.22)}
.hc-sel select:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.hc-sel select:disabled{color:var(--ink4);background-color:var(--canvas);cursor:not-allowed}
.hc-arr{display:grid;place-items:center;height:48px;color:var(--ink3)}
.hc-go{width:100%}
.hc-go:disabled{opacity:.45;cursor:not-allowed;transform:none}
.hc-note{min-height:18px;margin-top:-6px;font-size:13px;line-height:1.4;color:var(--ink3);text-align:center}
.hc-pop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair);font-size:12.5px;color:var(--ink3)}
.hc-pop a{padding:5px 10px;border-radius:999px;background:var(--canvas);font:600 12.5px/1.2 var(--sans);color:var(--ink2);white-space:nowrap}
.hc-pop a:hover{background:var(--honey-soft);color:var(--ink)}
@media (max-width:1079px){
  .hconv{justify-self:center}
}
/* ---------------- Text Translator (kind "translator", js/app-translate.js) ---------------- */
.trx{display:flex;flex-direction:column;gap:14px}
.trx-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.trx-sel select{width:100%;height:48px;padding:0 36px 0 14px;border-radius:13px;background:var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377738E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px;box-shadow:0 0 0 1px var(--hair2);font:700 15px/1 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.trx-sel select:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.trx-swap{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--canvas);color:var(--ink2);transition:background .15s,transform .2s}
.trx-swap:hover{background:var(--honey-soft);color:var(--ink);transform:rotate(180deg)}
.trx-quick{display:flex;flex-wrap:wrap;gap:6px}
.trx-quick button{padding:7px 13px;border-radius:999px;background:var(--canvas);font:600 13px/1.2 var(--sans);color:var(--ink2)}
.trx-quick button:hover{background:var(--honey-soft);color:var(--ink)}
.trx-quick button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
.trx-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.trx-pane{display:flex;flex-direction:column;min-height:280px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2)}
.trx-pane.trx-out{background:var(--canvas)}
.trx-pane textarea{flex:1;min-height:230px;padding:16px 18px;border:0;border-radius:18px 18px 0 0;resize:vertical;background:transparent;font:400 17px/1.65 var(--sans);color:var(--ink)}
.trx-pane textarea:focus{outline:none}
.trx-src:focus-within{box-shadow:0 0 0 2px var(--amber)}
.trx-text{flex:1;min-height:230px;padding:16px 18px;font:400 17px/1.65 var(--sans);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;transition:opacity .15s}
.trx-hint{color:var(--ink4)}
.trx-busy .trx-text{opacity:.55}
.trx-tools{display:flex;align-items:center;gap:6px;min-height:52px;padding:6px 10px;box-shadow:inset 0 1px 0 var(--hair)}
.trx-tools .ib{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;color:var(--ink3)}
.trx-tools .ib:hover{background:var(--canvas);color:var(--ink)}
.trx-out .trx-tools .ib:hover{background:var(--sf)}
.trx-tools .ib.rec{color:#E5484D;animation:trxpulse 1.2s ease-in-out infinite}
@keyframes trxpulse{50%{background:rgba(229,72,77,.12)}}
.trx-det,.trx-state{font-size:12.5px;line-height:1.3;color:var(--ink3)}
.trx-state{margin-left:auto}
.trx-count{margin-left:auto;font-size:12.5px;color:var(--ink4);font-variant-numeric:tabular-nums}
.trx-count.full{color:#B42318}
.trx-doc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:14px;color:var(--ink3)}
.trx-doc a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* 2026-09-29: history, several languages at once, glossary, text from a picture */
.trx-hbtn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:7px 12px;border-radius:999px;background:transparent;font:600 13px/1.2 var(--sans);color:var(--ink2);box-shadow:0 0 0 1px var(--hair2)}
.trx-hbtn[aria-expanded="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
.trx-hist{padding:12px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2)}
.trx-hh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.trx-hl{display:flex;flex-direction:column;gap:2px;max-height:360px;margin:0;padding:0;overflow:auto;list-style:none}
.trx-hl li{display:flex;align-items:flex-start;gap:4px}
.trx-hs{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--ink4)}
.trx-hs.on{color:#F5A524}
.trx-hi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;text-align:left}
.trx-hi:hover{background:var(--canvas)}
.trx-hi small{font-size:12px;color:var(--ink4)}
.trx-hi span,.trx-hi em{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 14px/1.45 var(--sans);font-style:normal;color:var(--ink)}
.trx-hi em{color:var(--ink3)}
.trx-extra{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.trx-extra:empty{display:none}
.trx-card{border-radius:16px;background:var(--canvas);box-shadow:0 0 0 1px var(--hair)}
.trx-ch{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 0 14px}
.trx-ch b{font:700 13px/1.2 var(--sans);color:var(--ink2)}
.trx-ch .ib{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--ink3)}
.trx-ct{padding:4px 14px 14px;font:400 15.5px/1.6 var(--sans);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.trx-more{display:flex;flex-direction:column;gap:10px}
.trx-multi{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.trx-ml{display:inline-flex;align-items:center;font:600 13.5px/1.3 var(--sans);color:var(--ink2)}
#trChips{display:contents}
.trx-add select{height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--canvas);font:600 13px/1 var(--sans);color:var(--ink2)}
.trx-gl{border-radius:14px;background:var(--canvas)}
.trx-gl summary{display:flex;align-items:center;gap:6px;padding:12px 14px;cursor:pointer;font:600 13.5px/1.3 var(--sans);color:var(--ink2);list-style:none}
.trx-gl summary::-webkit-details-marker{display:none}
.trx-gl[open] summary .ic{transform:rotate(180deg)}
.trx-gl summary small{margin-left:4px;font-weight:600;color:var(--ink4)}
.trx-gl textarea{display:block;box-sizing:border-box;width:calc(100% - 28px);margin:0 14px;padding:10px 12px;border:0;border-radius:10px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font:400 14px/1.6 ui-monospace,Consolas,monospace;resize:vertical}
.trx-gl>small{display:block;padding:6px 14px 12px;font-size:12.5px;line-height:1.5;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){.trx-swap:hover{transform:none}.trx-tools .ib.rec{animation:none}}
@media (max-width:719px){
  .trx-panes{grid-template-columns:1fr}
  .trx-pane{min-height:190px}
  .trx-pane textarea,.trx-text{min-height:150px;font-size:16px}
}
/* Voice Translator: a conversation, one side per language */
.vtx{display:flex;flex-direction:column;gap:14px}
.vtx-langs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:10px}
.vtx-l{display:flex;flex-direction:column;gap:6px;font:700 12px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink3)}
.vtx-l select{width:100%;height:48px;padding:0 36px 0 14px;border-radius:13px;background:var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377738E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px;box-shadow:0 0 0 1px var(--hair2);font:700 15px/1 var(--sans);letter-spacing:0;color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.vtx-l select:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.vtx-log{display:flex;flex-direction:column;gap:10px;min-height:260px;max-height:460px;padding:16px;overflow-y:auto;border-radius:18px;background:var(--canvas);overscroll-behavior:contain}
.vtx-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin:auto;max-width:420px;font-size:14.5px;line-height:1.55;text-align:center;color:var(--ink3)}
.vtx-hint .ic{flex:none;color:var(--ink4)}
.vtx-msg{display:flex;flex-direction:column;gap:4px;max-width:78%;padding:11px 14px;border-radius:16px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2)}
.vtx-msg.a{align-self:flex-start;border-bottom-left-radius:5px}
.vtx-msg.b{align-self:flex-end;border-bottom-right-radius:5px;background:var(--honey-soft);box-shadow:none}
.vtx-msg.live{opacity:.6}
.vtx-msg p{margin:0;overflow-wrap:anywhere}
.vtx-msg .o{font-size:13.5px;line-height:1.5;color:var(--ink3)}
.vtx-msg .tr{display:flex;align-items:flex-start;gap:6px;font:600 16.5px/1.5 var(--sans);color:var(--ink)}
.vtx-msg .tr.bad{font:500 13.5px/1.5 var(--sans);color:#B42318}
.vtx-msg .tr .ib{display:grid;place-items:center;flex:none;width:30px;height:30px;margin:-3px -6px -3px auto;border-radius:9px;color:var(--ink3)}
.vtx-msg .tr .ib:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.vtx-io{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.vtx-side{display:flex;flex-direction:column;gap:8px}
.vtx-mic{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 16px;border-radius:16px;background:var(--solid);font:700 15.5px/1.2 var(--sans);color:var(--on-solid);transition:background .15s}
.vtx-mic:hover{background:#2c2a3a}
.vtx-side.b .vtx-mic{background:var(--amber);color:var(--ink)}
.vtx-side.b .vtx-mic:hover{background:#f0a01a}
.vtx-mic.rec{background:#E5484D;color:#fff;animation:trxpulse 1.2s ease-in-out infinite}
.vtx-type{display:flex;align-items:center;gap:4px;padding:4px 4px 4px 14px;border-radius:13px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2)}
.vtx-type:focus-within{box-shadow:0 0 0 2px var(--amber)}
.vtx-type input{flex:1;min-width:0;height:38px;border:0;background:transparent;font:400 15px/1 var(--sans);color:var(--ink)}
.vtx-type input:focus{outline:none}
.vtx-type .ib{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;color:var(--ink3)}
.vtx-type .ib:hover{background:var(--canvas);color:var(--ink)}
.vtx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.vtx-auto{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);cursor:pointer}
.vtx-auto input{width:17px;height:17px;accent-color:var(--ink)}
.vtx-foot .trx-state{margin-left:auto}
.vtx-nomic{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13.5px;line-height:1.5;color:var(--ink3)}
/* 2026-09-29: face to face — the other person's half turned round (for a phone lying on the table between two people) */
.vtx-them{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:#FFF8E6;transform:rotate(180deg)}
.vtx-them[hidden]{display:none}
.vtx-big{margin:0;min-height:1.5em;font:700 21px/1.45 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.vtx.face .vtx-io{grid-template-columns:minmax(0,1fr)}
.vtx-foot [data-vface][aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
.wtx-mode{flex-wrap:wrap}
.wtx-mode button{height:32px;padding:0 10px;font-size:12.5px}
@media (prefers-reduced-motion:reduce){.vtx-mic.rec{animation:none}}
@media (max-width:719px){
  .vtx-log{min-height:220px;max-height:52vh;padding:12px}
  .vtx-msg{max-width:90%}
  .vtx-mic{min-height:54px;font-size:14.5px}
  .vtx-io{gap:10px}
}
/* Website Translator: a page from its address, in a sandboxed frame */
.wtx{display:flex;flex-direction:column;gap:14px}
.wtx-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,240px) auto;align-items:center;gap:10px}
.wtx-url{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:13px;background:var(--sf);box-shadow:0 0 0 1px var(--hair2);color:var(--ink4)}
.wtx-url:focus-within{box-shadow:0 0 0 2px var(--amber)}
.wtx-url input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:500 15px/1 var(--sans);color:var(--ink)}
.wtx-url input:focus{outline:none}
.wtx-bar .btn{height:48px}
.wtx-state:empty{display:none}
.wtx-empty,.wtx-busy,.wtx-err{display:flex;align-items:center;gap:10px;margin:0;padding:18px;border-radius:16px;background:var(--canvas);font-size:14.5px;line-height:1.5;color:var(--ink3)}
.wtx-busy .spin{margin:0;width:22px;height:22px;border-width:3px;flex:none}
.wtx-err{color:#B42318;background:#FEF3F2}
.wtx-err a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wtx-view{display:flex;flex-direction:column;gap:8px}
.wtx-tools{display:flex;align-items:center;gap:12px;min-width:0}
.wtx-tools b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;color:var(--ink)}
.wtx-tools a{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13.5px;font-weight:600;color:var(--ink2)}
.wtx-tools a:hover{color:var(--ink)}
.wtx-tools .ib{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;color:var(--ink3)}
.wtx-tools .ib:hover{background:var(--canvas);color:var(--ink)}
.wtx-note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink4)}
.wtx-view iframe{display:block;width:100%;height:72vh;min-height:480px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair2)}
@media (max-width:719px){
  .wtx-bar{grid-template-columns:1fr}
  .wtx-view iframe{height:68vh;min-height:360px}
}
/* the converter's format picker: "Translate" lists languages by name */
.fp-f.langs{grid-template-columns:repeat(2,minmax(0,1fr))}
.fp-f button.lg{height:auto;min-height:40px;padding:6px 10px;font:600 12.5px/1.3 var(--sans);letter-spacing:0;text-align:left;overflow-wrap:anywhere}
@media (max-width:719px){
  .hconv,.fstrip{display:none}
}

/* ---------------- five columns: Pro Tools' colours (2026-10-01, the place Translate had), the tab rows and the footer ---------------- */
.colc[data-col="pro"] .cico,.cico.lg[data-col="pro"]{background:linear-gradient(150deg,#60A5FA,#2563EB 52%,#1E40AF);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px -10px rgba(37,99,235,.8)}
.cico.lg[data-col="edit"]{background:linear-gradient(150deg,#FFD978,#F5A524);color:var(--cocoa)}
.cico.lg[data-col="ai"]{background:linear-gradient(150deg,#9377FF,#6146F2 52%,#3F28C2)}
.cico.lg[data-col="web"]{background:linear-gradient(150deg,#34D399,#0F9F6E 52%,#0B6E52)}
.fv.v4{background:linear-gradient(140deg,#EEF4FF,#D6E4FF)}
.cols{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1439px){ .cols .colc .ctx>span{display:none} .cols .colc{gap:14px;padding:18px 16px} .cols .cico{width:48px;height:48px;border-radius:15px} .cols .cico svg{width:23px;height:23px} }
/* five tabs across: no room for the arrow next to the count, the tab itself is the button */
@media (min-width:1080px) and (max-width:1599px){ .cols .colc .car{display:none} .cols .ctx b{flex-wrap:wrap;row-gap:6px} }
@media (max-width:1279px){ .cols{gap:10px} .cols .ctx b{font-size:18px} }
@media (max-width:1079px){ .cols{grid-template-columns:1fr} .cols .colc{padding:16px 18px} }
/* 2026-10-02 (the owner: "the Chinese names break in the middle" — 格式转/换): five tabs across left the name a narrow strip
   beside the icon. On computers the icon now sits on top and the name, its count and the line get the whole width;
   a name never breaks inside a word (CJK included), and the count drops under it if it must */
@media (min-width:1080px){
  .cols .colc{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 22px 20px}
  .cols .colc .car{position:absolute;top:24px;right:20px;display:block}
  .cols .ctx{width:100%}
  .cols .ctx b{flex-wrap:wrap;row-gap:6px;font-size:19px}
  .cols .ctx b>span{word-break:keep-all;overflow-wrap:normal}
  .cols .ctx>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
}
.fs-top{grid-template-columns:minmax(0,1.3fr) repeat(6,minmax(0,1fr));gap:32px}
@media (max-width:1279px){ .fs-top{grid-template-columns:repeat(4,minmax(0,1fr))} .fs-brand{grid-column:1 / -1} }
@media (max-width:719px){ .fs-top{grid-template-columns:1fr 1fr} }
.hero-in.solo{grid-template-columns:minmax(0,1fr);max-width:860px}

/* ---------------- home directory: a column opens under itself when the tabs are stacked; "more" per category ---------------- */
.cols.acc{gap:8px}
.cols.acc>.dirp{margin:2px 0 10px}
.cols.acc>.dirp .catg{gap:10px}
.cols.acc>.dirp .dm-more{margin-top:14px}
.cols.acc .colc[aria-expanded="true"]{box-shadow:0 0 0 1px var(--hair2),var(--sh2)}
.catc-more{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 2px 2px;padding:9px 12px;border-radius:11px;background:var(--canvas);font:700 13px/1.2 var(--sans);color:var(--ink2);transition:background .15s,color .15s}
.catc-more:hover{background:var(--honey-soft);color:var(--ink)}
.catc-more .ic{transition:transform .2s}
.catc-more.all .ic{transform:rotate(180deg)}

/* ---------------- motion (html.fx: admin switch on and the visitor hasn't asked for less motion) ---------------- */
/* without the motion layer (switched off, a crawler, or less motion asked for) everything simply shows */
html:not(.fx) .reveal{opacity:1;transform:none;transition:none}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shine{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes wobble{0%,100%{transform:none}30%{transform:rotate(-8deg) scale(1.06)}60%{transform:rotate(5deg) scale(1.06)}}
/* content below the fold rises in as it scrolls into view, one after another (core.js tags it) */
.fx .rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.2,1) var(--rv,0ms),transform .55s cubic-bezier(.2,.7,.2,1) var(--rv,0ms)}
.fx .rv.rv-in{opacity:1;transform:none}
/* a directory column or a category's extra rows arrive the same way */
.fx .dirp-in .catc{animation:rise .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0) * 45ms)}
.fx .catc li.more{animation:rise .32s ease-out both;animation-delay:calc(var(--i,0) * 22ms)}
/* the header settles into a frosted bar once the page moves, with a thin reading-progress line */
.fx .hd{transition:box-shadow .25s,background-color .25s}
.fx .hd.scrolled{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);box-shadow:0 1px 0 var(--hair),0 12px 28px -22px rgba(var(--shd),.45)}
.hd-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#FFC847,#F5A524);transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none;opacity:0;transition:opacity .2s}
.fx .hd.scrolled .hd-prog{opacity:1}
/* pointer devices: things you can open lift a little and their icons come alive */
@media (hover:hover) and (pointer:fine){
  .fx .catc{transition:box-shadow .2s,transform .2s}
  .fx .catc:hover{transform:translateY(-3px)}
  .fx .catc-h:hover .ci,.fx .colc:hover .cico,.fx .tc:hover .tc-i,.fx .mg-cat:hover .ci,.fx a.fchip:hover .ft{animation:wobble .5s ease}
  .fx .catc li a{transition:background .15s,color .15s,transform .15s}
  .fx .catc li a:hover{transform:translateX(3px)}
  .fx .colc{transition:background .15s,box-shadow .2s,transform .2s}
  .fx .colc:hover{transform:translateY(-2px)}
  .fx a.fchip{transition:background .15s,transform .15s}
  .fx a.fchip:hover{transform:translateY(-2px)}
  /* a light sweep across the main buttons: an extra background layer, so the button's own box never changes */
  .fx .btn-honey{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%),linear-gradient(180deg,#FFDA7E,#FFC847);background-size:260% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat}
  .fx .btn-honey:hover{animation:shine .8s ease}
  .fx .btn:hover{transform:translateY(-1px)}
  .fx .mg-list .mi{transition:background .15s,transform .15s}
  .fx .mg-list .mi:hover{transform:translateY(-2px)}
}
.fx .btn:active,.fx .colc:active,.fx .catc-more:active,.fx a.fchip:active{transform:scale(.97)}
/* a tap leaves a soft ripple where the finger was: drawn in its own fixed layer clipped to the button's shape, so the
   button itself (its size in a row, its children) is never touched */
.rip-layer{position:fixed;z-index:2147483000;overflow:hidden;pointer-events:none;contain:strict}
.rip{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);border-radius:50%;background:var(--c,#14112E);opacity:.14;transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:ripple .55s ease-out forwards}
/* menus and panels open with a short, springy entrance */
.fx .mega:not([hidden]) .mg-cat,.fx .mega:not([hidden]) .mi{animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.fx .mega:not([hidden]) .mg-cat:nth-child(n+3){animation-delay:30ms}
.fx .mega:not([hidden]) .mi:nth-child(n+4){animation-delay:40ms}
.fx .mega:not([hidden]) .mi:nth-child(n+7){animation-delay:70ms}
.fx .mdrawer:not([hidden]) .md-sec{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
.fx .mdrawer:not([hidden]) .md-sec:nth-child(n+3){animation-delay:40ms}
.fx .mdrawer:not([hidden]) .md-sec:nth-child(n+5){animation-delay:80ms}
.fx .pal:not([hidden]) .pal-box{animation:rise .22s cubic-bezier(.2,.7,.2,1) both}
.fx .hconv .peek{animation:floaty 6s ease-in-out infinite}
.fx .pill-new{transition:transform .2s,box-shadow .2s}
.fx .pill-new:hover{transform:translateY(-1px)}
.fx .dropz[data-drop]{transition:box-shadow .25s,background .25s,transform .25s}
@media (prefers-reduced-motion:reduce){
  .fx .rv{opacity:1;transform:none;transition:none}
  .fx .hconv .peek{animation:none}
}

/* ---------------- first screen: stats card, the phone's everyday-tools grid, a second soft glow ---------------- */
.hero-glow{position:absolute;left:-16%;bottom:-34%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(97,70,242,.11),rgba(97,70,242,.04) 55%,transparent);pointer-events:none}
.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 0 0 1px var(--hair),0 22px 44px -32px rgba(var(--shd),.4)}
.hstats>div{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;min-width:0;padding:18px 18px}
.hstats>div+div::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--hair2)}
.hs-i{grid-row:1 / span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--honey-soft);color:#B36F00}
.hstats>div:nth-child(2) .hs-i{background:#EEF4FF;color:#2563EB}
.hstats>div:nth-child(3) .hs-i{background:#E7F6EC;color:#15803D}
.hstats b{display:block;min-width:0;font:800 26px/1 var(--disp);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hstats>div>span:last-child{display:block;margin-top:5px;font-size:13px;line-height:1.3;color:var(--ink3)}
.hquick{display:none;margin-top:30px}
.hero-in.solo .hquick{display:block}
.hq-h{margin:0 0 12px;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
:lang(zh) .hq-h,:lang(ja) .hq-h,:lang(ko) .hq-h{letter-spacing:.04em;font-size:13px}
.hq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hero-in.solo .hq-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.hq{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;padding:16px 8px 14px;border-radius:18px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),0 12px 26px -22px rgba(var(--shd),.45);text-align:center;transition:box-shadow .15s,transform .15s}
.hq:hover{box-shadow:0 0 0 1px var(--hair2),var(--sh1)}
.fx .hq:active{transform:scale(.97)}
.hq-i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--canvas)}
.hq-i .ft{--w:26px}
.hq-i .at{--w:30px}
.hq-n{display:-webkit-box;max-width:100%;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:700 13px/1.3 var(--sans);color:var(--ink)}
/* sections: a little less air on wide screens */
.dir{padding:96px 0 104px}
.why,.apps,.pricing{padding-block:104px}
.faq{padding:104px 0 40px}
.cta-sec{padding:40px 0 104px}

/* ---------------- sign-in entry: phones and tablets see "log in" in the header and both buttons in the menu ---------------- */
@media (max-width:1079px){
  .hr .acct .login{display:inline-flex;height:36px;padding:0 14px;border-radius:11px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair2);font-size:14px}
  body[data-page="auth"] .hr .acct .login{display:none}
}
.mdrawer .md-acts .login{display:flex;align-items:center;justify-content:center;height:48px;border-radius:13px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair2);font:700 15px/1 var(--sans);color:var(--ink)}
.mdrawer .md-acts .btn{display:flex;width:100%;height:48px;font-size:15px}

/* ---------------- sign-in and sign-up: the form beside a panel of what an account brings ---------------- */
.authpage{position:relative;overflow:hidden;background:var(--canvas)}
.authpage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--lnc),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--lnc),.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 80% at 70% 20%,#000 20%,transparent 72%);mask-image:radial-gradient(70% 80% at 70% 20%,#000 20%,transparent 72%);pointer-events:none}
.auth-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"side card";gap:36px;align-items:stretch;justify-content:center;max-width:1160px;padding-block:44px 88px}
.auth-card{grid-area:card;width:100%;align-self:start}
.auth-side{grid-area:side;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100%;padding:46px 44px 36px;border-radius:32px;background:radial-gradient(90% 70% at 100% 0%,rgba(255,209,102,.18),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(97,70,242,.28),transparent 65%),linear-gradient(160deg,#221D5C,#14113A 55%,#0F0C29);box-shadow:0 30px 60px -40px rgba(15,12,41,.8);color:#CFCBEA}
.as-eb{display:flex;align-items:center;gap:10px;margin:0;font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--honey)}
:lang(zh) .as-eb,:lang(ja) .as-eb,:lang(ko) .as-eb{letter-spacing:.06em;font-size:13.5px}
.as-bear{width:34px;height:auto;flex:none}
.as-h{position:relative;max-width:520px;margin-top:22px;font:800 clamp(28px,2.7vw,40px)/1.14 var(--disp);letter-spacing:-.03em;color:#fff}
:lang(zh) .as-h,:lang(ja) .as-h,:lang(ko) .as-h{line-height:1.3;letter-spacing:0}
.as-stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:34px}
.as-stats div{min-width:0;padding:15px 14px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.as-stats b{display:block;font:800 26px/1 var(--disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.as-stats span{display:block;margin-top:7px;font-size:12.5px;line-height:1.3;color:#A9A5D2}
.as-trust{position:relative;display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:13px;color:#A9A5D2}
.as-trust svg{flex:none;color:var(--honey)}
@media (max-width:1079px){
  .auth-in{grid-template-columns:minmax(0,560px);grid-template-areas:"card" "side";gap:18px;padding-block:24px 56px}
  .auth-side{padding:30px 26px 26px;border-radius:26px}
  .as-h{font-size:25px}
  .as-stats{padding-top:24px}
  .as-stats b{font-size:21px}
}

/* ---------------- phones: a fuller first screen and sections that don't leave empty bands ---------------- */
@media (max-width:719px){
  .hero-in{padding-block:26px 40px;gap:0}
  .hero .pill-new{max-width:100%;height:34px;font-size:13px}
  .hero .pill-new>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero h1{margin-top:20px}
  .hero .lede{margin-top:16px;font-size:16px;line-height:1.6}
  .hero .cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
  .hero .cta .btn{width:100%;padding:0 12px}
  .hero .hint{display:none}
  .hquick{display:block;margin-top:26px}
  .hstats{margin-top:18px;border-radius:18px}
  .hstats>div{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:7px;padding:14px 4px 13px;text-align:center}
  .hs-i{grid-row:auto;width:32px;height:32px;border-radius:10px}
  .hs-i svg{width:15px;height:15px}
  .hstats b{font-size:20px}
  .hstats>div>span:last-child{margin-top:0;font-size:11.5px}
  .hero-glow{left:-60%;bottom:-18%;width:140%}
  .dir,.why,.apps,.pricing,.tv-sec{padding-block:52px}
  .faq{padding-top:52px}
  .cta-sec{padding-bottom:52px}
  .dir-head{gap:18px;margin-bottom:22px}
  .bento{margin-top:28px}
  .plans{margin-top:28px}
  .faq-in{gap:24px}
}
/* ================= 2026-09-27 (2): fuller pages — pricing strip, sign-in showcase, about / contact / apps ================= */
/* Chinese and Korean headings wrap at punctuation and spaces, never inside a word ("打磨" stays whole) */
:lang(zh) :is(h1,h2,h3),:lang(ko) :is(h1,h2,h3){word-break:keep-all;overflow-wrap:break-word}
/* Chinese and Japanese: a little air where Latin letters or digits meet the characters ("关于Excel" reads "关于 Excel") */
:lang(zh),:lang(ja){text-autospace:normal}
/* no word left alone on the last line of a paragraph */
p,li{text-wrap-style:pretty}

/* the phone menu: the search reads as a search field, each column carries its colour */
.mdrawer .sbtn{width:100%;height:48px;padding:0 16px;border-radius:14px;font-size:15px}
.mdrawer .sbtn>span{display:block}
.md-h{display:inline-flex;align-items:center;gap:14px;min-width:0}
.cico.sm{width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,#4B45B5,#2E2A78 55%,#1B1750);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.cico.sm svg{width:17px;height:17px}
.cico.sm[data-col="pro"]{background:linear-gradient(150deg,#60A5FA,#2563EB 52%,#1E40AF)}
.cico.sm[data-col="edit"]{background:linear-gradient(150deg,#FFD978,#F5A524);color:var(--cocoa)}
.cico.sm[data-col="ai"]{background:linear-gradient(150deg,#9377FF,#6146F2 52%,#3F28C2)}
.cico.sm[data-col="web"]{background:linear-gradient(150deg,#34D399,#0F9F6E 52%,#0B6E52)}
.cico.sm.alt{background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair2)}

/* home: the "batch" fan stays inside its card (the tiles were moved twice), the directory ends without a white band */
.fan .fanp .ft{position:static;margin:0;transform:none}
@media (max-width:1079px){ .cols.acc{margin-bottom:0} }

/* ---------------- pricing: every plan is the same kind of card, their rows lined up (title, blurb, price, note, list,
   button). Five across on wide screens, three over two wider ones on smaller laptops (never an empty slot), and on tablets
   and phones one row to swipe through (admin switch pricing_swipe) ---------------- */
.plans.pz{grid-template-columns:repeat(var(--pn,5),minmax(0,1fr));gap:12px;max-width:none}
.plans.pz .plan{padding:28px 22px 24px;border-radius:24px}
.plans.pz .price b{font-size:40px}
.plans.pz .plan ul{margin:22px 0 26px;padding-top:22px;gap:10px}
.plans.pz .plan li{font-size:14px}
.plans.pz .plan .tag{top:20px;right:18px}
.plans.pz .plan .pd{min-height:3em}
.plans.pz .price{flex-wrap:wrap;row-gap:4px}
.plans.pz .price span{white-space:nowrap}
@media (min-width:1360px) and (max-width:1499px){ .plans.pz .price b{font-size:36px} }
@supports (grid-template-rows:subgrid){
  .plans.pz{grid-auto-rows:auto;row-gap:12px}
  .plans.pz .plan{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .plans.pz .plan>h3{align-self:end}
  .plans.pz .plan ul{align-self:start}
  .plans.pz .plan .btn{align-self:end;margin-top:0}
}
.pz-dots{display:none}
@media (max-width:1359px){
  .plans.pz.pn5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .plans.pz.pn5>.plan{grid-column:span 2}
  .plans.pz.pn5>.plan:nth-child(n+4){grid-column:span 3}
  .plans.pz.pn4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1079px){
  .plans.pz .plan .pd{min-height:0}
  .plans.pz.pn5,.plans.pz.pn4,.plans.pz.pn3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans.pz.pn5>.plan,.plans.pz.pn5>.plan:nth-child(n+4){grid-column:auto}
  .plans.pz.pn5>.plan:last-child,.plans.pz.pn3>.plan:last-child{grid-column:1/-1}
  /* one row to swipe through, the next card peeking in; each card keeps its own rows, the list taking the spare height */
  .plans.pz.swipe{display:flex;align-items:stretch;gap:12px;margin-inline:calc(-1 * var(--gut));padding:6px var(--gut) 26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:none}
  .plans.pz.swipe::-webkit-scrollbar{display:none}
  .plans.pz.swipe>.plan{flex:0 0 clamp(280px,40%,360px);display:grid;grid-row:auto;grid-template-rows:auto auto auto auto 1fr auto;align-content:stretch;scroll-snap-align:start}
  .plans.pz.swipe>.plan .btn{align-self:end}
  .plans.pz.swipe>.plan.hot{box-shadow:0 22px 36px -26px rgba(15,12,41,.75)}
  .plans.pz.swipe+.pz-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .pz-dots button{width:8px;height:8px;padding:0;border-radius:999px;background:rgba(var(--lnc),.16);transition:width .25s,background .25s}
  .pz-dots button[aria-current="true"]{width:24px;background:var(--solid)}
  .pr-note{margin-top:16px}
}
@media (max-width:719px){
  .plans.pz,.plans.pz.pn5,.plans.pz.pn4,.plans.pz.pn3{grid-template-columns:minmax(0,1fr)}
  .plans.pz .plan{padding:26px 22px 22px}
  .plans.pz.swipe>.plan{flex-basis:86%}
}

/* ---------------- sign-in and sign-up: the brand beside the form. The panel is as tall as its content and stays in view
   beside a longer form; nothing in it suggests files are kept (they are deleted an hour after processing) ---------------- */
.authpage{overflow:hidden;overflow:clip}
.auth-in.solo{grid-template-columns:minmax(0,470px);grid-template-areas:"card"}
.auth-side{text-align:center}
.as-eb{justify-content:center}
.as-h{margin-inline:auto}
@media (min-width:1080px){
  .auth-in{align-items:start}
  .auth-in.short{align-items:center}
  .auth-in.short .auth-card{align-self:center}
  .auth-side{position:sticky;top:96px;min-height:0;padding:40px 40px 32px}
  .auth-in.short .auth-side{position:relative;top:auto}
  .as-stats{margin-top:0;padding-top:24px}
}
/* the stage: the folder bear on its app icon, two orbits, and the formats it works with floating around it */
.as-stage{position:relative;height:300px;margin:18px 0 4px}
.stg{position:absolute;left:50%;top:0;width:440px;height:300px;margin-left:-220px}
.stg-ring,.stg-glow,.stg-icon,.stg-t,.stg-dot{position:absolute;left:50%;top:50%}
.stg-ring{border-radius:50%}
.stg-ring.r1{width:214px;height:214px;margin:-107px 0 0 -107px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.stg-ring.r2{width:330px;height:330px;margin:-165px 0 0 -165px;border:1px dashed rgba(255,255,255,.13)}
.stg-glow{width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,209,102,.3),rgba(255,209,102,.07) 55%,transparent)}
.stg-icon{display:grid;place-items:center;width:136px;height:136px;margin:-68px 0 0 -68px;border-radius:38px;background:linear-gradient(160deg,#37318F,#1A1650);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.06),0 30px 50px -18px rgba(0,0,0,.65);transform:rotate(-6deg)}
.stg-icon svg{width:76%;height:auto;transform:rotate(6deg)}
.stg-t{filter:drop-shadow(0 12px 16px rgba(0,0,0,.4))}
.stg-t .ft{--w:46px;--bgc:#1A1650}
.stg-t.t1{transform:translate(-188px,-104px) rotate(-12deg)}
.stg-t.t2{transform:translate(120px,-128px) rotate(10deg)}
.stg-t.t3{transform:translate(152px,20px) rotate(-8deg)}
.stg-t.t4{transform:translate(-206px,24px) rotate(8deg)}
.stg-t.t5{transform:translate(-112px,86px) rotate(-6deg)}
.stg-t.t6{transform:translate(64px,92px) rotate(12deg)}
.stg-dot{width:6px;height:6px;border-radius:50%;background:var(--honey);opacity:.7}
.stg-dot.d1{transform:translate(-40px,-140px)}
.stg-dot.d2{width:4px;height:4px;opacity:.5;transform:translate(178px,-44px)}
.stg-dot.d3{width:4px;height:4px;background:#A5B4FC;opacity:.6;transform:translate(-168px,-14px)}
.stg-dot.d4{width:5px;height:5px;background:#fff;opacity:.35;transform:translate(14px,134px)}
.fx .stg-t{animation:stgfloat 6s ease-in-out infinite}
.fx .stg-t.t2{animation-delay:-1s}
.fx .stg-t.t3{animation-delay:-2s}
.fx .stg-t.t4{animation-delay:-3s}
.fx .stg-t.t5{animation-delay:-4s}
.fx .stg-t.t6{animation-delay:-5s}
.fx .stg-icon{animation:stgbob 6s ease-in-out infinite}
.fx .stg-ring.r2{animation:stgspin 80s linear infinite}
@keyframes stgfloat{50%{translate:0 -9px}}
@keyframes stgbob{50%{translate:0 -6px}}
@keyframes stgspin{to{rotate:360deg}}
.as-say{position:relative;max-width:430px;margin:6px auto 0;font-size:15.5px;line-height:1.65;color:#DAD7F0;text-wrap:balance}
:lang(zh) .as-say{word-break:keep-all;overflow-wrap:break-word}
.as-trust{justify-content:center}
.as-trust+.as-trust{margin-top:8px}
@media (max-width:1079px){
  .as-stage{height:250px;margin-top:12px}
  .stg{transform:scale(.82);transform-origin:50% 0}
}
@media (max-width:420px){
  .as-stage{height:220px}
  .stg{transform:scale(.72)}
}

/* ---------------- about: who we are beside the brand art, the numbers, the principles as cards, a way in at the end ---------------- */
.ab-head{padding-bottom:64px}
.ab-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:48px;margin-top:22px}
.ab-t h1{font-size:clamp(36px,4.2vw,62px)}
.ab-t .lede{max-width:640px;margin-top:16px;font-size:18.5px;line-height:1.65}
.ab-stats{max-width:660px;margin-top:34px}
.ab-art{position:relative;justify-self:center;width:300px;height:300px}
.ab-art>span{position:absolute}
.ab-art .ft{--w:52px;--bgc:var(--canvas);filter:drop-shadow(0 14px 18px rgba(var(--shd),.18))}
.ab-art .o1{left:-4px;top:30px;transform:rotate(-14deg)}
.ab-art .o2{right:0;top:4px;transform:rotate(10deg)}
.ab-art .o3{right:8px;bottom:10px;transform:rotate(-8deg)}
.ab-art .o4{left:14px;bottom:0;transform:rotate(8deg)}
.fx .ab-art .appicon{animation:floaty 6s ease-in-out infinite}
.ab-body{padding:72px 0 88px;background:var(--sf)}
.ab-body .prose>p{max-width:780px}
.ab-body .prose>p:first-child{font-size:20px;line-height:1.75;color:var(--ink)}
.ab-body .prose h2{margin-top:56px;font-size:30px}
.ab-body .prose ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 8px;padding:0;list-style:none;counter-reset:ab}
.ab-body .prose li{position:relative;margin:0;padding:62px 26px 26px;border-radius:24px;background:var(--canvas);font-size:15.5px;line-height:1.7;counter-increment:ab}
.ab-body .prose li::before{content:counter(ab,decimal-leading-zero);position:absolute;left:26px;top:24px;display:grid;place-items:center;width:30px;height:24px;border-radius:8px;background:var(--honey);font:800 12px/1 var(--disp);color:var(--cocoa)}
.ab-body .prose li strong{display:block;margin-bottom:8px;font:800 19px/1.35 var(--disp);letter-spacing:-.01em}
.page-about .cta-sec,.appspage .cta-sec{padding-top:72px}
@media (max-width:1079px){
  .ab-in{grid-template-columns:minmax(0,1fr) 220px;gap:28px}
  .ab-art{width:220px;height:220px}
  .ab-art .appicon{inset:30px}
  .ab-art .ft{--w:40px}
  .ab-body .prose ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  .ab-head{padding-bottom:40px}
  .ab-in{grid-template-columns:minmax(0,1fr)}
  .ab-art{display:none}
  .ab-t .lede{font-size:16.5px}
  .ab-stats{margin-top:24px}
  .ab-body{padding:44px 0 52px}
  .ab-body .prose>p:first-child{font-size:17.5px}
  .ab-body .prose h2{margin-top:40px;font-size:24px}
  .ab-body .prose li{padding:56px 20px 20px}
  .ab-body .prose li::before{left:20px;top:20px}
  .page-about .cta-sec,.appspage .cta-sec{padding-top:44px}
}

/* ---------------- contact: how we answer beside the form in a card ---------------- */
.page-contact .contact{padding:48px 0 104px;background:var(--sf)}
.ct-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.ct-info{position:sticky;top:100px}
.ct-info>p:first-child{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 18px;border-radius:999px;background:var(--honey-soft);font:700 15px/1.3 var(--sans);color:var(--cocoa)}
.ct-info>p:first-child::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.ct-info ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ct-info li{margin:0;padding:18px 22px;border-radius:18px;background:var(--canvas);font-size:15px;line-height:1.7}
.ct-card{padding:34px;border-radius:28px;background:var(--sf);box-shadow:0 0 0 1px var(--hair),var(--sh3)}
.ct-card .cform .btn{justify-self:stretch}
.ct-done{display:grid;justify-items:center;gap:10px;padding:44px 12px;text-align:center}
.ct-done[hidden]{display:none}
.ct-ok{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#E7F6EC;color:#15803D}
.ct-done b{font:800 22px/1.3 var(--disp);color:var(--ink)}
.ct-done p{max-width:360px;font-size:15px;color:var(--ink3)}
.ct-mail{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--ink3);text-align:center;overflow-wrap:anywhere}
.ct-mail a{font-weight:600;color:var(--ink)}
@media (max-width:1079px){ .ct-in{grid-template-columns:minmax(0,1fr);gap:26px} .ct-info{position:static} }
@media (max-width:719px){ .page-contact .contact{padding:28px 0 56px} .ct-card{padding:24px 18px;border-radius:22px} }

/* ---------------- apps: platforms and the "tell me" form beside the devices, then what the apps add (light on dark) ---------------- */
.appspage .apps{padding:88px 0 96px}
.appspage .apps-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.appspage .pgrid.wide{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px;margin-top:0}
.apps-more{position:relative;z-index:1;max-width:none;margin-top:72px;padding-top:56px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:#B9B5DA}
.apps-more h2{color:#fff}
.apps-more ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 22px;padding:0;list-style:none}
.apps-more li{margin:0;padding:22px 24px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:15px;line-height:1.7}
.apps-more strong{color:#fff}
.apps-more p{max-width:780px}
.apps-more a{color:var(--honey)}
@media (max-width:1079px){ .appspage .apps-in{grid-template-columns:minmax(0,1fr)} .apps-more ul{grid-template-columns:minmax(0,1fr)} }
@media (max-width:719px){ .appspage .apps{padding:44px 0 56px} .apps-more{margin-top:44px;padding-top:36px} }

/* ---------------- phones: tighter joins between the home sections ---------------- */
@media (max-width:719px){
  .dir{padding-bottom:36px}
  .why{padding-top:44px}
  .devs{justify-content:center;row-gap:14px}
  .devs span{width:calc(33.333% - 7px)}
}

/* ---------------- a file tool at work: the progress stays on the screen however tall the files area is ---------------- */
.ws-run>div{position:sticky;top:96px;bottom:24px}

/* ================= 2026-09-29: flat tool workspaces (pilot: main.fit — site.FIT_TOOLS, admin switch tool_fit) =================
   The title, breadcrumb and header stay as on every tool page. The workspace is one flat surface: white, square corners,
   hairlines between its parts — no shadow, no cards inside, no coloured panels. Scrolling down to it makes it fill the
   window under the site's header (html.wsfull, core.js FULL); the frame's button makes it small again. */
.fit{--fl-line:rgba(var(--lnc),.10);--fl-line2:rgba(var(--lnc),.16);--fl-hover:rgba(var(--lnc),.05);
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace}
/* the workspace as one window (tool.html .wsf): its bar with the related tools as tabs, then the tool */
.fit .wsf{position:relative;display:flex;flex-direction:column;height:620px;background:var(--sf);box-shadow:0 0 0 1px var(--fl-line2)}
.fit .wsf>.app{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:none;height:auto;margin:0;padding:0;border-radius:0;background:var(--sf);box-shadow:none}
.fit .app-shell{flex:1;min-height:0}
/* full: the window held over the page under the header — the whole width, down to the bottom of the screen — while the
   page behind stays still (core.js FULL; its room in the page is kept, so nothing moves when it goes back) */
html.fitp{scrollbar-gutter:stable}
/* only the root: a body with overflow of its own would become the header's scroller, and the sticky header would go up
   with the page */
html.wsfull{overflow:hidden;overscroll-behavior:none}
/* only the window's own scroller stops a scroll from running on: a box inside it that can't scroll (an empty text box)
   passes the swipe to the window, which scrolls to its end, and then the gesture is the window's (2026-09-30: every box
   holding on to it left a phone's window stuck) */
.wsfull .fit .wsf>.app{overscroll-behavior:contain}
.wsfull .fit .wsf{position:fixed;top:var(--hdh,72px);left:0;right:0;bottom:0;z-index:50;height:auto;box-shadow:none}
.wsfull .fdock{display:none}
/* the header's content spreads with it, and the workspace's edges line up with the header's (the page margin); solid —
   the title behind it would show through the frosted one */
.wsfull .hd>.wrap{max-width:none}
.wsfull .hd,.wsfull .hd.scrolled{background:var(--sf);-webkit-backdrop-filter:none;backdrop-filter:none}
.wsfull .fit .wsb{padding-left:max(0px,calc(var(--gut) - 18px))}
.wsfull .fit .wsb-full{padding-right:var(--gut)}
.wsfull .fit .ide .tx-opts{padding-left:var(--gut);padding-right:calc(var(--gut) - 12px)}
.wsfull .fit .ide .tx-p:first-child .tx-h{padding-left:var(--gut)}
.wsfull .fit .ide .tx-p:last-child .tx-h{padding-right:calc(var(--gut) - 12px)}
.wsfull .fit .ide .tx-p:first-child .ed-g{min-width:calc(var(--gut) + 36px)}
.wsfull .fit .ide .tx-sb,.wsfull .fit .cs .cs-bar{padding-left:var(--gut);padding-right:var(--gut)}
.fw-a,.fw-b{display:inline-flex;align-items:center;gap:8px}
.fw-b,.wsfull .fw-a{display:none}
.wsfull .fw-b{display:inline-flex}
/* the window's bar: tabs (scrolling sideways on a phone), "more tools", full screen */
.fit .wsb{flex:none;display:flex;align-items:stretch;min-height:46px;background:#F7F7F9;box-shadow:inset 0 -1px 0 var(--fl-line)}
.fit .wsb-tabs{flex:1;min-width:0;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.fit .wsb-tabs::-webkit-scrollbar{display:none}
/* more tabs beyond an edge: that edge fades (core.js marks it) */
.fit .wsb-tabs.ov-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.fit .wsb-tabs.ov-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.fit .wsb-tabs.ov-l.ov-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.fit .wsb-tabs a{flex:none;display:flex;align-items:center;padding:0 18px;font:500 13.5px/1 var(--sans);color:var(--ink2);white-space:nowrap;box-shadow:inset -1px 0 0 var(--fl-line);transition:background .12s,color .12s}
.fit .wsb-tabs a:hover{background:var(--sf);color:var(--ink)}
.fit .wsb-tabs a[aria-current]{background:var(--sf);color:var(--ink);font-weight:600;box-shadow:inset -1px 0 0 var(--fl-line),inset 0 2px 0 var(--ink)}
.fit .wsb-name{flex:1;display:flex;align-items:center;padding:0 18px;font:600 13.5px/1 var(--sans);color:var(--ink)}
.fit .wsb-more{position:relative;flex:none}
.fit .wsb-more>summary{display:flex;align-items:center;gap:6px;height:100%;padding:0 16px;list-style:none;cursor:pointer;font:500 13.5px/1 var(--sans);color:var(--ink2);white-space:nowrap;box-shadow:inset 1px 0 0 var(--fl-line)}
.fit .wsb-more>summary::-webkit-details-marker{display:none}
.fit .wsb-more>summary>svg{width:14px;height:14px;transition:transform .15s}
.fit .wsb-more>summary:hover,.fit .wsb-more[open]>summary{background:var(--sf);color:var(--ink)}
.fit .wsb-more[open]>summary>svg{transform:rotate(180deg)}
.fit .wsb-mi{display:none}
/* the category's other tools, in their groups: two columns under their names */
.fit .wsb-pop{position:absolute;right:0;top:100%;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;
  width:min(540px,calc(100vw - 24px));max-height:min(70vh,560px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 0;background:var(--sf);box-shadow:0 0 0 1px var(--fl-line2),0 16px 32px -16px rgba(var(--shd),.3)}
.fit .wsb-g{display:flex;flex-direction:column;min-width:0;padding:4px 0 10px}
.fit .wsb-g>b{padding:10px 18px 6px;font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;color:var(--ink3);text-transform:uppercase}
.fit .wsb-pop a{display:block;overflow:hidden;padding:8px 18px;font-size:13.5px;line-height:1.35;color:var(--ink2);white-space:nowrap;text-overflow:ellipsis}
.fit .wsb-pop a:hover{background:var(--fl-hover);color:var(--ink)}
.fit .wsb-full{position:relative;flex:none;display:flex;align-items:center;padding:0 16px;font:500 13px/1 var(--sans);color:var(--ink);box-shadow:inset 1px 0 0 var(--fl-line);transition:background .12s}
.fit .wsb-full:hover{background:var(--sf)}
.fit .wsb-full svg{width:15px;height:15px}
/* full, and the visitor tries to scroll back up: the exit button breathes (a warm glow, three times) with a word under
   it; once, softly, when the workspace has just filled the window */
@keyframes fwbreath{0%,100%{box-shadow:inset 0 0 0 1px rgba(245,165,36,.25),0 0 0 0 rgba(245,165,36,0)}
  50%{box-shadow:inset 0 0 0 1px rgba(217,142,18,1),0 0 0 6px rgba(245,165,36,.3),0 0 26px 8px rgba(245,165,36,.5)}}
.fit [data-full].fw-pulse{background:rgba(255,209,102,.24);color:var(--cocoa);animation:fwbreath 1.1s ease-in-out 3}
.fit [data-full].fw-pulse1{animation:fwbreath 1.2s ease-in-out 1}
.fit .fw-tip{position:absolute;right:8px;top:calc(100% + 10px);z-index:45;padding:8px 12px;background:var(--solid);color:var(--on-solid);font:500 12.5px/1.3 var(--sans);white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.fit .fw-tip::before{content:"";position:absolute;right:20px;top:-5px;width:10px;height:10px;background:var(--solid);transform:rotate(45deg)}
.fit [data-full].fw-pulse .fw-tip{opacity:1;transform:none}

/* text and code tools (app-text.js transformTool) */
.fit .app.txapp{padding:0}
.fit .txw{flex:1;min-height:0;gap:0}
.fit .txw .tx{flex:1;min-height:0;gap:0;margin:0;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.fit .txw .tx-p{min-height:0;border-radius:0;background:var(--sf);box-shadow:none}
.fit .txw .tx-p+.tx-p{border-left:1px solid var(--fl-line)}
.fit .ide{--h-tag:#2E2A78;--h-pun:#8C88A7;--h-attr:#9A4F0C;--h-str:#0E7A4E;--h-com:#9D99B2;--h-doc:#9A4F0C;--h-ent:#9A4F0C;--h-kw:#7A2DB8;--h-num:#9A4F0C;--h-fn:#0A6AA1}
.fit .ide .tx-opts{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 24px;max-width:none;min-height:56px;margin:0;padding:10px 12px 10px 16px;border-radius:0;background:var(--sf);box-shadow:inset 0 -1px 0 var(--fl-line)}
.fit .ide .tx-opts .seg{flex-wrap:nowrap;padding:0;border-radius:0;background:none;box-shadow:inset 0 0 0 1px var(--fl-line2)}
.fit .ide .tx-opts .seg button{height:34px;padding:0 16px;border-radius:0;font:500 13px/1 var(--sans);color:var(--ink2);box-shadow:none;transition:background .12s,color .12s}
.fit .ide .tx-opts .seg button+button{box-shadow:inset 1px 0 0 var(--fl-line2)}
.fit .ide .tx-opts .seg button:hover{background:var(--fl-hover);color:var(--ink)}
.fit .ide .tx-opts .seg button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
.fit .ide .tx-opts .chk{gap:10px;font:500 13px/1.3 var(--sans);color:var(--ink)}
.fit .ide .chk input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.fit .ide .ide-sp{flex:1}
.fit .ide .btn-sm{height:34px;gap:8px;padding:0 12px;border-radius:0;font:500 13px/1 var(--sans);background:transparent;color:var(--ink);box-shadow:none;transition:background .12s}
.fit .ide .btn-sm:hover{background:var(--fl-hover)}
.fit .ide .btn-sm svg{width:15px;height:15px}
.fit .ide .btn-sm.btn-dark{padding:0 16px;background:var(--solid);color:var(--on-solid)}
.fit .ide .btn-sm.btn-dark:hover{background:#2A2560}
.fit .ide .tx-h{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:0 8px 0 16px;background:var(--sf);box-shadow:inset 0 -1px 0 var(--fl-line);font:600 13px/1 var(--sans);color:var(--ink)}
.fit .ide .tx-h>span:first-child{display:inline-flex;align-items:center;gap:8px}
.fit .ide .tab-i{display:grid;place-items:center;color:var(--ink3)}
.fit .ide .tx-hb{align-items:center;gap:2px}
/* the code: coloured copy under a see-through text box, line numbers beside (no soft wrap) */
.fit .ide .ed{flex:1;min-height:0;display:flex;overflow:hidden;background:var(--sf)}
.fit .ide .ed-g{flex:none;min-width:52px;overflow:hidden;padding:16px 14px 16px 12px;background:var(--sf);box-shadow:inset -1px 0 0 var(--fl-line);font:12.5px/22px var(--mono);color:#ADAABD;text-align:right;-webkit-user-select:none;user-select:none}
.fit .ide .ed-g>div{white-space:pre;will-change:transform}
.fit .ide .ed-c{position:relative;flex:1;min-width:0;overflow:hidden}
.fit .ide .ed-hl,.fit .ide .ed-c textarea{position:absolute;inset:0;margin:0;padding:16px 20px;border:0;border-radius:0;font:13.5px/22px var(--mono)!important;letter-spacing:0;tab-size:4;-moz-tab-size:4;white-space:pre;overflow-wrap:normal;word-break:normal;text-align:left}
.fit .ide .ed-hl{overflow:hidden;color:#1E1B3C;background:transparent;pointer-events:none}
.fit .ide .ed-hl code{display:block;font:inherit;white-space:inherit;will-change:transform}
.fit .ide .ed-c textarea{width:100%;height:100%;min-height:0;overflow:auto;resize:none;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--ink);scrollbar-width:thin;scrollbar-color:rgba(var(--lnc),.22) transparent}
.fit .ide .ed-c textarea::selection{background:rgba(46,42,120,.16);-webkit-text-fill-color:transparent}
.fit .ide .ed-c textarea::placeholder{color:transparent;-webkit-text-fill-color:transparent}
.fit .ide .ed-c textarea.drag{background:rgba(46,42,120,.04);box-shadow:inset 0 0 0 1px var(--ink)}
.fit .ide .ed-c.plain .ed-hl{display:none}
.fit .ide .ed-c.plain textarea,.fit .ide .ed-c.plain textarea::selection{color:#1E1B3C;-webkit-text-fill-color:#1E1B3C}
.h-tag{color:var(--h-tag)}.h-pun{color:var(--h-pun)}.h-attr{color:var(--h-attr)}.h-str{color:var(--h-str)}.h-com{color:var(--h-com);font-style:italic}
.h-doc{color:var(--h-doc)}.h-ent{color:var(--h-ent)}.h-kw{color:var(--h-kw)}.h-num{color:var(--h-num)}.h-fn{color:var(--h-fn)}
/* before anything is typed: what to do (input), where the result will show (result) */
.fit .ide .ed-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;pointer-events:none}
.fit .ide .ed-empty[hidden]{display:none}
.fit .ide .ee-i{display:grid;place-items:center;width:48px;height:48px;margin-bottom:8px;box-shadow:inset 0 0 0 1px var(--fl-line2);color:var(--ink2)}
.fit .ide .ed-empty b{font:600 16px/1.35 var(--sans);color:var(--ink)}
.fit .ide .ed-empty p{max-width:340px;font-size:13px;line-height:1.6;color:var(--ink3)}
.fit .ide .ee-act{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;pointer-events:auto}
.fit .ide .ee-act .btn-sm{box-shadow:inset 0 0 0 1px var(--fl-line2)}
.fit .ide .ee-lines{display:grid;gap:10px;width:min(240px,62%);margin-bottom:12px}
.fit .ide .ee-lines i{display:block;height:8px;background:#F1F0F4}
.fit .ide .ee-lines i:nth-child(1){width:46%}
.fit .ide .ee-lines i:nth-child(2){width:72%;margin-left:12%}
.fit .ide .ee-lines i:nth-child(3){width:56%;margin-left:24%}
.fit .ide .ee-lines i:nth-child(4){width:64%;margin-left:12%}
.fit .ide .ee-lines i:nth-child(5){width:34%}
/* the status line: done or the error, the sizes, the language */
.fit .ide .tx-sb{flex:none;display:flex;align-items:center;gap:10px;min-height:32px;padding:0 16px;background:var(--sf);box-shadow:inset 0 1px 0 var(--fl-line);color:var(--ink3);font:500 12px/1 var(--sans);white-space:nowrap;overflow:hidden}
.fit .ide .sb-dot{flex:none;width:7px;height:7px;background:#C8C6D3}
.fit .ide .sb-dot.ok{background:#16A34A}
.fit .ide .sb-dot.err{background:#DC2626}
.fit .ide .sb-dot.warn{background:#D97706}
.fit .ide #sbst{color:var(--ink2)}
.fit .ide .tx-sb #info{min-width:0;overflow:hidden;text-overflow:ellipsis;font:inherit;color:var(--ink3)}
.fit .ide .tx-sb #info.err{color:#B42318;font-weight:600}
.fit .ide .tx-sb #info.warn{color:#B36F00}
.fit .ide #sbsize{font-variant-numeric:tabular-nums}
.fit .ide .sb-lang{font-weight:600;color:var(--ink2)}
/* the code workspace (app-text.js codeSuite): every working button in one bar under the code */
.fit .cs .cs-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 12px 10px 16px;background:var(--sf);box-shadow:inset 0 1px 0 var(--fl-line)}
.fit .cs .cs-l,.fit .cs .cs-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fit .cs .cs-ind{display:flex;align-items:center;gap:8px;font:500 13px/1 var(--sans);color:var(--ink2)}
.fit .cs-sel{height:34px;padding:0 32px 0 12px;border:0;border-radius:0;background:var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2314112E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center/12px;box-shadow:inset 0 0 0 1px var(--fl-line2);font:500 13px/1 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer}
.fit .cs-sel:hover{box-shadow:inset 0 0 0 1px rgba(var(--lnc),.3)}
.fit .cs-sel:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--ink)}
.fit .cs .cs-act{padding:0 16px;font-weight:600;box-shadow:inset 0 0 0 1px var(--fl-line2)}
.fit .cs .cs-act:hover{box-shadow:inset 0 0 0 1px rgba(var(--lnc),.3)}
.fit .cs .cs-act[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
.fit .cs .cs-act[aria-pressed="true"]:hover{background:#2A2560}
.fit .cs .cs-sep{width:1px;height:22px;margin:0 4px;background:var(--fl-line2)}
.fit .cs .cs-opt{position:relative}
.fit .cs .cs-opt>.btn-sm{box-shadow:inset 0 0 0 1px var(--fl-line2)}
.fit .cs .cs-opt>.btn-sm[aria-expanded="true"]{background:var(--fl-hover)}
.fit .cs .cs-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;display:grid;gap:16px;min-width:320px;padding:16px 18px;background:var(--sf);box-shadow:0 0 0 1px var(--fl-line2),0 -18px 36px -18px rgba(var(--shd),.3)}
.fit .cs .cs-og{display:grid;gap:10px}
.fit .cs .cs-og>b{font:700 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.fit .cs .cs-o{display:flex;align-items:center;justify-content:space-between;gap:14px;font:500 13px/1.35 var(--sans);color:var(--ink)}
.fit .cs .cs-o.chk{justify-content:flex-start;gap:10px}
.fit .cs .cs-o .cs-sel{min-width:150px}
/* the result as code or another view (HTML: a preview in a sealed frame; JSON: a tree) */
.fit .cs .cs-views{display:inline-flex;box-shadow:inset 0 0 0 1px var(--fl-line2)}
.fit .cs .cs-views button{height:28px;padding:0 12px;font:500 12.5px/1 var(--sans);color:var(--ink2)}
.fit .cs .cs-views button+button{box-shadow:inset 1px 0 0 var(--fl-line2)}
.fit .cs .cs-views button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
.fit .cs .cs-prev{flex:1;width:100%;min-height:0;border:0;background:#fff}
.fit .cs .jt{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:0}
.fit .cs .jt-b{flex:1;min-height:0;max-height:none;overflow:auto}
/* notes and the check's findings, over the bar */
.fit .cs .cs-note{flex:none;padding:9px 16px;background:#FBFAF6;box-shadow:inset 0 1px 0 var(--fl-line);font:500 13px/1.5 var(--sans);color:var(--ink2)}
.fit .cs .cs-note.ok{background:#F2FAF5;color:#15603A}
.fit .cs .cs-note.warn{background:#FFF8E6;color:#8A5300}
.fit .cs .cs-note.err{background:#FDECEC;color:#B42318}
.fit .cs .cs-found{flex:none;max-height:168px;overflow:auto;background:#FFFCF3;box-shadow:inset 0 1px 0 var(--fl-line)}
.fit .cs .cs-found ol{margin:0;padding:4px 0;list-style:none}
.fit .cs .cs-found button{display:flex;gap:14px;width:100%;padding:7px 16px;text-align:left;font:500 13px/1.45 var(--sans);color:var(--ink)}
.fit .cs .cs-found button:hover{background:rgba(245,165,36,.1)}
.fit .cs .cs-found b{flex:none;min-width:64px;font-weight:600;color:#8A5300;font-variant-numeric:tabular-nums}
.fit .cs .sb-found{padding:0 2px;font:600 12px/1 var(--sans);color:#15803D;cursor:default}
.fit .cs .sb-found.bad{color:#B45309;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* ---- 2026-09-30: every tool in its workspace window. What each kind of tool works on fills the window (in full screen
   the whole browser window under the header) and scrolls inside it; panels sit at the side, the start button stays in
   sight. Square, hairlines, no cards in cards; the primary action solid ink as in the code workspace. ---- */
.fit .wsf>.app{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.fit .wsf .btn{border-radius:0}
.fit .wsf .btn-honey{background:var(--solid);color:var(--on-solid);box-shadow:none}
.fit .wsf .btn-honey:hover{background:#2A2560}
.fit .wsf .btn-ghost{box-shadow:inset 0 0 0 1px var(--fl-line2)}
.fit .wsf .inp,.fit .wsf select.inp{border-radius:0}
.fit .wsf .seg{border-radius:0}
.fit .wsf .seg button{border-radius:0}
.fit .wsf .ws-note{border-radius:0}
/* the settings in a window: square like the window (option cards, the advanced part, number boxes, colour wells) */
.fit .wsf .oc button,.fit .wsf .adv,.fit .wsf .rng output,.fit .wsf .clr input[type=color],.fit .wsf .ofile .x,.fit .wsf .pill{border-radius:0}
.fit .wsf .oc button[aria-pressed="true"]{background:var(--sf);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* files, before any: the whole window is the place to drop them */
/* a text tool that also takes a file (TXT / Markdown to PDF...): its file tab is a workspace of its own, filling the window
   under the two tabs like any file tool's - the drop area, the files, the result */
.fit .app>[id="tinFile"]:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
.fit :is(.app,[id="tinFile"])>.dropz{position:relative;flex:1;min-height:0;margin:0;padding:40px 24px;border:0;border-radius:0;background:var(--sf)}
.fit :is(.app,[id="tinFile"])>.dropz::before{content:"";position:absolute;inset:16px;border:1.5px dashed rgba(var(--lnc),.16);pointer-events:none;transition:border-color .15s,background .15s}
.fit :is(.app,[id="tinFile"])>.dropz.over::before{border-color:var(--amber);background:rgba(255,209,102,.07)}
.fit :is(.app,[id="tinFile"])>.dropz svg.b{width:92px;filter:none}
.fit :is(.app,[id="tinFile"])>.dropz .dz-pair{display:flex;justify-content:center;margin-bottom:6px}
.fit :is(.app,[id="tinFile"])>.dropz .dz-pair .pair{gap:14px}
.fit :is(.app,[id="tinFile"])>.dropz .dz-pair .ft{--w:62px}
.fit :is(.app,[id="tinFile"])>.dropz .dz-pair .pa{width:26px;height:26px}
.fit :is(.app,[id="tinFile"])>.dropz .btn-lg{height:52px;padding:0 30px}
/* files added: the files (a light stage) and the settings panel with the start button at its foot */
.fit :is(.app,[id="tinFile"])>.ws{flex:1;min-height:0;height:auto;background:var(--sf);grid-template-columns:minmax(0,1fr) 360px}
.fit .ws-main{padding:16px 20px 24px;background:#FAFAFB}
.fit .ws-bar{margin-bottom:14px}
.fit .ws-grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(156px,1fr))}
.fit .ws .wf{border-radius:0;box-shadow:0 0 0 1px var(--fl-line)}
.fit .ws .wf:hover{box-shadow:0 0 0 1px var(--fl-line2)}
.fit .ws .wf-th,.fit .ws .wf-th img{border-radius:0}
.fit .ws .wf-add{min-height:200px;border-radius:0;border:1.5px dashed rgba(var(--lnc),.16)}
.fit .ws-side{box-shadow:inset 1px 0 0 var(--fl-line)}
.fit .ws-head{padding:14px 20px 12px;box-shadow:inset 0 -1px 0 var(--fl-line)}
.fit .ws-head h2{font-size:17px}
.fit .ws-body{padding:16px 20px}
.fit .ws-foot{padding:12px 20px 14px;box-shadow:inset 0 1px 0 var(--fl-line)}
.fit .ws-foot .btn{width:100%}
.fit .ws-run{background:rgba(255,255,255,.94)}
/* the result: what it looks like fills the left, the download and what next a panel on the right; with nothing to show,
   one column in the middle */
.res-a,.res-view,.res-b{display:contents}
.fit :is(.app,[id="tinFile"])>.res.in{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;margin:0;padding:32px 24px 36px;border-radius:0;background:var(--sf);
  overflow:auto;animation:none}
.fit .res.in>.res-a,.fit .res.in>.res-b{display:block;width:min(560px,100%)}
.fit .res.in.has-view{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr);align-items:stretch;padding:0;overflow:hidden}
.fit .res.has-view>.res-view{display:block;grid-column:1;grid-row:1 / 3;min-height:0;overflow:auto;padding:20px;background:#FAFAFB}
.fit .res.has-view>.res-a{grid-column:2;grid-row:1;width:auto;padding:22px 22px 14px;box-shadow:inset 1px 0 0 var(--fl-line);text-align:left}
.fit .res.has-view>.res-b{grid-column:2;grid-row:2;width:auto;min-height:0;overflow:auto;padding:0 22px 22px;box-shadow:inset 1px 0 0 var(--fl-line);text-align:left}
.fit .res .okc{width:52px;height:52px}
.fit .res .okc svg{width:24px;height:24px}
.fit .res.has-view .okc{margin:0}
.fit .res .res-h{margin-top:14px;font-size:26px}
.fit .res.has-view .res-stat,.fit .res.has-view .res-fn,.fit .res.has-view .res-dl,.fit .res.has-view .res-acts{justify-content:flex-start;margin-left:0;margin-right:0}
.fit .res .res-dl{margin-top:22px}
.fit .res.has-view .res-dl .btn-xl{flex:none;height:56px;padding:0 20px;font-size:17px}
.fit .res .res-fn,.fit .res .res-stat{border-radius:0}
.fit .res-view .res-cmp,.fit .res-view .res-prev,.fit .res-view .res-pages,.fit .res-view .res-files,.fit .res-view .res-text{max-width:none;margin:0;border-radius:0}
.fit .res-view .res-cmp{padding:0;background:none;box-shadow:none}
.fit .res-view .res-prev img{max-height:calc(100% - 8px);border-radius:0}
.fit .res-view .res-text{display:flex;flex-direction:column;height:100%;box-shadow:0 0 0 1px var(--fl-line)}
.fit .res-view .res-text textarea{flex:1;min-height:0;border-radius:0}
.fit .res .res-next{max-width:none;margin:22px 0 0}
.fit .res.has-view .res-next .grid{grid-template-columns:minmax(0,1fr);gap:8px}
.fit .res .res-next .tc{border-radius:0}
/* ---- 2026-09-30 while it works: the percentage (a batch: which of how many) in a strip over the files, each card its
   own state; done: said in the window with the ways on; the results as a list to tick; what next pulled up from under
   the look; this visit's results in the bar ---- */
.ws-run .wr-pct{display:block;margin:10px 0 2px;font:800 34px/1 var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.fit .ws-run{position:sticky;top:-16px;inset:auto;z-index:4;display:block;margin:-16px -20px 14px;padding:12px 20px 0;background:var(--sf);box-shadow:inset 0 -1px 0 var(--fl-line);animation:none}
.fit .lv-on>.ws-run{top:0;margin:0}
.fit .ws-run>div{position:static;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:4px 14px;width:auto;text-align:left}
.fit .ws-run .spin{margin:0}
.fit .ws-run .wr-t h3{font:700 14.5px/1.3 var(--sans)}
.fit .ws-run .wr-t p{margin:2px 0 0;font-size:12.5px;color:var(--ink3)}
.fit .ws-run .wr-pct{margin:0;font-size:26px}
.fit .ws-run .bar{grid-column:1 / -1;order:9;height:3px;margin:8px -20px 0;border-radius:0}
.fit .ws-run .bar i{border-radius:0}
.wf-st{position:absolute;top:16px;right:16px;z-index:3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sf);box-shadow:var(--sh1);color:var(--ink)}
.fit .wf-st{top:10px;right:10px;border-radius:0}
.wf-st .spin{width:14px;height:14px;margin:0;border-width:2px}
.wf-st.ok{background:#16A34A;color:#fff}
.wf-st.bad{background:#E5484D;color:#fff;font:800 14px/1 var(--sans)}
.wf.st-wait{opacity:.55}
.fit .ws .wf.st-run{box-shadow:0 0 0 2px var(--amber)}
.fit .ws .wf.st-done{box-shadow:0 0 0 1px rgba(22,163,74,.55)}
/* while the files are processed, a card's corner is its state (taking one out isn't possible then) */
.wf[class*=" st-"] .wf-act{display:none}
/* the result in a window: the panel in order — what came out, its download, the other ways, then what to do next */
.fit :is(.app,[id="tinFile"])>.res.in{position:relative}
.fit .res.has-view>.res-view{position:relative;overflow:hidden;padding:0}
.fit .res.has-view .rv-in{height:100%;overflow:auto;padding:20px 20px 66px}
.fit .res.has-view>.res-a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;align-content:start}
.fit .res.has-view>.res-a>*:not(.okc):not(.res-h){grid-column:1 / -1}
.fit .res.has-view .okc{width:40px;height:40px}
.fit .res.has-view .okc svg{width:20px;height:20px}
.fit .res.has-view .res-h{margin:0;font-size:21px;line-height:1.25}
.fit .res.has-view .res-stat{margin-top:12px}
.fit .res.has-view .res-fn{margin-top:14px}
.fit .res.has-view .res-dl{flex-direction:column;align-items:stretch;gap:8px;margin-top:16px}
.fit .res.has-view .res-dl>.btn{width:100%}
.res-sub button span{display:none}
.fit .res-sub{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fit .res-sub button{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:40px;border-radius:0;box-shadow:inset 0 0 0 1px var(--fl-line2);font:600 13px/1 var(--sans);color:var(--ink2)}
.fit .res-sub button span{display:inline}
.fit .res-sub button svg{width:16px;height:16px}
.fit .res.has-view .res-acts{justify-content:flex-start;margin-top:10px}
.fit .res.has-view .res-acts .btn{flex:1 1 auto}
.fit .res.has-view .res-note{margin-top:14px;text-align:left}
.fit .res.has-view .res-next h3{margin-bottom:10px;font-size:15px}
.fit .res.has-view .res-next .tc{padding:10px 12px;box-shadow:inset 0 0 0 1px var(--fl-line)}
.fit .res.has-view .res-next .tc small{display:none}
.rf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:6px 4px 12px;text-align:left}
.rf-cnt{font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.rf-bar .sp{flex:1}
.rf-ck{display:grid;place-items:center;flex:none;padding:0 4px;cursor:pointer}
.rf-ck input,.rf-bar input,.bag input{width:17px;height:17px;margin:0;accent-color:var(--ink)}
.fit .res-view .rf{border-radius:0}
/* what to do next, under the look: a handle to pull it up */
.res-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:80%;display:flex;flex-direction:column;background:var(--sf);
  box-shadow:0 -1px 0 var(--fl-line2),0 -20px 40px -26px rgba(var(--shd),.45);transform:translateY(calc(100% - 48px));transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.res-sheet.open{transform:none}
.rs-h{position:relative;flex:none;display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:6px 18px 0;font:700 14px/1 var(--sans);color:var(--ink);cursor:grab;touch-action:none}
.rs-h i{position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(var(--lnc),.22)}
.rs-h small{font:500 12.5px/1 var(--sans);color:var(--ink3)}
.rs-h svg{margin-left:auto;transform:rotate(180deg);transition:transform .25s}
.res-sheet.open .rs-h svg{transform:none}
.rs-b{flex:1;min-height:0;overflow:auto;padding:6px 18px 18px;text-align:left}
.res-sheet:not(.open) .rs-b{visibility:hidden}
.rs-b .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.rs-b .tc{border-radius:0}
/* done */
.rs-done{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(var(--shd),.3);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .18s ease-out}
.rs-done.out{opacity:0;transition:opacity .18s}
@keyframes rsd-up{from{opacity:.4;transform:translateY(48px)}to{opacity:1;transform:none}}
.rsd-box{width:min(640px,100%);max-height:100%;overflow:auto;padding:24px 24px 20px;background:var(--sf);box-shadow:0 0 0 1px var(--fl-line2),0 30px 70px -30px rgba(var(--shd),.65);text-align:left;animation:drop .2s ease-out}
.rsd-h{display:flex;align-items:center;gap:14px}
.rsd-h .okc{flex:none;width:48px;height:48px;margin:0}
.rsd-h h3{font:800 22px/1.2 var(--disp);letter-spacing:-.01em}
.rsd-h p{margin-top:4px;font-size:14px;color:var(--ink2)}
.rsd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.rsd-acts .btn{flex:1 1 200px;height:50px}
.rsd-box h4{margin:22px 0 10px;font:700 12.5px/1 var(--sans);letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.rsd-box .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.rsd-box .tc{padding:10px 12px;border-radius:0;box-shadow:inset 0 0 0 1px var(--fl-line)}
.rsd-box .tc small{display:none}
/* this visit's results, from the window's bar */
.wsb-bag{position:relative;flex:none;display:flex;align-items:center;gap:7px;padding:0 14px;font:600 13px/1 var(--sans);color:var(--ink);box-shadow:inset 1px 0 0 var(--fl-line)}
.wsb-bag:hover{background:var(--sf)}
.wsb-bag[hidden]{display:none}
.wsb-bag b{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--honey);color:var(--cocoa);font:700 11.5px/20px var(--sans);text-align:center}
.bag{position:absolute;top:46px;right:0;z-index:30;display:flex;flex-direction:column;width:min(440px,100%);max-height:calc(100% - 46px);background:var(--sf);
  box-shadow:0 0 0 1px var(--fl-line2),0 24px 50px -20px rgba(var(--shd),.5);animation:drop .16s ease-out}
.bag-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 8px 10px 18px;box-shadow:inset 0 -1px 0 var(--fl-line)}
.bag-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;box-shadow:inset 0 -1px 0 var(--fl-line)}
.bag-bar .sp{flex:1}
.bag-l{flex:1;min-height:0;overflow:auto}
.bag-i{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;box-shadow:inset 0 -1px 0 var(--fl-line);cursor:pointer}
.bag-i:hover{background:var(--fl-hover)}
.bag-t{flex:1;min-width:0}
.bag-i b{display:block;overflow:hidden;font:600 13.5px/1.3 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.bag-i small{font-size:12px;color:var(--ink3)}
.bag-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;font-size:12px;color:var(--ink3)}
.bag-f button{font:600 12.5px/1 var(--sans);color:#B42318}
/* webmaster checks: the address bar across the top of the window, the report under it */
.fit .app>.webapp{flex:1;min-height:0;max-width:none;margin:0;gap:0}
.fit .webapp>.wf{flex:none;margin:0;padding:12px 16px;border-radius:0;background:#F7F7F9;box-shadow:inset 0 -1px 0 var(--fl-line)}
.fit .webapp>.wf .wf-row{border-radius:0}
.fit .webapp>:not(.wf){margin-left:16px;margin-right:16px}
.fit .webapp>.wr{margin-top:16px;margin-bottom:24px}
.fit .webapp .wf-row{padding:6px 6px 6px 14px;border-radius:0;box-shadow:inset 0 0 0 1px var(--fl-line2)}
.fit .webapp .wf-row:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fit .webapp .wf-in{height:42px;font-size:16px}
.fit .webapp .wf-opts{padding:10px 0 0;border-radius:0;background:none}
.fit .webapp .wf-recent{padding-top:8px}
.fit .webapp .chip-s{border-radius:0}
.fit .webapp>.wr-hello{flex:1}
/* a long report: its sections in a bar kept over it, the checks narrowed to what needs doing (app-web.js toc) */
.wr-toc{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px 14px;margin:0 0 4px;padding:6px 0;background:var(--sf);box-shadow:0 1px 0 var(--hair)}
.wt-l{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.wt-l::-webkit-scrollbar{display:none}
.wr-toc a{flex:none;padding:7px 10px;font:600 12.5px/1 var(--sans);color:var(--ink3);white-space:nowrap}
.wr-toc a:hover{color:var(--ink);background:var(--canvas)}
.wr-toc a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.wr-only{flex:none;display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--sans);color:var(--ink2);white-space:nowrap;cursor:pointer}
.wr-only input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
#wr.only-bad .ck.s-pass,#wr.only-bad .ck.s-info{display:none}
/* the console's welcome under the address bar until the first report (app-web.js hello) */
.wr-hello{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:48px 20px;text-align:center}
.wr-hello .wh-i{display:grid;place-items:center;width:52px;height:52px;box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink2)}
.wr-hello p{max-width:440px;font-size:15px;line-height:1.6;color:var(--ink2)}
.wr-hello .wh-ex{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.wr-hello .wh-ex>span{font-size:13px;color:var(--ink3)}
.webapp:has(>#wr:not([hidden])) .wr-hello{display:none}
/* text tools and browser tools (a text workspace, .txw): the text panes take the window's height, anything else about
   them (counts, a goal, a time zone) in strips over or under them; a generator's form on the left and what it makes on the
   right */
.fit .app:not(.ide)>.txw{flex:1 0 auto;min-height:100%;gap:0}
/* the text boxes fill what the window has left; what comes under them (the options, a comparison, a list of matches)
   keeps its own height — never squeezed to a line (2026-09-30: a text comparison's result was): the window scrolls to it.
   The boxes' least height is the screen's, not the column's (that grew with every result under them) */
.fit .app:not(.ide)>.txw>*{flex-shrink:0}
.fit .app:not(.ide)>.txw>.tx{flex:1 0 auto;min-height:max(300px,46vh);margin:0;gap:0;grid-template-rows:minmax(0,1fr)}
.fit .app:not(.ide)>.txw>.tx>.tx-p{min-height:0;border-radius:0;box-shadow:none}
.fit .app:not(.ide)>.txw>.tx>.tx-p+.tx-p{box-shadow:inset 1px 0 0 var(--fl-line)}
.fit .app:not(.ide)>.txw .tx-h{box-shadow:inset 0 -1px 0 var(--fl-line)}
.fit .app:not(.ide)>.txw .tx-p textarea{flex:1;min-height:0;height:auto}
.fit .app:not(.ide)>.txw>:not(.tx):not(.dv){margin:0;padding:12px 16px;border-radius:0;box-shadow:inset 0 -1px 0 var(--fl-line)}
.fit .app:not(.ide)>.txw>.tx+*{box-shadow:inset 0 1px 0 var(--fl-line),inset 0 -1px 0 var(--fl-line)}
.fit .txw .kw,.fit .txw .wc>div{border-radius:0}
.fit .app:not(.ide)>.txw>.tx-opts{max-width:none;background:#F7F7F9}
/* a one-box tool: what it tells about the text in a panel beside it (app-text.js sidebar) */
.fit .app>.txw.has-side{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr)}
.fit .txw.has-side>.tx{min-height:0}
.fit .txw.has-side>.tx-side{min-height:0;overflow:auto;background:#FAFAFB;box-shadow:inset 1px 0 0 var(--fl-line)}
.fit .txw.has-side>.tx-side>*{margin:0;padding:14px 16px;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--fl-line)}
.fit .txw.has-side .wc{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0}
.fit .txw.has-side .wc>div{padding:12px 14px;background:var(--sf);box-shadow:inset -1px -1px 0 var(--fl-line)}
.fit .txw.has-side .wc-goal{flex-wrap:wrap;gap:8px 10px}
.fit .txw.has-side .wc-goal>label{flex:1 1 100%;writing-mode:horizontal-tb}
.fit .txw.has-side .wc-goal .wc-bar{flex:1 1 100%}
.fit .txw>.dv{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin:0}
.fit .txw>.dv>.dv-f{min-height:0;overflow:auto;padding:16px 20px;box-shadow:inset -1px 0 0 var(--fl-line)}
.fit .txw>.dv>.dv-r{min-height:0;overflow:auto;padding:16px 20px;background:#FAFAFB}
.fit .txw>.dv .tx-p{border-radius:0;box-shadow:0 0 0 1px var(--fl-line)}
/* the translator: the languages across the top, the two texts filling the window */
.fit .app>.trx{flex:1 0 auto;min-height:100%;gap:0}
.fit .trx>.trx-bar{padding:10px 16px;box-shadow:inset 0 -1px 0 var(--fl-line);background:#F7F7F9}
.fit .trx>.trx-quick{padding:8px 16px}
.fit .trx>.trx-panes{flex:1 1 auto;min-height:max(320px,calc(100% - 220px));gap:0}
.fit .trx .trx-pane{min-height:0;border-radius:0;box-shadow:inset 0 1px 0 var(--fl-line)}
.fit .trx .trx-pane+.trx-pane{box-shadow:inset 1px 0 0 var(--fl-line),inset 0 1px 0 var(--fl-line)}
.fit .trx .trx-sel select{border-radius:0}
.fit .trx>.trx-more,.fit .trx>.trx-doc{padding:10px 16px;margin:0}
/* picture tools: the live preview (app-live.js) fills the files' side — the picture as it will come out, zoomable, the
   original a divider's drag or a held button away; the files in a strip under it */
.fit .ws-main.lv-on{display:flex;flex-direction:column;padding:0;overflow:hidden}
.lv-on>.ws-bar{flex:none;margin:0;padding:10px 16px;box-shadow:inset 0 -1px 0 var(--fl-line)}
.lv{flex:1;min-height:0;display:flex;flex-direction:column}
.lv[hidden]{display:none}
.lv-view{position:relative;flex:1;min-height:0;overflow:hidden;background:#ECEEF2;outline:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lv-zoomed .lv-view{touch-action:none}
.lv-view:active{cursor:grabbing}
.lv-pan{position:absolute;left:50%;top:50%;transform-origin:50% 50%}
.lv-pan canvas{position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:0 1px 4px rgba(20,17,46,.18)}
.lv-o{display:none}
.lv-split .lv-o{display:block;box-shadow:none}
.lv-orig .lv-o{display:block;clip-path:none!important}
.lv-orig .lv-c{visibility:hidden}
.lv-alpha .lv-c{background:repeating-conic-gradient(#E4E6EB 0% 25%,#fff 0% 50%) 50%/16px 16px}
.lv-div{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(20,17,46,.2);pointer-events:none}
.lv-div i{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(20,17,46,.3)}
.lv-div i::before,.lv-div i::after{content:"";position:absolute;top:10px;border:5px solid transparent}
.lv-div i::before{left:3px;border-right-color:var(--ink)}
.lv-div i::after{right:3px;border-left-color:var(--ink)}
.lv-l,.lv-r{position:absolute;top:12px;padding:3px 8px;background:rgba(20,17,46,.62);color:#fff;font:600 11.5px/1.4 var(--sans);white-space:nowrap}
.lv-l{right:12px}
.lv-r{left:12px}
.lv-msg{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:14px;color:var(--ink3)}
.lv-bar{flex:none;display:flex;align-items:center;gap:2px;min-height:42px;padding:0 8px 0 16px;background:var(--sf);box-shadow:inset 0 1px 0 var(--fl-line);
  font:500 12.5px/1 var(--sans);color:var(--ink2)}
.lv-dim{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lv-dim svg{color:var(--ink3)}
.lv-dim b{color:var(--ink);font-weight:600}
.lv-kb{display:inline-flex;align-items:center;gap:6px;margin-left:14px;padding-left:14px;box-shadow:inset 1px 0 0 var(--fl-line2)}
.lv-kb em{font-style:normal;font-weight:700;color:var(--ok)}
.lv-note{margin-left:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#B36F00}
.lv-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:30px;padding:0 8px;color:var(--ink2);transition:background .12s}
.lv-b:hover{background:var(--fl-hover);color:var(--ink)}
.lv-zv{min-width:54px;font-variant-numeric:tabular-nums}
.lv-hold{margin-left:6px;box-shadow:inset 0 0 0 1px var(--fl-line2)}
.lv-split .lv-hold{display:none}
.lv-on>.ws-grid{flex:none;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:108px;gap:10px;max-height:168px;overflow-x:auto;overflow-y:hidden;
  padding:10px 16px;box-shadow:inset 0 1px 0 var(--fl-line)}
.lv-on .wf{cursor:pointer}
.lv-on .wf.lv-cur{box-shadow:0 0 0 2px var(--ink)}
.lv-on .wf-add{min-height:0}
/* the strip's small cards: the number, the remove button and the state each in its own corner, sized to the card */
.lv-on .wf{padding:6px}
.lv-on .wf-idx,.lv-on .wf-tag{top:10px;left:10px;min-width:20px;height:20px;padding:0 6px;font-size:11px;line-height:20px}
.lv-on .wf-act{top:10px;right:10px}
.lv-on .wf-act button{width:24px;height:24px}
.lv-on .wf-act svg{width:13px;height:13px}
.fit .lv-on .wf-st{top:10px;right:10px;width:22px;height:22px}
.lv-on .wf-n{padding:6px 2px 0}
/* ---- 2026-09-30 a look inside the files added (app-peek.js): a document's own first lines as a small page on its card,
   the picture a touch bigger under the pointer, a magnifier (always there on touch screens) opening the viewer ---- */
.wf-th{cursor:zoom-in}
.lv-on .wf-th{cursor:pointer}
.ws .wf:hover .wf-th img,.ws .wf:hover .th-peek{transform:scale(1.05)}
.th-peek{position:absolute;inset:0;display:grid;place-items:center;padding:10% 9% 14%;transition:transform .25s}
.th-peek>*{width:100%;height:100%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(20,17,46,.08),0 2px 6px -2px rgba(20,17,46,.2);color:#1E1B3C}
.wf-peek{position:absolute;left:8px;bottom:8px;z-index:2;display:grid;place-items:center;width:30px;height:30px;background:rgba(20,17,46,.72);color:#fff;
  opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.wf:hover .wf-peek,.wf-peek:focus-visible{opacity:1;transform:none}
@media (hover:none){.wf-peek{opacity:1;transform:none}}
.lv-on .wf-peek{display:none}
/* the small pages: a document, a sheet, a slide, text (on white: they are paper in the dark theme too) */
.pk-page,.pk-sheet,.pk-slide,.pk-text{font:5.4px/1.45 var(--sans);text-align:left;color:#1E1B3C;word-break:break-word}
.pk-page{padding:9% 8%}
.pk-page h3{margin:0 0 .5em;font:800 1.7em/1.2 var(--sans);color:#14112E}
.pk-page h4{margin:.6em 0 .3em;font:700 1.25em/1.25 var(--sans);color:#14112E}
.pk-page p{margin:0 0 .35em}
.pk-page table,.pk-sheet table{width:100%;border-collapse:collapse;margin:.4em 0}
.pk-page td,.pk-sheet td,.pk-sheet th{padding:.25em .4em;border:1px solid #D9D7E4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.pk-sheet{padding:6%}
.pk-sheet tr:first-child td{background:#EEF2F7;font-weight:700}
.pk-slide{display:flex;flex-direction:column;justify-content:center;gap:.5em;aspect-ratio:16/9;height:auto!important;align-self:center;padding:8%;background:linear-gradient(160deg,#fff,#F3F2FA)!important}
.pk-slide b{font:800 1.9em/1.2 var(--sans);color:#14112E}
.pk-slide p{margin:0;padding-left:1em;text-indent:-.8em}
.pk-slide p::before{content:"• "}
.pk-text{padding:8% 7%;white-space:pre-wrap}
.pk-text p{margin:0;min-height:1.45em}
.pk-code{font-family:var(--mono,ui-monospace,Consolas,monospace);background:#FBFBFD!important}
/* the viewer: dark around the file, the name over it, one file after another */
.pk-lb{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;background:rgba(10,8,28,.94);color:#fff;animation:fade .15s ease-out}
.pk-top{flex:none;display:flex;align-items:center;gap:14px;height:56px;padding:0 10px 0 20px}
.pk-name{min-width:0;overflow:hidden;font:600 15px/1.2 var(--sans);white-space:nowrap;text-overflow:ellipsis}
.pk-n{flex:1;font-size:13px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.pk-top .ib{color:#fff}
.pk-top .ib:hover{background:rgba(255,255,255,.12)}
.pk-body{flex:1;min-height:0;display:flex;align-items:safe center;justify-content:safe center;overflow:auto;padding:12px 64px 16px}
.pk-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;background:repeating-conic-gradient(#2A2650 0% 25%,#1E1B42 0% 50%) 50%/18px 18px}
.pk-zoom .pk-body{display:block}
.pk-zoom .pk-img{max-width:none;max-height:none;cursor:zoom-out}
.pk-big{width:min(820px,100%);height:auto!important;margin:auto;padding:48px 56px;background:#fff;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);font-size:15px;line-height:1.7;color:#1E1B3C}
.pk-sheet.pk-big{width:auto;min-width:min(820px,100%);padding:20px;font-size:13.5px}
.pk-sheet.pk-big th{width:32px;background:#F3F4F7;color:#77738E;font-weight:600;text-align:center}
.pk-slide.pk-big{width:min(900px,100%);padding:6% 7%;font-size:17px}
.pk-text.pk-big{font-size:14px;line-height:1.6}
.pk-more{align-self:center;margin:14px 0 4px;font-size:13px;color:rgba(255,255,255,.62);text-align:center}
.pk-body:has(.pk-big){flex-direction:column;justify-content:flex-start}
.pk-media{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(900px,100%)}
.pk-media video{width:100%;max-height:calc(100vh - 160px);background:#000}
.pk-media audio{width:min(520px,100%)}
.pk-wave{display:grid;place-items:center;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--honey)}
.pk-wait,.pk-none{display:grid;place-items:center;gap:12px;color:rgba(255,255,255,.7)}
.pk-nav{position:absolute;top:50%;display:grid;place-items:center;width:48px;height:64px;margin-top:-32px;color:#fff;background:rgba(255,255,255,.06);transition:background .15s}
.pk-nav:hover{background:rgba(255,255,255,.16)}
.pk-nav[hidden]{display:none}
.pk-prev{left:8px}
.pk-next{right:8px}
.pk-foot{flex:none;padding:10px 20px 16px;font-size:12.5px;color:rgba(255,255,255,.6);text-align:center}
@media (max-width:719px){
  .pk-body{padding:8px 8px 12px}
  .pk-big{padding:24px 20px;font-size:14px}
  .pk-nav{top:auto;bottom:10px;margin-top:0;width:44px;height:44px}
}
/* generators: settings on the left, the live preview filling the rest */
.fit .app>.gen{flex:1;min-height:0;gap:0;grid-template-columns:340px minmax(0,1fr)}
.fit .gen>.gen-o{min-height:0;overflow:auto;border-radius:0;background:#FAFAFB;box-shadow:inset -1px 0 0 var(--fl-line)}
.fit .gen>.gen-r{min-height:0;overflow:auto;border-radius:0;box-shadow:none}
/* side by side down to a small tablet; one over the other, each half the height, below that */
@media (max-width:759px){
  /* every kind on a phone: one column that scrolls in the window; the start button kept at the window's foot */
  /* as tall as what it holds (not the window's height with the rest spilling out): what stays at the top while the rest
     scrolls needs the whole of it to stay within */
  .fit :is(.app,[id="tinFile"])>.ws{display:block;flex:1 0 auto;height:auto}
  .fit .app>[id="tinFile"]:not([hidden]){flex:1 0 auto}
  .fit .ws-main{padding:12px 12px 16px}
  .fit .ws-side{box-shadow:inset 0 1px 0 var(--fl-line)}
  /* the settings start at once: the tool's name is already the window's open tab */
  .fit .ws-side>.ws-head{display:none}
  .fit .ws-foot{position:sticky;bottom:0;z-index:2;background:var(--sf)}
  /* the foot held over the window: the button and its two small lines side by side, a slim strip */
  .fit .ws-foot{display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .fit .ws-foot .btn-lg{height:50px}
  .fit .ws-foot small,.fit .ws-foot small[data-quota]{margin-top:7px;font-size:11.5px}
  /* a picture being worked on stays in sight while its settings scroll under it — every change seen as it is made, the
     way a phone photo app works: the live preview (its files' strip under it), the photo editor, crop, blur, text on a
     picture */
  /* about half the window (the screen under the header and the window's bar): a short phone keeps room for the settings */
  .fit .ws-main.lv-on{position:sticky;top:0;z-index:3;height:min(54vh,480px);height:clamp(220px,calc((100dvh - var(--hdh,64px) - 44px) * .54),480px);
    box-shadow:0 1px 0 var(--fl-line),0 12px 22px -20px rgba(var(--shd),.55)}
  .lv-on>.ws-bar{padding:8px 12px;gap:8px}
  .lv-on>.ws-bar [data-sort],.lv-on>.ws-bar .ws-hint{display:none}
  .lv-on>.ws-grid{grid-auto-columns:66px;max-height:92px;padding:6px 12px}
  .lv-on .wf-n{display:none}
  .fit .pgw>.ws-main:has(>.crop-stage){position:sticky;top:0;z-index:3;min-height:0;padding:8px 12px 10px;box-shadow:0 1px 0 var(--fl-line),0 12px 22px -20px rgba(var(--shd),.55)}
  .fit .pgw>.ws-main>.ws-bar{margin-bottom:6px}
  .fit .pgw>.ws-main>.crop-stage{padding:2px 0 0}
  .fit .pgw>.ws-main>.crop-stage :is(.crop-img,.tx-cv,.crop-page canvas){max-height:36vh;max-height:clamp(150px,calc((100dvh - var(--hdh,64px) - 44px) * .38),340px)}
  .fit .pgw>.ws-main>.tx-tip{margin:6px 0 0;padding:6px 10px;font-size:12px}
  .lv-on .wf-add small,.lv-on .wf-n small{display:none}
  /* the bar under the picture: the size and what it will weigh on two lines rather than off the edge; zoom by pinching
     (the percentage stays, a tap fits the picture again) */
  .lv-bar{padding:5px 6px 5px 12px}
  .lv-bar .lv-b[data-lz="one"],.lv-bar .lv-b[data-lz="out"],.lv-bar .lv-b[data-lz="in"]{display:none}
  .lv-dim{flex-wrap:wrap;row-gap:4px;min-width:0}
  .lv-kb{flex-basis:100%;margin-left:0;padding-left:0;box-shadow:none}
  .lv-hold span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fit .res.in.has-view{display:block;overflow:visible}
  .fit .res.has-view .rv-in{height:auto;padding:12px}
  /* the results' list: "all" and the count, then its two downloads side by side */
  .fit .rf-bar{padding:2px 0 12px}
  .fit .rf-bar .sp{flex-basis:100%;height:0}
  .fit .rf-bar .btn{flex:1 1 0;justify-content:center}
  /* what to do next: the handle waits at the window's foot over the result (app.js puts it at the result's end), pulled
     up (or tapped) the tools rise over the result; the list isn't repeated under it */
  .fit .res-view>.res-sheet{display:none}
  .fit .res>.res-sheet{position:sticky;bottom:0;left:auto;right:auto;max-height:none;transform:none;transition:none;
    box-shadow:0 -1px 0 var(--fl-line2),0 -14px 28px -22px rgba(var(--shd),.5)}
  .fit .res>.res-sheet .rs-h{height:52px;padding:8px 16px 0}
  .fit .res>.res-sheet .rs-b{position:absolute;left:0;right:0;bottom:100%;max-height:min(64vh,560px);padding:14px 12px 12px;background:var(--sf);
    box-shadow:0 -1px 0 var(--fl-line2),0 -26px 44px -28px rgba(var(--shd),.55);opacity:0;transform:translateY(16px);
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s,visibility 0s .28s}
  .fit .res>.res-sheet.open .rs-b{visibility:visible;opacity:1;transform:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s}
  .fit .res>.res-sheet .grid,.rsd-box .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fit .res>.res-sheet .tc{padding:10px;gap:10px}
  .fit .res>.res-sheet .tc small{display:none}
  .fit .res:has(>.res-sheet) .res-b .res-next{display:none}
  /* at work: one line — the spinner, what it does, how far, cancel — and the bar under it */
  .fit .ws-run{margin:-12px -12px 12px;padding:10px 12px 0}
  .fit .ws-run .bar{margin:8px -12px 0}
  .fit .ws-run>div{gap:4px 10px}
  .fit .ws-run .wr-t h3{overflow:hidden;font-size:13.5px;white-space:nowrap;text-overflow:ellipsis}
  .fit .ws-run .wr-pct{font-size:21px}
  .fit .ws-run [data-cancel]{padding:0 10px}
  .bag{width:100%}
  /* its bar: "all" on its own line, the three ways under it side by side */
  .bag-bar{padding:8px 12px 10px}
  .bag-bar .sp{flex-basis:100%;height:0}
  .bag-bar .btn{flex:1 1 0;justify-content:center;padding:0 8px}
  /* done: a sheet from the screen's foot over everything, the thumb's reach */
  .rs-done{position:fixed;inset:0;z-index:70;place-items:end stretch;padding:0}
  .rsd-box{width:100%;max-height:86vh;max-height:86dvh;padding:20px 16px calc(16px + env(safe-area-inset-bottom));animation:rsd-up .26s cubic-bezier(.2,.8,.2,1)}
  .rsd-h h3{font-size:20px}
  .rsd-acts .btn{flex:1 1 100%}
  .rsd-box .tc{gap:10px;padding:10px}
  .fit .res.has-view>.res-view{padding:12px}
  .fit .res.has-view>.res-a,.fit .res.has-view>.res-b{padding:18px 16px;box-shadow:none}
  .fit .app>.gen,.fit .txw>.dv{grid-template-columns:minmax(0,1fr);flex:1 0 auto;min-height:100%}
  .fit .gen>.gen-o,.fit .gen>.gen-r,.fit .txw>.dv>.dv-f,.fit .txw>.dv>.dv-r{min-height:auto;overflow:visible}
  .fit .gen>.gen-o,.fit .txw>.dv>.dv-f{box-shadow:inset 0 -1px 0 var(--fl-line)}
  .fit .app>.txw.has-side{display:flex;flex-direction:column;flex:1 0 auto;min-height:100%}
  .fit .txw.has-side>.tx{min-height:320px}
  .fit .txw.has-side>.tx-side{overflow:visible;box-shadow:inset 0 1px 0 var(--fl-line)}
  .fit .webapp>.wf{padding:10px 12px}
  .fit .webapp>:not(.wf){margin-left:12px;margin-right:12px}
  .fit .txw .tx{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  /* two boxes one over the other, the same height (the rule for the window's text boxes is weightier than the one above) */
  .fit .app:not(.ide)>.txw>.tx:not(.one){grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .fit .txw .tx-p+.tx-p{border-left:0;border-top:1px solid var(--fl-line)}
  .wsfull .fit .ide .tx-p .tx-h{padding-left:var(--gut)}
  .wsfull .fit .ide .tx-p:first-child .ed-g,.wsfull .fit .ide .tx-p:last-child .ed-g{min-width:calc(var(--gut) + 28px)}
}
@media (max-width:719px){
  .fit .wsf{height:580px}
  .fit .wsb{min-height:44px}
  .fit .wsb-tabs a{padding:0 14px;font-size:13px}
  /* the bar's room goes to the tabs: "more", this visit's results, the lamp and full screen are icons (their words kept
     for screen readers); "more" opens across the bar */
  .fit .wsb-mt,.fit .wsb-full .fw-a>span,.fit .wsb-full .fw-b>span,.fit .wsb-bag>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fit .wsb-mi{display:inline-flex}
  .fit .wsb-more>summary>svg{display:none}
  .fit .wsb-more>summary{padding:0 13px}
  .fit .wsb-bag{gap:5px;padding:0 10px}
  .fit .wsb-full{padding:0 13px}
  /* full: the way back says so in a word (the icon alone read as nothing much) */
  .wsfull .fit .wsb-full::after{content:attr(data-short);margin-left:6px;font:600 12.5px/1 var(--sans)}
  .fit .wsb{position:relative}
  .fit .wsb-more{position:static}
  .fit .wsb-pop{left:8px;right:8px;width:auto}
  .fit .wsb-pop a{padding:9px 14px}
  .fit .wsb-g>b{padding:10px 14px 6px}
  /* the bar under the code: indent and options, then the actions — copy, download and clear as icons */
  .fit .cs .cs-bar{gap:8px;padding:8px 10px}
  .fit .cs .cs-l,.fit .cs .cs-r{flex:1 1 100%;gap:6px}
  .fit .cs .cs-sep{display:none}
  .fit .cs .cs-r>[data-a="copy"],.fit .cs .cs-r>[data-a="dl"],.fit .cs .cs-r>[data-a="clear"]{width:34px;padding:0;justify-content:center}
  .fit .cs .cs-r>[data-a] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fit .cs .cs-r>.cs-act{flex:1 1 auto;padding:0 10px}
  .fit .cs .cs-pop{min-width:0;width:calc(100vw - 36px)}
  .fit .cs .cs-o .cs-sel{min-width:120px}
  .fit .ide .tx-opts{gap:8px 12px;min-height:0;padding:8px 8px 8px 12px}
  .fit .ide .tx-opts [data-a="demo"]{display:none}
  /* first row: the choice and the full-screen button; the tick box below */
  .fit .ide .tx-opts .ide-sp{order:1}
  .fit .ide .tx-opts .fw-tg{order:2}
  .fit .ide .tx-opts .chk{order:3;flex-basis:100%}
  .fit .ide .tx-opts .seg button{height:32px;padding:0 12px}
  .fit .ide .btn-sm{height:32px;gap:6px;padding:0 10px}
  .fit .ide .tx-h{min-height:44px;padding:0 4px 0 12px}
  .fit .ide .ed-g{min-width:36px;padding:12px 8px;font-size:11.5px;line-height:21px}
  .fit .ide .ed-hl,.fit .ide .ed-c textarea{padding:12px;font-size:13px!important;line-height:21px!important}
  .fit .ide .ed-empty{gap:6px;padding:10px}
  .fit .ide .ee-i{width:40px;height:40px;margin-bottom:2px}
  .fit .ide .ed-empty b{font-size:14.5px}
  .fit .ide .ed-empty p{display:none}
  .fit .ide .ee-act{margin-top:4px}
  .fit .ide .ee-lines{margin-bottom:6px}
  .fit .ide #sbsize,.fit .ide .sb-enc{display:none}
}

/* ================= 2026-09-30: dark theme — "lights off" (html[data-theme="dark"]; core.js THEME; admin switch fx_theme) =================
   The deep indigo of the logo's own background; honey for what is lit (the active tab, focus, the caret and selection, the
   lamp); the light site's order kept by inverting it — what is ink on white there (primary buttons, pressed segments,
   badges, tooltips) is near-white on indigo here. Paper stays white: PDF pages, previews of web pages, QR codes. */
/* the lamp buttons, in both themes */
.thm .th-b,.wsb-lamp .th-b{display:none}
html[data-theme="dark"] .thm .th-a,html[data-theme="dark"] .wsb-lamp .th-a{display:none}
html[data-theme="dark"] .thm .th-b{display:block}
html[data-theme="dark"] .wsb-lamp .th-b{display:inline-flex}
.thm svg{transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.thm:hover svg{transform:rotate(-18deg)}
html[data-theme="dark"] .thm{color:var(--honey)}
html[data-theme="dark"] .thm:hover svg{transform:rotate(45deg)}
.fit .wsb-lamp{position:relative;flex:none;display:flex;align-items:center;padding:0 16px;font:500 13px/1 var(--sans);color:var(--ink);box-shadow:inset 1px 0 0 var(--fl-line);transition:background .12s,color .12s}
.fit .wsb-lamp:hover{background:var(--sf)}
.wsb-lamp .th-a,.wsb-lamp .th-b{align-items:center;gap:8px}
.wsb-lamp .th-a{display:inline-flex}
.wsb-lamp svg{width:15px;height:15px}
html[data-theme="dark"] .fit .wsb-lamp{color:var(--honey)}
/* the phone menu's switch */
.md-thm{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;font:800 18px/1 var(--disp);color:var(--ink);text-align:left}
.md-thm .sw{position:relative;flex:none;width:46px;height:28px;border-radius:99px;background:var(--canvas3);box-shadow:inset 0 0 0 1px var(--hair2);transition:background .2s}
.md-thm .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,17,46,.3);transition:transform .22s cubic-bezier(.3,.7,.2,1)}
.md-thm[aria-pressed="true"] .sw{background:var(--honey);box-shadow:none}
.md-thm[aria-pressed="true"] .sw::after{transform:translateX(18px)}
/* the switch itself: the new look spreads from the button (core.js), nothing else moves */
/* (the lamp is the site's only view transition; plain selectors — a class on html before the pseudo-element is not read
   by every browser, and the default cross-fade left a see-through double for a moment) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* the page is photographed for the switch, and a photograph has no frosted glass: the header is solid meanwhile, or what
   is scrolled under it (a card's icon) shows through it for the length of the switch */
html.th-anim .hd,html.th-anim.fx .hd.scrolled{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- 2026-10-02 home: popular picks — the pro tools (admin switch home_pro). The owner: one "popular" block, three
   across on every screen, a roomier frame, no heading block — big cards on computers, icon tiles on phones ---- */
.hpro{padding:60px 0 10px;background:var(--sf)}
.hpro+.dir{padding-top:76px}
.hpro-l{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:800 13.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.hpro-l::after{content:"";flex:1;height:1px;background:var(--hair)}
:lang(zh) .hpro-l,:lang(ja) .hpro-l,:lang(ko) .hpro-l{font-size:17px;letter-spacing:.06em}
.hpro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hpro-i{position:relative;display:flex;flex-direction:column;gap:20px;min-width:0;min-height:220px;padding:28px 28px 24px;border-radius:24px;
  background:linear-gradient(165deg,var(--sf) 0%,var(--canvas) 100%);box-shadow:inset 0 0 0 1px var(--hair),0 22px 44px -38px rgba(var(--shd),.55);
  transition:box-shadow .2s,transform .2s}
.hpro-i::before{content:"";position:absolute;inset:0 28px auto;height:3px;border-radius:0 0 3px 3px;background:var(--honey);opacity:0;transition:opacity .2s}
.hpro-i:hover{box-shadow:inset 0 0 0 1px var(--hair2),var(--sh2);transform:translateY(-3px)}
.hpro-i:hover::before{opacity:1}
.hpro-ic{flex:none;display:flex}
.hpro-ic .ft,.hpro-ic .at{--w:60px}
.hpro-t{flex:1;min-width:0}
.hpro-t b{display:block;font:800 20px/1.25 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.hpro-t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink3)}
.hpro-go{display:inline-flex;align-items:center;gap:7px;font:700 14px/1 var(--sans);color:var(--ink2)}
.hpro-go .car{width:15px;height:15px;transition:transform .15s}
.hpro-i:hover .hpro-go{color:var(--ink)}
.hpro-i:hover .hpro-go .car{transform:translateX(3px)}
@media (max-width:1079px){
  .hpro-grid{gap:12px}
  .hpro-i{min-height:0;gap:14px;padding:22px 20px 18px;border-radius:20px}
  .hpro-i::before{inset:0 20px auto}
  .hpro-ic .ft,.hpro-ic .at{--w:48px}
  .hpro-t b{font-size:17px}
  .hpro-t small{font-size:13.5px}
}
@media (max-width:719px){
  .hpro{padding:34px 0 4px}
  .hpro+.dir{padding-top:48px}
  .hpro-l{margin-bottom:12px}
  .hpro-grid{gap:10px}
  .hpro-i{align-items:center;gap:9px;padding:16px 8px 14px;border-radius:18px;text-align:center}
  .hpro-i::before{display:none}
  .hpro-ic .ft,.hpro-ic .at{--w:44px}
  .hpro-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 13px/1.3 var(--sans);letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere}
  .hpro-t small,.hpro-go{display:none}
}

/* ---- 2026-10-02 the mega menu's "view all tools", the phone menu's, the footer's; pricing in honey ---- */
.mg-h a{color:inherit}
.mg-h a:hover{color:var(--ink)}
.mg-all{display:flex;align-items:center;gap:9px;margin:14px 0 0;height:44px;padding:0 12px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);font:700 14.5px/1 var(--sans);color:var(--ink)}
.mg-all:hover{background:var(--canvas2)}
.mg-all svg:first-child{color:var(--amber)}
.mg-all svg:last-child{margin-left:auto;color:var(--ink3);transition:transform .15s}
.md-sec>a.md-all{justify-content:space-between}
.md-sec>a.md-all>svg{color:var(--ink3)}
.md-sec details a.md-colall{justify-content:flex-start;gap:6px;font-weight:700;color:var(--indigo)}
.md-sec>a.md-price{color:var(--gold)}
.md-sec>a.md-price .cico{color:var(--amber)}
.fs-col a.fs-all{color:var(--honey);font-weight:600}
.nl.nl-price{gap:7px;color:var(--gold);background:var(--honey-soft);box-shadow:inset 0 0 0 1px rgba(245,165,36,.38)}
.nl.nl-price svg{width:15px;height:15px;color:var(--amber)}
.nl.nl-price:hover{background:var(--honey-soft);box-shadow:inset 0 0 0 1px var(--amber)}

/* ---- 2026-10-02 the all-tools page: an index on the left, search / column / format filters, compact lists ---- */
.allpage .phead{padding-bottom:30px}
.al-stat{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto;align-self:center}
.al-stat b{font:800 44px/1 var(--disp);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.al-stat span{font-size:14px;color:var(--ink3)}
.al-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.al-pop>span{margin-right:4px;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.al-pop a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 8px;border-radius:11px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--hair);font:600 13.5px/1 var(--sans);color:var(--ink);transition:box-shadow .12s}
.al-pop a:hover{box-shadow:inset 0 0 0 1px var(--hair2),var(--sh1)}
.al-pop .ft,.al-pop .at{--w:20px;padding:0}
.al-body{padding:6px 0 100px;background:var(--sf)}
.al-in{display:grid;grid-template-columns:264px minmax(0,1fr);gap:44px;align-items:start}
.al-side{position:sticky;top:calc(var(--alt,72px) + 18px)}
.al-index{max-height:calc(100vh - var(--alt,72px) - 36px);overflow:auto;padding:4px 6px 24px 0;overscroll-behavior:contain;scrollbar-width:thin}
.al-ig+.al-ig{margin-top:12px;padding-top:12px;box-shadow:inset 0 1px 0 var(--hair)}
.al-ih{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:11px;font:800 15px/1 var(--disp);color:var(--ink)}
.al-index ul{list-style:none;margin:2px 0 0;padding:0}
.al-index li a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px 0 14px;border-radius:9px;font:500 14px/1.2 var(--sans);color:var(--ink2)}
.al-index .nm{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.al-index em{flex:none;font:600 12px/1 var(--sans);font-style:normal;color:var(--ink4);font-variant-numeric:tabular-nums}
.al-index a:hover{background:var(--canvas);color:var(--ink)}
.al-index a[aria-current="true"]{background:var(--canvas2);color:var(--ink)}
.al-index li a[aria-current="true"]{box-shadow:inset 3px 0 0 var(--c,var(--amber))}
.al-bar{position:sticky;top:var(--alt,72px);z-index:6;display:flex;flex-direction:column;gap:12px;padding:16px 0 14px;background:var(--sf);box-shadow:0 1px 0 var(--hair)}
.al-row{display:flex;align-items:center;gap:10px}
.al-q{flex:1;width:auto;min-width:0;height:52px}
.al-jump{position:relative;display:none;flex:none;align-items:center;gap:8px;height:52px;padding:0 12px;border-radius:16px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink3)}
.al-jump select{max-width:128px;height:100%;border:0;outline:0;background:transparent;font:600 14px/1 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.al-tabs,.al-fmts{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.al-tabs::-webkit-scrollbar,.al-fmts::-webkit-scrollbar{display:none}
.al-tab{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 12px;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);font:600 14px/1 var(--sans);color:var(--ink2);white-space:nowrap;transition:background .12s,color .12s}
.al-tab:first-child{padding-left:15px}
.al-tab:hover{color:var(--ink);background:var(--canvas2)}
.al-tab em,.al-f em{font:600 12px/1 var(--sans);font-style:normal;color:var(--ink4);font-variant-numeric:tabular-nums}
.al-tab[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
.al-tab[aria-pressed="true"] em{color:var(--on-solid);opacity:.65}
.al-tab .cico.sm{width:24px;height:24px;border-radius:8px}
.al-tab .cico.sm svg{width:13px;height:13px}
.al-ih .cico.sm{width:26px;height:26px;border-radius:8px}
.al-ih .cico.sm svg{width:14px;height:14px}
.al-colh .cico.sm{width:40px;height:40px;border-radius:12px}
.al-colh .cico.sm svg{width:20px;height:20px}
.al-index li .ci{width:24px;height:24px;border-radius:7px}
.al-index li .ci svg{width:13px;height:13px}
.al-cat h3 .ci{width:30px;height:30px}
.al-fl{flex:none;margin-right:2px;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.al-f{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--hair2);font:600 13.5px/1 var(--sans);color:var(--ink2);white-space:nowrap;transition:background .12s,box-shadow .12s}
.al-f:hover{background:var(--canvas)}
.al-f[aria-pressed="true"]{background:var(--honey-soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--amber)}
.al-res{margin:14px 0 0;font:600 14px/1.4 var(--sans);color:var(--ink3)}
.al-col{padding-top:34px}
.al-colh{display:flex;align-items:center;gap:12px;padding-bottom:14px;box-shadow:inset 0 -1px 0 var(--hair2)}
.al-colh h2{font:800 25px/1.2 var(--disp);letter-spacing:-.02em}
.al-cn{font:600 13px/1 var(--sans);color:var(--ink3)}
.al-colh .lk{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--sans);color:var(--indigo);white-space:nowrap}
.al-colh .lk:hover svg{transform:translateX(2px)}
.al-cat{padding:22px 0 20px;scroll-margin-top:calc(var(--alt,72px) + 172px)}
.al-col{scroll-margin-top:calc(var(--alt,72px) + 150px)}
.al-cat+.al-cat{box-shadow:inset 0 1px 0 var(--hair)}
.al-cat h3{display:flex;align-items:center;gap:10px;font:700 17.5px/1.3 var(--disp)}
.al-cat h3 a{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--ink)}
.al-cat h3 a:hover{color:var(--indigo)}
.al-cat h3 em{font:600 12.5px/1 var(--sans);font-style:normal;padding:5px 9px;border-radius:999px;background:var(--canvas);color:var(--ink3)}
.al-cl{margin-top:6px;max-width:820px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.al-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 12px}
.al-list a{display:flex;align-items:center;gap:10px;min-height:42px;padding:7px 10px;border-radius:11px;font:500 14.5px/1.3 var(--sans);color:var(--ink2);transition:background .1s,color .1s}
.al-list a:hover{background:var(--canvas);color:var(--ink)}
.al-list a:hover .ft{--bgc:var(--canvas)}
.al-list .ft,.al-list .at{--w:26px}
.al-list a>span{min-width:0}
.al-list .bdg{margin-left:auto;flex:none}
.al-none{padding:64px 0;text-align:center}
.al-none p{margin:0 auto 18px;max-width:520px;font-size:16px;color:var(--ink2)}
@media (max-width:1279px){.al-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1079px){
  .al-in{grid-template-columns:minmax(0,1fr)}
  .al-side{display:none}
  .al-jump{display:flex}
}
@media (max-width:719px){
  .al-pop{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:18px;margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}
  .al-pop::-webkit-scrollbar{display:none}
  .al-pop>span,.al-pop a{flex:none}
  .al-stat{display:none}
  .al-bar{position:static;padding:12px 0 10px;gap:10px}
  .al-q,.al-jump{height:46px}
  .al-jump select{max-width:96px;font-size:13.5px}
  .al-fl{display:none}
  .al-col{padding-top:26px}
  .al-colh h2{font-size:20px}
  .al-cat{padding:18px 0 16px;scroll-margin-top:calc(var(--alt,64px) + 12px)}
  .al-col{scroll-margin-top:calc(var(--alt,64px) + 12px)}
  .al-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}
  .al-list a{gap:8px;padding:7px 6px;font-size:14px}
  .al-list .ft,.al-list .at{--w:24px}
  .al-list .bdg{padding:3px 6px;font-size:10.5px}
  .al-q kbd{display:none}
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#F3F1FF; --ink2:#C6C2E0; --ink3:#9591B7; --ink4:#68648D;
  --canvas:#110E2C; --canvas2:#1C1843; --canvas3:#28234F;
  --hair:rgba(226,224,255,.09); --hair2:rgba(226,224,255,.15);
  --bg:#0C0A23; --sf:#14112F; --sf2:#1C1842;
  --lnc:226,224,255; --shd:0,0,0;
  --solid:#ECEAFF; --on-solid:#14112E;
  --honey-soft:rgba(255,209,102,.13); --gold:#F2B544; --indigo:#B6ACFF; --violet:#A38FFF; --ok:#34D399;
  --sh1:0 1px 2px rgba(0,0,0,.35),0 8px 18px -8px rgba(0,0,0,.6);
  --sh2:0 2px 4px rgba(0,0,0,.3),0 24px 48px -22px rgba(0,0,0,.75);
  --sh3:0 4px 10px rgba(0,0,0,.3),0 48px 96px -40px rgba(0,0,0,.9);
  /* status colours: tints and words */
  --ok-bg:rgba(52,211,153,.10); --ok-tx:#6EE7B7; --warn-bg:rgba(255,209,102,.10); --warn-tx:#F8C96A; --err-bg:rgba(248,113,113,.11); --err-tx:#FCA5A5;
}
/* ---- dark: generated overrides below (tools/gen_dark.py), before every rule written by hand ---- */
/* ---- dark: generated by gen_dark.py (light tints and dark words mapped onto the night) ---- */
html[data-theme="dark"] .bdg.new{color:#F6CE8E}
html[data-theme="dark"] .bdg.pro{background:#1A1543}
html[data-theme="dark"] .fv.v0{background:linear-gradient(140deg,#191541,#1C174B)}
html[data-theme="dark"] .fv.v1{background:linear-gradient(140deg,#32293F,#342B3F)}
html[data-theme="dark"] .fv.v2{background:linear-gradient(140deg,#1A1540,#1F174A)}
html[data-theme="dark"] .soon{color:#F6CE8E}
html[data-theme="dark"] .chrome{background:#272140}
html[data-theme="dark"] .okp{background:#192F38;color:#96EEB7}
html[data-theme="dark"] .cut{background:repeating-conic-gradient(#342A3F 0% 25%,#14112F 0% 50%) 0 0/10px 10px}
html[data-theme="dark"] .meter .mt b{color:#96EEB7}
html[data-theme="dark"] .rc:hover{background:rgba(20,17,47,.65)}
html[data-theme="dark"] .mu-drop{background:#2C253F}
html[data-theme="dark"] .up-zone{background:linear-gradient(180deg,#171333,#2F273F)}
html[data-theme="dark"] .up-zone.over{background:#342B3F}
html[data-theme="dark"] .fmtb.empty{color:#F6CE8E}
html[data-theme="dark"] .st.ok{background:#182A37;color:#96EEB7}
html[data-theme="dark"] .st.warn{color:#F6CE8E}
html[data-theme="dark"] .st.done{background:#192F38;color:#96EEB7}
html[data-theme="dark"] .uni-t .uni-s{color:#F6CE8E}
html[data-theme="dark"] .cv-drop{background:linear-gradient(180deg,#171333,#2F273F)}
html[data-theme="dark"] .wf-add:hover{background:rgba(20,17,47,.7)}
html[data-theme="dark"] .oc button[aria-pressed="true"]{background:#2E263F}
html[data-theme="dark"] .okc{background:#192F38;color:#96EEB7}
html[data-theme="dark"] .res-stat b{color:#96EEB7}
html[data-theme="dark"] .tx-o .add{background:#192F38}
html[data-theme="dark"] .tx-o .del{background:#2B1530;color:#F391AC}
html[data-theme="dark"] .cv-drop,html[data-theme="dark"] .dropz{background:linear-gradient(180deg,#171333,#2F273F)}
html[data-theme="dark"] .cv-drop.over,html[data-theme="dark"] .dropz.over{background:#342B3F}
html[data-theme="dark"] .skel{background:linear-gradient(90deg,var(--canvas) 25%,#2F273F 50%,var(--canvas) 75%)}
html[data-theme="dark"] .aerr{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .ac-plan.vip{background:linear-gradient(120deg,#342B3F,#29233F 65%)}
html[data-theme="dark"] .ast-done{background:#192F38;color:#97EDB6}
html[data-theme="dark"] .ast-failed{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .ast-running,html[data-theme="dark"] .ast-queued{color:#F6CE8E}
html[data-theme="dark"] .ac-danger summary{color:#F19A93}
html[data-theme="dark"] .wf-up{background:rgba(20,17,47,.8)}
html[data-theme="dark"] .wf-th img{background:repeating-conic-gradient(#332A3F 0% 25%,#14112F 0% 50%) 50%/16px 16px}
html[data-theme="dark"] .vipn{background:#1A1542;color:#A9A5DE}
html[data-theme="dark"] .res-prev img{background:repeating-conic-gradient(#332A3F 0% 25%,#14112F 0% 50%) 50%/18px 18px}
html[data-theme="dark"] .st.bad{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .bac-view{background:repeating-conic-gradient(#332A3F 0% 25%,#14112F 0% 50%) 50%/16px 16px}
html[data-theme="dark"] .res-note[data-left] button{color:#F19A93}
html[data-theme="dark"] .res-note[data-left] button:hover{background:#2B1530}
html[data-theme="dark"] .res-vip{background:#1A1542;color:#A9A5DE}
html[data-theme="dark"] .res-vip a{color:#A7A4DF}
html[data-theme="dark"] .wf-cam .pl{background:#1A1542;color:#A9A5DE}
html[data-theme="dark"] .ws-dock{background:rgba(20,17,47,.96)}
html[data-theme="dark"] .tx-hb small.err,html[data-theme="dark"] .tx-h small.err{color:#F19A93}
html[data-theme="dark"] .tx-hb small.warn{color:#F6CE8E}
html[data-theme="dark"] .tx-note{background:#2E263F;color:#F6CC8E}
html[data-theme="dark"] .tx-note.err{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .tx-note.ok{background:#192F38;color:#9BE9C1}
html[data-theme="dark"] .txw textarea.drag{background:#2E263F}
html[data-theme="dark"] .dtab tr.del td.tx-c:nth-child(2),html[data-theme="dark"] .dl.del{background:#2B1530}
html[data-theme="dark"] .dtab tr.ins td.tx-c:nth-child(4),html[data-theme="dark"] .dl.ins{background:#192F38}
html[data-theme="dark"] .dtab tr.chg td.tx-c{background:#2E263F}
html[data-theme="dark"] .diff-b del{background:#401931;color:#F391AC}
html[data-theme="dark"] .dl.chg{background:#2E263F}
html[data-theme="dark"] .wc-sen li b.long{color:#F19A93}
html[data-theme="dark"] .frn{color:#F6CE8E}
html[data-theme="dark"] .frn.bad{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .jv-s{color:#96EEB7}
html[data-theme="dark"] .jv-b{color:#F6BB8E}
html[data-theme="dark"] .gen-r .tx-h b.ok{color:#96EEB7}
html[data-theme="dark"] .gen-r .tx-h b.mid{color:#F6CE8E}
html[data-theme="dark"] .gen-r .tx-h b.low{color:#F19A93}
html[data-theme="dark"] .money-o b.err{color:#F19A93}
html[data-theme="dark"] .rx-err{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .rx-l code{background:#342B3F}
html[data-theme="dark"] .code-err{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .b64-th{background:repeating-conic-gradient(#332A3F 0% 25%,#14112F 0% 50%) 50%/16px 16px}
html[data-theme="dark"] .hashf .kv tr.match td,html[data-theme="dark"] .hashf .kv tr.match th{background:#192F38}
html[data-theme="dark"] .hash-v.ok{background:#192F38;color:#96EEB7}
html[data-theme="dark"] .hash-v.no{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .cp-img{background:repeating-conic-gradient(#332A3F 0% 25%,#14112F 0% 50%) 50%/18px 18px}
html[data-theme="dark"] .ws-note.err{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .pg-a{background:rgba(20,17,47,.95)}
html[data-theme="dark"] .sg-item.on{background:#2E263F}
html[data-theme="dark"] .sg-fonts button{color:#C6C2E0}
html[data-theme="dark"] .sg-fonts button[aria-pressed="true"]{background:#2E263F}
html[data-theme="dark"] .sg-sealv{background:repeating-conic-gradient(#31293F 0% 25%,#14112F 0% 50%) 50%/16px 16px}
html[data-theme="dark"] .dv-msg.err{background:#2A1530;color:#F19A93}
html[data-theme="dark"] .dv-msg.warn{background:#31283F;color:#F6D18E}
html[data-theme="dark"] .dv-msg.ok{background:#182A38;color:#96EEB7}
html[data-theme="dark"] .tx-cv{background:repeating-conic-gradient(#332A3F 0% 25%,#14112F 0% 50%) 50%/18px 18px}
html[data-theme="dark"] .pe-f button[aria-pressed="true"]{background:#2E263F}
html[data-theme="dark"] .pe-tools{background:rgba(20,17,47,.96)}
html[data-theme="dark"] .pe-note{color:#F6E28E}
html[data-theme="dark"] .pe-field input,html[data-theme="dark"] .pe-field textarea,html[data-theme="dark"] .pe-field select{color:#C6C2E0}
html[data-theme="dark"] .pe-draft{background:#171941;color:#A5A0E3}
html[data-theme="dark"] .se-row.play{background:#2E263F}
html[data-theme="dark"] .se-row.bad .se-s,html[data-theme="dark"] .se-row.bad .se-e{color:#F19A93}
html[data-theme="dark"] .se-x:hover{background:#2D1630}
html[data-theme="dark"] .fv.v3{background:linear-gradient(140deg,#182A3B,#1B3D44)}
html[data-theme="dark"] .s-pass.wr-h{background:#182A38}
html[data-theme="dark"] .s-pass .wr-hi{color:#96EEB7}
html[data-theme="dark"] .s-warn.wr-h{background:#31283F}
html[data-theme="dark"] .s-warn .wr-hi{color:#F6CE8E}
html[data-theme="dark"] .s-fail.wr-h{background:#2A1530}
html[data-theme="dark"] .s-fail .wr-hi{color:#F19A93}
html[data-theme="dark"] .s-info.wr-h{background:#181B42}
html[data-theme="dark"] .s-info .wr-hi{color:#B6C0CE}
html[data-theme="dark"] .cnt.s-pass{background:#182A38;color:#96EEB7}
html[data-theme="dark"] .cnt.s-warn{background:#31283F;color:#F6CE8E}
html[data-theme="dark"] .cnt.s-fail{background:#2A1530;color:#F19A93}
html[data-theme="dark"] .s-pass .ck-i,html[data-theme="dark"] .ck.s-pass .ck-i{background:#1A323C;color:#96EEB7}
html[data-theme="dark"] .s-warn .ck-i,html[data-theme="dark"] .ck.s-warn .ck-i{background:#342B3F;color:#F6CE8E}
html[data-theme="dark"] .s-fail .ck-i,html[data-theme="dark"] .ck.s-fail .ck-i{background:#351730;color:#F19A93}
html[data-theme="dark"] .s-info .ck-i,html[data-theme="dark"] .ck.s-info .ck-i{background:#19204A;color:#B6C0CE}
html[data-theme="dark"] .wr-kv td b.ok{color:#96EEB7}
html[data-theme="dark"] .wr-kv td b.mid{color:#F6CE8E}
html[data-theme="dark"] .wr-kv td b.bad{color:#F19A93}
html[data-theme="dark"] .rb-test td.ok{color:#96EEB7}
html[data-theme="dark"] .rb-test td.bad{color:#F19A93}
html[data-theme="dark"] .sb{background:#181E45;color:#B6C0CE}
html[data-theme="dark"] .sb.s2{background:#1A323C;color:#96EEB7}
html[data-theme="dark"] .sb.s3{background:#181C45}
html[data-theme="dark"] .sb.s4,html[data-theme="dark"] .sb.s5,html[data-theme="dark"] .sb.s0{background:#351730;color:#F19A93}
html[data-theme="dark"] .vb{background:#181E45;color:#B6C0CE}
html[data-theme="dark"] .vb.v-ok,html[data-theme="dark"] .vb.v-pass,html[data-theme="dark"] .vb.v-available,html[data-theme="dark"] .vb.v-genuine,html[data-theme="dark"] .vb.v-valid,html[data-theme="dark"] .vb.v-open,html[data-theme="dark"] .vb.v-up,html[data-theme="dark"] .vb.v-fast,html[data-theme="dark"] .vb.v-complete{background:#1A323C;color:#96EEB7}
html[data-theme="dark"] .vb.v-taken,html[data-theme="dark"] .vb.v-broken,html[data-theme="dark"] .vb.v-invalid,html[data-theme="dark"] .vb.v-fake,html[data-theme="dark"] .vb.v-fail,html[data-theme="dark"] .vb.v-error,html[data-theme="dark"] .vb.v-down,html[data-theme="dark"] .vb.v-weak,html[data-theme="dark"] .vb.v-slow,html[data-theme="dark"] .vb.v-loop,html[data-theme="dark"] .vb.v-multiple,html[data-theme="dark"] .vb.v-none{background:#351730;color:#F19A93}
html[data-theme="dark"] .vb.v-risky,html[data-theme="dark"] .vb.v-redirect,html[data-theme="dark"] .vb.v-warn,html[data-theme="dark"] .vb.v-blocked,html[data-theme="dark"] .vb.v-filtered,html[data-theme="dark"] .vb.v-short,html[data-theme="dark"] .vb.v-revoked,html[data-theme="dark"] .vb.v-average,html[data-theme="dark"] .vb.v-typo,html[data-theme="dark"] .vb.v-disposable,html[data-theme="dark"] .vb.v-unknown,html[data-theme="dark"] .vb.v-not_bot{background:#342B3F;color:#F6CC8E}
html[data-theme="dark"] .vb.v-closed{background:#181E45;color:#B6C0CE}
html[data-theme="dark"] .yn.y{background:#1A323C;color:#96EEB7}
html[data-theme="dark"] .yn.n{background:#351730;color:#F19A93}
html[data-theme="dark"] .wr-shared{background:#171941;color:#A5A0E3}
html[data-theme="dark"] .wr-shared small{color:#C6C2E0}
html[data-theme="dark"] .stats .st-broken b{color:#F19A93}
html[data-theme="dark"] .stats .st-blocked b{color:#F6CE8E}
html[data-theme="dark"] .stats .st-ok b{color:#96EEB7}
html[data-theme="dark"] .pr.s-pass .pr-i{background:#1A323C;color:#96EEB7}
html[data-theme="dark"] .pr.s-warn .pr-i{background:#342B3F;color:#F6CE8E}
html[data-theme="dark"] .pr.s-fail .pr-i{background:#351730;color:#F19A93}
html[data-theme="dark"] .av.v-available{background:#182A38}
html[data-theme="dark"] .oc-b small{color:#C6C2E0}
html[data-theme="dark"] .oc-b b{color:#C6C2E0}
html[data-theme="dark"] .oc-b p{color:#C6C2E0}
html[data-theme="dark"] .oc.wx{background:#1A1639}
html[data-theme="dark"] .oc.wx b{color:#C6C2E0}
html[data-theme="dark"] .src{background:#161332}
html[data-theme="dark"] .src li.hit{background:#342C3F}
html[data-theme="dark"] .src li.bad{background:#2A1530}
html[data-theme="dark"] .src .ha{color:#F6B68E}
html[data-theme="dark"] .src .hs{color:#96EEB7}
html[data-theme="dark"] .outline li.skip{background:#31283F}
html[data-theme="dark"] .outline .ht em{color:#F19A93}
html[data-theme="dark"] .ixc.s-pass .ixh{color:#96EEB7}
html[data-theme="dark"] .ixc.s-warn .ixh{color:#F6CE8E}
html[data-theme="dark"] .ixc.s-fail .ixh{color:#F19A93}
html[data-theme="dark"] .ipcard{background:linear-gradient(160deg,#2E263F,#342B3F)}
html[data-theme="dark"].cf-in #favs[hidden]::after{background:linear-gradient(90deg,#14112F 30%,#2E263F 50%,#14112F 70%)}
html[data-theme="dark"] .favs-box{background:linear-gradient(135deg,#2C253F 0%,#14112F 58%)}
html[data-theme="dark"] .fvx:hover{background:#2B1530;color:#F19A93}
html[data-theme="dark"] .sqr-i{background:#192D3A;color:#8EF6C0}
html[data-theme="dark"] .ahint.bad{color:#F19A93}
html[data-theme="dark"] .ac-warn{background:#2E243F;color:#F6CC8E}
html[data-theme="dark"] .trx-count.full{color:#F19A93}
html[data-theme="dark"] .vtx-msg .tr.bad{color:#F19A93}
html[data-theme="dark"] .vtx-them{background:#2E263F}
html[data-theme="dark"] .wtx-err{background:#271630;color:#F19A93}
html[data-theme="dark"] .fv.v4{background:linear-gradient(140deg,#171B41,#1A214D)}
html[data-theme="dark"] .hstats{background:rgba(20,17,47,.78)}
html[data-theme="dark"] .hs-i{color:#F6CE8E}
html[data-theme="dark"] .hstats>div:nth-child(2) .hs-i{background:#171B41}
html[data-theme="dark"] .hstats>div:nth-child(3) .hs-i{background:#192F38;color:#96EEB7}
html[data-theme="dark"] .ct-ok{background:#192F38;color:#96EEB7}
/* ---- dark: end of generated ---- */
html[data-theme="dark"] ::selection{background:rgba(255,209,102,.32);color:#fff}
html[data-theme="dark"] :focus-visible{outline-color:var(--honey)}
html[data-theme="dark"] body{scrollbar-color:rgba(226,224,255,.2) var(--bg)}
html[data-theme="dark"] .btn-ghost{background:transparent}
html[data-theme="dark"] .btn-dark:hover{background:#fff}
html[data-theme="dark"] .btn-honey{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.3),0 10px 26px -12px rgba(255,209,102,.55)}
html[data-theme="dark"] kbd{background:var(--sf2)}
html[data-theme="dark"] .bdg.new{color:var(--honey)}
html[data-theme="dark"] .bdg.pro{background:rgba(182,172,255,.14);color:var(--indigo)}
html[data-theme="dark"] .ci{background:rgba(226,224,255,.06)}
@supports (background:color-mix(in srgb,red 50%,white)){html[data-theme="dark"] .ci{background:color-mix(in srgb,var(--c) 20%,var(--sf))}}
html[data-theme="dark"] .pair .pa{background:var(--canvas2)}
/* the header */
html[data-theme="dark"] .hd{background:var(--bg);box-shadow:0 1px 0 var(--hair)}
html[data-theme="dark"].fx .hd.scrolled{background:rgba(12,10,35,.84);box-shadow:0 1px 0 var(--hair),0 12px 28px -22px rgba(0,0,0,.8)}
html[data-theme="dark"].wsfull .hd,html[data-theme="dark"].wsfull .hd.scrolled{background:var(--bg)}
html[data-theme="dark"] .wm{color:var(--ink)}
html[data-theme="dark"] .sbtn{background:var(--canvas)}
html[data-theme="dark"] .sbtn:hover{background:var(--canvas2)}
html[data-theme="dark"] .mega,html[data-theme="dark"] .apps-pop,html[data-theme="dark"] .lpop,html[data-theme="dark"] .pal-box{background:var(--sf2)}
html[data-theme="dark"] .scrim{background:rgba(4,3,14,.55)}
html[data-theme="dark"] .mdrawer,html[data-theme="dark"] .md-top{background:var(--bg)}
html[data-theme="dark"] .langbar{background:#07061A}
/* inputs */
html[data-theme="dark"] select.inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239591B7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-theme="dark"] .hc-sel select,html[data-theme="dark"] .trx-sel select,html[data-theme="dark"] .vtx-l select,html[data-theme="dark"] .fit .cs-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239591B7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-theme="dark"] input[type=color]{background:var(--sf)}
/* paper keeps its light ink */
html[data-theme="dark"] :is(.sg-pg,.pe-pg,.rd-pg,.qr,.sqr-box,.bc){--ink:#14112E;--ink2:#4A4763;--ink3:#77738E;--ink4:#A6A3B7;--hair:rgba(20,17,46,.08);--hair2:rgba(20,17,46,.12);--lnc:20,17,46;--sf:#fff;--solid:#14112E;--on-solid:#fff;--canvas:#FAF8F3;color-scheme:light}
/* ---- by hand: upload areas (a pool of warm light on the night; lit at the edge while a file is over them), the home
   page's figures, disabled primary buttons (quiet, not a washed-out white) ---- */
html[data-theme="dark"] .up-zone,html[data-theme="dark"] .cv-drop,html[data-theme="dark"] .dropz{background:radial-gradient(120% 90% at 50% 0%,rgba(255,209,102,.075),transparent 62%),#141131;border-color:rgba(226,224,255,.14)}
html[data-theme="dark"] .up-zone.over,html[data-theme="dark"] .cv-drop.over,html[data-theme="dark"] .dropz.over{background:radial-gradient(120% 90% at 50% 0%,rgba(255,209,102,.15),transparent 70%),#17143A;border-color:rgba(255,209,102,.6)}
html[data-theme="dark"] .cv-drop svg.b,html[data-theme="dark"] .dropz svg.b{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
html[data-theme="dark"] .hstats{background:rgba(20,17,47,.72);box-shadow:0 0 0 1px var(--hair2),0 22px 44px -30px rgba(0,0,0,.8)}
html[data-theme="dark"] .hs-i{color:var(--honey)}
html[data-theme="dark"] .hstats>div:nth-child(2) .hs-i{color:#8FB2FF}
html[data-theme="dark"] .btn-dark[disabled],html[data-theme="dark"] .hc-go:disabled{background:rgba(226,224,255,.09);color:var(--ink4);box-shadow:none;opacity:1}
html[data-theme="dark"] .ft{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(226,224,255,.08),0 4px 10px -4px rgba(0,0,0,.5)}
/* what is picked on a track (segments, tabs, the billing switch) is raised: lighter than the track, as a white chip on
   the light site */
html[data-theme="dark"] :is(.langsw button[aria-pressed="true"],.bill button[aria-pressed="true"],.seg button[aria-pressed="true"],.atabs button[aria-selected="true"],.rc[aria-current="true"]){background:#2C2860;box-shadow:inset 0 0 0 1px rgba(226,224,255,.1),0 2px 6px -2px rgba(0,0,0,.5)}
html[data-theme="dark"] .colc[aria-selected="true"]{background:#1E1A47}
/* picked options marked in honey on the light site (a font, a filter, a style): a honey ring on the night */
html[data-theme="dark"] :is(.oc button[aria-pressed="true"],.sg-fonts button[aria-pressed="true"],.pe-f button[aria-pressed="true"],.sg-item.on){background:rgba(255,209,102,.12);box-shadow:inset 0 0 0 1.5px rgba(255,209,102,.6)}
/* cocoa words on a pale honey chip (the current menu item, the VIP tier, a count): honey words on a honey glow */
html[data-theme="dark"] :is(.lpop a[aria-current="true"],.fav.big[aria-pressed="true"],.acct-nav a[aria-current="true"],.acct-tier.vip,.favs-h h2 .cnt,.hc-ico,.ct-info>p:first-child){color:var(--honey)}
/* the VIP plan card: indigo lit at its edge rather than cream */
html[data-theme="dark"] .ac-plan.vip{background:linear-gradient(120deg,#2A2254,#18153A 65%);box-shadow:inset 0 0 0 1px rgba(255,209,102,.22)}
/* words marked with a honey highlighter keep dark letters (a regex's matches, a keyword's places) */
html[data-theme="dark"] .rx-hl mark,html[data-theme="dark"] .kf-spots mark{color:#2A1B00}
/* dark glass stays dark: the page number on a page's picture, the full-screen picture viewer */
html[data-theme="dark"] .rp-p span{background:rgba(20,17,46,.72)}
html[data-theme="dark"] .pv{background:rgba(6,5,20,.95)}
/* a file tile's folded corner shows what it sits on: raised surfaces (menus, the search) are lighter than cards */
html[data-theme="dark"] :is(.mega,.pal-box,.apps-pop,.lpop) .ft{--bgc:var(--sf2)}
html[data-theme="dark"] .pr[aria-selected="true"]{background:#2A264F}
html[data-theme="dark"] .pr[aria-selected="true"] .ft{--bgc:#2A264F}
/* the highlighter under a word: deeper amber, so white letters stay readable on it */
html[data-theme="dark"] :lang(zh) em.accent{background:linear-gradient(180deg,transparent 62%,rgba(245,165,36,.55) 62%,rgba(245,165,36,.55) 92%,transparent 92%)}
/* the plan we recommend: lit by a honey edge (on the light site it is the one dark card) */
html[data-theme="dark"] .plan.hot{background:linear-gradient(180deg,#221C55 0%,#15122F 72%);box-shadow:0 0 0 1px rgba(255,209,102,.5),0 50px 90px -46px rgba(255,209,102,.3)}
/* ---- the flat workspace with the lights off ---- */
html[data-theme="dark"] .fit{--fl-line:rgba(226,224,255,.08);--fl-line2:rgba(226,224,255,.14);--fl-hover:rgba(226,224,255,.05)}
html[data-theme="dark"] .fit .wsf{background:var(--sf);box-shadow:0 0 0 1px var(--fl-line2)}
html[data-theme="dark"] .fit .wsb{background:#0F0D27}
html[data-theme="dark"] .fit .wsb-tabs a{color:var(--ink3)}
html[data-theme="dark"] .fit .wsb-tabs a:hover{background:rgba(226,224,255,.04);color:var(--ink)}
html[data-theme="dark"] .fit .wsb-tabs a[aria-current]{background:var(--sf);color:var(--ink);box-shadow:inset -1px 0 0 var(--fl-line),inset 0 2px 0 var(--honey)}
html[data-theme="dark"] .fit .wsb-more>summary{color:var(--ink3)}
html[data-theme="dark"] .fit .wsb-more>summary:hover,html[data-theme="dark"] .fit .wsb-more[open]>summary,html[data-theme="dark"] .fit .wsb-full:hover,html[data-theme="dark"] .fit .wsb-lamp:hover{background:rgba(226,224,255,.05)}
html[data-theme="dark"] .fit .wsb-pop{background:var(--sf2);box-shadow:0 0 0 1px var(--fl-line2),0 18px 40px -16px rgba(0,0,0,.8)}
html[data-theme="dark"] .fit [data-full].fw-pulse{background:rgba(255,209,102,.14);color:var(--honey)}
html[data-theme="dark"] .fit .fw-tip{background:var(--honey);color:var(--cocoa)}
html[data-theme="dark"] .fit .fw-tip::before{background:var(--honey)}
html[data-theme="dark"] .fit .ws-main,html[data-theme="dark"] .fit .res.has-view>.res-view,html[data-theme="dark"] .fit .gen>.gen-o{background:#110E2A}
html[data-theme="dark"] .fit .webapp>.wf,html[data-theme="dark"] .fit .trx>.trx-bar{background:#0F0D27}
html[data-theme="dark"] .fit .txw>.dv>.dv-r,html[data-theme="dark"] .fit .txw.has-side>.tx-side{background:#110E2A}
html[data-theme="dark"] .fit .app:not(.ide)>.txw>.tx-opts{background:#0F0D27}
html[data-theme="dark"] .fit .ws-run{background:rgba(20,17,47,.94)}
html[data-theme="dark"] .lv-view{background:#0B0920}
html[data-theme="dark"] .fit .wsf .oc button[aria-pressed="true"]{background:rgba(255,209,102,.1);box-shadow:inset 0 0 0 1.5px var(--honey)}
html[data-theme="dark"] .bag-f button{color:var(--err-tx)}
html[data-theme="dark"] .wr-toc a.on{box-shadow:inset 0 -2px 0 var(--honey)}
html[data-theme="dark"] .wr-only input{accent-color:var(--honey)}
html[data-theme="dark"] :is(.rf-ck,.rf-bar,.bag) input{accent-color:var(--honey)}
html[data-theme="dark"] .fit .ws .wf.st-run{box-shadow:0 0 0 2px var(--honey)}
html[data-theme="dark"] .lv-alpha .lv-c{background:repeating-conic-gradient(#221E48 0% 25%,#171437 0% 50%) 50%/16px 16px}
html[data-theme="dark"] .lv-note{color:var(--warn-tx)}
html[data-theme="dark"] .lv-on .wf.lv-cur{box-shadow:0 0 0 2px var(--honey)}
html[data-theme="dark"] .fit .wsf .btn-honey:hover{background:#fff}
html[data-theme="dark"] .fit :is(.app,[id="tinFile"])>.dropz.over::before{border-color:var(--honey);background:rgba(255,209,102,.06)}
html[data-theme="dark"] .fit .ide{--h-tag:#8FB2FF;--h-pun:#7E7AA6;--h-attr:#F6C177;--h-str:#8BD5A9;--h-com:#6C6893;--h-doc:#F6C177;--h-ent:#F4A68A;--h-kw:#C9A2FF;--h-num:#F4A68A;--h-fn:#7CCBFF}
html[data-theme="dark"] .fit .ide .ed-g{background:#110E2A;color:#58547E}
html[data-theme="dark"] .fit .ide .ed-hl{color:#E6E3FA}
html[data-theme="dark"] .fit .ide .ed-c textarea{caret-color:var(--honey)}
html[data-theme="dark"] .fit .ide .ed-c textarea::selection{background:rgba(255,209,102,.24)}
html[data-theme="dark"] .fit .ide .ed-c textarea.drag{background:rgba(255,209,102,.05);box-shadow:inset 0 0 0 1px var(--honey)}
html[data-theme="dark"] .fit .ide .ed-c.plain textarea,html[data-theme="dark"] .fit .ide .ed-c.plain textarea::selection{color:#E6E3FA;-webkit-text-fill-color:#E6E3FA}
html[data-theme="dark"] .fit .ide .ee-lines i{background:rgba(226,224,255,.07)}
html[data-theme="dark"] .fit .ide .btn-sm.btn-dark:hover{background:#fff}
html[data-theme="dark"] .fit .ide .chk input{accent-color:var(--honey)}
html[data-theme="dark"] .fit .ide .tx-sb{background:#0F0D27}
html[data-theme="dark"] .fit .ide .sb-dot{background:#4A4670}
html[data-theme="dark"] .fit .ide .sb-dot.ok{background:#34D399}
html[data-theme="dark"] .fit .ide .sb-dot.err{background:#F87171}
html[data-theme="dark"] .fit .ide .sb-dot.warn{background:#FBBF24}
html[data-theme="dark"] .fit .ide .tx-sb #info.err{color:var(--err-tx)}
html[data-theme="dark"] .fit .ide .tx-sb #info.warn{color:var(--warn-tx)}
html[data-theme="dark"] .fit .cs .cs-bar{background:var(--sf)}
html[data-theme="dark"] .fit .cs .cs-pop{background:var(--sf2);box-shadow:0 0 0 1px var(--fl-line2),0 18px 40px -16px rgba(0,0,0,.8)}
html[data-theme="dark"] .fit .cs .cs-note{background:#18153A;color:var(--ink2)}
html[data-theme="dark"] .fit .cs .cs-note.ok{background:var(--ok-bg);color:var(--ok-tx)}
html[data-theme="dark"] .fit .cs .cs-note.warn{background:var(--warn-bg);color:var(--warn-tx)}
html[data-theme="dark"] .fit .cs .cs-note.err{background:var(--err-bg);color:var(--err-tx)}
html[data-theme="dark"] .fit .cs .cs-found{background:#17143A}
html[data-theme="dark"] .fit .cs .cs-found button:hover{background:rgba(255,209,102,.07)}
html[data-theme="dark"] .fit .cs .cs-found b{color:var(--warn-tx)}
html[data-theme="dark"] .fit .cs .sb-found{color:var(--ok-tx)}
html[data-theme="dark"] .fit .cs .sb-found.bad{color:var(--warn-tx)}
@media (max-width:719px){
  .fit .wsb-lamp{padding:0 13px}
  .fit .wsb-lamp .th-a>span,.fit .wsb-lamp .th-b>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* ================= 2026-09-30 the online spreadsheet (tool excel-editor, app-sheet.js) =================
   A design of our own (the visitor's direction: one window that does everything, not a copy of an office suite): the
   file, the everyday formats, "find a command" and Save along the top; a rail of seven sections at the left, each opening
   its drawer beside the grid; the formula bar, the grid (a canvas under a native scroller), the sheets, the numbers picked
   and the zoom at the foot. A phone: the sections in a bar at the foot, each a sheet from below. Square and flat like every
   workspace window; the brand's violet marks what is picked. The grid's own colours are the --sh-* variables (the canvas
   reads them). */
.app[data-kind="sheet"]{position:relative}
.app.shapp{padding:0;overflow:hidden}
.fit .wsf>.app.shapp{overflow:hidden}
main:not(.fit) .app.shapp{display:flex;flex-direction:column;height:min(80vh,780px)}
.sh{--sh-cell:#FFFFFF;--sh-grid:#E6E4EE;--sh-hd:#F8F7FB;--sh-hdt:#6E6A88;--sh-hds:#EEEAFF;--sh-hdst:#4B2FD6;--sh-hdl:#E1DFEA;--sh-sel:#6D4AFF;
  --sh-selbg:rgba(109,74,255,.09);--sh-frz:#B7AEE0;--sh-btn:#FFFFFF;--sh-btnl:#CFCBE0;--sh-inkl:#ECEAF8;--sh-line:rgba(var(--lnc),.10);--sh-line2:rgba(var(--lnc),.16);
  --sh-hover:rgba(var(--lnc),.05);--sh-on:rgba(109,74,255,.11);--sh-ont:#4B2FD6;--sh-pop:var(--sf2);--sh-tint:rgba(109,74,255,.06);
  --sh-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--sf);color:var(--ink)}
/* ---- the top: the file, the everyday formats, find a command, save ---- */
.sh-top{flex:none;display:flex;align-items:center;gap:6px;min-height:48px;padding:0 10px 0 6px;background:var(--sf);box-shadow:inset 0 -1px 0 var(--sh-line)}
.sh-doc{flex:none;display:flex;align-items:center;gap:9px;max-width:230px;height:38px;padding:0 8px 0 5px;text-align:left;transition:background .1s}
.sh-doc:hover,.sh-doc[aria-expanded="true"]{background:var(--sh-hover)}
.sh-doci{flex:none;display:grid;place-items:center;width:28px;height:28px;background:#2E2A78;color:#FFD166}
.sh-doci svg{width:16px;height:16px}
.sh-doct{display:grid;min-width:0}
.sh-doct b{overflow:hidden;font:600 13.5px/1.25 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.sh-doct small{overflow:hidden;font:500 11px/1.25 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.sh.dirty .sh-doct small::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--amber);vertical-align:1px}
.sh-qb{flex:1;min-width:0;display:flex;align-items:center;gap:1px;padding:0 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-shadow:inset 1px 0 0 var(--sh-line)}
.sh-qb::-webkit-scrollbar{display:none}
.sh-b{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 6px;color:var(--ink2);font:500 13px/1 var(--sans);white-space:nowrap;transition:background .1s,color .1s}
.sh-b:hover{background:var(--sh-hover);color:var(--ink)}
.sh-b.on,.sh-b[aria-expanded="true"]{background:var(--sh-on);color:var(--sh-ont)}
.sh-b:disabled{opacity:.32;cursor:default;background:none}
.sh-b svg{width:17px;height:17px}
.sh-dd{display:block;width:0;height:0;margin-left:-1px;border:3.5px solid transparent;border-top:4px solid currentColor;border-bottom:0;opacity:.6}
.sh-sep{flex:none;width:1px;height:20px;margin:0 5px;background:var(--sh-line2)}
.sh-tx{display:block;min-width:17px;font:600 12.5px/1 var(--sans);font-style:normal;letter-spacing:-.02em;text-align:center}
.sh-bdt{font-weight:900}
.sh-clr .sh-cbar{position:absolute;left:6px;bottom:4px;width:17px;height:3px}
.sh-pick{flex:none;margin:0 2px}
.sh-pick select,.shd-pick select{height:30px;padding:0 20px 0 8px;border:0;border-radius:0;background:var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2377738E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 5px center/11px;box-shadow:inset 0 0 0 1px var(--sh-line2);font:500 13px/1 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer}
.sh-pfn select{width:118px;overflow:hidden;text-overflow:ellipsis}
.sh-cmdk{flex:none;display:flex;align-items:center;gap:8px;min-width:178px;height:34px;padding:0 6px 0 10px;background:var(--sh-hd);box-shadow:inset 0 0 0 1px var(--sh-line);font:500 13px/1 var(--sans);color:var(--ink3);transition:box-shadow .12s,color .12s}
.sh-cmdk:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--sh-line2)}
.sh-cmdk svg{width:15px;height:15px}
.sh-cmdk kbd{margin-left:auto;padding:4px 6px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line2);font:500 10.5px/1 var(--sans);color:var(--ink3)}
.sh-savebox{flex:none;display:flex}
.sh .sh-save{flex:none;height:34px;gap:7px;padding:0 14px;font-size:13px}
.sh .sh-save svg{width:15px;height:15px}
.sh-savedd{display:grid;place-items:center;width:24px;height:34px;background:var(--solid);color:var(--on-solid);box-shadow:inset 1px 0 0 rgba(255,255,255,.2)}
.sh-savedd:hover{background:#2A2560}
.sh-savedd .sh-dd{margin:0}
.sh-unfull{display:none}
/* ---- the middle: the rail, its drawer, the sheet ---- */
.sh-mid{position:relative;flex:1;min-height:0;display:flex}
.sh-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.sh-rail{flex:none;display:flex;flex-direction:column;width:64px;padding:4px 0;overflow-y:auto;scrollbar-width:none;background:var(--sh-hd);box-shadow:inset -1px 0 0 var(--sh-line)}
.sh-rail::-webkit-scrollbar{display:none}
.sh-rail button{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:6px 2px;font:500 11px/1.15 var(--sans);color:var(--ink2);text-align:center;transition:background .1s,color .1s}
.sh-rail button:hover{background:var(--sh-hover);color:var(--ink)}
.sh-rail button[aria-pressed="true"]{background:var(--sf);color:var(--ink);font-weight:600}
.sh-rail button[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;background:var(--sh-sel)}
.sh-rail svg{width:20px;height:20px}
.sh-rail [data-sec="tools"] svg{color:var(--sh-sel)}
.sh-dr{position:relative;z-index:6;flex:none;display:flex;flex-direction:column;width:316px;min-height:0;background:var(--sf);box-shadow:inset -1px 0 0 var(--sh-line),6px 0 18px -14px rgba(var(--shd),.3);animation:shd-in .16s ease-out}
.sh-dr[hidden]{display:none}
@keyframes shd-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.shd-h{flex:none;display:flex;align-items:center;gap:2px;min-height:46px;padding:0 6px 0 14px;box-shadow:inset 0 -1px 0 var(--sh-line)}
.shd-h b{flex:1;min-width:0;overflow:hidden;font:700 14.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.shd-h [data-drback]:not([hidden]){margin-left:-8px}
.shd-c{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 0 18px;scrollbar-width:thin}
.shd-s{padding:12px 14px 14px;box-shadow:inset 0 -1px 0 var(--sh-line)}
.shd-s:last-child{box-shadow:none}
.shd-s h4{margin:0 0 10px;font:700 11px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.shd-c>p.shd-note:first-child,.shd-c>.shd-note{margin:12px 14px 4px}
.shd-c h5{margin:14px 0 8px;font:600 12.5px/1.3 var(--sans);color:var(--ink)}
.shd-c>h5,.shd-c>.shd-kv,.shd-c>.shd-tg,.shd-c>.shd-rad,.shd-c>select,.shd-c>.shd-cols,.shd-c>.shd-srcs,.shd-c>.shd-add,.shd-c>.shd-opts,.shd-c>.shd-sum,.shd-c>.shd-go,.shd-c>.shd-prev,.shd-c>.shd-chips,.shd-c>.shd-sub,.shd-c>input{margin-left:14px;margin-right:14px}
.shd-c>.shd-go,.shd-c>select,.shd-c>input:not([type]){width:calc(100% - 28px)}
.shd-note{margin:0 0 10px;font:13px/1.55 var(--sans);color:var(--ink3)}
.shd-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.shd-ib{display:grid;place-items:center;width:38px;height:36px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--sh-line);transition:background .1s,color .1s,box-shadow .1s}
.shd-ib:hover{background:var(--sh-hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sh-line2)}
.shd-ib.on{background:var(--sh-on);color:var(--sh-ont);box-shadow:inset 0 0 0 1px rgba(109,74,255,.35)}
.shd-ib svg{width:18px;height:18px}
.shd-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.shd-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.shd-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.shd-t{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 10px;text-align:left;font:500 13px/1.3 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sh-line);transition:background .1s,box-shadow .1s}
.shd-t:hover{background:var(--sh-hover);box-shadow:inset 0 0 0 1px var(--sh-line2)}
.shd-t.on{box-shadow:inset 0 0 0 1.5px var(--sh-sel)}
.shd-t svg{flex:none;width:17px;height:17px;color:var(--ink2)}
.shd-t span{min-width:0}
.shd-tiles.three .shd-t{flex-direction:column;justify-content:center;gap:5px;min-height:60px;padding:8px 4px;font-size:12px;text-align:center}
.shd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.shd-chip{height:30px;padding:0 12px;font:500 12.5px/1 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--sh-line2);transition:background .1s,color .1s}
.shd-chip:hover{background:var(--sh-hover);color:var(--ink)}
.shd-chip.on{background:var(--solid);color:var(--on-solid);box-shadow:none}
.shd-sw{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.shd-sw button{aspect-ratio:1;box-shadow:inset 0 0 0 1px rgba(20,17,46,.14);transition:transform .08s}
.shd-sw button:hover{position:relative;z-index:1;transform:scale(1.15);box-shadow:0 0 0 2px var(--sh-sel)}
.shd-sw .shd-none{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;aspect-ratio:auto;padding:0 4px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line2);font:500 11px/1 var(--sans);color:var(--ink2)}
.shd-sw .shd-none:hover{transform:none}
.shd-sw .shd-none span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shd-sw .shd-none svg{flex:none}
.shd-more{display:flex;align-items:center;gap:8px;margin-top:8px;font:500 12.5px/1 var(--sans);color:var(--ink2);cursor:pointer}
.shd-more input{width:28px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.shd-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6px;margin-bottom:8px}
.shd-pick select{width:100%;height:34px}
.shd-nfs{display:grid;gap:1px;margin-bottom:8px}
.shd-nf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 10px;text-align:left;font:500 13px/1.3 var(--sans);color:var(--ink);transition:background .1s}
.shd-nf:hover{background:var(--sh-hover)}
.shd-nf.on{background:var(--sh-on);color:var(--sh-ont)}
.shd-nf em{max-width:55%;overflow:hidden;font:500 12.5px/1.3 var(--sh-mono);font-style:normal;color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.shd-cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.shd-cs button{height:36px;padding:0 6px;overflow:hidden;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line);font:500 12.5px/1 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.shd-cs button:hover{outline:2px solid var(--sh-sel);outline-offset:-2px}
.shd-cnt{display:flex;align-items:center;gap:10px;margin-bottom:8px;font:500 13px/1.3 var(--sans);color:var(--ink2)}
.shd-cnt .inp{flex:none;width:92px}
.shd-c .inp{height:34px;padding:0 10px;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line2);font-size:13.5px}
.shd-c .fld{display:grid;gap:5px;min-width:0}
.shd-c .fld>span{font:600 12px/1.3 var(--sans);color:var(--ink2)}
.shd-tg{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font:13px/1.45 var(--sans);color:var(--ink);cursor:pointer}
.shd-tg input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--sh-sel)}
.shd-tg span{min-width:0}
.shd-tg small{display:block;overflow:hidden;font-size:11.5px;color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.shd-rad{display:flex;align-items:flex-start;gap:9px;margin-bottom:6px;padding:9px 10px;box-shadow:inset 0 0 0 1px var(--sh-line);cursor:pointer;transition:box-shadow .1s,background .1s}
.shd-rad:has(input:checked){background:var(--sh-tint);box-shadow:inset 0 0 0 1.5px var(--sh-sel)}
.shd-rad input{flex:none;margin:3px 0 0;accent-color:var(--sh-sel)}
.shd-rad b{display:block;font:600 13px/1.35 var(--sans);color:var(--ink)}
.shd-rad small{display:block;margin-top:2px;font:12px/1.45 var(--sans);color:var(--ink3)}
.shd-c .shd-sub{width:calc(100% - 42px);margin:-2px 14px 10px 28px}
.shd-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;padding:8px 10px;background:var(--sh-hd);font:12.5px/1.3 var(--sans);color:var(--ink3)}
.shd-kv b{overflow:hidden;font:600 12.5px/1.3 var(--sh-mono);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.shd-c>.shd-auto,.shd-auto{margin:-4px 14px 8px;font-size:12px;line-height:1.5}
.shd-sort .shd-auto{margin:-6px 0 8px}
.shd-tg+.fld{margin-top:10px}
.shd-cols,.shd-srcs{display:grid;max-height:210px;overflow:auto;margin-bottom:8px;padding:2px 10px;box-shadow:inset 0 0 0 1px var(--sh-line)}
.shd-src{align-items:center}
.shd-src span{flex:1}
.shd-x{flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--ink3)}
.shd-x:hover{background:var(--sh-hover);color:var(--ink)}
.shd-x svg{width:12px;height:12px}
.sh .shd-add{height:32px;margin-bottom:6px;padding:0 12px;font-size:12.5px}
.shd-sum{margin:14px 0 10px;padding:10px 12px;background:var(--sh-tint);box-shadow:inset 3px 0 0 var(--sh-sel);font:500 13px/1.55 var(--sans);color:var(--ink)}
.shd-sum:empty{display:none}
.sh .shd-go{position:sticky;bottom:10px;z-index:2;height:42px;margin-bottom:4px}
/* held at the drawer's foot: what scrolls under it fades out above it and is covered below it */
.sh .shd-go::before,.sh .shd-go::after{content:"";position:absolute;left:-14px;right:-14px;pointer-events:none}
.sh .shd-go::before{bottom:100%;height:16px;background:linear-gradient(transparent,var(--sf))}
.sh .shd-go::after{top:100%;height:14px;background:var(--sf)}
.shd-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.shd-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:108px;padding:12px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line2);text-align:left;transition:box-shadow .12s,transform .12s}
.shd-card:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px var(--sh-sel)}
.shd-card svg{width:22px;height:22px;color:var(--sh-sel)}
.shd-card b{font:700 13.5px/1.25 var(--sans);color:var(--ink)}
.shd-card small{font:12px/1.45 var(--sans);color:var(--ink3)}
.shd-fns{display:grid;max-height:360px;overflow:auto;margin-top:8px;box-shadow:inset 0 0 0 1px var(--sh-line)}
.shd-fn{display:grid;gap:2px;padding:8px 10px;text-align:left;box-shadow:inset 0 -1px 0 var(--sh-line);transition:background .1s}
.shd-fn:hover{background:var(--sh-on)}
.shd-fn b{font:700 12.5px/1.3 var(--sh-mono);color:var(--ink)}
.shd-fn code{font:12px/1.4 var(--sh-mono);color:var(--sh-ont);word-break:break-all}
.shd-fn small{font:12px/1.4 var(--sans);color:var(--ink3)}
.shd-sort{margin:10px 0 8px}
.shd-sortl{display:grid;grid-template-columns:58px minmax(0,1fr) 104px;gap:6px;align-items:center;margin-bottom:6px;font:12.5px/1.3 var(--sans);color:var(--ink3)}
.shd-sortl .inp{padding:0 6px;font-size:12.5px}
.shd-cfl{display:grid;gap:4px;margin-bottom:8px}
.shd-cfr{display:flex;align-items:center;gap:10px;padding:6px 8px;box-shadow:inset 0 0 0 1px var(--sh-line)}
.shd-cfr i{flex:none;width:18px;height:18px;box-shadow:inset 0 0 0 1px rgba(20,17,46,.12)}
.shd-cfr span{flex:1;min-width:0}
.shd-cfr b{display:block;font:600 12.5px/1.3 var(--sans);color:var(--ink)}
.shd-cfr small{font-size:11.5px;color:var(--ink3)}
.shd-chart{margin-bottom:10px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--sh-line)}
.shd-chart svg{display:block;width:100%;height:auto}
.shd-prev{overflow:auto;margin-bottom:10px;box-shadow:inset 0 0 0 1px var(--sh-line)}
.shd-prev table{border-collapse:collapse;font:12px/1.3 var(--sans)}
.shd-prev td{padding:4px 8px;border:1px solid var(--sh-line);color:var(--ink);white-space:nowrap}
.shd-opts{margin-top:4px}
.shd-scrim{display:none}
/* ---- find a command (Ctrl+K) ---- */
.sh-pal{position:absolute;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 16px;background:rgba(15,12,41,.22);animation:shs-fade .12s}
.shp-b{display:flex;flex-direction:column;width:min(560px,100%);max-height:min(72vh,540px);background:var(--sh-pop);box-shadow:0 0 0 1px var(--sh-line2),0 30px 60px -20px rgba(var(--shd),.5)}
.shp-i{flex:none;display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;box-shadow:inset 0 -1px 0 var(--sh-line);color:var(--ink3)}
.shp-i input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:500 15.5px/1 var(--sans);color:var(--ink)}
.shp-i kbd{padding:4px 6px;box-shadow:inset 0 0 0 1px var(--sh-line2);font:500 10.5px/1 var(--sans);color:var(--ink3)}
.shp-l{overflow:auto;padding:6px 0}
.shp-l button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;text-align:left;font:500 14px/1.3 var(--sans);color:var(--ink)}
.shp-l button svg{flex:none;width:16px;height:16px;color:var(--ink3)}
.shp-l button span{flex:1;min-width:0}
.shp-l button small{flex:none;padding:3px 7px;box-shadow:inset 0 0 0 1px var(--sh-line);font:500 11.5px/1 var(--sans);color:var(--ink3)}
.shp-l button.on,.shp-l button:hover{background:var(--sh-on)}
.shp-l button.on svg{color:var(--sh-sel)}
.shp-none{padding:18px 16px;font-size:13.5px;color:var(--ink3)}
/* ---- the formula bar: the address, fx, what the cell holds ---- */
.sh-fx{flex:none;display:flex;align-items:stretch;min-height:34px;background:var(--sf);box-shadow:inset 0 -1px 0 var(--sh-line)}
.sh-nm{flex:none;width:92px;min-width:0;padding:0 8px;border:0;border-radius:0;outline:0;background:transparent;box-shadow:inset -1px 0 0 var(--sh-line);font:500 13px/1 var(--sh-mono);color:var(--ink);text-align:center}
.sh-nm:focus{box-shadow:inset 0 0 0 2px var(--sh-sel)}
.sh-fxi{flex:none;display:grid;place-items:center;width:34px;color:var(--ink3);box-shadow:inset -1px 0 0 var(--sh-line)}
.sh-fxi svg{width:16px;height:16px}
.sh-fin{flex:1;min-width:0;height:34px;min-height:34px;margin:0;padding:7px 10px;border:0;border-radius:0;outline:0;resize:none;overflow:auto;background:transparent;font:13.5px/20px var(--sans);color:var(--ink);white-space:pre-wrap;scrollbar-width:thin}
.sh-fin:focus{box-shadow:inset 0 0 0 2px rgba(109,74,255,.35)}
.sh-fxa{display:none;flex:none;align-items:center;padding:0 4px;box-shadow:inset 1px 0 0 var(--sh-line)}
.sh.editing .sh-fxa{display:flex}
/* ---- the grid ---- */
.sh-grid{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--sh-cell)}
.sh-cv{position:absolute;left:0;top:0;display:block;pointer-events:none}
.sh-sc{position:absolute;inset:0;z-index:1;overflow:scroll;outline:0;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain;scrollbar-width:thin;cursor:cell}
.sh-sp{width:1px;height:1px}
.sh-ed{position:absolute;left:0;top:0;z-index:3;width:2px;height:20px;margin:0;padding:0;border:0;border-radius:0;outline:0;resize:none;overflow:hidden;opacity:0;pointer-events:none;background:transparent;color:transparent;font:13px/1.25 var(--sans);white-space:pre-wrap;word-break:break-word;caret-color:transparent}
.sh-ed.on{opacity:1;pointer-events:auto;padding:3px 4px;line-height:1.25;caret-color:var(--sh-sel);box-shadow:0 0 0 2px var(--sh-sel),0 6px 16px -6px rgba(var(--shd),.35)}
/* a finger's selection: a round handle at two corners */
.sh-h{position:absolute;left:-14px;top:-14px;z-index:4;width:28px;height:28px;touch-action:none;will-change:transform}
.sh-h::after{content:"";position:absolute;left:8px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--sh-cell);box-shadow:0 0 0 2px var(--sh-sel),0 1px 3px rgba(0,0,0,.3)}
.sh-h.on::after{background:var(--sh-sel)}
/* the functions offered while typing a formula, and the one being filled in */
.sh-ac{position:absolute;z-index:8;width:min(340px,calc(100% - 8px));max-height:280px;overflow:auto;padding:4px 0;background:var(--sh-pop);box-shadow:0 0 0 1px var(--sh-line2),0 12px 28px -10px rgba(var(--shd),.35)}
.sh-ac button{display:flex;align-items:baseline;gap:10px;width:100%;padding:6px 12px;text-align:left;font:13px/1.35 var(--sans);color:var(--ink)}
.sh-ac button b{flex:none;min-width:88px;font:600 12.5px/1.35 var(--sh-mono);color:var(--ink)}
.sh-ac button small{min-width:0;overflow:hidden;font-size:12px;color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.sh-ac button.on,.sh-ac button:hover{background:var(--sh-on)}
.sh-hint{position:absolute;z-index:7;max-width:min(520px,calc(100% - 8px));padding:6px 10px;background:var(--sh-pop);box-shadow:0 0 0 1px var(--sh-line2),0 8px 20px -10px rgba(var(--shd),.3);font:12.5px/1.45 var(--sh-mono);color:var(--ink2);pointer-events:none}
.sh-hint b{color:var(--ink)}
.sh-hint em{font-style:normal;font-weight:700;color:var(--sh-sel);text-decoration:underline;text-underline-offset:2px}
.sh-hint small{display:block;margin-top:2px;font:12px/1.4 var(--sans);color:var(--ink3)}
/* ---- the foot: all sheets, the tabs, a new one, the numbers picked, the zoom ---- */
.sh-ft{flex:none;display:flex;align-items:stretch;min-height:34px;background:var(--sh-hd);box-shadow:inset 0 1px 0 var(--sh-line)}
.sh-ft>.sh-b{height:auto;min-width:34px}
.sh-ft>[data-menu="sheets"]{box-shadow:inset -1px 0 0 var(--sh-line)}
.sh-tabs{flex:0 1 auto;min-width:0;max-width:60%;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.sh-tabs::-webkit-scrollbar{display:none}
.sh-tab{position:relative;flex:none;display:flex;align-items:center;max-width:180px;padding:0 16px;overflow:hidden;font:500 13px/1 var(--sans);color:var(--ink2);white-space:nowrap;text-overflow:ellipsis;box-shadow:inset -1px 0 0 var(--sh-line)}
.sh-tab:hover{background:var(--sh-hover);color:var(--ink)}
.sh-tab.on{background:var(--sf);color:var(--ink);font-weight:600;box-shadow:inset -1px 0 0 var(--sh-line),inset 0 -2px 0 var(--sh-sel)}
.sh-tab[style]::after{content:"";position:absolute;left:8px;right:8px;top:0;height:3px;background:var(--tc)}
.sh-tadd{color:var(--sh-sel)}
.sh-st{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 12px;overflow:hidden;font:500 12px/1 var(--sans);color:var(--ink3);white-space:nowrap}
.sh-st b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sh-zm{flex:none;display:flex;align-items:center;padding-right:4px;box-shadow:inset 1px 0 0 var(--sh-line)}
.sh-zm .sh-b{height:34px;min-width:28px}
.sh-zm .sh-zv{min-width:48px;font-size:12px;font-variant-numeric:tabular-nums}
.sh-zr{width:92px;margin:0 2px;accent-color:var(--sh-sel)}
.sh-mb{display:none}
/* ---- menus: under their button, or where the mouse was ---- */
.sh-menu{position:absolute;z-index:30;min-width:220px;max-width:min(340px,calc(100% - 12px));max-height:min(72vh,540px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:6px 0;background:var(--sh-pop);box-shadow:0 0 0 1px var(--sh-line2),0 18px 36px -16px rgba(var(--shd),.4);scrollbar-width:thin}
.sh-menu hr{height:1px;margin:5px 0;border:0;background:var(--sh-line)}
.shm-i{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 14px;text-align:left;font:500 13.5px/1.3 var(--sans);color:var(--ink)}
.shm-i:hover{background:var(--sh-on)}
.shm-i:disabled{opacity:.4;cursor:default;background:none}
.shm-i svg{width:16px;height:16px;color:var(--ink3)}
.shm-i.on{font-weight:700}
.shm-i.on::after{content:"";flex:none;width:5px;height:10px;margin-left:auto;border:solid var(--sh-sel);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px)}
.shm-i kbd{margin-left:auto;padding-left:12px;font:500 11.5px/1 var(--sans);color:var(--ink4)}
.shm-sp{flex:none;width:16px}
.shm-t{display:block;padding:10px 14px 4px;font:700 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.shm-c{padding:2px 12px 10px}
.shm-c .shm-t{padding:8px 2px 6px}
.shm-cg{display:grid;grid-template-columns:repeat(10,20px);gap:4px}
.shm-cg button{width:20px;height:20px;box-shadow:inset 0 0 0 1px rgba(20,17,46,.14);transition:transform .08s}
.shm-cg button:hover{transform:scale(1.18);box-shadow:0 0 0 2px var(--sh-sel)}
.shm-cg .shm-none{grid-column:span 2;width:auto;display:grid;place-items:center;background:var(--sf);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--sh-line2)}
.shm-cg .shm-none:hover{transform:none}
.shm-cg .shm-none svg{width:14px;height:14px}
.shm-cc{display:flex;align-items:center;gap:8px;margin-top:10px;font:500 12.5px/1 var(--sans);color:var(--ink2);cursor:pointer}
.shm-cc input{width:28px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.shm-g{display:grid;grid-template-columns:repeat(5,40px);gap:2px;padding:6px 10px}
.shm-g button{display:grid;place-items:center;height:36px;color:var(--ink2)}
.shm-g button:hover{background:var(--sh-on);color:var(--ink)}
.shm-g button.on{background:var(--sh-on);color:var(--sh-ont)}
.shm-g svg{width:18px;height:18px}
/* a column's filter: sort, a condition, the values */
.sh-menu.shm-filter{width:300px}
.shm-f{display:grid;gap:8px;padding:6px 12px 10px}
.shm-fc{display:flex;gap:6px}
.shm-f .inp{height:32px;padding:0 10px;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line2);font-size:13px}
.shm-fc select.inp{flex:1;min-width:0;padding-right:4px}
.shm-fc .inp[data-fa]{flex:none;width:96px}
.shm-f .chk{gap:8px;font-size:13px;color:var(--ink)}
.shm-f .chk input{width:16px;height:16px;accent-color:var(--sh-sel)}
.shm-fl{max-height:220px;overflow:auto;padding:4px 8px;box-shadow:inset 0 0 0 1px var(--sh-line)}
.shm-fl .chk{padding:4px 0}
.shm-fl .chk span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shm-fl small{margin-left:auto;padding-left:8px;font-size:11.5px;color:var(--ink4)}
.shm-fb{display:flex;justify-content:flex-end;gap:8px}
.sh .shm-fb .btn{height:32px;padding:0 12px;font-size:13px}
/* small dialogs over the grid */
.sh-dlg{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(15,12,41,.28)}
.sh-dlgb{display:flex;flex-direction:column;width:min(440px,100%);max-height:100%;margin:0;background:var(--sh-pop);box-shadow:0 0 0 1px var(--sh-line2),0 28px 56px -20px rgba(var(--shd),.5)}
.sh-dlgh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 18px;box-shadow:inset 0 -1px 0 var(--sh-line)}
.sh-dlgh b{font:700 15px/1.3 var(--sans);color:var(--ink)}
.sh-dlgc{display:grid;gap:12px;padding:16px 18px;overflow:auto}
.sh-dlgc p{font-size:14px;line-height:1.6;color:var(--ink2)}
.sh-dlgc .inp{height:38px;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line2);font-size:14px}
.sh-dlgc textarea.inp{height:auto;padding:8px 12px;line-height:1.5;resize:vertical}
.sh-dlgc .chk input{accent-color:var(--sh-sel)}
.sh-dlgf{flex:none;display:flex;align-items:center;gap:8px;padding:12px 18px;box-shadow:inset 0 1px 0 var(--sh-line)}
.sh-dlgf .sp{flex:1}
.sh .sh-dlgf .btn{height:36px}
.sh .fld{display:grid;gap:6px;min-width:0}
.sh .fld>span{font:600 12.5px/1.3 var(--sans);color:var(--ink2)}
.sh-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sh-dlgc .sh-note{font-size:12.5px;color:var(--ink3)}
.sh-cfs{display:flex;flex-wrap:wrap;gap:6px}
.sh-cfs label{position:relative;cursor:pointer}
.sh-cfs input{position:absolute;opacity:0;pointer-events:none}
.sh-cfs i{display:grid;place-items:center;min-width:52px;height:30px;padding:0 8px;font:600 12.5px/1 var(--sans);font-style:normal;box-shadow:inset 0 0 0 1px rgba(20,17,46,.12)}
.sh-cfs input:checked+i{box-shadow:inset 0 0 0 2px var(--sh-sel)}
/* find and replace */
.sh-find{position:absolute;top:8px;right:14px;z-index:20;display:grid;gap:6px;width:min(380px,calc(100% - 20px));padding:8px;background:var(--sh-pop);box-shadow:0 0 0 1px var(--sh-line2),0 16px 32px -14px rgba(var(--shd),.4)}
.shf-r{display:flex;align-items:center;gap:4px}
.shf-r .inp{flex:1;min-width:0;height:32px;padding:0 10px;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--sh-line2);font-size:13.5px}
.sh .shf-r .btn{height:32px;padding:0 10px;font-size:12.5px}
.shf-n{flex:none;min-width:42px;font:500 12px/1 var(--sans);color:var(--ink3);text-align:center;font-variant-numeric:tabular-nums}
.shf-rep{display:none}
.sh-find.rep .shf-rep{display:flex}
.shf-o{display:flex;flex-wrap:wrap;gap:4px 14px;padding:2px 2px 0}
.shf-o .chk{gap:6px;font-size:12.5px}
.shf-o .chk input{width:15px;height:15px;accent-color:var(--sh-sel)}
/* a chart held over the grid */
.sh-chart{position:absolute;right:16px;bottom:16px;z-index:15;display:flex;flex-direction:column;width:min(580px,calc(100% - 24px));max-height:calc(100% - 24px);background:var(--sh-pop);box-shadow:0 0 0 1px var(--sh-line2),0 20px 40px -16px rgba(var(--shd),.45)}
.shc-h{flex:none;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;box-shadow:inset 0 -1px 0 var(--sh-line)}
.shc-h b{font:700 13.5px/1 var(--sans);color:var(--ink)}
.shc-h .sp{flex:1}
.shc-k{display:flex;flex-wrap:wrap;box-shadow:inset 0 0 0 1px var(--sh-line2)}
.shc-k button{height:28px;padding:0 9px;font:500 12px/1 var(--sans);color:var(--ink2)}
.shc-k button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
.sh .shc-h .btn{height:30px;padding:0 10px;font-size:12.5px}
.shc-b{min-height:0;overflow:auto;padding:8px;background:#FFFFFF}
.shc-b svg{display:block;width:100%;height:auto}
/* opening, converting, saving */
.sh-busy{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:rgba(255,255,255,.7)}
.sh-busy>div{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--sh-pop,var(--sf2));box-shadow:0 0 0 1px rgba(var(--lnc),.16),0 16px 32px -14px rgba(var(--shd),.4)}
.sh-busy .spin{width:22px;height:22px;margin:0;border-width:3px}
.sh-busy b{font:600 14px/1.3 var(--sans);color:var(--ink)}
/* the start: open, new, the draft not downloaded yet, templates */
.dropz.sh-start{gap:12px}
.sh-start>*{position:relative}
.shs-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.shs-draft{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:640px;padding:10px 14px;background:#FFF8E6;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35);font-size:13.5px;color:var(--ink)}
.shs-draft svg{color:var(--gold)}
.fit .wsf .shs-draft .btn,.shs-draft .btn{height:32px;padding:0 14px}
.shs-tpl{width:min(660px,100%);margin-top:8px}
.shs-tpl>b{display:block;margin-bottom:10px;font:700 11.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.shs-tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shs-t{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;background:var(--sf);box-shadow:inset 0 0 0 1px rgba(var(--lnc),.16);font:600 13.5px/1.3 var(--sans);color:var(--ink);text-align:left;transition:box-shadow .12s}
.shs-t:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.shs-t svg{width:18px;height:18px;color:#6D4AFF}
@keyframes shs-up{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@keyframes shs-fade{from{opacity:0}to{opacity:1}}
/* a narrower window: the drawer over the sheet instead of beside it */
@media (max-width:1100px) and (min-width:760px){
  .sh-dr{position:absolute;left:64px;top:0;bottom:0;box-shadow:inset -1px 0 0 var(--sh-line),16px 0 32px -16px rgba(var(--shd),.35)}
  .sh-cmdk{min-width:0}
  .sh-cmdk span{display:none}
}
/* touch screens: 16px text in the boxes (no zooming in on them) */
@media (pointer:coarse){
  .sh-fin,.sh-nm,.sh-find .inp,.shm-f .inp,.sh-dlgc .inp,.shd-c .inp,.shp-i input{font-size:16px}
}
/* a phone: slimmer bars, the sections in a bar at the foot, each (and every menu, every dialog) a sheet from below */
@media (max-width:759px){
  .sh-top{min-height:46px;gap:4px;padding:0 6px 0 4px}
  .sh-doc{flex:1;min-width:0;max-width:none}
  .sh-qb{flex:none;overflow:visible;padding:0;box-shadow:none}
  .sh-qb>:nth-child(n+3){display:none}
  .sh-cmdk{justify-content:center;width:38px;min-width:0;padding:0;background:none;box-shadow:none}
  .sh-cmdk span,.sh-cmdk kbd{display:none}
  .sh-cmdk svg{width:18px;height:18px}
  .sh .sh-save span{display:none}
  .sh .sh-save{padding:0 10px}
  .sh-savedd{display:none}
  .sh-rail{display:none}
  .sh-dr{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:81;width:auto;max-height:66vh;box-shadow:0 -14px 36px -14px rgba(var(--shd),.4);animation:shs-up .22s cubic-bezier(.2,.8,.2,1)}
  .shd-h{position:relative;padding-top:8px}
  .shd-h::before{content:"";position:absolute;left:50%;top:5px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(var(--lnc),.18)}
  .shd-c{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .shd-scrim{display:block;position:fixed;inset:0;z-index:80;background:rgba(15,12,41,.12);animation:shs-fade .2s}
  .shd-t{min-height:44px;font-size:14px}
  .shd-ib{width:44px;height:42px}
  .shd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-nm{width:70px}
  .sh-fxi{display:none}
  .sh-fin{height:36px;min-height:36px;line-height:22px}
  .sh-ft{min-height:32px}
  .sh-tabs{max-width:56%}
  .sh-zm,.sh-st2{display:none}
  .sh-st{gap:10px;padding:0 8px}
  .sh-mb{flex:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom);background:var(--sf);box-shadow:inset 0 1px 0 var(--sh-line)}
  .sh-mb button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;padding:6px 0;font:500 10.5px/1.1 var(--sans);color:var(--ink2)}
  .sh-mb button span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .sh-mb button:active{background:var(--sh-hover)}
  .sh-mb button[aria-pressed="true"]{color:var(--sh-sel)}
  .sh-mb [data-sec="tools"] svg{color:var(--sh-sel)}
  .sh-mb svg{width:20px;height:20px}
  .sh-menu.sheet{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:83;width:auto;min-width:0;max-width:none;max-height:72vh;padding:10px 0 calc(12px + env(safe-area-inset-bottom));box-shadow:0 -12px 32px -12px rgba(var(--shd),.35);animation:shs-up .22s cubic-bezier(.2,.8,.2,1)}
  .sh-menu.sheet::before{content:"";display:block;width:40px;height:4px;margin:0 auto 8px;border-radius:2px;background:rgba(var(--lnc),.18)}
  .sh-menu.sheet .shm-i{min-height:46px;font-size:15px}
  .sh-menu.sheet .shm-cg{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
  .sh-menu.sheet .shm-cg button{width:auto;height:auto;aspect-ratio:1}
  .sh-menu.sheet .shm-g{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px;padding:6px 12px}
  .sh-menu.sheet .shm-g button{height:46px}
  .sh-menu.sheet.shm-filter{width:auto}
  .sh-scrim{position:fixed;inset:0;z-index:82;background:rgba(15,12,41,.32);animation:shs-fade .2s}
  .sh-dlg{position:fixed;z-index:84;place-items:end stretch;padding:0}
  .sh-dlgb{width:100%;max-height:88%;animation:shs-up .22s cubic-bezier(.2,.8,.2,1)}
  .sh-find{top:6px;right:6px;left:6px;width:auto}
  .sh-chart{left:8px;right:8px;bottom:8px;width:auto}
  .sh-pal{position:fixed;z-index:85;padding:10px 8px}
  .shs-tl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf [data-edit] span{display:none}
  .rf [data-edit]{padding:0 11px}
}
/* a result's "Edit online" (app.js editBtn): beside its download */
.rf [data-edit]{flex:none}
/* a phone on its side: the site's header steps aside while a workbook fills the screen, and every bar is slimmer */
@media (orientation:landscape) and (max-height:520px){
  html.wsfull.shopen .hd{display:none}
  html.wsfull.shopen .fit .wsb{display:none}
  html.wsfull.shopen .sh-unfull{display:grid}
  .sh-top{min-height:40px}
  .sh-b{height:28px}
  .sh .sh-save,.sh-savedd,.sh-cmdk{height:30px}
  .sh-rail{width:48px}
  .sh-rail button{min-height:40px}
  .sh-rail button span{display:none}
  .sh-dr{width:284px}
  @media (max-width:1100px) and (min-width:760px){ .sh-dr{left:48px} }
  .sh-fx{min-height:30px}
  .sh-fin{height:30px;min-height:30px;padding:4px 10px;line-height:22px}
  .sh-ft{min-height:28px}
  .sh-mb button{min-height:38px;flex-direction:row;gap:6px;font-size:11.5px}
  .sh-mb svg{width:17px;height:17px}
  .sh-menu.sheet,.sh-dr{max-height:86vh}
}
/* the browser's own full screen: the window alone, edge to edge */
.wsf:fullscreen{width:100%;height:100%;background:var(--sf)}
.wsf:fullscreen>.app{flex:1;min-height:0}
/* lights off: a dark grid; the text colours stay readable (app-sheet.js inkOn) */
html[data-theme="dark"] .sh{--sh-cell:#16132F;--sh-grid:rgba(226,224,255,.08);--sh-hd:#1B1839;--sh-hdt:#8F8BB0;--sh-hds:#2A2352;--sh-hdst:#D9D0FF;--sh-hdl:rgba(226,224,255,.10);
  --sh-sel:#A38FFF;--sh-selbg:rgba(163,143,255,.15);--sh-frz:#4B4775;--sh-btn:#221E45;--sh-btnl:#3A3566;--sh-inkl:#ECEAF8;--sh-on:rgba(163,143,255,.17);--sh-ont:#D9D0FF;--sh-tint:rgba(163,143,255,.10)}
html[data-theme="dark"] .sh-pick select,html[data-theme="dark"] .shd-pick select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239591B7' stroke-width='1.5'/%3E%3C/svg%3E")}
html[data-theme="dark"] .sh-doci{background:#2E2A78;color:#FFD166}
html[data-theme="dark"] .sh-savedd:hover{background:#fff}
html[data-theme="dark"] .shs-draft{background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(255,209,102,.25)}
html[data-theme="dark"] .shs-t svg{color:#A38FFF}
html[data-theme="dark"] .sh-busy{background:rgba(12,10,35,.6)}
html[data-theme="dark"] .sh-dlg,html[data-theme="dark"] .sh-pal{background:rgba(0,0,0,.45)}
html[data-theme="dark"] .shm-cg button,html[data-theme="dark"] .shd-sw button,html[data-theme="dark"] .sh-cfs i,html[data-theme="dark"] .shd-cfr i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
html[data-theme="dark"] .shd-ib.on{box-shadow:inset 0 0 0 1px rgba(163,143,255,.4)}
/* ================= 2026-09-30 the online image editor (tool photo-editor, app-photo.js) =================
   Our own layout (the visitor's direction: one window for everything, no desktop suite's look, nothing taken from anyone
   else's product): the picture, its size and what is left to save along the top, with undo, compare, zoom, "find a tool"
   and Export; the sections in a rail at the left, each opening its controls beside the picture; the picture on a quiet
   stage; the pictures open and the steps done to this one at the foot. A phone: the picture on top, the sections in a bar
   at the foot, their controls below the picture (never over it). Square and flat like every workspace window. */
.app[data-kind="photo"]{position:relative}
.app.pxapp{padding:0;overflow:hidden}
.fit .wsf>.app.pxapp{overflow:hidden}
main:not(.fit) .app.pxapp{display:flex;flex-direction:column;height:min(82vh,820px)}
.px{--px-line:rgba(var(--lnc),.10);--px-line2:rgba(var(--lnc),.16);--px-hover:rgba(var(--lnc),.05);--px-sel:#6D4AFF;--px-on:rgba(109,74,255,.11);--px-ont:#4B2FD6;
  --px-tint:rgba(109,74,255,.06);--px-hd:#F8F7FB;--px-pop:var(--sf2);--px-stage:#ECEBF2;
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--sf);color:var(--ink)}
/* ---- the top ---- */
.px-top{flex:none;display:flex;align-items:center;gap:6px;min-height:50px;padding:0 10px 0 6px;background:var(--sf);box-shadow:inset 0 -1px 0 var(--px-line)}
.px-doc{flex:none;display:flex;align-items:center;gap:9px;max-width:250px;height:40px;padding:0 8px 0 4px;text-align:left;transition:background .1s}
.px-doc:hover{background:var(--px-hover)}
.px-doci{flex:none;width:32px;height:32px;overflow:hidden;background:var(--px-hd);box-shadow:inset 0 0 0 1px var(--px-line2)}
.px-doci img{display:block;width:100%;height:100%;object-fit:cover}
.px-doct{display:grid;min-width:0}
.px-doct b{overflow:hidden;font:600 13.5px/1.25 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.px-doct small{overflow:hidden;font:500 11px/1.25 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.px.dirty .px-doct small::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--amber);vertical-align:1px}
.px-dd{display:block;width:0;height:0;border:3.5px solid transparent;border-top:4px solid currentColor;border-bottom:0;opacity:.55}
.px-tb{flex:1;min-width:0;display:flex;align-items:center;gap:1px;padding:0 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-shadow:inset 1px 0 0 var(--px-line)}
.px-tb::-webkit-scrollbar{display:none}
.px-b{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 6px;color:var(--ink2);font:500 13px/1 var(--sans);white-space:nowrap;transition:background .1s,color .1s}
.px-b:hover{background:var(--px-hover);color:var(--ink)}
.px-b:disabled{opacity:.32;cursor:default;background:none}
.px-b svg{width:17px;height:17px}
.px-b[aria-pressed="true"]{background:var(--px-on);color:var(--px-ont)}
.px-cmp{padding:0 10px}
.px-zv{min-width:52px;font-size:12.5px;font-variant-numeric:tabular-nums}
.px-sep{flex:none;width:1px;height:20px;margin:0 6px;background:var(--px-line2)}
.px-cmdk{flex:none;display:flex;align-items:center;gap:8px;min-width:170px;height:34px;padding:0 6px 0 10px;background:var(--px-hd);box-shadow:inset 0 0 0 1px var(--px-line);font:500 13px/1 var(--sans);color:var(--ink3);transition:box-shadow .12s,color .12s}
.px-cmdk:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--px-line2)}
.px-cmdk svg{width:15px;height:15px}
.px-cmdk kbd{margin-left:auto;padding:4px 6px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--px-line2);font:500 10.5px/1 var(--sans);color:var(--ink3)}
.px .px-save{flex:none;height:34px;gap:7px;padding:0 16px;font-size:13px}
.px .px-save svg{width:15px;height:15px}
.px-unfull{display:none}
/* ---- the middle: the rail, its drawer, the stage ---- */
.px-mid{position:relative;flex:1;min-height:0;display:flex}
.px-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.px-rail{flex:none;display:flex;flex-direction:column;width:66px;padding:4px 0;overflow-y:auto;scrollbar-width:none;background:var(--px-hd);box-shadow:inset -1px 0 0 var(--px-line)}
.px-rail::-webkit-scrollbar{display:none}
.px-rail button{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;padding:6px 2px;font:500 11px/1.15 var(--sans);color:var(--ink2);text-align:center;transition:background .1s,color .1s}
.px-rail button:hover{background:var(--px-hover);color:var(--ink)}
.px-rail button[aria-pressed="true"]{background:var(--sf);color:var(--ink);font-weight:600}
.px-rail button[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;background:var(--px-sel)}
.px-rail svg{width:20px;height:20px}
.px-rail [data-sec="smart"] svg,.px-rail [data-sec="id"] svg{color:var(--px-sel)}
.px-dr{position:relative;z-index:6;flex:none;display:flex;flex-direction:column;width:318px;min-height:0;background:var(--sf);box-shadow:inset -1px 0 0 var(--px-line),6px 0 18px -14px rgba(var(--shd),.3);animation:pxd-in .16s ease-out}
.px-dr[hidden]{display:none}
@keyframes pxd-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.pxd-h{flex:none;display:flex;align-items:center;gap:2px;min-height:46px;padding:0 6px 0 14px;box-shadow:inset 0 -1px 0 var(--px-line)}
.pxd-h b{flex:1;min-width:0;overflow:hidden;font:700 14.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.pxd-h [data-drback]:not([hidden]){margin-left:-8px}
.pxd-c{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 0 18px;scrollbar-width:thin}
.pxd-s{padding:12px 14px 14px;box-shadow:inset 0 -1px 0 var(--px-line)}
.pxd-s:last-child{box-shadow:none}
.pxd-s h4{margin:0 0 10px;font:700 11px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.pxd-note{margin:0 0 10px;font:12.5px/1.55 var(--sans);color:var(--ink3)}
.pxd-s>.pxd-note:last-child{margin-bottom:0}
.pxd-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:8px}
.pxd-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pxd-tiles:last-child{margin-bottom:0}
.pxd-t{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 10px;text-align:left;font:500 13px/1.3 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--px-line);transition:background .1s,box-shadow .1s}
.pxd-t:hover{background:var(--px-hover);box-shadow:inset 0 0 0 1px var(--px-line2)}
.pxd-t.on{background:var(--px-on);color:var(--px-ont);box-shadow:inset 0 0 0 1.5px var(--px-sel)}
.pxd-t svg{flex:none;width:17px;height:17px;color:var(--ink2)}
.pxd-t.on svg{color:var(--px-sel)}
.pxd-t span{min-width:0}
.pxd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pxd-chips:last-child{margin-bottom:0}
.pxd-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;font:500 12.5px/1 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--px-line2);transition:background .1s,color .1s;cursor:pointer}
.pxd-chip:hover{background:var(--px-hover);color:var(--ink)}
.pxd-chip.on,.pxd-chip:has(input:checked){background:var(--solid);color:var(--on-solid);box-shadow:none}
.pxd-chip input{position:absolute;opacity:0;pointer-events:none}
/* a slider: its name and value above, the track below; a double click puts it back */
.pxd-sl{margin-bottom:10px}
.pxd-sl:last-child{margin-bottom:0}
.pxd-sl label{display:flex;align-items:center;gap:6px;margin-bottom:2px;font:500 12.5px/1.2 var(--sans);color:var(--ink2)}
.pxd-sl label span{flex:1;min-width:0}
.pxd-n{width:58px;height:24px;padding:0 6px;border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px transparent;font:600 12.5px/1 var(--sans);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.pxd-n::-webkit-inner-spin-button,.pxd-n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pxd-n:hover,.pxd-n:focus{box-shadow:inset 0 0 0 1px var(--px-line2);outline:0}
.pxd-sl em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.pxd-sl input[type=range]{display:block;width:100%;height:22px;margin:0;accent-color:var(--px-sel);cursor:pointer}
/* colours */
.pxd-sw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-bottom:8px}
.pxd-sw button{aspect-ratio:1;box-shadow:inset 0 0 0 1px rgba(20,17,46,.14);transition:transform .08s}
.pxd-sw button:hover{position:relative;z-index:1;transform:scale(1.12)}
.pxd-sw button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--px-sel)}
.pxd-sw .pxd-none{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:4px;aspect-ratio:auto;padding:0 4px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--px-line2);font:500 11.5px/1 var(--sans);color:var(--ink2)}
.pxd-sw .pxd-none:hover{transform:none}
.pxd-sw .pxd-none.on{box-shadow:inset 0 0 0 1.5px var(--px-sel);color:var(--px-ont)}
.pxd-more{grid-column:span 2;display:flex;align-items:center;gap:6px;font:500 11.5px/1 var(--sans);color:var(--ink2);cursor:pointer}
.pxd-more input{flex:none;width:26px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.pxd-more span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pxd-tg{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font:13px/1.45 var(--sans);color:var(--ink);cursor:pointer}
.pxd-tg input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--px-sel)}
.pxd-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;padding:7px 10px;background:var(--px-hd);font:12.5px/1.3 var(--sans);color:var(--ink3)}
.pxd-kv b{font:600 12.5px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.px .pxd-go{width:100%;height:42px;gap:8px;margin-bottom:8px}
.pxd-list{display:grid;gap:4px;max-height:280px;overflow:auto;scrollbar-width:thin}
.pxd-li{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:7px 10px;text-align:left;box-shadow:inset 0 0 0 1px var(--px-line);transition:background .1s,box-shadow .1s}
.pxd-li.two{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.pxd-li.two small{flex:initial}
.pxd-li:hover{background:var(--px-hover)}
.pxd-li.on{background:var(--px-on);box-shadow:inset 0 0 0 1.5px var(--px-sel)}
.pxd-li b{min-width:0;font:600 13px/1.3 var(--sans);color:var(--ink)}
.pxd-li small{flex:none;font:500 11.5px/1.3 var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums}
.pxd-ai{justify-content:flex-start}
.pxd-ai>svg{flex:none;width:18px;height:18px;color:var(--px-sel)}
.pxd-ai span{display:grid;min-width:0}
.pxd-ai small{text-align:left}
.pxd-ai:disabled{cursor:default;background:none}
.pxd-ai.later b{color:var(--ink3)}
.pxd-ai.later>svg{color:var(--ink4)}
.pxd-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.pxd-c .fld{display:grid;gap:5px;min-width:0}
.pxd-c .fld>span{font:600 12px/1.3 var(--sans);color:var(--ink2)}
.pxd-c .inp{height:34px;padding:0 10px;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--px-line2);font-size:13.5px}
.pxd-c .inp:disabled{background:var(--px-hd);color:var(--ink3)}
.pxd-ta{width:100%;height:auto!important;min-height:64px;padding:8px 10px!important;line-height:1.5;resize:vertical;margin-bottom:8px}
.pxd-pick select{width:100%;height:34px;padding:0 24px 0 10px;border:0;border-radius:0;background:var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2377738E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 7px center/11px;box-shadow:inset 0 0 0 1px var(--px-line2);font:500 13px/1 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer}
.pxd-row{display:flex;gap:2px}
.pxd-ib{flex:1;display:grid;place-items:center;min-width:0;height:34px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--px-line)}
.pxd-ib:hover{background:var(--px-hover);color:var(--ink)}
.pxd-ib.on{background:var(--px-on);color:var(--px-ont);box-shadow:inset 0 0 0 1px rgba(109,74,255,.35)}
.pxd-ib svg{width:17px;height:17px}
.px .pxd-add{height:32px;margin-bottom:8px;padding:0 12px;font-size:12.5px}
/* the filters: each a small picture of this one */
.pxd-flts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pxd-flt{display:grid;gap:5px;padding:4px;text-align:center;font:500 12px/1.2 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--px-line);transition:box-shadow .1s}
.pxd-flt canvas{display:block;width:100%;height:72px;object-fit:cover;background:var(--px-hd)}
.pxd-flt:hover{box-shadow:inset 0 0 0 1px var(--px-line2);color:var(--ink)}
.pxd-flt.on{box-shadow:inset 0 0 0 2px var(--px-sel);color:var(--px-ont);font-weight:600}
/* the marks' tools, where a watermark goes */
.pxd-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.pxd-tool{display:grid;justify-items:center;gap:4px;padding:8px 2px 6px;font:500 11.5px/1.15 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--px-line)}
.pxd-tool svg{width:18px;height:18px}
.pxd-tool:hover{background:var(--px-hover);color:var(--ink)}
.pxd-tool.on{background:var(--px-on);color:var(--px-ont);box-shadow:inset 0 0 0 1.5px var(--px-sel)}
.pxd-pos{display:grid;grid-template-columns:repeat(3,40px);gap:4px;margin-bottom:8px}
.pxd-pos button{display:grid;place-items:center;height:30px;box-shadow:inset 0 0 0 1px var(--px-line2)}
.pxd-pos button i{width:8px;height:8px;background:var(--ink4)}
.pxd-pos button:hover{background:var(--px-hover)}
.pxd-pos button.on{background:var(--px-on);box-shadow:inset 0 0 0 1.5px var(--px-sel)}
.pxd-pos button.on i{background:var(--px-sel)}
.pxd-finds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;margin-bottom:8px}
/* the export's result: how big the file will be */
.pxd-xres{background:var(--px-tint)}
.pxd-res{display:grid;gap:3px;min-height:58px;font:500 12.5px/1.45 var(--sans);color:var(--ink3)}
.pxd-res b{font:700 22px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.pxd-res span{font-variant-numeric:tabular-nums;color:var(--ink2)}
.pxd-res em{font-style:normal;font-weight:600}
.pxd-res em.ok{color:var(--ok)}
.pxd-res em.bad{color:var(--red,#E5484D)}
.pxd-res small{font-size:12px;color:var(--ink3)}
.pxd-scrim{display:none}
/* ---- the stage ---- */
.px-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--px-stage);outline:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:grab}
.px-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.px-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 12px;background:rgba(20,17,46,.78);font:500 12.5px/1.3 var(--sans);color:#FFFFFF;pointer-events:none}
/* ---- the foot: the pictures open, the steps done to this one, the zoom ---- */
.px-ft{flex:none;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 10px 0 8px;background:var(--sf);box-shadow:inset 0 1px 0 var(--px-line)}
.px-docs{flex:none;display:flex;align-items:center;gap:6px;max-width:42%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:4px 0}
.px-docs::-webkit-scrollbar{display:none}
.px-dt{position:relative;flex:none;width:36px;height:36px;padding:0;background:var(--px-hd);box-shadow:inset 0 0 0 1px var(--px-line2)}
.px-dt img{display:block;width:100%;height:100%;object-fit:cover;opacity:.75}
.px-dt.on{box-shadow:0 0 0 2px var(--px-sel)}
.px-dt.on img,.px-dt:hover img{opacity:1}
.px-dx{position:absolute;right:-5px;top:-5px;display:none;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--sf)}
.px-dx svg{width:9px;height:9px}
.px.many .px-dt:hover .px-dx,.px.many .px-dt.on .px-dx{display:grid}
.px-dadd{flex:none;display:grid;place-items:center;width:36px;height:36px;color:var(--ink3);box-shadow:inset 0 0 0 1px var(--px-line2)}
.px-dadd:hover{color:var(--px-sel);box-shadow:inset 0 0 0 1px var(--px-sel)}
.px-dall{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;font:600 12px/1 var(--sans);color:var(--px-ont);background:var(--px-on)}
.px-dall svg{width:14px;height:14px}
.px-steps{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-left:10px;box-shadow:inset 1px 0 0 var(--px-line)}
.px-steps::-webkit-scrollbar{display:none}
.px-step{flex:none;display:flex;align-items:stretch;height:28px;box-shadow:inset 0 0 0 1px var(--px-line2)}
.px-step>button:first-child{padding:0 4px 0 10px;font:500 12px/1 var(--sans);color:var(--ink);white-space:nowrap}
.px-step>button:first-child:hover{color:var(--px-ont)}
.px-stx{display:grid;place-items:center;width:22px;color:var(--ink4)}
.px-stx:hover{color:var(--red,#E5484D)}
.px-stx svg{width:10px;height:10px}
.px-arrow{flex:none;font-style:normal;font-size:13px;color:var(--ink4)}
.px-nosteps{font:500 12.5px/1 var(--sans);color:var(--ink3);white-space:nowrap}
.px-zm{flex:none;display:flex;align-items:center}
.px input.px-zr{width:110px;accent-color:var(--px-sel)}
.px-mb{display:none}
/* ---- menus, find a tool, dialogs, the busy veil ---- */
.px-menu{position:absolute;z-index:30;min-width:220px;max-width:min(360px,calc(100% - 12px));max-height:min(70vh,520px);overflow:auto;padding:6px 0;background:var(--px-pop);box-shadow:0 0 0 1px var(--px-line2),0 18px 36px -16px rgba(var(--shd),.4);scrollbar-width:thin}
.px-menu hr{height:1px;margin:5px 0;border:0;background:var(--px-line)}
.pxm-i{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 14px;text-align:left;font:500 13.5px/1.3 var(--sans);color:var(--ink)}
.pxm-i:hover{background:var(--px-on)}
.pxm-i.on{font-weight:700;color:var(--px-ont)}
.pxm-i svg{flex:none;width:15px;height:15px;color:var(--ink3)}
.pxm-i kbd{margin-left:auto;padding-left:12px;font:500 11.5px/1 var(--sans);color:var(--ink4)}
.pxm-sp{flex:none;width:15px}
.pxm-t{display:block;padding:9px 14px 5px;overflow:hidden;font:600 11.5px/1.3 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.px-mscrim{position:fixed;inset:0;z-index:29;background:rgba(15,12,41,.28)}
.px-pal{position:absolute;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 16px;background:rgba(15,12,41,.22);animation:shs-fade .12s}
.pxp-b{display:flex;flex-direction:column;width:min(540px,100%);max-height:min(72vh,540px);background:var(--px-pop);box-shadow:0 0 0 1px var(--px-line2),0 30px 60px -20px rgba(var(--shd),.5)}
.pxp-i{flex:none;display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;box-shadow:inset 0 -1px 0 var(--px-line);color:var(--ink3)}
.pxp-i input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:500 15.5px/1 var(--sans);color:var(--ink)}
.pxp-i kbd{padding:4px 6px;box-shadow:inset 0 0 0 1px var(--px-line2);font:500 10.5px/1 var(--sans);color:var(--ink3)}
.pxp-l{overflow:auto;padding:6px 0}
.pxp-l button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;text-align:left;font:500 14px/1.3 var(--sans);color:var(--ink)}
.pxp-l button svg{flex:none;width:16px;height:16px;color:var(--ink3)}
.pxp-l button.on,.pxp-l button:hover{background:var(--px-on)}
.pxp-l button.on svg{color:var(--px-sel)}
.pxp-none{padding:18px 16px;font-size:13.5px;color:var(--ink3)}
.px-dlg{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(15,12,41,.28)}
.px-dlgb{display:flex;flex-direction:column;width:min(440px,100%);max-height:100%;margin:0;background:var(--px-pop,var(--sf2));box-shadow:0 0 0 1px var(--px-line2,rgba(var(--lnc),.16)),0 28px 56px -20px rgba(var(--shd),.5)}
.px-dlgh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 18px;box-shadow:inset 0 -1px 0 rgba(var(--lnc),.10)}
.px-dlgh b{font:700 15px/1.3 var(--sans);color:var(--ink)}
.px-dlgc{display:grid;gap:12px;padding:16px 18px;overflow:auto}
.px-dlgc p{font-size:14px;line-height:1.6;color:var(--ink2)}
.px-dlgc .pxd-note{font-size:13px}
.px-dlgf{flex:none;display:flex;align-items:center;gap:8px;padding:12px 18px;box-shadow:inset 0 1px 0 rgba(var(--lnc),.10)}
.px-dlgf .sp{flex:1}
.px-busy{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:rgba(255,255,255,.7)}
.px-busy>div{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--sf2);box-shadow:0 0 0 1px rgba(var(--lnc),.16),0 16px 32px -14px rgba(var(--shd),.4)}
.px-busy .spin{width:22px;height:22px;margin:0;border-width:3px}
.px-busy b{font:600 14px/1.3 var(--sans);color:var(--ink)}
/* ---- the start: open, a photo, a sample, the work left last time ---- */
.dropz.px-start{gap:12px}
.px-start>*{position:relative}
.px-sbtn{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.px-draft{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:640px;padding:10px 14px;background:#FFF8E6;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35);font-size:13.5px;color:var(--ink)}
.px-draft[hidden]{display:none}
.px-draft>span{display:flex;align-items:center;gap:8px}
.px-draft small{color:var(--ink3)}
.px-draft svg{color:var(--gold)}
.px-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px;max-width:620px;margin:6px 0 0;padding:0;list-style:none}
.px-feats li{display:flex;align-items:center;gap:8px;font:500 13px/1.35 var(--sans);color:var(--ink2);text-align:left}
.px-feats svg{flex:none;width:16px;height:16px;color:#6D4AFF}
/* ---- 2026-09-30 second round: cutting out, mending, layers, several pictures, the colour picker, free transform, the keyboard ---- */
.px-rail button{min-height:48px}
.px-rail.more:not(.at-end){-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
.pxd-tools.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.pxd-tools.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pxd-tools.five .pxd-tool{font-size:11px}
.pxd-tools+*{margin-top:12px}
.pxd-sw .pxd-pickc{display:grid;place-items:center;aspect-ratio:auto;min-height:24px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--px-line2);color:var(--ink2)}
.pxd-sw .pxd-pickc:hover{transform:none;color:var(--px-ont)}
.pxd-sw .pxd-pickc.on{background:var(--px-on);box-shadow:inset 0 0 0 1.5px var(--px-sel);color:var(--px-ont)}
.pxd-sw .pxd-pickc svg{width:15px;height:15px}
.pxd-emoji{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.pxd-emoji button{display:grid;place-items:center;aspect-ratio:1;font:22px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;transition:background .1s,transform .08s}
.pxd-emoji button:hover{background:var(--px-hover);transform:scale(1.12)}
.pxd-layers{display:grid;gap:3px;max-height:300px;overflow:auto;scrollbar-width:thin}
.pxd-lr{display:flex;align-items:center;gap:0;padding-right:2px;box-shadow:inset 0 0 0 1px var(--px-line)}
.pxd-lr.on{background:var(--px-on);box-shadow:inset 0 0 0 1.5px var(--px-sel)}
.pxd-lr.off .pxd-lrp{opacity:.45}
.pxd-lrp{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px;text-align:left;font:500 13px/1.3 var(--sans);color:var(--ink)}
.pxd-lrp svg{flex:none;width:15px;height:15px;color:var(--ink3)}
.pxd-lrp span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pxd-lr .px-b{min-width:30px;height:30px;padding:0}
.pxd-order{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pxd-oi{flex:none;position:relative;display:grid;grid-template-columns:1fr 1fr;width:76px;padding:4px;box-shadow:inset 0 0 0 1px var(--px-line)}
.pxd-oi.on{box-shadow:inset 0 0 0 1.5px var(--px-sel)}
.pxd-oi img{grid-column:1/-1;width:100%;height:50px;object-fit:cover;background:var(--px-stage)}
.pxd-oi>span{position:absolute;left:4px;top:4px;min-width:18px;padding:2px 4px;background:rgba(20,17,46,.72);font:600 11px/1.2 var(--sans);color:#FFFFFF;text-align:center}
.pxd-oi .px-b{min-width:0;height:26px}
.pxd-oi .px-b:disabled{opacity:.3}
.pxd-cols{display:grid;gap:4px}
.pxd-cols button{display:flex;align-items:center;gap:10px;padding:6px 8px;text-align:left;box-shadow:inset 0 0 0 1px var(--px-line)}
.pxd-cols button:hover{background:var(--px-hover)}
.pxd-cols i{flex:none;width:30px;height:30px;box-shadow:inset 0 0 0 1px rgba(20,17,46,.14)}
.pxd-cols b{flex:1;font:600 13px/1 ui-monospace,Consolas,monospace;color:var(--ink)}
.pxd-cols small{font:500 12px/1 var(--sans);color:var(--ink3)}
.pxd-read{width:100%;font:13px/1.55 ui-monospace,Consolas,monospace;resize:vertical}
.pxd-note.warn{color:#B45309}
.pxd-t:disabled{cursor:default;background:none;color:var(--ink3)}
.pxd-t:disabled svg{color:var(--ink4)}
.pxd-t:disabled:hover{background:none}
.px.picking .px-stage{cursor:crosshair}
.px-bubble{position:absolute;z-index:35;width:214px;padding:8px;background:var(--px-pop);box-shadow:0 0 0 1px var(--px-line2),0 18px 36px -16px rgba(var(--shd),.45)}
.pxb-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pxb-h i{flex:none;width:28px;height:28px;box-shadow:inset 0 0 0 1px rgba(20,17,46,.15)}
.pxb-h b{flex:1;font:700 14px/1 ui-monospace,Consolas,monospace;color:var(--ink)}
.pxb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:6px 8px;font:500 12px/1.2 ui-monospace,Consolas,monospace;color:var(--ink2);text-align:left}
.pxb-row:hover,.pxb-more:hover{background:var(--px-on);color:var(--px-ont)}
.pxb-row svg{flex:none;width:13px;height:13px;color:var(--ink3)}
.pxb-more{display:flex;align-items:center;gap:8px;width:100%;margin-top:4px;padding:8px;font:600 12.5px/1 var(--sans);color:var(--ink);box-shadow:inset 0 1px 0 var(--px-line)}
.pxb-more svg{width:14px;height:14px;color:var(--px-sel)}
.px-xfbar{position:absolute;right:10px;top:10px;z-index:6;display:flex;align-items:center;gap:8px;max-width:calc(100% - 16px);padding:5px 6px 5px 12px;background:var(--px-pop);box-shadow:0 0 0 1px var(--px-line2),0 10px 24px -12px rgba(var(--shd),.4);font:500 13px/1 var(--sans);color:var(--ink2);white-space:nowrap}
.px-xfbar>svg{flex:none;width:15px;height:15px;color:var(--px-sel)}
.px-xfbar b{font-variant-numeric:tabular-nums;color:var(--ink)}
.px .px-xfbar .btn{height:30px;gap:6px;padding:0 12px;font-size:12.5px}
.px-dlgb:has(.px-keys){width:min(700px,100%)}
.px-keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.px-keys h5{margin:0 0 4px;font:700 12px/1.3 var(--sans);color:var(--ink3)}
.px-keys div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;color:var(--ink2);box-shadow:inset 0 -1px 0 var(--px-line)}
.px-keys kbd{flex:none;padding:3px 6px;background:var(--px-hover);box-shadow:inset 0 0 0 1px var(--px-line2);font:600 11.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
/* a narrower window: the drawer over the stage */
@media (max-width:1100px) and (min-width:760px){
  .px-dr{position:absolute;left:66px;top:0;bottom:0;box-shadow:inset -1px 0 0 var(--px-line),16px 0 32px -16px rgba(var(--shd),.35)}
  .px-cmdk{min-width:0}
  .px-cmdk span,.px-cmdk kbd{display:none}
  .px-cmp span{display:none}
}
@media (pointer:coarse){ .pxd-c .inp,.pxp-i input,.px-dlgc .inp,.pxd-ta{font-size:16px} }
/* a phone: the picture on top, its controls under it (never over it), the sections in a bar at the foot */
@media (max-width:759px){
  .px-top{min-height:46px;gap:2px;padding:0 6px 0 4px}
  .px-doc{flex:1;min-width:0;max-width:none;gap:7px}
  .px-doci{width:28px;height:28px}
  .px-tb{flex:none;padding:0;box-shadow:none}
  .px-tb>:nth-child(n+4):not(.px-cmp){display:none}
  .px-tb .px-hist,.px-tb .px-sep{display:none}
  .px-cmp span{display:none}
  .px-cmdk{justify-content:center;width:36px;min-width:0;padding:0;background:none;box-shadow:none}
  .px-cmdk span,.px-cmdk kbd{display:none}
  .px .px-save span{display:none}
  .px .px-save{padding:0 11px}
  .px-rail{display:none}
  .px-mid{flex-direction:column}
  .px-main{order:1}
  .px-dr{order:2;width:auto;max-height:46vh;box-shadow:0 -10px 24px -18px rgba(var(--shd),.45),inset 0 1px 0 var(--px-line);animation:pxs-up .2s cubic-bezier(.2,.8,.2,1)}
  .pxd-h{min-height:42px}
  .pxd-c{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .pxd-t{min-height:44px;font-size:14px}
  .pxd-flts{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .pxd-flt canvas{height:58px}
  .pxd-sw{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  .pxd-sl input[type=range]{height:30px}
  .px-ft{min-height:40px;gap:6px;padding:0 6px}
  .px-steps,.px-zm{display:none}
  .px-docs{max-width:none;flex:1}
  .px-dr:not([hidden])~.px-main .px-ft,.dr-on .px-ft{display:none}
  .px-mb{flex:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom);background:var(--sf);box-shadow:inset 0 1px 0 var(--px-line)}
  .px-mb button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;padding:6px 0;font:500 10.5px/1.1 var(--sans);color:var(--ink2)}
  .px-mb button span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .px-mb button[aria-pressed="true"]{color:var(--px-sel)}
  .px-mb svg{width:20px;height:20px}
  .px-menu.sheet{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:83;width:auto;min-width:0;max-width:none;max-height:72vh;padding:10px 0 calc(12px + env(safe-area-inset-bottom));animation:pxs-up .22s cubic-bezier(.2,.8,.2,1)}
  .px-menu.sheet .pxm-i{min-height:46px;font-size:15px}
  .px-mscrim{z-index:82}
  .px-dlg,.px-pal{position:fixed;z-index:84}
  .px-dlg{place-items:end stretch;padding:0}
  .px-dlgb{width:100%;max-height:88%;animation:pxs-up .22s cubic-bezier(.2,.8,.2,1)}
  .px-pal{padding:10px 8px}
  .px-feats{grid-template-columns:minmax(0,1fr)}
  .px-keys{grid-template-columns:minmax(0,1fr)}
  .pxd-emoji button{font-size:24px}
  .px-bubble{position:fixed;left:8px!important;right:8px;top:auto!important;bottom:calc(64px + env(safe-area-inset-bottom));width:auto}
}
@keyframes pxs-up{from{transform:translateY(30%);opacity:0}to{transform:none;opacity:1}}
/* a phone on its side: the site's header and the window bar step aside, the sections in a slim rail at the left */
@media (orientation:landscape) and (max-height:520px){
  html.wsfull.phopen .hd{display:none}
  html.wsfull.phopen .fit .wsb{display:none}
  html.wsfull.phopen .px-unfull{display:grid}
  .px-top{min-height:42px}
  .px .px-save{height:30px}
  .px-rail{width:50px}
  .px-rail button{min-height:40px}
  .px-rail button span{display:none}
  .px-dr{width:286px}
  @media (max-width:1100px) and (min-width:760px){ .px-dr{left:50px} }
  .pxd-tools.five .pxd-tool{padding:7px 0 5px;font-size:10px}
  .px-ft{min-height:38px}
  .px-dt,.px-dadd{width:30px;height:30px}
}
/* lights off */
html[data-theme="dark"] .px{--px-sel:#A38FFF;--px-on:rgba(163,143,255,.17);--px-ont:#D9D0FF;--px-tint:rgba(163,143,255,.10);--px-hd:#1B1839;--px-stage:#0D0B22}
html[data-theme="dark"] .pxd-pick select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239591B7' stroke-width='1.5'/%3E%3C/svg%3E")}
html[data-theme="dark"] .px-busy{background:rgba(12,10,35,.6)}
html[data-theme="dark"] .px-dlg,html[data-theme="dark"] .px-pal{background:rgba(0,0,0,.45)}
html[data-theme="dark"] .pxd-sw button{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
html[data-theme="dark"] .pxd-sw button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--px-sel)}
html[data-theme="dark"] .px-draft{background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(255,209,102,.25)}
html[data-theme="dark"] .px-feats svg{color:#A38FFF}
html[data-theme="dark"] .pxb-h i,html[data-theme="dark"] .pxd-cols i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html[data-theme="dark"] .pxd-note.warn{color:#FFD166}

/* ================= 2026-09-30 the online document editor (tool word-editor, app-doc.js) =================
   Our own layout (the visitor's direction: one window for the whole job, no office suite's ribbon, icons or menus): the
   document, undo, find, print, "find a tool" and Export along the top; the sections in a rail at the left, each opening
   its controls beside the page; the everyday formatting in one strip over the page; the pages on a quiet desk, drawn
   behind the text (app-doc.js layout: a block that would cross a page's foot moves to the next page); where the caret
   is, the words and the zoom at the foot. A phone: the text as one reading column, the sections in a bar at the foot and
   each a sheet from below, the usual formatting in a strip over the keyboard. Square and flat like every workspace
   window; an ink blue marks what is picked. The page is paper in both themes. */
.app[data-kind="doc"]{position:relative}
.app.dxapp{padding:0;overflow:hidden}
.fit .wsf>.app.dxapp{overflow:hidden}
main:not(.fit) .app.dxapp{display:flex;flex-direction:column;height:min(86vh,900px)}
.dx{--dx-line:rgba(var(--lnc),.10);--dx-line2:rgba(var(--lnc),.16);--dx-hover:rgba(var(--lnc),.05);--dx-acc:#2458E6;--dx-on:rgba(36,88,230,.10);--dx-ont:#1B45B5;
  --dx-tint:rgba(36,88,230,.05);--dx-hd:#F7F8FB;--dx-pop:var(--sf2);--dx-desk:#E7E9EF;
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--sf);color:var(--ink)}
/* ---- the top ---- */
.dx-top{flex:none;display:flex;align-items:center;gap:6px;min-height:50px;padding:0 10px 0 6px;background:var(--sf);box-shadow:inset 0 -1px 0 var(--dx-line)}
.dx-docb{flex:none;display:flex;align-items:center;gap:9px;max-width:270px;height:40px;padding:0 8px 0 4px;text-align:left;transition:background .1s}
.dx-docb:hover{background:var(--dx-hover)}
.dx-doci{flex:none;display:grid;place-items:center;width:32px;height:32px;background:var(--dx-acc);color:#FFFFFF}
.dx-doci svg{width:18px;height:18px}
.dx-doct{display:grid;min-width:0}
.dx-doct b{overflow:hidden;font:600 13.5px/1.25 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.dx-doct small{overflow:hidden;font:500 11px/1.25 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.dx.dirty .dx-doct small::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--amber);vertical-align:1px}
.dx-dd{display:block;flex:none;width:0;height:0;border:3.5px solid transparent;border-top:4px solid currentColor;border-bottom:0;opacity:.55}
.dx-tb{flex:1;min-width:0;display:flex;align-items:center;gap:1px;padding:0 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-shadow:inset 1px 0 0 var(--dx-line)}
.dx-tb::-webkit-scrollbar{display:none}
.dx-b{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 6px;color:var(--ink2);font:500 13px/1 var(--sans);white-space:nowrap;transition:background .1s,color .1s}
.dx-b:hover{background:var(--dx-hover);color:var(--ink)}
.dx-b:disabled{opacity:.32;cursor:default;background:none}
.dx-b svg{width:17px;height:17px}
.dx-sep{flex:none;width:1px;height:20px;margin:0 6px;background:var(--dx-line2)}
.dx-cmdk{flex:none;display:flex;align-items:center;gap:8px;min-width:170px;height:34px;padding:0 6px 0 10px;background:var(--dx-hd);box-shadow:inset 0 0 0 1px var(--dx-line);font:500 13px/1 var(--sans);color:var(--ink3);transition:box-shadow .12s,color .12s}
.dx-cmdk:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--dx-line2)}
.dx-cmdk svg{width:15px;height:15px}
.dx-cmdk kbd{margin-left:auto;padding:4px 6px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line2);font:500 10.5px/1 var(--sans);color:var(--ink3)}
.dx .dx-save{flex:none;height:34px;gap:7px;padding:0 16px;font-size:13px}
.dx .dx-save svg{width:15px;height:15px}
.dx-unfull{display:none}
/* ---- the middle: the rail, its drawer, the page ---- */
.dx-mid{position:relative;flex:1;min-height:0;display:flex}
.dx-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.dx-rail{flex:none;display:flex;flex-direction:column;width:66px;padding:4px 0;overflow-y:auto;scrollbar-width:none;background:var(--dx-hd);box-shadow:inset -1px 0 0 var(--dx-line)}
.dx-rail::-webkit-scrollbar{display:none}
.dx-rail button{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:50px;padding:6px 2px;font:500 11px/1.15 var(--sans);color:var(--ink2);text-align:center;transition:background .1s,color .1s}
.dx-rail button:hover{background:var(--dx-hover);color:var(--ink)}
.dx-rail button[aria-pressed="true"]{background:var(--sf);color:var(--ink);font-weight:600}
.dx-rail button[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;background:var(--dx-acc)}
.dx-rail svg{width:20px;height:20px}
.dx-rail [data-sec="smart"] svg,.dx-rail [data-sec="translate"] svg{color:var(--dx-acc)}
.dx-dr{position:relative;z-index:6;flex:none;display:flex;flex-direction:column;width:320px;min-height:0;background:var(--sf);box-shadow:inset -1px 0 0 var(--dx-line),6px 0 18px -14px rgba(var(--shd),.3);animation:pxd-in .16s ease-out}
.dx-dr[hidden]{display:none}
.dxd-h{flex:none;display:flex;align-items:center;gap:2px;min-height:46px;padding:0 6px 0 14px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.dxd-h b{flex:1;min-width:0;overflow:hidden;font:700 14.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.dxd-h [data-drback]:not([hidden]){margin-left:-8px}
.dxd-c{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 0 18px;scrollbar-width:thin}
.dxd-s{padding:12px 14px 14px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.dxd-s:last-child{box-shadow:none}
.dxd-s h4{margin:0 0 10px;font:700 11px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.dxd-note{margin:0 0 10px;font:12.5px/1.55 var(--sans);color:var(--ink3)}
.dxd-s>.dxd-note:last-child,.dxd-s>:last-child>.dxd-note:last-child{margin-bottom:0}
.dxd-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:8px}
.dxd-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dxd-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.dxd-tiles.four .dxd-t{flex-direction:column;justify-content:center;gap:4px;padding:7px 2px;font-size:11.5px;text-align:center}
.dxd-tiles:last-child{margin-bottom:0}
.dxd-t{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 10px;text-align:left;font:500 13px/1.3 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--dx-line);transition:background .1s,box-shadow .1s}
.dxd-t:hover{background:var(--dx-hover);box-shadow:inset 0 0 0 1px var(--dx-line2)}
.dxd-t.on{background:var(--dx-on);color:var(--dx-ont);box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.dxd-t svg{flex:none;width:17px;height:17px;color:var(--ink2)}
.dxd-t.on svg{color:var(--dx-acc)}
.dxd-t span{min-width:0}
.dxd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dxd-chips:last-child{margin-bottom:0}
.dxd-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 11px;font:500 12.5px/1.2 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line2);transition:background .1s,color .1s;cursor:pointer}
.dxd-chip:hover{background:var(--dx-hover);color:var(--ink)}
.dxd-chip.on{background:var(--solid);color:var(--on-solid);box-shadow:none}
.dxd-sl{margin-bottom:10px}
.dxd-sl:last-child{margin-bottom:0}
.dxd-sl label{display:flex;align-items:center;gap:6px;margin-bottom:2px;font:500 12.5px/1.2 var(--sans);color:var(--ink2)}
.dxd-sl label span{flex:1;min-width:0}
.dxd-n{width:58px;height:24px;padding:0 6px;border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px transparent;font:600 12.5px/1 var(--sans);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.dxd-n::-webkit-inner-spin-button,.dxd-n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dxd-n:hover,.dxd-n:focus{box-shadow:inset 0 0 0 1px var(--dx-line2);outline:0}
.dxd-sl em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.dx input.dxd-r,.dxd-sl input[type=range]{display:block;width:100%;height:22px;margin:0;accent-color:var(--dx-acc);cursor:pointer}
.dxd-sw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-bottom:8px}
.dxd-sw:last-child{margin-bottom:0}
.dxd-sw button{aspect-ratio:1;box-shadow:inset 0 0 0 1px rgba(20,17,46,.14);transition:transform .08s}
.dxd-sw button:hover{position:relative;z-index:1;transform:scale(1.12)}
.dxd-sw button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--dx-acc)}
.dxd-sw .dxd-none{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:4px;aspect-ratio:auto;padding:0 4px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line2);font:500 11.5px/1 var(--sans);color:var(--ink2)}
.dxd-sw .dxd-none:hover{transform:none}
.dxd-sw .dxd-none.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc);color:var(--dx-ont)}
.dxd-more{grid-column:span 2;display:flex;align-items:center;gap:6px;font:500 11.5px/1 var(--sans);color:var(--ink2);cursor:pointer}
.dxd-more input{flex:none;width:26px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.dxd-more span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dxd-tg{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font:13px/1.45 var(--sans);color:var(--ink);cursor:pointer}
.dxd-tg input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--dx-acc)}
.dxd-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px;padding:7px 10px;background:var(--dx-hd);font:12.5px/1.3 var(--sans);color:var(--ink3)}
.dxd-kv b{font:600 13px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.dxd-kv:first-of-type{background:var(--dx-on)}
.dxd-kv:first-of-type b{font-size:17px;color:var(--dx-ont)}
.dx .dxd-go{width:100%;height:42px;gap:8px;margin-bottom:8px}
.dxd-list{display:grid;gap:4px}
.dxd-li{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:7px 10px;text-align:left;box-shadow:inset 0 0 0 1px var(--dx-line);transition:background .1s,box-shadow .1s}
.dxd-li.two{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.dxd-li:hover{background:var(--dx-hover)}
.dxd-li b{min-width:0;font:600 13px/1.3 var(--sans);color:var(--ink)}
.dxd-li small{font:500 11.5px/1.35 var(--sans);color:var(--ink3)}
.dxd-ai{justify-content:flex-start}
.dxd-ai>svg{flex:none;width:18px;height:18px;color:var(--dx-acc)}
.dxd-ai span{display:grid;min-width:0}
.dxd-ai:disabled{cursor:default;background:none}
.dxd-ai.later b{color:var(--ink3)}
.dxd-ai.later>svg{color:var(--ink4)}
.dxd-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.dxd-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
.dx .fld{display:grid;gap:5px;min-width:0;margin-bottom:8px}
.dx .fld>span{font:600 12px/1.3 var(--sans);color:var(--ink2)}
.dx .dxd-c .inp,.dx .dx-dlgc .inp{width:100%;height:34px;padding:0 10px;border:0;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line2);font-size:13.5px;color:var(--ink)}
.dx .dxd-c select.inp{padding-right:24px;background:var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2377738E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 7px center/11px;-webkit-appearance:none;appearance:none;cursor:pointer}
.dx .dxd-c .inp:focus,.dx .dx-dlgc .inp:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.dx .dxd-ta{height:auto;min-height:84px;padding:8px 10px;line-height:1.5;resize:vertical;margin-bottom:8px}
/* the paragraph styles, each in its own look; the look of the body; list numbering; symbols */
.dxd-ps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dxd-ps button{display:flex;align-items:center;min-height:42px;padding:6px 10px;overflow:hidden;text-align:left;box-shadow:inset 0 0 0 1px var(--dx-line);transition:background .1s,box-shadow .1s}
.dxd-ps button:hover{background:var(--dx-hover);box-shadow:inset 0 0 0 1px var(--dx-line2)}
.dxd-ps span{display:block;min-width:0;overflow:hidden;font-size:13.5px;line-height:1.25;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.dxd-sel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:7px 10px;text-align:left;box-shadow:inset 0 0 0 1px var(--dx-line2);font:500 11.5px/1.2 var(--sans);color:var(--ink3)}
.dxd-sel:hover{background:var(--dx-hover)}
.dxd-sel b{max-width:100%;overflow:hidden;font:600 13.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.dxd-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:8px}
.dxd-lists button{height:38px;padding:0 4px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--dx-line);font:500 13px/1 var(--sans);color:var(--ink);white-space:nowrap}
.dxd-lists button:hover{background:var(--dx-on);box-shadow:inset 0 0 0 1px var(--dx-acc)}
.dxd-syms{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.dxd-syms button{display:grid;place-items:center;aspect-ratio:1;font:16px/1 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--dx-line)}
.dxd-syms button:hover{background:var(--dx-on);color:var(--dx-ont)}
/* the outline: the headings as a tree, the page each is on */
.dxd-outline{display:grid;gap:1px;margin:0 -6px}
.dxd-oh{display:flex;align-items:baseline;gap:8px;width:100%;padding:6px 8px;text-align:left;font:500 13px/1.35 var(--sans);color:var(--ink2);transition:background .1s}
.dxd-oh:hover{background:var(--dx-on);color:var(--dx-ont)}
.dxd-oh span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dxd-oh small{flex:none;font:500 11px/1 var(--sans);color:var(--ink4);font-variant-numeric:tabular-nums}
.dxd-oh.l1{font-weight:700;color:var(--ink)}
.dxd-oh.l2{padding-left:22px}
.dxd-oh.l3{padding-left:36px}
.dxd-oh.l4,.dxd-oh.l5,.dxd-oh.l6{padding-left:50px;font-size:12.5px}
/* find */
.dxd-finds{display:grid;gap:0;margin:-2px 0 4px}
.dxd-finds .dxd-tg{padding:3px 0;font-size:12.5px}
.dxd-count{min-height:18px;margin:2px 0 8px;font:600 12.5px/1.4 var(--sans);color:var(--dx-ont);font-variant-numeric:tabular-nums}
.dxd-count.none{color:var(--ink3)}
/* comparing: what was taken out, what was added */
.dxd-diff{font:13px/1.65 var(--sans);color:var(--ink)}
.dxd-diff p{margin:0 0 8px;padding:6px 8px;background:var(--dx-hd)}
.dxd-diff p.cmp-same{padding:0 8px;background:none;color:var(--ink3);font-size:12px}
.dxd-diff del{background:rgba(229,72,77,.16);color:#B42318;text-decoration:line-through}
.dxd-diff ins{background:rgba(22,163,74,.16);color:#136C33;text-decoration:none}
.dxd-scrim{display:none}
/* ---- the formatting strip over the page ---- */
.dx-fmt{flex:none;display:flex;align-items:center;gap:1px;min-height:44px;padding:0 10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:var(--sf);box-shadow:inset 0 -1px 0 var(--dx-line)}
.dx-fmt::-webkit-scrollbar{display:none}
.dx-pick{flex:none;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;height:32px;padding:0 7px 0 10px;box-shadow:inset 0 0 0 1px var(--dx-line2);font:500 13px/1 var(--sans);color:var(--ink);white-space:nowrap;transition:background .1s}
.dx-pick span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dx-pick svg{flex:none;width:12px;height:12px;color:var(--ink3)}
.dx-pick:hover{background:var(--dx-hover)}
.dx-pick+.dx-pick{margin-left:4px}
.dx-pstyle{width:108px}
.dx-pfont{width:132px}
.dx-psize{width:70px}
.dx-f{position:relative;flex:none;display:inline-grid;place-items:center;width:32px;height:32px;color:var(--ink2);transition:background .1s,color .1s}
.dx-f:hover{background:var(--dx-hover);color:var(--ink)}
.dx-f[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.dx-f svg{width:16px;height:16px}
.dx-fc>svg{margin-top:-3px}
.dx-fc i{position:absolute;left:8px;right:8px;bottom:5px;height:3px;background:#000000;box-shadow:0 0 0 .5px rgba(20,17,46,.2)}
.dx-fc [data-v="mark"]{background:#FFFF00}
.dx-fmt .dx-sep{margin:0 5px}
/* ---- the pages ---- */
.dx-stage{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 24px 56px;background:var(--dx-desk);scrollbar-width:thin;cursor:text}
.dx-paper{position:relative;box-sizing:border-box;width:var(--dx-pw,794px);margin:0 auto;padding-top:var(--dx-mt,96px);cursor:auto}
.dx-sheets{position:absolute;left:0;right:0;top:var(--dx-mt,96px);height:0}
.dx-sheet{position:absolute;left:0;right:0;background:var(--dx-bg,#FFFFFF);box-shadow:0 0 0 1px rgba(20,17,46,.05),0 1px 3px rgba(20,17,46,.08),0 10px 28px -14px rgba(20,17,46,.3);pointer-events:none}
.dx-hd,.dx-fd,.dx-pn{position:absolute;left:var(--dx-ml);right:var(--dx-mr);overflow:hidden;font:9pt/1.3 var(--dx-font);color:#000000;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.dx-hd{top:min(15mm,calc(var(--dx-mt) * .6))}
.dx-fd,.dx-pn{bottom:min(17.5mm,calc(var(--dx-mb) * .7))}
.dx-sheet:has(.dx-pn) .dx-fd{bottom:calc(min(17.5mm,calc(var(--dx-mb) * .7)) + 1.5em)}
.dx-hd p,.dx-fd p{margin:0;text-indent:0}
.dx-pn-r{text-align:right}
.dx-wm{position:absolute;left:50%;top:50%;font-family:var(--dx-font);font-weight:700;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none}
.dx-pgno{position:absolute;right:-30px;top:calc(var(--dx-mt) - 2px);font:500 11px/1 var(--sans);color:rgba(20,17,46,.32);font-variant-numeric:tabular-nums}
.dx-colg{position:absolute;top:var(--dx-mt);bottom:var(--dx-mb);background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(36,88,230,.045) 6px 12px);box-shadow:inset 1px 0 0 rgba(36,88,230,.2),inset -1px 0 0 rgba(36,88,230,.2)}
/* the text on the page: the document's own font, size, spacing and indent (app-doc.js applyBase) */
.dx-doc{position:relative;z-index:1;box-sizing:border-box;min-height:calc(var(--dx-ph,1123px) - var(--dx-mt,96px) - var(--dx-mb,96px));padding:0 var(--dx-mr,120px) 0 var(--dx-ml,120px);outline:0;
  font-family:var(--dx-font);font-size:var(--dx-size,12pt);line-height:var(--dx-lh,1.5);color:#000000;text-align:left;overflow-wrap:break-word;caret-color:#000000;cursor:text}
.dx-doc [data-shift]{margin-top:var(--dx-mt)!important}
.dx-doc p{margin:var(--dx-before,0) 0 var(--dx-after,0);text-indent:var(--dx-indent,0)}
.dx-doc h1,.dx-doc h2,.dx-doc h3,.dx-doc h4,.dx-doc h5,.dx-doc h6{font-family:var(--dx-head),var(--dx-font);font-weight:700;text-indent:0;color:#000000;letter-spacing:0}
.dx-doc h1{margin:12pt 0 6pt;font-size:22pt}
.dx-doc h2{margin:10pt 0 6pt;font-size:16pt}
.dx-doc h3{margin:8pt 0 4pt;font-size:14pt}
.dx-doc h4{margin:6pt 0 4pt;font-size:12pt}
.dx-doc h5{margin:6pt 0 3pt;font-size:11pt}
.dx-doc h6{margin:6pt 0 3pt;font-size:10.5pt}
.dx-doc .s-title{margin:12pt 0 6pt;font-family:var(--dx-head),var(--dx-font);font-size:22pt;font-weight:700;text-align:center;text-indent:0}
.dx-doc .s-subtitle{margin:0 0 8pt;font-size:14pt;color:#595959;text-align:center;text-indent:0}
.dx-doc .s-quote{margin-left:21pt;padding-left:8pt;border-left:2.25pt solid #BFBFBF;font-style:italic;color:#404040;text-indent:0}
.dx-doc .s-code{margin:0;padding:0 4pt;background:#F2F2F2;font-family:Consolas,"Courier New",ui-monospace,monospace;font-size:9.5pt;line-height:1.35;white-space:pre-wrap;text-indent:0}
.dx-doc .s-caption{font-size:9pt;color:#595959;text-align:center;text-indent:0}
.dx-doc .s-fn{font-size:9pt;text-indent:0}
.dx-doc .s-box{outline:1px dashed rgba(20,17,46,.18);outline-offset:2px}
.dx-doc ul,.dx-doc ol{margin:0 0 var(--dx-after,0);padding-left:2.1em}
.dx-doc li{margin:0;text-indent:0}
.dx-doc li>ul,.dx-doc li>ol{margin:0}
.dx-doc li>p{margin:0;text-indent:0}
.dx-doc a{color:#0563C1;text-decoration:underline}
.dx-doc sup,.dx-doc sub{font-size:.7em;line-height:0}
.dx-doc table{width:100%;margin:6pt 0;border-collapse:collapse;table-layout:fixed}
.dx-doc td,.dx-doc th{padding:3px 6px;vertical-align:top;text-align:left;overflow-wrap:anywhere}
.dx-doc th{font-weight:700}
.dx-doc table.dx-grid td,.dx-doc table.dx-grid th{border:1px solid #000000}
.dx-doc table.dx-plain td,.dx-doc table.dx-plain th{outline:1px dashed rgba(36,88,230,.28);outline-offset:-1px}
.dx-doc table.dx-3line{border-top:1.5pt solid #000000;border-bottom:1.5pt solid #000000}
.dx-doc table.dx-3line tr:first-child>*{border-bottom:.75pt solid #000000}
.dx-doc td p,.dx-doc th p{margin:0;text-indent:0}
.dx-doc td.dx-found,.dx-doc th.dx-found,.dx-doc td.dx-cell,.dx-doc th.dx-cell{background-color:rgba(36,88,230,.14)!important}
.dx-doc hr{height:0;margin:6pt 0;border:0;border-top:1px solid #000000}
.dx-doc hr.dx-pb{margin:4px 0;border-top:1px dashed rgba(36,88,230,.5)}
.dx-doc img{max-width:100%;height:auto;vertical-align:bottom}
.dx-doc img.dx-sel{outline:2px solid var(--dx-acc);outline-offset:1px}
.dx-doc img.dx-noimg{min-width:80px;min-height:48px;background:repeating-linear-gradient(135deg,#F2F2F5 0 8px,#E6E6EC 8px 16px);outline:1px dashed #9A98AC}
.dx-doc .dx-tab{white-space:pre;tab-size:4}
.dx-doc nav.dx-toc{position:relative;margin:0 0 12pt;padding:4px 0;cursor:default;-webkit-user-select:none;user-select:none;transition:background .12s}
.dx-doc nav.dx-toc:hover{background:rgba(36,88,230,.04);box-shadow:0 0 0 4px rgba(36,88,230,.04)}
.dx-doc .dx-toch{margin:0 0 12pt;font-size:16pt;font-weight:700;text-align:center;text-indent:0}
.dx-doc nav.dx-toc p:not(.dx-toch){display:flex;align-items:baseline;margin:0 0 3pt;text-indent:0}
.dx-doc nav.dx-toc p:not(.dx-toch)::after{content:"";order:1;flex:1;min-width:12px;margin:0 4px;border-bottom:1.5px dotted #595959;transform:translateY(-.3em)}
.dx-doc nav.dx-toc a{order:0;min-width:0;color:#000000;text-decoration:none}
.dx-doc nav.dx-toc .dx-tocpg{order:2;flex:none}
.dx-doc .s-toc2{padding-left:2em}
.dx-doc .s-toc3{padding-left:4em}
::highlight(dx-find){background-color:rgba(255,196,0,.45);color:#000000}
::highlight(dx-find-cur){background-color:#FF9F1C;color:#000000}
@counter-style dx-dec-dun{system:extends decimal;suffix:"\3001"}
@counter-style dx-dec-paren{system:extends decimal;prefix:"\FF08";suffix:"\FF09"}
@counter-style dx-dec-rp{system:extends decimal;suffix:") "}
@counter-style dx-la-rp{system:extends lower-alpha;suffix:") "}
@counter-style dx-cn-dun{system:extends simp-chinese-informal;suffix:"\3001"}
@counter-style dx-cn-paren{system:extends simp-chinese-informal;prefix:"\FF08";suffix:"\FF09"}
@counter-style dx-cn-dot{system:extends simp-chinese-informal;suffix:"."}
/* a picture picked: its corner to size it, a small bar under it */
.dx-imgbox{position:absolute;z-index:3;pointer-events:none;box-shadow:0 0 0 1.5px var(--dx-acc)}
.dx-imgbox[hidden]{display:none}
.dx-ih{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#FFFFFF;box-shadow:0 0 0 1.5px var(--dx-acc);cursor:nwse-resize;pointer-events:auto;touch-action:none}
.dx-ibar{position:absolute;left:0;top:calc(100% + 8px);display:flex;pointer-events:auto;background:var(--dx-pop);box-shadow:0 0 0 1px var(--dx-line2),0 10px 24px -12px rgba(var(--shd),.45);white-space:nowrap}
.dx-ibar button{display:inline-grid;place-items:center;min-width:34px;height:30px;padding:0 6px;font:500 12px/1 var(--sans);color:var(--ink2)}
.dx-ibar button:hover{background:var(--dx-on);color:var(--dx-ont)}
.dx-ibar button[data-idel]:hover{background:rgba(229,72,77,.12);color:#C0262D}
.dx-ibar svg{width:14px;height:14px}
/* reading: the text in one column, no pages (a phone opens here) */
.dx.reading .dx-stage{padding:20px 16px 64px}
.dx.reading .dx-paper{width:auto;max-width:860px;padding:44px 0 56px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(20,17,46,.05),0 10px 28px -16px rgba(20,17,46,.3)}
.dx.reading .dx-doc{min-height:40vh;padding:0 clamp(18px,6%,72px)}
.dx.reading .dx-sheets{display:none}
/* ---- the foot: the page, the words, the view, the zoom ---- */
.dx-ft{flex:none;display:flex;align-items:center;gap:10px;min-height:38px;padding:0 8px 0 14px;background:var(--sf);box-shadow:inset 0 1px 0 var(--dx-line)}
.dx-ft .sp{flex:1}
.dx-st{display:flex;align-items:center;gap:16px;min-width:0;overflow:hidden;font:500 12px/1 var(--sans);color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.dx-views{flex:none;display:flex;box-shadow:inset 0 0 0 1px var(--dx-line2)}
.dx-views button{height:26px;padding:0 11px;font:500 12px/1 var(--sans);color:var(--ink2)}
.dx-views button:hover{color:var(--ink)}
.dx-views button[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont);font-weight:600}
.dx-zm{flex:none;display:flex;align-items:center}
.dx-zm .dx-b{min-width:28px;height:28px}
.dx-zm .dx-b svg{width:14px;height:14px}
.dx-zv{min-width:52px;font-size:12px;font-variant-numeric:tabular-nums}
.dx-mb,.dx-kb{display:none}
/* ---- menus, find a tool, dialogs, the busy veil ---- */
.dx-menu{position:absolute;z-index:30;min-width:200px;max-width:min(360px,calc(100% - 12px));max-height:min(70vh,520px);overflow:auto;padding:6px 0;background:var(--dx-pop);box-shadow:0 0 0 1px var(--dx-line2),0 18px 36px -16px rgba(var(--shd),.4);scrollbar-width:thin}
.dx-menu hr{height:1px;margin:5px 0;border:0;background:var(--dx-line)}
.dxm-i{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 14px;text-align:left;font:500 13.5px/1.3 var(--sans);color:var(--ink)}
.dxm-i:hover{background:var(--dx-on)}
.dxm-i.on{font-weight:700;color:var(--dx-ont)}
.dxm-i:disabled{opacity:.4;cursor:default;background:none}
.dxm-i svg{flex:none;width:15px;height:15px;color:var(--ink3)}
.dxm-i span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dxm-i kbd{margin-left:auto;padding-left:12px;font:500 11.5px/1 var(--sans);color:var(--ink4)}
.dxm-sp{flex:none;width:15px}
.dxm-t{display:block;padding:9px 14px 5px;overflow:hidden;font:600 11.5px/1.3 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.dx-psm .dxm-i{min-height:40px;color:#1A1830}
.dx-fontm .dxm-i{font-size:15px}
.dx-sizem{min-width:150px}
.dx-sw{display:grid;grid-template-columns:repeat(8,22px);gap:5px;padding:8px 12px 6px}
.dx-sw button{width:22px;height:22px;box-shadow:inset 0 0 0 1px rgba(20,17,46,.16);transition:transform .08s}
.dx-sw button:hover{transform:scale(1.15)}
.dx-swm{display:flex;align-items:center;gap:6px;padding:4px 12px 8px}
.dx-swm button,.dx-swm label{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;box-shadow:inset 0 0 0 1px var(--dx-line2);font:500 12px/1 var(--sans);color:var(--ink2);cursor:pointer}
.dx-swm button:hover,.dx-swm label:hover{background:var(--dx-hover);color:var(--ink)}
.dx-swm svg{width:12px;height:12px}
.dx-swm input{width:20px;height:18px;padding:0;border:0;background:none;cursor:pointer}
.dx-tgrid{display:grid;grid-template-columns:repeat(8,18px);gap:3px;padding:10px 14px 4px}
.dx-tgrid i{width:18px;height:18px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line2);cursor:pointer}
.dx-tgrid i.on{background:var(--dx-on);box-shadow:inset 0 0 0 1px var(--dx-acc)}
.dx-tgl{padding:4px 14px 8px;font:500 12.5px/1.2 var(--sans);color:var(--ink2);font-variant-numeric:tabular-nums}
.dx-mscrim{position:fixed;inset:0;z-index:29;background:rgba(15,12,41,.28)}
.dx-pal{position:absolute;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 16px;background:rgba(15,12,41,.22);animation:shs-fade .12s}
.dxp-b{display:flex;flex-direction:column;width:min(540px,100%);max-height:min(72vh,540px);background:var(--dx-pop);box-shadow:0 0 0 1px var(--dx-line2),0 30px 60px -20px rgba(var(--shd),.5)}
.dxp-i{flex:none;display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;box-shadow:inset 0 -1px 0 var(--dx-line);color:var(--ink3)}
.dxp-i input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:500 15.5px/1 var(--sans);color:var(--ink)}
.dxp-i kbd{padding:4px 6px;box-shadow:inset 0 0 0 1px var(--dx-line2);font:500 10.5px/1 var(--sans);color:var(--ink3)}
.dxp-l{overflow:auto;padding:6px 0}
.dxp-l button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;text-align:left;font:500 14px/1.3 var(--sans);color:var(--ink)}
.dxp-l button svg{flex:none;width:16px;height:16px;color:var(--ink3)}
.dxp-l button.on,.dxp-l button:hover{background:var(--dx-on)}
.dxp-l button.on svg{color:var(--dx-acc)}
.dxp-none{padding:18px 16px;font-size:13.5px;color:var(--ink3)}
.dx-dlg{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(15,12,41,.28)}
.dx-dlgb{display:flex;flex-direction:column;width:min(440px,100%);max-height:100%;margin:0;background:var(--dx-pop,var(--sf2));box-shadow:0 0 0 1px var(--dx-line2,rgba(var(--lnc),.16)),0 28px 56px -20px rgba(var(--shd),.5)}
.dx-dlgh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 18px;box-shadow:inset 0 -1px 0 rgba(var(--lnc),.10)}
.dx-dlgh b{font:700 15px/1.3 var(--sans);color:var(--ink)}
.dx-dlgc{display:grid;gap:4px;padding:16px 18px;overflow:auto}
.dx-dlgc p{font-size:14px;line-height:1.6;color:var(--ink2)}
.dx-dlgc .dxd-note{margin:0;font-size:12.5px}
.dx-dlgf{flex:none;display:flex;align-items:center;gap:8px;padding:12px 18px;box-shadow:inset 0 1px 0 rgba(var(--lnc),.10)}
.dx-dlgf .sp{flex:1}
.dx-dlgb:has(.dx-keys){width:min(720px,100%)}
.dx-keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.dx-keys h5{margin:0 0 4px;font:700 12px/1.3 var(--sans);color:var(--ink3)}
.dx-keys div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;color:var(--ink2);box-shadow:inset 0 -1px 0 var(--dx-line)}
.dx-keys kbd{flex:none;padding:3px 6px;background:var(--dx-hover);box-shadow:inset 0 0 0 1px var(--dx-line2);font:600 11.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.dx-busy{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:rgba(255,255,255,.7)}
.dx-busy>div{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--sf2);box-shadow:0 0 0 1px rgba(var(--lnc),.16),0 16px 32px -14px rgba(var(--shd),.4)}
.dx-busy .spin{width:22px;height:22px;margin:0;border-width:3px}
.dx-busy b{font:600 14px/1.3 var(--sans);color:var(--ink)}
/* ---- the start: open, a new page or one of our templates, the work left last time ---- */
.dropz.dx-start{gap:12px}
.fit .app>.dropz.dx-start{flex:1 0 auto}   /* (taller than a small window: it grows and the window scrolls, its top never cut) */
.dx-start>*{position:relative}
.dx-start h2{margin:0;font:700 21px/1.3 var(--sans);color:var(--ink)}
.dx-start>p:not(.dz-note){max-width:600px;margin:0;font-size:14px;line-height:1.6;color:var(--ink3)}
.dx-sbtn{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dx-draft{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:640px;padding:10px 14px;background:#FFF8E6;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35);font-size:13.5px;color:var(--ink)}
.dx-draft[hidden]{display:none}
.dx-draft>span{display:flex;align-items:center;gap:8px}
.dx-draft small{color:var(--ink3)}
.dx-draft svg{color:var(--gold)}
.dx-tpls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 18px;width:min(600px,100%);margin-top:6px}
.dx-tpls button{display:grid;justify-items:center;gap:8px;padding:6px 4px;font:500 12.5px/1.25 var(--sans);color:var(--ink2);transition:color .12s}
.dx-tpls button:hover{color:var(--ink)}
.dx-tplp{position:relative;display:block;width:100%;max-width:92px;aspect-ratio:210/297;background:#FFFFFF no-repeat;box-shadow:0 0 0 1px rgba(var(--lnc),.16),0 6px 16px -8px rgba(var(--shd),.35);transition:transform .15s,box-shadow .15s}
.dx-tpls button:hover .dx-tplp{transform:translateY(-3px);box-shadow:0 0 0 1.5px #2458E6,0 12px 22px -10px rgba(var(--shd),.4)}
.dx-tpl-blank::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:300 34px/1 var(--sans);color:#B6B4C6}
.dx-tpl-notice,.dx-tpl-request{background-image:linear-gradient(#1A1830,#1A1830),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4);
  background-size:52% 5px,34% 3px,72% 3px,72% 3px,72% 3px,30% 3px;background-position:50% 14%,14% 28%,50% 38%,50% 46%,50% 54%,86% 80%}
.dx-tpl-minutes{background-image:linear-gradient(#1A1830,#1A1830),linear-gradient(90deg,transparent 29%,#C9C8D4 29% 30%,transparent 30%),repeating-linear-gradient(#C9C8D4 0 1px,transparent 1px 8px),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4);
  background-size:44% 5px,72% 40px,72% 41px,40% 4px,60% 3px;background-position:50% 12%,50% 22%,50% 22%,14% 64%,32% 72%}
.dx-tpl-weekly,.dx-tpl-summary{background-image:linear-gradient(#1A1830,#1A1830),linear-gradient(#2458E6,#2458E6),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#2458E6,#2458E6),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#2458E6,#2458E6),linear-gradient(#C9C8D4,#C9C8D4);
  background-size:44% 5px,30% 4px,62% 3px,50% 3px,30% 4px,62% 3px,30% 4px,50% 3px;background-position:50% 12%,16% 28%,26% 36%,22% 43%,16% 55%,26% 63%,16% 75%,22% 83%}
.dx-tpl-resume{background-image:linear-gradient(#1A1830,#1A1830),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#2458E6,#2458E6),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#2458E6,#2458E6),linear-gradient(#C9C8D4,#C9C8D4);
  background-size:40% 6px,56% 3px,72% 2px,62% 3px,50% 3px,72% 2px,62% 3px;background-position:50% 10%,50% 18%,50% 30%,22% 37%,20% 44%,50% 58%,22% 65%}
.dx-tpl-letter,.dx-tpl-cert,.dx-tpl-resign{background-image:linear-gradient(#1A1830,#1A1830),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#C9C8D4,#C9C8D4),linear-gradient(#1A1830,#1A1830);
  background-size:30% 4px,72% 3px,72% 3px,72% 3px,50% 3px,28% 4px;background-position:14% 14%,50% 26%,50% 34%,50% 42%,20% 50%,86% 76%}
/* a narrower window: the drawer stays beside the page (the page is made smaller to fit, never covered) */
@media (max-width:1100px) and (min-width:760px){
  .dx-dr{width:300px}
  .dx-cmdk{min-width:0}
  .dx-cmdk span,.dx-cmdk kbd{display:none}
  .dx-pfont{width:112px}
}
@media (pointer:coarse){ .dx .dxd-c .inp,.dxp-i input,.dx .dx-dlgc .inp,.dx .dxd-ta{font-size:16px} }
/* a phone: the text as one column, the formatting in a strip, the sections in a bar at the foot, each a sheet from below */
@media (max-width:759px){
  .dx-top{min-height:46px;gap:2px;padding:0 6px 0 4px}
  .dx-docb{flex:1;min-width:0;max-width:none;gap:7px}
  .dx-doci{width:28px;height:28px}
  .dx-tb{flex:none;padding:0;box-shadow:none}
  .dx-tb .dx-hist,.dx-tb .dx-prt,.dx-tb .dx-sep,.dx-tb [data-cmd="find"]{display:none}
  .dx-cmdk{justify-content:center;width:36px;min-width:0;padding:0;background:none;box-shadow:none}
  .dx-cmdk span,.dx-cmdk kbd{display:none}
  .dx .dx-save{display:none}
  .dx-rail{display:none}
  .dx-fmt{min-height:42px;padding:0 4px}
  .dx-pstyle{width:90px}
  .dx-pfont{width:96px}
  .dx-psize{width:58px}
  .dx-stage{padding:8px 8px 40px}
  .dx.reading .dx-stage{padding:0}
  .dx.reading .dx-paper{max-width:none;min-height:100%;padding:20px 0 90px;box-shadow:none}
  .dx.reading .dx-doc{padding:0 18px}
  .dx-ft{min-height:34px;gap:6px;padding:0 6px 0 10px}
  .dx-zm,.dx-st span+span+span{display:none}
  .dx-views button{height:24px;padding:0 9px}
  .dx-dr{position:absolute;left:0;right:0;bottom:0;z-index:21;width:auto;max-height:72%;box-shadow:0 -12px 28px -16px rgba(var(--shd),.5),inset 0 1px 0 var(--dx-line);animation:pxs-up .22s cubic-bezier(.2,.8,.2,1)}
  .dxd-scrim{display:block;position:absolute;left:0;right:0;top:0;bottom:calc(54px + env(safe-area-inset-bottom));z-index:20;background:rgba(15,12,41,.28)}
  .dxd-h{min-height:44px}
  .dxd-c{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .dxd-t{min-height:44px;font-size:14px}
  .dxd-chip{min-height:34px;font-size:13px}
  .dxd-syms{grid-template-columns:repeat(8,minmax(0,1fr))}
  .dxd-syms button{font-size:18px}
  .dx-mb{flex:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom);background:var(--sf);box-shadow:inset 0 1px 0 var(--dx-line)}
  .dx-mb button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;padding:6px 0;font:500 10.5px/1.1 var(--sans);color:var(--ink2)}
  .dx-mb button span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .dx-mb button[aria-pressed="true"]{color:var(--dx-acc)}
  .dx-mb svg{width:20px;height:20px}
  .dx-mb [data-cmd="export"]{color:var(--dx-ont)}
  .dx-kb:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px;background:var(--sf2);box-shadow:0 -1px 0 var(--dx-line2),0 -8px 20px -12px rgba(var(--shd),.35)}
  .dx-kb button{flex:1;display:grid;place-items:center;min-width:0;height:38px;color:var(--ink2)}
  .dx-kb button.on{background:var(--dx-on);color:var(--dx-ont)}
  .dx-kb svg{width:18px;height:18px}
  .dx-kb .dx-kbok{flex:none;padding:0 14px;font:600 13.5px/1 var(--sans);color:var(--dx-acc)}
  .dx-menu.sheet{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:83;width:auto;min-width:0;max-width:none;max-height:72vh;padding:10px 0 calc(12px + env(safe-area-inset-bottom));animation:pxs-up .22s cubic-bezier(.2,.8,.2,1)}
  .dx-menu.sheet .dxm-i{min-height:46px;font-size:15px}
  .dx-menu.sheet .dx-sw{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
  .dx-menu.sheet .dx-sw button{width:auto;height:auto;aspect-ratio:1}
  .dx-mscrim{z-index:82}
  .dx-dlg,.dx-pal{position:fixed;z-index:84}
  .dx-dlg{place-items:end stretch;padding:0}
  .dx-dlgb{width:100%;max-height:88%;animation:pxs-up .22s cubic-bezier(.2,.8,.2,1)}
  .dx-pal{padding:10px 8px}
  .dx-keys{grid-template-columns:minmax(0,1fr)}
  .dx-tpls{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
  .dx-tpls button{font-size:11.5px}
  .dx-imgbox .dx-ibar{top:calc(100% + 6px)}
  .dx-ih{width:22px;height:22px;right:-11px;bottom:-11px}
}
/* a phone on its side: the site's header and the window bar step aside, the sections in a slim rail at the left */
@media (orientation:landscape) and (max-height:520px){
  html.wsfull.dxopen .hd{display:none}
  html.wsfull.dxopen .fit .wsb{display:none}
  html.wsfull.dxopen .dx-unfull{display:grid}
  .dx-top{min-height:40px}
  .dx .dx-save,.dx-cmdk{height:30px}
  .dx-rail{width:50px}
  .dx-rail button{min-height:40px}
  .dx-rail button span{display:none}
  .dx-dr{width:280px}
  .dx-fmt{min-height:38px}
  .dx-f,.dx-pick{height:30px}
  .dx-ft{min-height:30px}
  .dx-stage{padding:12px 12px 30px}
}
/* lights off: a dark desk and window; the pages stay paper */
html[data-theme="dark"] .dx{--dx-acc:#8DA9FF;--dx-on:rgba(141,169,255,.16);--dx-ont:#CBD8FF;--dx-tint:rgba(141,169,255,.09);--dx-hd:#1B1839;--dx-desk:#0D0B22}
html[data-theme="dark"] .dx-doci{background:#2F57D8;color:#FFFFFF}
html[data-theme="dark"] .dx-sheet{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 12px 32px -12px rgba(0,0,0,.8)}
html[data-theme="dark"] .dx-pgno{color:rgba(226,224,255,.38)}
html[data-theme="dark"] .dx .dxd-c select.inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239591B7' stroke-width='1.5'/%3E%3C/svg%3E")}
html[data-theme="dark"] .dx-busy{background:rgba(12,10,35,.6)}
html[data-theme="dark"] .dx-dlg,html[data-theme="dark"] .dx-pal{background:rgba(0,0,0,.45)}
html[data-theme="dark"] .dxd-sw button,html[data-theme="dark"] .dx-sw button{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
html[data-theme="dark"] .dxd-sw button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--dx-acc)}
html[data-theme="dark"] .dx-draft{background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(255,209,102,.25)}
html[data-theme="dark"] .dxd-diff del{color:#FF8A8F}
html[data-theme="dark"] .dxd-diff ins{color:#6EE7A0}
html[data-theme="dark"] .dx-psm .dxm-i{color:var(--ink)}
html[data-theme="dark"] .dx-fc i{box-shadow:0 0 0 .5px rgba(255,255,255,.3)}
html[data-theme="dark"] .dx-tpls button:hover .dx-tplp{box-shadow:0 0 0 1.5px #8DA9FF,0 12px 22px -10px rgba(0,0,0,.6)}

/* ================= 2026-09-30 the online PDF editor (tool pdf-editor, app-pdfeditor.js) =================
   The same window as the document editor (.dx: the top, the rail of sections and their drawer, the foot, menus,
   dialogs), laid out for pages: the tools of the task at hand in one strip over the pages, with the settings of the
   tool (or of what is picked) at its end; the pages one under the other on the desk, each drawn when it comes near;
   what is put on them (text, pictures, shapes, comments, fields, boxes) in a layer over each page, handles on what is
   picked and a small bar under it. The pages stay paper in both themes. A phone: the strip scrolls, the sections are
   in the bar at the foot and open as sheets; two fingers zoom. */
.app[data-kind="pdfe"]{position:relative}
.pf{--pf-sel:#2458E6;--pf-selbg:rgba(36,88,230,.08)}
.pf .pf-doci{background:#E5484D}
.pf-hidec.on{background:var(--dx-on);color:var(--dx-ont)}
/* the strip: the tools, a switch of their group, the settings */
.pf-strip{gap:2px}
.pf-grp{width:auto;min-width:74px;margin-right:4px}
.pf-tl[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont);box-shadow:inset 0 -2px 0 var(--dx-acc)}
.pf-props{display:flex;align-items:center;gap:3px;min-width:0}
.pf-props .dx-fc i.none{background:repeating-linear-gradient(135deg,#FFFFFF 0 3px,#E5484D 3px 4px)!important}
.pf-pv{min-width:0;padding:0 6px 0 9px}
.pf-pv span{font-variant-numeric:tabular-nums}
.pf-seg{flex:none;display:inline-flex;box-shadow:inset 0 0 0 1px var(--dx-line2)}
.pf-seg button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:30px;padding:0 9px;font:500 12.5px/1 var(--sans);color:var(--ink2);white-space:nowrap}
.pf-seg button:hover{background:var(--dx-hover);color:var(--ink)}
.pf-seg button[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont);font-weight:600}
.pf-seg svg{width:15px;height:15px}
.pf-keep[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.pf-op>svg:first-child{width:14px;height:14px;color:var(--ink3)}
/* how see-through (a signature, a stamp, a picture, a highlight): a slider over the usual amounts */
.pf-opm{display:flex;align-items:center;gap:10px;padding:6px 14px 8px}
.pf-opm input{flex:1;min-width:150px;height:22px;margin:0;accent-color:var(--dx-acc);cursor:pointer}
.pf-opm b{min-width:38px;font:600 12.5px/1 var(--sans);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.pf-tg{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px;font:500 12.5px/1 var(--sans);color:var(--ink2);cursor:pointer;white-space:nowrap}
.pf-tg input{width:15px;height:15px;margin:0;accent-color:var(--dx-acc)}
.pf-hint{margin-left:8px;overflow:hidden;font:500 12px/1.3 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
/* the pages on the desk */
.pf-stage{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 24px 60px;background:var(--dx-desk);scrollbar-width:thin;outline:0;touch-action:pan-x pan-y}
.pf-pages{display:flex;flex-direction:column;align-items:center;gap:18px;width:max-content;min-width:100%;margin:0 auto}
.pf-pg{position:relative;flex:none;background:#FFFFFF;box-shadow:0 0 0 1px rgba(20,17,46,.06),0 1px 3px rgba(20,17,46,.08),0 12px 30px -16px rgba(20,17,46,.32)}
.pf-cv{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pf-cv canvas{position:absolute;display:block}
.pf-lay{position:absolute;inset:0;overflow:hidden}
.pf-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pf-svg .pf-hit{pointer-events:stroke;cursor:move}
.pf-mk{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pf-fl{position:absolute;inset:0;pointer-events:none}
.pf-no{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);font:500 10.5px/1 var(--sans);color:rgba(20,17,46,.34);font-variant-numeric:tabular-nums;pointer-events:none}
.pf-no.on{color:var(--dx-acc);font-weight:700}
/* the tool in hand: its pointer */
.pf.t-hand .pf-stage,.pf.spacepan .pf-stage{cursor:grab}
.pf.panning .pf-stage,.pf.panning .pf-stage *{cursor:grabbing!important}
.pf.t-edittext .pf-lay{cursor:text}
.pf.t-addtext .pf-lay,.pf.t-ctext .pf-lay,.pf.t-date .pf-lay{cursor:text}
.pf:not(.t-select):not(.t-hand):not(.t-edittext):not(.t-addtext):not(.t-ctext):not(.t-date) .pf-lay{cursor:crosshair}
.pf.placing .pf-lay{cursor:copy}
.pf:not(.t-select):not(.t-hand) .pf-lay{touch-action:none}
.pf.spacepan .pf-lay{cursor:grab}
/* what lies on the pages */
.pf-o{position:absolute;box-sizing:border-box}
.pf.t-select .pf-o{cursor:move}
.pf-o.on{outline:1.5px solid var(--pf-sel);outline-offset:1px}
.pf-o.pf-ghost{opacity:.5;outline:1px dashed rgba(36,88,230,.6);outline-offset:1px}
.pf-o,.pf-hd,.pf-svg .pf-hit{touch-action:none}
.pf-cover{position:absolute;pointer-events:none}
.pf-tx{min-height:1em;outline:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;cursor:inherit;-webkit-user-select:none;user-select:none}
.pf-tx[contenteditable="true"]{cursor:text;-webkit-user-select:text;user-select:text;caret-color:#000000}
.pf-tx:empty::before{content:attr(data-ph);color:rgba(20,17,46,.35)}
.pf-k-text.on,.pf-k-date.on{background:rgba(36,88,230,.04)}
.pf-k-ctext{box-shadow:inset 0 0 0 1px rgba(20,17,46,.25);background:rgba(255,255,255,.5)}
.pf-o img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.pf-k-redact{background:repeating-linear-gradient(135deg,rgba(0,0,0,.82) 0 6px,rgba(0,0,0,.7) 6px 12px);outline:1px solid #E5484D}
.pf-k-rect,.pf-k-ellipse,.pf-k-crect,.pf-k-cellipse{border:calc(var(--bw,2) * var(--pz,1) * 1px) solid var(--c)}
.pf-round{border-radius:50%}
.pf-k-check svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pf-k-link{background:rgba(36,88,230,.06);box-shadow:inset 0 0 0 1px rgba(36,88,230,.55)}
.pf-url{position:absolute;left:0;top:100%;display:flex;align-items:center;gap:3px;max-width:220px;padding:2px 6px;background:#1B45B5;color:#FFFFFF;font:500 10.5px/1.3 var(--sans);white-space:nowrap}
.pf-url b{overflow:hidden;font-weight:500;text-overflow:ellipsis}
.pf-url svg{flex:none;width:11px;height:11px}
.pf-k-note{display:grid;place-items:center;background:var(--c);color:#3D3000;border-radius:2px;box-shadow:0 1px 3px rgba(20,17,46,.3)}
.pf-k-note svg{width:72%;height:72%}
.pf-k-hl i,.pf-k-area i,.pf-k-ul i,.pf-k-so i,.pf-k-sq i{position:absolute;pointer-events:none}
.pf-k-hl i,.pf-k-area i{background:var(--c);opacity:var(--op,.4);mix-blend-mode:multiply}
.pf-k-area{outline:0}
.pf-k-ul i{border-bottom:max(1px,calc(1.1 * var(--pz,1) * 1px)) solid var(--c)}
.pf-k-so i{background:linear-gradient(transparent 40%,var(--c) 40%,var(--c) calc(40% + max(1px,calc(1.1 * var(--pz,1) * 1px))),transparent 0)}
.pf-k-sq i{background:linear-gradient(135deg,transparent 42%,var(--c) 42% 58%,transparent 58%) 0 100%/6px 4px repeat-x,linear-gradient(45deg,transparent 42%,var(--c) 42% 58%,transparent 58%) 3px 100%/6px 4px repeat-x}
.pf-prev{pointer-events:none}
.pf-fld{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding:0 4px;overflow:hidden;background:rgba(36,88,230,.08);box-shadow:inset 0 0 0 1px rgba(36,88,230,.6);color:#1B45B5;font:600 10px/1 var(--sans);white-space:nowrap}
.pf-fld svg{flex:none;width:12px;height:12px}
.pf-fld b{overflow:hidden;font-weight:600;text-overflow:ellipsis}
.pf-k-fld-check .pf-fld b,.pf-k-fld-radio .pf-fld b{display:none}
.pf-k-fld-radio .pf-fld{border-radius:50%;justify-content:center}
.pf-sv.on .pf-hit{stroke:rgba(36,88,230,.18)}
.pf-mlabel{font-family:Arial,"Microsoft YaHei",sans-serif;paint-order:stroke;stroke:#FFFFFF;stroke-width:3px}
/* the handles of what is picked; a box being drawn; the line under the pointer; what is being placed */
.pf-hd{position:absolute;z-index:3;width:10px;height:10px;margin:-5px 0 0 -5px;background:#FFFFFF;box-shadow:0 0 0 1.5px var(--pf-sel),0 1px 3px rgba(20,17,46,.3)}
.pf-hd-nw,.pf-hd-se{cursor:nwse-resize}
.pf-hd-ne,.pf-hd-sw{cursor:nesw-resize}
.pf-hd-pt{border-radius:50%;cursor:move}
.pf-rb{position:absolute;z-index:4;pointer-events:none;background:rgba(36,88,230,.07);box-shadow:inset 0 0 0 1px var(--pf-sel)}
.pf-rb-redact{background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px #E5484D}
.pf-rb-whiteout{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(20,17,46,.4)}
.pf-rb-crop{box-shadow:0 0 0 4000px rgba(15,12,41,.32),inset 0 0 0 1.5px #FFFFFF}
.pf-hv{position:absolute;z-index:2;pointer-events:none;background:rgba(36,88,230,.07);box-shadow:0 0 0 1.5px rgba(36,88,230,.7);border-radius:1px}
.pf-gh{position:absolute;z-index:4;pointer-events:none;opacity:.65;outline:1px dashed var(--pf-sel)}
.pf-gh img{display:block;width:100%;height:100%}
.pf-fd{position:absolute;z-index:1;pointer-events:none;background:rgba(255,196,0,.4);mix-blend-mode:multiply}
.pf-fd.cur{background:rgba(255,140,0,.6);box-shadow:0 0 0 2px rgba(255,140,0,.9)}
/* the marks as they will be printed */
.pf-wm{position:absolute;font-family:Arial,"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;font-weight:700;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none}
.pf-hf{position:absolute;font-family:Arial,"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;line-height:1;white-space:nowrap}
.pf-seam{position:absolute;background-repeat:no-repeat}
/* the form's own fields, filled in on the page */
.pf-f{position:absolute;box-sizing:border-box;margin:0;padding:0 .3em;border:0;border-radius:0;background:rgba(36,88,230,.07);color:#000000;font-family:Arial,"Microsoft YaHei",sans-serif;line-height:1.15;outline:0;pointer-events:none;resize:none}
.pf.t-select .pf-f,.pf.t-hand .pf-f{pointer-events:auto}
.pf-f:hover{background:rgba(36,88,230,.12)}
.pf-f:focus{background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1.5px var(--pf-sel)}
.pf-f[type=checkbox],.pf-f[type=radio]{padding:0;accent-color:#1B45B5;cursor:pointer}
textarea.pf-f{padding-top:.15em}
.pf.showfields .pf-f{background:rgba(255,196,0,.3);box-shadow:inset 0 0 0 1px rgba(214,140,0,.8)}
/* the bar under what is picked */
.pf-objbar{position:absolute;z-index:8;display:flex;align-items:center;background:var(--dx-pop);box-shadow:0 0 0 1px var(--dx-line2),0 10px 26px -12px rgba(var(--shd),.5);white-space:nowrap}
.pf-objbar[hidden]{display:none}
.pf-objbar button{display:inline-grid;place-items:center;width:32px;height:32px;color:var(--ink2)}
.pf-objbar button:hover{background:var(--dx-on);color:var(--dx-ont)}
.pf-objbar button.on{background:var(--dx-on);color:var(--dx-ont)}
.pf-objbar button[data-oa="del"]:hover{background:rgba(229,72,77,.12);color:#C0262D}
.pf-objbar svg{width:15px;height:15px}
.pf-obsz{min-width:26px;font:600 12px/1 var(--sans);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
/* the foot: the page in sight */
.pf-nav{flex:none;display:flex;align-items:center;gap:2px}
.pf-nav .dx-b{min-width:28px;height:28px}
.pf-nav .dx-b svg{width:14px;height:14px}
.pf-pgn{width:44px;height:26px;padding:0 4px;border:0;border-radius:0;background:var(--dx-hd);box-shadow:inset 0 0 0 1px var(--dx-line2);font:600 12px/1 var(--sans);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.pf-pgn:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.pf-pgt{min-width:34px;font:500 12px/1 var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums}
/* the busy veil with its progress */
.pf-bt{display:grid;gap:8px;min-width:180px}
.pf-bar{display:block;height:4px;background:rgba(var(--lnc),.12);overflow:hidden}
.pf-bar i{display:block;height:100%;background:var(--dx-acc,#2458E6);transition:width .3s}
/* the pages drawer: small pictures to pick and drag */
.pf-pgbar{display:flex;align-items:center;gap:6px;margin-bottom:10px;font:600 12.5px/1.2 var(--sans);color:var(--ink2)}
.pf-pgbar .sp{flex:1}
.pf-pgbar .dxd-chip{min-height:26px;padding:3px 9px;font-size:12px}
.pf-thumbs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:4px 14px 14px}
.pf-th{position:relative;display:grid;justify-items:center;gap:5px;padding:5px;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.pf-thc{position:relative;display:block;width:100%;max-height:220px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(20,17,46,.12),0 3px 10px -6px rgba(20,17,46,.4);overflow:hidden}
.pf-thc img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pf-th b{display:flex;align-items:center;gap:4px;font:600 11.5px/1 var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums}
.pf-thd{width:6px;height:6px;border-radius:50%;background:var(--amber,#F59E0B)}
.pf-th:hover .pf-thc{box-shadow:0 0 0 1.5px var(--dx-line2),0 3px 10px -6px rgba(20,17,46,.4)}
.pf-th.cur b{color:var(--dx-ont)}
.pf-th.on{background:var(--dx-on)}
.pf-th.on .pf-thc{box-shadow:0 0 0 2px var(--dx-acc)}
.pf-thmark{position:absolute;z-index:3;width:3px;background:var(--dx-acc);pointer-events:none}
.pf-thfly{position:fixed;left:0;top:0;z-index:100;opacity:.85;pointer-events:none;background:var(--dx-pop);box-shadow:0 12px 26px -10px rgba(var(--shd),.5)}
/* comments listed */
.pf-cmts{gap:6px}
.pf-cmt{display:flex;align-items:flex-start;gap:2px;box-shadow:inset 0 0 0 1px var(--dx-line)}
.pf-cmt.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.pf-cmtb{flex:1;min-width:0;display:flex;align-items:flex-start;gap:9px;padding:8px 6px 8px 9px;text-align:left}
.pf-cmtb:hover{background:var(--dx-hover)}
.pf-cmtb i{flex:none;display:grid;place-items:center;width:20px;height:20px;color:rgba(20,17,46,.75)}
.pf-cmtb i svg{width:12px;height:12px}
.pf-cmtb>span{display:grid;gap:3px;min-width:0}
.pf-cmtb b{font:600 12px/1.3 var(--sans);color:var(--ink2)}
.pf-cmtb q{overflow:hidden;font:500 12.5px/1.45 var(--sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pf-cmtb small{font:12.5px/1.45 var(--sans);color:var(--ink3);white-space:pre-wrap}
.pf-cmt .dx-b{min-width:28px;height:28px;margin-top:4px}
.pf-cmt .dx-b svg{width:14px;height:14px}
/* signatures, stamps, seals */
.pf-signs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-sgi{position:relative;box-shadow:inset 0 0 0 1px var(--dx-line2);background:#FFFFFF}
.pf-sgi.on{box-shadow:inset 0 0 0 2px var(--dx-acc)}
.pf-sgi>button:first-child{display:grid;place-items:center;width:100%;height:64px;padding:6px}
.pf-sgi>button:first-child:hover{background:rgba(36,88,230,.06)}
.pf-sgi img{max-width:100%;max-height:52px}
.pf-sgx{position:absolute;right:2px;top:2px;display:grid;place-items:center;width:20px;height:20px;color:#77738E;opacity:.7}
.pf-sgx:hover{opacity:1;color:#C0262D}
.pf-sgx svg{width:12px;height:12px}
.pf-sgnew{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:64px;box-shadow:inset 0 0 0 1px var(--dx-line2);font:500 12px/1.2 var(--sans);color:var(--ink2);background-image:repeating-linear-gradient(90deg,var(--dx-line2) 0 4px,transparent 4px 8px),repeating-linear-gradient(90deg,var(--dx-line2) 0 4px,transparent 4px 8px);background-size:100% 1px;background-repeat:no-repeat;background-position:0 0,0 100%}
.pf-sgnew:hover{background-color:var(--dx-hover);color:var(--ink)}
.pf-sgnew svg{width:18px;height:18px}
.pf-seals .pf-sgi img{max-height:56px}
.pf-stamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
.pf-stamps button{display:grid;place-items:center;height:40px;padding:3px;background:#FFFFFF}
.pf-stamps button span{display:block;max-width:100%;padding:3px 6px;overflow:hidden;border:2px solid var(--c);border-radius:6px;box-shadow:inset 0 0 0 1.5px #FFFFFF,inset 0 0 0 2.5px var(--c);color:var(--c);font:800 11.5px/1.1 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
.pf-stamps button:hover{background:#F5F7FF}
.pf-stamps .pf-stc span{display:inline-flex;align-items:center;gap:3px;border:1px dashed #9A98AC;box-shadow:none;color:#4A4760;font-weight:600;text-transform:none}
.pf-stamps .pf-stc svg{width:12px;height:12px}
.pf-seamb small{white-space:normal}
.pf-seamb.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.pf-vip{display:inline-flex;align-items:center;gap:2px;margin-left:4px;padding:1px 5px;background:linear-gradient(135deg,#FFE3A3,#F7C45E);color:#6B4400;font:700 9.5px/1.3 var(--sans);vertical-align:1px}
.pf-vip svg{width:10px;height:10px}
/* making a signature */
.dx-dlgb:has(.pf-sgc){width:min(560px,100%)}
.pf-sgtabs{margin-bottom:10px}
.pf-sgc{display:block;width:100%;height:190px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--dx-line2);background-image:linear-gradient(transparent calc(100% - 46px),rgba(20,17,46,.18) calc(100% - 46px),rgba(20,17,46,.18) calc(100% - 45px),transparent 0);touch-action:none;cursor:crosshair}
.pf-sgtools{display:flex;align-items:center;gap:10px;margin-top:8px}
.pf-sgtools .sp{flex:1}
.pf-sgtools .dxd-chips{margin:0}
.pf-sgcol{display:flex;gap:6px}
.pf-sgcol button{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(20,17,46,.2)}
.pf-sgcol button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--dx-acc)}
.pf-sgfonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.pf-sgfonts button{height:62px;padding:0 8px;overflow:hidden;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--dx-line2);font-size:28px;color:#111111;white-space:nowrap;text-overflow:ellipsis}
.pf-sgfonts button.on{box-shadow:inset 0 0 0 2px var(--dx-acc)}
.pf-sgprev{display:grid;place-items:center;min-height:90px;margin:8px 0;background:repeating-conic-gradient(#EEEEF2 0 25%,#FFFFFF 0 50%) 0 0/16px 16px}
.pf-sgpc{max-width:100%;max-height:160px}
.pf-stcol{grid-template-columns:repeat(5,34px);margin-top:6px}
.pf-stcol label{position:relative;display:block;width:30px;height:30px;border-radius:50%;cursor:pointer}
.pf-stcol input{position:absolute;opacity:0}
.pf-stcol label:has(input:checked){box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--dx-acc)}
/* forms, redaction, links, a new document */
.pf-rfind{display:flex;gap:6px;margin:8px 0}
.pf-rfind .inp{flex:1}
.pf-lkm,.pf-newsz{margin-bottom:10px}
.pf-lkm .dxd-chip input,.pf-newsz .dxd-chip input{margin:0 5px 0 0;accent-color:var(--dx-acc)}
.pf-quote{margin:0 0 6px;padding:6px 10px;background:rgba(255,212,0,.18);box-shadow:inset 3px 0 0 #F5B800;font-size:13px!important;color:var(--ink)!important}
/* the marks: their cards, a position picker */
.pf-mkc{justify-content:flex-start;gap:12px}
.pf-mkc>svg{flex:none;width:18px;height:18px;color:var(--ink2)}
.pf-mkc>span{display:grid;gap:2px;flex:1;min-width:0}
.pf-mkc small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pf-onoff{flex:none;padding:3px 7px;background:var(--dx-hd);font:600 11px/1 var(--sans);font-style:normal;color:var(--ink3)}
.pf-mkc.on .pf-onoff{background:var(--dx-on);color:var(--dx-ont)}
.pf-mkc.on>svg{color:var(--dx-acc)}
.pf-pos{display:grid;grid-template-columns:repeat(3,38px);gap:4px;margin-bottom:8px;padding:6px;width:max-content;background:var(--dx-hd)}
.pf-pos button{display:grid;place-items:center;height:30px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line2)}
.pf-pos button i{width:8px;height:8px;border-radius:50%;background:var(--ink4,#B6B4C6)}
.pf-pos button.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.pf-pos button.on i{background:var(--dx-acc)}
.dx .dxd-c .inp.bad{box-shadow:inset 0 0 0 1.5px #E5484D}
/* bookmarks */
.pf-bms{display:grid;gap:2px;margin:0 -6px}
.pf-bm{display:flex;align-items:center;gap:4px;padding:2px 4px 2px calc(4px + var(--lv,0) * 16px)}
.pf-bm:hover{background:var(--dx-hover)}
.pf-bm.ro{width:100%;justify-content:space-between;gap:10px;padding:6px 8px 6px calc(8px + var(--lv,0) * 16px);text-align:left;font:500 13px/1.35 var(--sans);color:var(--ink2)}
.pf-bm.ro span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pf-bm small{flex:none;min-width:22px;font:500 11px/1 var(--sans);color:var(--ink4,#9A98AC);text-align:right;font-variant-numeric:tabular-nums}
.pf-bmgo{display:grid;place-items:center;width:22px;height:26px;color:var(--ink3)}
.pf-bmgo:hover{color:var(--dx-acc)}
.pf-bmgo svg{width:12px;height:12px}
.pf-bmt{flex:1;min-width:0;height:28px;padding:0 6px;border:0;border-radius:0;background:transparent;font:500 13px/1 var(--sans);color:var(--ink)}
.pf-bmt:hover{box-shadow:inset 0 0 0 1px var(--dx-line2)}
.pf-bmt:focus{outline:0;background:var(--sf);box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.pf-bm .dx-b{min-width:26px;height:26px}
.pf-bm .dx-b svg{width:14px;height:14px}
/* finding */
.pf-fq{display:flex;align-items:center;gap:2px;margin-bottom:8px}
.pf-fq .inp{flex:1}
.pf-fq .dx-b{min-width:32px;height:34px}
.pf-fres{display:grid;gap:2px;margin:0 -6px}
.pf-fr{display:grid;gap:3px;padding:6px 8px;text-align:left;font:13px/1.45 var(--sans);color:var(--ink2)}
.pf-fr:hover{background:var(--dx-hover)}
.pf-fr.on{background:var(--dx-on)}
.pf-fr small{font:600 11px/1 var(--sans);color:var(--ink3)}
.pf-fr span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pf-fr mark{background:rgba(255,196,0,.55);color:var(--ink)}
/* exporting: the formats by what they are for */
.pf-xg{margin:12px 0 7px;font:600 12px/1.2 var(--sans);color:var(--ink2)}
.pf-xg:first-child{margin-top:0}
.pf-xfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.pf-xf{display:grid;gap:3px;min-height:48px;padding:7px 8px;text-align:left;box-shadow:inset 0 0 0 1px var(--dx-line);transition:background .1s,box-shadow .1s}
.pf-xf:hover{background:var(--dx-hover);box-shadow:inset 0 0 0 1px var(--dx-line2)}
.pf-xf b{font:700 13px/1.2 var(--sans);color:var(--ink)}
.pf-xf small{overflow:hidden;font:500 11px/1.25 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.pf-xf.on{background:var(--dx-on);box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.pf-xf.on b{color:var(--dx-ont)}
.pf-xf.off{opacity:.4;cursor:default}
.pf-xc{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.pf-xc li{position:relative;padding:6px 10px 6px 26px;background:var(--dx-hd);font:12.5px/1.45 var(--sans);color:var(--ink2)}
.pf-xc li::before{content:"!";position:absolute;left:8px;top:7px;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:#F59E0B;color:#FFFFFF;font:700 9px/1 var(--sans)}
.pf-xc .pf-xc-redact::before{background:#E5484D}
.pf-xc .pf-xc-vip::before{content:"★";background:#D99A1E}
.pf-xpw{margin-top:8px}
.pf-xpw>span{display:grid;gap:2px}
/* the start */
.pf-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;width:min(560px,100%);margin-top:8px}
.pf-feats span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;font:500 12.5px/1.2 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line,rgba(var(--lnc),.1))}
.pf-feats svg{width:20px;height:20px;color:#E5484D}
.pf-feats b{font-weight:500}
.pf-formats{max-width:560px;margin:0;font-size:12.5px;line-height:1.55;color:var(--ink3)}
/* showing the pages one at a time */
.pf.presenting .dx-top,.pf.presenting .dx-rail,.pf.presenting .dx-dr,.pf.presenting .pf-strip,.pf.presenting .dx-ft,.pf.presenting .dx-mb,.pf.presenting .pf-objbar,.pf.presenting .pf-no{display:none!important}
.pf.presenting .pf-stage{padding:0;background:#000000;scroll-snap-type:y mandatory}
.pf.presenting .pf-pages{gap:0}
.pf.presenting .pf-pg{scroll-snap-align:center;box-shadow:none;margin:0 auto}
.pf.presenting .pf-lay{cursor:pointer!important}
/* a narrower window */
@media (max-width:1100px) and (min-width:760px){
  .pf-hint{display:none}
}
@media (pointer:coarse){
  .pf-hd{width:20px;height:20px;margin:-10px 0 0 -10px}
  .pf-objbar button{width:40px;height:40px}
  .pf .pf-pgn{font-size:16px}
}
/* a phone: the strip scrolls; the sections in the bar at the foot, each a sheet */
@media (max-width:759px){
  .pf-stage{padding:8px 8px 40px}
  .pf-pages{gap:10px}
  .pf-no,.pf-hint{display:none}
  .pf-strip{min-height:44px;padding:0 4px}
  .pf-grp{min-width:0;padding:0 6px 0 8px}
  .pf-nav .pf-pgt{min-width:0}
  .pf .dx-ft .dx-st{display:none}
  .pf-objbar{max-width:calc(100% - 12px);overflow-x:auto;scrollbar-width:none}
  .pf-xfs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-feats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .pf-feats span{padding:8px 2px;font-size:11.5px}
  .pf-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;padding:4px 10px 12px}
  .pf-sgc{height:170px}
}
@media (orientation:landscape) and (max-height:520px){
  .pf-strip{min-height:38px}
  .pf-stage{padding:8px 12px 24px}
}
/* lights off: a dark desk and window; the pages stay paper */
html[data-theme="dark"] .pf .pf-doci{background:#D63C42}
html[data-theme="dark"] .pf-pg{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 12px 32px -12px rgba(0,0,0,.8)}
html[data-theme="dark"] .pf-no{color:rgba(226,224,255,.38)}
html[data-theme="dark"] .pf-sgi,html[data-theme="dark"] .pf-stamps button,html[data-theme="dark"] .pf-sgfonts button{background:#F4F3FA}
html[data-theme="dark"] .pf-sgx{color:#5E5A77}
html[data-theme="dark"] .pf-stamps .pf-stc span{color:#3B3852}
html[data-theme="dark"] .pf-thc{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 3px 10px -6px rgba(0,0,0,.8)}
html[data-theme="dark"] .pf-cmtb i{color:rgba(20,17,46,.85)}
html[data-theme="dark"] .pf-vip{color:#5A3900}
html[data-theme="dark"] .pf-fr mark{color:#111111}
/* <<app:code-kit>> */
/* ================= 2026-10-01 the site's code editor (code-kit.js: the text & code editor, the regex assistant, the code runners) =================
   A textarea (see-through letters, visible caret and selection) over a coloured copy of the text: both must lay the text out
   the same way, so they share one font, size, line height, tab size and padding, and neither has bold or italic words
   (a bolder glyph could be wider and the caret would drift). The line numbers in a column at the left, a small map of the
   file at the right when asked. Flat and square like the site's other workspace windows. */
.ce{--ce-fs:14px;--ce-lh:22px;--ce-tab:4;--ce-pad:10px;--ce-gw:4.2ch;
  --ce-font:"Cascadia Mono","JetBrains Mono",Consolas,"SF Mono",SFMono-Regular,Menlo,"DejaVu Sans Mono","Liberation Mono","Microsoft YaHei UI","PingFang SC",monospace;
  --ce-bg:#FFFFFF;--ce-ink:#1E2230;--ce-gut:#F7F8FB;--ce-lnum:#A0A5B6;--ce-lnon:#2B3040;--ce-al:rgba(36,88,230,.05);--ce-sel:rgba(36,88,230,.22);--ce-caret:#2458E6;
  --ce-ws:rgba(30,34,48,.28);--ce-guide:rgba(30,34,48,.09);
  --ce-com:#8A90A3;--ce-kw:#7C3AED;--ce-ty:#0E7490;--ce-fn:#1D4ED8;--ce-str:#15803D;--ce-num:#C2410C;--ce-con:#B45309;--ce-op:#A21CAF;--ce-pun:#6B7085;
  --ce-tag:#BE185D;--ce-at:#B45309;--ce-av:#15803D;--ce-ent:#7C3AED;--ce-prop:#0E7490;--ce-sel2:#1D4ED8;--ce-var:#9333EA;--ce-meta:#6D28D9;--ce-re:#DB2777;
  --ce-hd:#1D4ED8;--ce-link:#0369A1;--ce-code:#B45309;--ce-quote:#6B7085;--ce-em:#7C3AED;--ce-strong:#B91C1C;--ce-list:#C2410C;--ce-key:#1D4ED8;--ce-secc:#7C3AED;
  --ce-del:#B91C1C;--ce-ins:#15803D;--ce-err:#DC2626;--ce-esc:#C2410C;--ce-bi:#0F766E;--ce-dec:#A16207;--ce-warn:#B45309;
  position:relative;display:flex;min-width:0;min-height:0;overflow:hidden;background:var(--ce-bg);color:var(--ce-ink);text-align:left;direction:ltr}
html[data-theme="dark"] .ce{--ce-bg:#12131A;--ce-ink:#DADCE6;--ce-gut:#171821;--ce-lnum:#5D6275;--ce-lnon:#C9CCDA;--ce-al:rgba(141,169,255,.07);--ce-sel:rgba(120,150,255,.32);--ce-caret:#8DA9FF;
  --ce-ws:rgba(218,220,230,.26);--ce-guide:rgba(218,220,230,.08);
  --ce-com:#6E7489;--ce-kw:#C4A5FF;--ce-ty:#5EC8D8;--ce-fn:#8DB4FF;--ce-str:#8BD49C;--ce-num:#F2A46B;--ce-con:#F0C674;--ce-op:#E291E8;--ce-pun:#9096AA;
  --ce-tag:#F27BAE;--ce-at:#F0C674;--ce-av:#8BD49C;--ce-ent:#C4A5FF;--ce-prop:#5EC8D8;--ce-sel2:#8DB4FF;--ce-var:#D7A8FF;--ce-meta:#B69CFF;--ce-re:#F48FB1;
  --ce-hd:#8DB4FF;--ce-link:#6CC4F0;--ce-code:#F0C674;--ce-quote:#9096AA;--ce-em:#C4A5FF;--ce-strong:#FF8A80;--ce-list:#F2A46B;--ce-key:#8DB4FF;--ce-secc:#C4A5FF;
  --ce-del:#FF8A80;--ce-ins:#8BD49C;--ce-err:#FF7B7B;--ce-esc:#F2A46B;--ce-bi:#5FD4C2;--ce-dec:#E6C07B;--ce-warn:#F0C674;color-scheme:dark}
.ce-gut,.ce-in,.ce-ta,.ce-cmp{font-family:var(--ce-font);font-size:var(--ce-fs);line-height:var(--ce-lh);font-weight:400;font-style:normal;letter-spacing:0;word-spacing:0;
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;font-kerning:none;tab-size:var(--ce-tab);-moz-tab-size:var(--ce-tab);text-transform:none}
/* the numbers */
.ce-gut{position:relative;flex:none;width:calc(var(--ce-gw) + 14px);overflow:hidden;background:var(--ce-gut);box-shadow:inset -1px 0 0 rgba(var(--lnc),.07);color:var(--ce-lnum);user-select:none;-webkit-user-select:none;cursor:default}
.ce-nonum .ce-gut{width:16px}
.ce-gi{position:absolute;left:0;right:0;top:0}
.ce-n{position:absolute;left:0;right:0;padding:0 8px 0 0;overflow:hidden;font-size:calc(var(--ce-fs) * .84);text-align:right;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.ce-n.on{color:var(--ce-lnon)}
.ce-n::before{content:"";position:absolute;left:5px;top:calc(var(--ce-lh) / 2 - 4px);width:8px;height:8px;border-radius:50%}
.ce-n:hover::before{background:rgba(var(--lnc),.12)}
.ce-n.bm::before{background:#2458E6;box-shadow:0 0 0 2px rgba(36,88,230,.18)}
.ce-n.g-bp::before{background:#E5484D;box-shadow:0 0 0 2px rgba(229,72,77,.2)}
.ce-n.g-bp.bm::before{background:linear-gradient(90deg,#E5484D 50%,#2458E6 50%)}
.ce-n.g-err{color:var(--ce-err);font-weight:600}
.ce-n.g-warn{color:var(--ce-warn)}
.ce-n.g-exec::after{content:"";position:absolute;left:1px;top:calc(var(--ce-lh) / 2 - 5px);border:5px solid transparent;border-left:7px solid #F5A524;border-right:0}
/* the typing surface and the copy under it */
.ce-body{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}
.ce-view{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.ce-in{position:absolute;left:0;top:0;min-width:100%;box-sizing:border-box;padding:var(--ce-pad) var(--ce-pad) calc(var(--ce-pad) + 40px);white-space:pre;overflow-wrap:normal;word-break:normal;color:var(--ce-ink);will-change:transform}
.ce-wrap .ce-in{white-space:pre-wrap;overflow-wrap:break-word;min-width:0}
/* (the blocks and lines are measured from .ce-in, whose padding is the textarea's: nothing positioned in between) */
.ce-code,.ce-ch,.ce-l{position:static}
.ce-l{min-height:var(--ce-lh)}
.ce-bg{position:absolute;left:0;top:0;right:0;height:0}
.ce-al{position:absolute;left:0;right:0;background:var(--ce-al)}
.ce-focus .ce-al{background:var(--ce-al);box-shadow:inset 0 1px 0 rgba(36,88,230,.04),inset 0 -1px 0 rgba(36,88,230,.04)}
.ce-rs{position:absolute;background:var(--ce-sel)}
.ce-ta{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;box-sizing:border-box;margin:0;padding:var(--ce-pad) var(--ce-pad) calc(var(--ce-pad) + 40px);
  border:0;border-radius:0;outline:0;resize:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--ce-caret);
  white-space:pre;overflow:auto;overflow-wrap:normal;word-break:normal;scrollbar-width:thin;-webkit-appearance:none;appearance:none}
.ce-wrap .ce-ta{white-space:pre-wrap;overflow-wrap:break-word;overflow-x:hidden}
.ce-ta::selection{background:var(--ce-sel);color:transparent;-webkit-text-fill-color:transparent}
.ce-ta::placeholder{color:var(--ce-lnum);-webkit-text-fill-color:var(--ce-lnum);opacity:1}
.ce-ro .ce-ta{caret-color:transparent}
/* a small box (a pattern, a formula): no room to scroll past the end, no scroll bar unless it overflows */
.ce-tight .ce-ta,.ce-tight .ce-in{padding-bottom:var(--ce-pad)}
.ce-tight .ce-ta{scrollbar-width:none}
.ce-tight .ce-ta::-webkit-scrollbar{display:none}
.ce-ov{position:absolute;inset:0;z-index:3;pointer-events:none}
/* colours of the words */
.t-com{color:var(--ce-com)}.t-kw{color:var(--ce-kw)}.t-ty{color:var(--ce-ty)}.t-fn{color:var(--ce-fn)}.t-str{color:var(--ce-str)}.t-num{color:var(--ce-num)}
.t-con{color:var(--ce-con)}.t-op{color:var(--ce-op)}.t-pun{color:var(--ce-pun)}.t-tag{color:var(--ce-tag)}.t-at{color:var(--ce-at)}.t-av{color:var(--ce-av)}
.t-ent{color:var(--ce-ent)}.t-prop{color:var(--ce-prop)}.t-sel{color:var(--ce-sel2)}.t-var{color:var(--ce-var)}.t-meta{color:var(--ce-meta)}.t-re{color:var(--ce-re)}
.t-hd{color:var(--ce-hd)}.t-link{color:var(--ce-link);text-decoration:underline;text-decoration-color:rgba(3,105,161,.35)}.t-code{color:var(--ce-code)}.t-quote{color:var(--ce-quote)}
.t-em{color:var(--ce-em)}.t-strong{color:var(--ce-strong)}.t-list{color:var(--ce-list)}.t-key{color:var(--ce-key)}.t-sec{color:var(--ce-secc)}
.t-del{color:var(--ce-del);background:rgba(229,72,77,.08)}.t-ins{color:var(--ce-ins);background:rgba(22,163,74,.08)}
.t-err{color:var(--ce-err)}.t-warn{color:var(--ce-warn)}.t-esc{color:var(--ce-esc)}.t-bi{color:var(--ce-bi)}.t-dec{color:var(--ce-dec)}
.t-c0{color:#2458E6}.t-c1{color:#C2410C}.t-c2{color:#15803D}.t-c3{color:#A21CAF}.t-c4{color:#0E7490}.t-c5{color:#B45309}
html[data-theme="dark"] .t-c0{color:#8DB4FF}html[data-theme="dark"] .t-c1{color:#F2A46B}html[data-theme="dark"] .t-c2{color:#8BD49C}html[data-theme="dark"] .t-c3{color:#E291E8}html[data-theme="dark"] .t-c4{color:#5EC8D8}html[data-theme="dark"] .t-c5{color:#F0C674}
/* a regular expression: groups by depth, classes, escapes, quantifiers */
.t-g0{color:#2458E6;background:rgba(36,88,230,.10)}.t-g1{color:#15803D;background:rgba(22,163,74,.11)}.t-g2{color:#C2410C;background:rgba(234,88,12,.11)}.t-g3{color:#A21CAF;background:rgba(162,28,175,.10)}.t-g4{color:#0E7490;background:rgba(14,116,144,.11)}
.t-cls{color:#B45309}.t-cls2{color:#92400E}.t-q{color:#7C3AED}.t-anc{color:#BE185D}.t-alt{color:#DC2626}.t-dot{color:#0F766E}
html[data-theme="dark"] .t-g0{color:#9CB8FF}html[data-theme="dark"] .t-g1{color:#8BD49C}html[data-theme="dark"] .t-g2{color:#F2A46B}html[data-theme="dark"] .t-g3{color:#E291E8}html[data-theme="dark"] .t-g4{color:#5EC8D8}
html[data-theme="dark"] .t-cls{color:#F0C674}html[data-theme="dark"] .t-cls2{color:#E6B35C}html[data-theme="dark"] .t-q{color:#C4A5FF}html[data-theme="dark"] .t-anc{color:#F27BAE}html[data-theme="dark"] .t-alt{color:#FF8A80}html[data-theme="dark"] .t-dot{color:#5FD4C2}
/* marks: found words, the current one, the word picked elsewhere, brackets and tags that belong together */
.ce-m-find{background:rgba(250,204,21,.38);box-shadow:inset 0 -1px 0 rgba(202,138,4,.6)}
.ce-m-find.ce-cur{background:rgba(249,115,22,.55);box-shadow:inset 0 0 0 1px rgba(194,65,12,.7)}
.ce-oc{background:rgba(36,88,230,.12)}
.ce-bm{background:rgba(36,88,230,.15);box-shadow:inset 0 0 0 1px rgba(36,88,230,.45)}
.ce-bx{background:rgba(229,72,77,.22)}
.ce-tm{background:rgba(36,88,230,.10);text-decoration:underline;text-decoration-color:rgba(36,88,230,.6)}
.ce-m-hit{background:rgba(36,88,230,.16);border-radius:2px}
.ce-m-hit.alt{background:rgba(22,163,74,.18)}
.ce-z{display:inline-block;width:2px;margin-right:-2px;height:1em;vertical-align:-2px;background:#F59E0B}
.ce-m-err{text-decoration:underline wavy #E5484D;text-decoration-skip-ink:none;text-underline-offset:3px}
html[data-theme="dark"] .ce-m-find{background:rgba(250,204,21,.28)}
html[data-theme="dark"] .ce-oc{background:rgba(141,169,255,.16)}
/* the whole line: where a program stopped, an error */
.ce-l.ce-exec{background:rgba(245,165,36,.22);box-shadow:inset 3px 0 0 #F5A524}
.ce-l.ce-errl{background:rgba(229,72,77,.08)}
.ce-l.ce-hl{background:rgba(36,88,230,.08)}
/* spaces, tabs and line ends shown; indent guides */
.ce-ws .ce-s1{background:radial-gradient(circle,var(--ce-ws) 0 1.1px,transparent 1.6px) center/100% 100% no-repeat}
.ce-ws .ce-s2{box-shadow:inset 0 0 0 1px var(--ce-guide)}
.ce-tb{position:relative}
.ce-ws .ce-tb::before{content:"";position:absolute;left:2px;right:3px;top:50%;border-top:1px solid var(--ce-ws)}
.ce-ws .ce-tb::after{content:"";position:absolute;right:2px;top:calc(50% - 3px);border:3px solid transparent;border-left:4px solid var(--ce-ws);border-right:0}
.ce-e{display:none}
.ce-eol .ce-e{display:inline-block;position:relative;width:0;height:1px}
.ce-eol .ce-e::after{content:attr(data-e);position:absolute;left:3px;top:-.95em;padding:0 3px;font:600 9px/14px var(--sans);letter-spacing:.02em;color:var(--ce-lnum);background:rgba(var(--lnc),.06);white-space:nowrap}
.ce-guides .ce-ind{background-image:linear-gradient(90deg,var(--ce-guide) 1px,transparent 1px);background-size:calc(var(--ce-tab) * 1ch) 100%;background-repeat:repeat-x}
/* completion */
.ce-cmp{position:absolute;z-index:6;min-width:170px;max-width:340px;max-height:232px;overflow:auto;padding:3px 0;background:var(--sf,#FFF);color:var(--ink,#111);
  box-shadow:0 0 0 1px rgba(var(--lnc),.14),0 10px 28px -8px rgba(var(--shd),.35);font-size:calc(var(--ce-fs) * .9);scrollbar-width:thin}
.ce-cmp[hidden]{display:none}
.ce-ci{padding:4px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.ce-ci b{font-weight:400;color:var(--ce-fn)}
.ce-ci.on{background:rgba(36,88,230,.12)}
/* the map */
.ce-map{display:none;flex:none;width:84px;height:100%;background:var(--ce-bg);box-shadow:inset 1px 0 0 rgba(var(--lnc),.07);cursor:pointer;touch-action:none}
.ce-hasmap .ce-map{display:block}
@media (max-width:759px){.ce-hasmap .ce-map{display:none}}
@media (pointer:coarse){.ce{--ce-pad:8px}.ce-gut{width:calc(var(--ce-gw) + 8px)}.ce-n::before{display:none}}
/* <</app:code-kit>> */
/* <<app:regex>> */
/* ================= 2026-10-01 the online regex assistant (tool regex-assistant, app-regex.js) =================
   The document editor's window (.dx): the pattern in a box at the top with its flags and a row of symbols, what may be
   wrong under it, the uses as tabs (match, replace, split, list, tests), then the text and the results side by side
   (one at a time on a phone, switched at the foot). The library, the reading of the pattern with its railroad drawing,
   code, several files, history and the cheat sheet open in the drawer. Matches are marked in two alternating tints,
   groups underlined in the colours of their column in the table. */
.app[data-kind="regex"]{position:relative}
.rx .rx-doci{background:#0F766E}
.rx-main{min-width:0}
.rx-pat{flex:none;display:flex;flex-direction:column;gap:6px;padding:10px 12px 8px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.rx-pbox{display:flex;align-items:flex-start;min-width:0;background:var(--sf);box-shadow:inset 0 0 0 1.5px var(--dx-line2);transition:box-shadow .12s}
.rx.pfocus .rx-pbox{box-shadow:inset 0 0 0 2px var(--dx-acc)}
.rx-sl{flex:none;padding:9px 2px 0 10px;font:600 18px/22px var(--mono);color:var(--ink4);user-select:none}
.rx-sl+.rx-pe+.rx-sl{padding:9px 4px 0 2px}
.rx-pe{flex:1;min-width:0;display:flex;height:42px}
.rx-pe>.ce{flex:1;--ce-pad:9px;background:transparent}
.rx-pe .ce-gut{display:none}
.rx-fv{flex:none;padding:10px 12px 0 0;font:600 15px/22px var(--mono);color:#7C3AED;min-width:1ch}
.rx-pact{display:flex;align-items:center;gap:6px;min-width:0}
.rx-pact .sp{flex:1}
.rx-flags{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.rx-flags::-webkit-scrollbar{display:none}
.rx-flag{flex:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;font:500 12px/1 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line2);transition:background .1s,color .1s}
.rx-flag b{font:700 13px/1 var(--mono);color:var(--ink3)}
.rx-flag:hover{background:var(--dx-hover);color:var(--ink)}
.rx-flag[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont);box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.rx-flag[aria-pressed="true"] b{color:var(--dx-acc)}
.rx-flag[data-flag="v"],.rx-flag[data-flag="y"],.rx-flag[data-flag="d"]{display:none}
.rx-flavor{width:auto;min-width:0}
.rx .rx-run{flex:none;height:30px;gap:6px;padding:0 14px}
.rx.running .rx-run{opacity:.6}
/* the symbols */
.rx-sym{flex:none;display:flex;gap:3px;padding:6px 12px;overflow-x:auto;scrollbar-width:thin;box-shadow:inset 0 -1px 0 var(--dx-line);background:var(--dx-hd)}
.rx-sym button{flex:none;min-width:30px;height:26px;padding:0 7px;font:500 12.5px/1 var(--mono);color:var(--ink2);background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line);transition:background .1s,color .1s}
.rx-sym button:hover{background:var(--dx-on);color:var(--dx-ont)}
/* what may be wrong */
.rx-msg{flex:none;display:flex;flex-direction:column}
.rx-msg:empty{display:none}
.rx-err,.rx-warn{display:flex;align-items:flex-start;gap:8px;padding:7px 12px;font:13px/1.5 var(--sans);box-shadow:inset 0 -1px 0 var(--dx-line)}
.rx-err{background:rgba(229,72,77,.07);color:#B42318}
.rx-warn{background:rgba(245,158,11,.08);color:#8A5300}
.rx-warn.flv{background:rgba(36,88,230,.05);color:var(--ink2)}
.rx-err svg,.rx-warn svg{flex:none;width:15px;height:15px;margin-top:3px}
.rx-err span,.rx-warn span{flex:1;min-width:0}
.rx-warn .btn{flex:none;height:26px;padding:0 10px;font-size:12px}
/* the uses */
.rx-modes{flex:none;display:flex;gap:2px;padding:0 8px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--dx-line)}
.rx-modes::-webkit-scrollbar{display:none}
.rx-modes button{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;font:500 13px/1 var(--sans);color:var(--ink2);transition:color .1s}
.rx-modes button:hover{color:var(--ink)}
.rx-modes button[aria-selected="true"]{color:var(--ink);font-weight:600}
.rx-modes button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--dx-acc)}
.rx-modes svg{width:15px;height:15px}
.rx-modes i{font:600 11px/1 var(--sans);font-style:normal;color:var(--dx-acc)}
.rx-modes i:empty{display:none}
.rx-row{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;box-shadow:inset 0 -1px 0 var(--dx-line);background:var(--dx-tint)}
.rx-row[hidden]{display:none}
.rx-rl{flex:1;display:flex;align-items:center;gap:8px;min-width:220px;font:600 12.5px/1 var(--sans);color:var(--ink2)}
.rx-rl span{flex:none}
.rx .rx-rl .inp{flex:1;min-width:0;height:32px;padding:0 10px;border:0;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line2);font:14px/1 var(--mono);color:var(--ink)}
.rx .rx-rl .inp:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.rx-note{font:12.5px/1.45 var(--sans);color:var(--ink3)}
/* the text and the results */
.rx-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rx-src,.rx-out{display:flex;flex-direction:column;min-width:0;min-height:0}
.rx-src{box-shadow:inset -1px 0 0 var(--dx-line)}
.rx-h{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 6px 0 12px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.rx-h b{font:600 13px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.rx-h small{overflow:hidden;font:500 11.5px/1.2 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.rx-h .sp{flex:1}
.rx-h .dx-b{min-width:30px;height:30px}
.rx-h .dx-b svg{width:16px;height:16px}
.rx-wrapb[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.rx-te,.rx-ob{flex:1;min-height:0;display:flex}
.rx-te>.ce{flex:1}
.rx-ob{flex-direction:column;overflow:auto;scrollbar-width:thin}
.rx-oe{flex:1;display:flex;min-height:0}
.rx-oe>.ce{flex:1}
.rx-empty{margin:0;padding:28px 18px;font:13.5px/1.6 var(--sans);color:var(--ink3);text-align:center}
.rx-slow{display:flex;gap:12px;margin:14px;padding:14px 16px;background:rgba(245,158,11,.08);color:#8A5300;box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
.rx-slow svg{flex:none;width:18px;height:18px;margin-top:2px}
.rx-slow b{display:block;font:600 14px/1.4 var(--sans)}
.rx-slow p{margin:4px 0 10px;font:13px/1.55 var(--sans)}
.rx-tw{min-width:0}
.rx-t{width:100%;border-collapse:collapse;font:12.5px/1.45 var(--sans)}
.rx-t th{position:sticky;top:0;z-index:1;padding:7px 10px;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line2);font-weight:600;color:var(--ink2);text-align:left;white-space:nowrap}
.rx-t th.g0{box-shadow:inset 0 -2px 0 #2458E6}.rx-t th.g1{box-shadow:inset 0 -2px 0 #16A34A}.rx-t th.g2{box-shadow:inset 0 -2px 0 #EA580C}.rx-t th.g3{box-shadow:inset 0 -2px 0 #A21CAF}.rx-t th.g4{box-shadow:inset 0 -2px 0 #0E7490}
.rx-t td{max-width:320px;padding:6px 10px;overflow:hidden;box-shadow:inset 0 -1px 0 var(--dx-line);font-family:var(--mono);color:var(--ink);white-space:pre;text-overflow:ellipsis;vertical-align:top}
.rx-t td.n{width:1%;font-family:var(--sans);color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
.rx-t td.m{color:var(--dx-ont)}
.rx-t td i{font-style:normal;color:var(--ink4)}
.rx-t td.ok{color:#15803D;font-weight:700;text-align:center}
.rx-t td.bad{color:#DC2626;font-weight:700;text-align:center}
.rx-t tbody tr{cursor:pointer}
.rx-t tbody tr:hover td{background:var(--dx-hover)}
.rx-t tbody tr.on td{background:var(--dx-on)}
.rx-more{margin:10px 12px}
.rx-tw .rx-note{margin:8px 12px}
.rx-parts{margin:0;padding:6px 0 12px 3.2em;font:13px/1.5 var(--mono);color:var(--ink)}
.rx-parts li{padding:3px 10px 3px 4px;box-shadow:inset 0 -1px 0 var(--dx-line);white-space:pre-wrap;word-break:break-all}
.rx-parts li::marker{color:var(--ink4);font:12px var(--sans)}
.rx-parts i{font-style:normal;color:var(--ink4)}
.rx-tests{display:flex;flex-direction:column;gap:4px;padding:10px 12px 16px}
.rx-tc{display:flex;align-items:center;gap:6px}
.rx-ts{flex:none;width:22px;font:700 15px/1 var(--sans);color:var(--ink4);text-align:center}
.rx-tc.ok .rx-ts{color:#16A34A}
.rx-tc.bad .rx-ts{color:#DC2626}
.rx .rx-tc .inp,.rx .rx-tadd .inp{flex:1;min-width:0;height:32px;padding:0 10px;border:0;border-radius:0;background:var(--sf);box-shadow:inset 0 0 0 1px var(--dx-line2);font:13.5px/1 var(--mono);color:var(--ink)}
.rx .rx-tc.bad .inp{box-shadow:inset 0 0 0 1.5px rgba(220,38,38,.55)}
.rx-tw2{flex:none;height:32px;padding:0 10px;font:500 12px/1 var(--sans);box-shadow:inset 0 0 0 1px var(--dx-line2)}
.rx-tw2.yes{color:#15803D}
.rx-tw2.no{color:#B42318}
.rx-tadd{display:flex;gap:6px;margin-top:8px}
/* marks in the text: matches in two tints, groups underlined in their columns' colours */
.ce-m-hit{background:rgba(36,88,230,.16)}
.ce-m-hit.alt{background:rgba(22,163,74,.18)}
.ce-m-hit.ce-cur{background:rgba(249,115,22,.4);box-shadow:inset 0 0 0 1px rgba(194,65,12,.6)}
.ce-m-g0,.ce-m-g1,.ce-m-g2,.ce-m-g3,.ce-m-g4{text-decoration:underline 2px;text-underline-offset:3px;text-decoration-skip-ink:none}
.ce-m-g0{text-decoration-color:#2458E6}.ce-m-g1{text-decoration-color:#16A34A}.ce-m-g2{text-decoration-color:#EA580C}.ce-m-g3{text-decoration-color:#A21CAF}.ce-m-g4{text-decoration-color:#0E7490}
html[data-theme="dark"] .ce-m-hit{background:rgba(120,150,255,.24)}
html[data-theme="dark"] .ce-m-hit.alt{background:rgba(74,222,128,.2)}
/* the drawer */
.rx-dr{width:340px}
.rx .dxd-c .inp[data-libq]{margin-bottom:10px}
.rx-cats{margin-bottom:10px}
.rx-ver{margin-bottom:8px}
.rx-li code{display:block;max-width:100%;overflow:hidden;font:11.5px/1.4 var(--mono);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.rx-li.on{background:var(--dx-on);box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.rx-xp{display:flex;flex-direction:column}
.rx-xr{display:flex;align-items:baseline;gap:8px;padding:4px 6px 4px calc(6px + var(--d) * 14px);font:12.5px/1.45 var(--sans);color:var(--ink);cursor:pointer}
.rx-xr:hover{background:var(--dx-hover)}
.rx-xr code{flex:none;max-width:45%;padding:1px 5px;overflow:hidden;background:var(--dx-hd);box-shadow:inset 0 0 0 1px var(--dx-line);font:12px/1.4 var(--mono);color:var(--dx-ont);white-space:nowrap;text-overflow:ellipsis}
.rx-xr.opt{color:var(--ink3)}
.rx-xr.opt code{display:none}
.rx-xr.grp code{color:#2458E6}
.rx-xr.q code{color:#7C3AED}
.rx-xr.anc code{color:#BE185D}
.rx-xr.cls code{color:#B45309}
.rx-rr{overflow:auto;max-height:360px;padding:6px 0;scrollbar-width:thin}
.rx-rrbig{overflow:auto;max-width:min(92vw,1400px);max-height:72vh}
.rx-rrdlg .dx-dlgb{width:auto;max-width:96vw}
.rr{display:block}
.rr .rr-l{fill:none;stroke:var(--ink4);stroke-width:1.5}
.rr .rr-skip,.rr .rr-back{stroke:var(--ink4);opacity:.75}
.rr .rr-end{fill:var(--ink4)}
.rr .rr-b rect{stroke-width:1.2}
.rr text{font:11.5px var(--sans);text-anchor:middle;fill:var(--ink)}
.rr .rr-m{font:12px var(--mono)}
.rr .rr-lit rect{fill:#EEF3FF;stroke:#2458E6}.rr .rr-lit text{fill:#1E3A8A}
.rr .rr-esc rect{fill:#ECFDF5;stroke:#0F766E}.rr .rr-esc text{fill:#115E59}
.rr .rr-cls rect{fill:#FFF7ED;stroke:#C2410C}.rr .rr-cls text{fill:#9A3412}
.rr .rr-anc rect{fill:#FDF2F8;stroke:#BE185D}.rr .rr-anc text{fill:#9D174D}
.rr .rr-ref rect{fill:#F5F3FF;stroke:#7C3AED}.rr .rr-ref text{fill:#5B21B6}
.rr .rr-g rect{fill:rgba(36,88,230,.03);stroke:#9DB4F0}
.rr .rr-g text{text-anchor:start;font-size:10.5px;fill:#2458E6}
.rr .rr-look rect{fill:rgba(190,24,93,.03);stroke:#E7A3C3}
.rr .rr-look text{fill:#BE185D}
.rr .rr-q{font-size:10.5px;fill:var(--ink3)}
.rr [data-s]{cursor:pointer}
.rr [data-s]:hover rect{stroke-width:2}
html[data-theme="dark"] .rr .rr-lit rect{fill:#1C2550}html[data-theme="dark"] .rr .rr-lit text{fill:#C7D5FF}
html[data-theme="dark"] .rr .rr-esc rect{fill:#0F2A26}html[data-theme="dark"] .rr .rr-esc text{fill:#8BE0CF}
html[data-theme="dark"] .rr .rr-cls rect{fill:#2E1F12}html[data-theme="dark"] .rr .rr-cls text{fill:#F5C28F}
html[data-theme="dark"] .rr .rr-anc rect{fill:#2E1422}html[data-theme="dark"] .rr .rr-anc text{fill:#F5A3C7}
html[data-theme="dark"] .rr .rr-ref rect{fill:#24193F}html[data-theme="dark"] .rr .rr-ref text{fill:#D4C2FF}
.rx-cheat{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.rx-cheat>button,.rx-cheat>div{display:flex;align-items:baseline;gap:10px;padding:5px 8px;text-align:left;font:12.5px/1.4 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line)}
.rx-cheat>button:hover{background:var(--dx-on)}
.rx-cheat code{flex:none;min-width:84px;font:12.5px/1.4 var(--mono);color:var(--dx-ont)}
.rx-mis{padding:6px 0 8px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.rx-mis:last-child{box-shadow:none}
.rx-mis b{font:600 13px/1.4 var(--sans);color:var(--ink)}
.rx-mis p{margin:3px 0 0;font:12.5px/1.55 var(--sans);color:var(--ink3)}
.rx-hi{padding:0;gap:0}
.rx-hgo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:7px 10px;text-align:left}
.rx-hgo code{overflow:hidden;font:12px/1.4 var(--mono);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.rx-hgo small{font:11.5px/1.3 var(--sans);color:var(--ink3)}
.rx-hi .dx-b svg{color:#F59E0B}
.rx-code{display:flex;height:240px;margin-bottom:10px;box-shadow:inset 0 0 0 1px var(--dx-line2)}
.rx-code>.ce{flex:1}
.rx-ms{font:500 12px/1 var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums}
/* narrower: the results under the text */
@media (max-width:1100px){.rx-work{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.rx-src{box-shadow:inset 0 -1px 0 var(--dx-line)}}
/* a phone: the pattern at the top, the text or the results under it, switched at the foot */
@media (max-width:759px){
  .rx-pat{padding:8px 8px 6px}
  .rx-pact{flex-wrap:wrap}
  .rx-flag span{display:none}
  .rx-flag{padding:0 10px;height:32px}
  .rx-flavor{display:none}
  .rx-sym{padding:5px 8px}
  .rx-sym button{min-width:36px;height:32px}
  .rx-work{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .rx[data-pane="text"] .rx-out,.rx[data-pane="out"] .rx-src{display:none}
  .rx-src{box-shadow:none}
  .rx-mb [data-pv][aria-pressed="true"]{color:var(--dx-acc)}
  .rx .dx-mb{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* (the sections are in the bar at the foot: the top keeps the name, undo and redo) */
  .rx .dx-tb [data-cmd^="sec:"],.rx .dx-tb [data-cmd="keys"],.rx .dx-tb [data-cmd="share"],.rx .dx-tb .dx-sep{display:none}
  .rx-dr{width:auto}
  .rx-t td{max-width:200px}
}
/* <</app:regex>> */
/* <<app:texted>> */
/* ================= 2026-10-01 the online text editor (tool text-editor, app-texted.js) =================
   The document editor's window (.dx) with a row of tabs under its top: the text in the site's code editor (code-kit.js),
   a second view beside it (the same file twice, another tab, or the other side of a comparison), and the live preview of
   a page with its console at the right. The file, find, line, conversion, HTML, bookmark, compare, outline and view tools
   open in the drawer; the language, encoding, line endings and indentation are buttons in the status bar. On a phone one
   pane at a time, the sections in the bar at the foot, and a row of keys over the keyboard. */
.app[data-kind="texted"]{position:relative}
.te .te-doci{background:#334155}
.te .dx-tb .dx-b[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.te-prevb span{font-size:12.5px}
/* the tabs */
.te-tabs{flex:none;display:flex;align-items:stretch;min-height:36px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-padding-inline-end:40px;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line)}
.te-tabs::-webkit-scrollbar{display:none}
.te-tab{position:relative;flex:none;display:flex;align-items:center;gap:4px;max-width:220px;min-width:0;padding:0 4px 0 12px;font:500 12.5px/1 var(--sans);color:var(--ink3);box-shadow:inset -1px 0 0 var(--dx-line);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .1s,color .1s}
.te-tab:hover{background:var(--dx-hover);color:var(--ink)}
.te-tab.on{background:var(--sf);color:var(--ink);font-weight:600}
.te-tab.on::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--dx-acc)}
.te-tn{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.te-tab.dirty .te-tn::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--amber);vertical-align:1px}
.te-x{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--ink3);opacity:.55;transition:opacity .1s,background .1s}
.te-x:hover{opacity:1;background:var(--dx-hover);color:var(--ink)}
.te-x svg{width:12px;height:12px}
.te-tadd{position:sticky;right:0;flex:none;display:grid;place-items:center;width:36px;color:var(--ink2);background:var(--dx-hd);transition:background .1s,color .1s}
.te-tadd:hover{background:var(--dx-hover);color:var(--ink)}
.te-tadd svg{width:15px;height:15px}
/* the text, a second view, the preview */
.te-main{min-width:0}
.te-work{flex:1;min-height:0;display:flex}
.te-ed{flex:1;min-width:0;display:flex}
.te-ed>.ce{flex:1}
.te-ed2{flex:1;min-width:0;display:flex;flex-direction:column;box-shadow:inset 1px 0 0 var(--dx-line2)}
.te-ed2[hidden]{display:none}
.te-e2h,.te-pvh,.te-conh{flex:none;display:flex;align-items:center;gap:6px;min-height:34px;padding:0 4px 0 12px;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line)}
.te-e2h b,.te-pvh b,.te-conh b{overflow:hidden;font:600 12.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.te-e2h small{flex:none;padding:3px 6px;background:var(--dx-hover);font:500 11px/1 var(--sans);color:var(--ink3)}
.te-conh small{font:500 11.5px/1 var(--sans);color:var(--ink3)}
.te-e2h .sp,.te-pvh .sp,.te-conh .sp{flex:1}
.te-e2h .dx-b,.te-pvh .dx-b,.te-conh .dx-b{min-width:28px;height:28px}
.te-e2h .dx-b svg,.te-pvh .dx-b svg,.te-conh .dx-b svg{width:15px;height:15px}
.te-e2b{flex:1;min-height:0;display:flex}
.te-e2b>.ce{flex:1}
.te-pv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--dx-desk);box-shadow:inset 1px 0 0 var(--dx-line2)}
.te-pv[hidden]{display:none}
.te-pvh .pf-seg button{min-width:28px;height:26px;padding:0 7px}
.te-pvb{flex:1;min-height:0;display:flex;justify-content:center;overflow:auto}
.te-frame{flex:none;display:block;width:100%;height:100%;border:0;background:#FFFFFF}
.te[data-pvdev="tablet"] .te-pvb,.te[data-pvdev="phone"] .te-pvb{padding:12px}
.te[data-pvdev="tablet"] .te-frame{width:768px;max-width:100%;box-shadow:0 0 0 1px var(--dx-line2),0 8px 24px -12px rgba(var(--shd),.35)}
.te[data-pvdev="phone"] .te-frame{width:390px;max-width:100%;box-shadow:0 0 0 1px var(--dx-line2),0 8px 24px -12px rgba(var(--shd),.35)}
.te-conb.err{color:#DC2626}
.te-conb.err::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:#DC2626}
.te-con{flex:none;display:flex;flex-direction:column;height:36%;min-height:120px;background:var(--sf);box-shadow:inset 0 1px 0 var(--dx-line2)}
.te-con[hidden]{display:none}
.te-conl{flex:1;min-height:0;overflow:auto;font:12px/1.5 var(--mono);color:var(--ink);scrollbar-width:thin}
.te-conl .dxd-note{margin:10px 12px}
.te-cl{padding:3px 12px;box-shadow:inset 0 -1px 0 var(--dx-line);white-space:pre-wrap;word-break:break-all}
.te-cl.info,.te-cl.debug{color:var(--ink2)}
.te-cl.warn{background:rgba(245,158,11,.08);color:#8A5300}
.te-cl.error{background:rgba(229,72,77,.07);color:#B42318}
/* the status bar: where the caret is, and the buttons for the language, encoding, line endings, indentation */
.te-ft{gap:4px}
.te-sb{flex:none;height:26px;padding:0 8px;font:500 12px/1 var(--sans);color:var(--ink3);white-space:nowrap;transition:background .1s,color .1s}
.te-sb:hover{background:var(--dx-hover);color:var(--ink)}
.te-ft .dx-zm{margin-left:4px}
/* the drawer: find and replace */
.te-dr{width:330px}
.te-fdrow{display:flex;gap:4px;min-width:0}
.te .te-fdrow .inp{flex:1;min-width:0;font:14px/1 var(--mono)}
.te-fdo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 0 8px}
.te-fdt{display:flex;align-items:center;gap:7px;min-width:0;min-height:30px;padding:3px 8px;text-align:left;font:500 12px/1.2 var(--sans);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line2);transition:background .1s,color .1s}
.te-fdt:hover{background:var(--dx-hover);color:var(--ink)}
.te-fdt b{flex:none;min-width:20px;font:700 12px/1 var(--mono);color:var(--ink3);text-align:center}
.te-fdt span{min-width:0;line-height:1.2}
.te-fdt[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont);box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.te-fdt[aria-pressed="true"] b{color:var(--dx-acc)}
.te-fdn{display:flex;align-items:center;gap:2px;min-height:32px;margin:0 0 8px;font:600 12.5px/1 var(--sans);color:var(--dx-ont);font-variant-numeric:tabular-nums}
.te-fdn .sp{flex:1}
.te-fdn .bad{color:#B42318}
.te-fderr{margin:0 0 8px;padding:6px 8px;background:rgba(229,72,77,.07);font:12px/1.45 var(--mono);color:#B42318;word-break:break-word}
.te-fderr[hidden]{display:none}
.te-fres{display:grid;gap:1px;margin:0 -6px;max-height:48vh;overflow:auto;scrollbar-width:thin}
.te-fres button{display:grid;gap:2px;width:100%;min-width:0;padding:5px 8px;text-align:left;transition:background .1s}
.te-fres button:hover{background:var(--dx-hover)}
.te-fres small{font:500 11px/1.2 var(--sans);color:var(--ink3)}
.te-fres span{overflow:hidden;font:12px/1.45 var(--mono);color:var(--ink2);white-space:pre;text-overflow:ellipsis}
.te-fres mark{background:rgba(250,204,21,.45);color:var(--ink)}
.te-rpv{max-height:52vh;overflow:auto;font:12px/1.5 var(--mono);scrollbar-width:thin}
.te-rpv table{width:100%;border-collapse:collapse}
.te-rpv td{padding:4px 6px;box-shadow:inset 0 -1px 0 var(--dx-line);vertical-align:top;white-space:pre-wrap;word-break:break-all}
.te-rpv td.n{width:1%;padding-right:10px;font-family:var(--sans);color:var(--ink4);text-align:right;white-space:nowrap}
.te-rpv del,.te-rpv ins{display:block;padding:0 4px;text-decoration:none}
.te-rpv del{background:rgba(229,72,77,.1);color:#B42318}
.te-rpv ins{background:rgba(22,163,74,.1);color:#136C33}
.te-rpvdlg .dx-dlgb{width:min(780px,100%)}
/* the page check, bookmarks, the outline */
.te-hc,.te-bml,.te-ol{display:grid;gap:1px;margin:0 -6px}
.te-hc{max-height:46vh;overflow:auto;scrollbar-width:thin}
.te-hci,.te-bml button,.te-ol button{display:flex;align-items:baseline;gap:8px;width:100%;min-width:0;padding:5px 8px;text-align:left;transition:background .1s}
.te-hci:hover,.te-bml button:hover,.te-ol button:hover{background:var(--dx-hover)}
.te-hci b,.te-bml b{flex:none;min-width:32px;font:600 11px/1 var(--sans);color:var(--ink4);text-align:right;font-variant-numeric:tabular-nums}
.te-hci span{min-width:0;font:12.5px/1.45 var(--sans);color:var(--ink)}
.te-hci.err b{color:#DC2626}
.te-hci.warn b{color:#B45309}
.te-hci.info b{color:var(--dx-acc)}
.te-bml b{color:var(--dx-acc)}
.te-bml span{min-width:0;overflow:hidden;font:12px/1.45 var(--mono);color:var(--ink2);white-space:pre;text-overflow:ellipsis}
.te-ol button{padding-left:calc(8px + var(--d, 0) * 14px);font:12.5px/1.4 var(--sans);color:var(--ink2)}
.te-ol button.on{background:var(--dx-on);color:var(--dx-ont)}
.te-ol span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.te-ol small{flex:none;font:500 11px/1 var(--sans);color:var(--ink4);font-variant-numeric:tabular-nums}
/* dialogs: special characters, hashes, word count, what was taken from a page, the column editor */
.te-chdlg .dx-dlgb{width:min(560px,100%)}
.te-ch5{margin:8px 0 4px;font:700 11.5px/1.2 var(--sans);color:var(--ink3)}
.te-ch5:first-child{margin-top:0}
.te-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:3px}
.te-chars button{height:34px;font:16px/1 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--dx-line)}
.te-chars button:hover{background:var(--dx-on);color:var(--dx-ont)}
.te-hashdlg .dx-dlgb{width:min(660px,100%)}
.te-hash{display:grid;gap:6px}
.te-hash div{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;background:var(--dx-hd)}
.te-hash b{flex:none;width:64px;font:600 12px/1.3 var(--sans);color:var(--ink3)}
.te-hash code{flex:1;min-width:0;overflow-wrap:anywhere;font:12px/1.45 var(--mono);color:var(--ink);user-select:all}
.te-stats{width:100%;border-collapse:collapse;font:13px/1.4 var(--sans)}
.te-stats th,.te-stats td{padding:7px 10px;box-shadow:inset 0 -1px 0 var(--dx-line);text-align:right;font-variant-numeric:tabular-nums}
.te-stats th:first-child,.te-stats td:first-child{text-align:left;color:var(--ink2)}
.te-stats th{font-weight:600;color:var(--ink3);background:var(--dx-hd)}
.te-xdlg .dx-dlgb{width:min(780px,100%)}
.te-xt{max-height:56vh;overflow:auto;scrollbar-width:thin}
.te-xt table{width:100%;border-collapse:collapse;font:12.5px/1.45 var(--sans)}
.te-xt th{position:sticky;top:0;padding:6px 8px;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line2);text-align:left;color:var(--ink2)}
.te-xt td{max-width:420px;padding:5px 8px;box-shadow:inset 0 -1px 0 var(--dx-line);color:var(--ink);word-break:break-all;vertical-align:top}
.te-cmode{margin-bottom:10px}
.dx-dlgb:focus{outline:0}   /* (a box with nothing to type in holds the keyboard itself, for Esc: dx-kit.js) */
/* a comparison: the lines that differ on each side */
.ce-l.ce-dl{background:rgba(229,72,77,.11);box-shadow:inset 3px 0 0 #E5484D}
.ce-l.ce-dr{background:rgba(22,163,74,.11);box-shadow:inset 3px 0 0 #16A34A}
html[data-theme="dark"] .ce-l.ce-dl{background:rgba(255,120,120,.14)}
html[data-theme="dark"] .ce-l.ce-dr{background:rgba(110,220,140,.13)}
html[data-theme="dark"] .te-rpv del,html[data-theme="dark"] .te-cl.error,html[data-theme="dark"] .te-fderr{color:#FF9B9B}
html[data-theme="dark"] .te-rpv ins{color:#8BD49C}
html[data-theme="dark"] .te-cl.warn{color:#F0C674}
/* the keys over a phone's keyboard (shown only while the keyboard is up) */
.te-keys{display:none}
.te-keys.up:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:var(--sf2);box-shadow:0 -1px 0 var(--dx-line2),0 -8px 20px -12px rgba(var(--shd),.35)}
.te-keys::-webkit-scrollbar{display:none}
.te-keys button{flex:none;display:grid;place-items:center;min-width:38px;height:36px;padding:0 8px;font:500 15px/1 var(--mono);color:var(--ink2)}
.te-keys button:active{background:var(--dx-on);color:var(--dx-ont)}
.te-keys [data-kb="selw"],.te-keys [data-kb="sell"]{font:500 13px/1 var(--sans)}
.te-keys i{flex:none;width:1px;height:22px;margin:0 4px;background:var(--dx-line2)}
/* narrower: the preview label goes */
@media (max-width:1100px){.te-prevb span{display:none}.te .dx-cmdk{min-width:0}.te .dx-cmdk span{display:none}}
/* a phone: one pane at a time; the sections at the foot; the top keeps the file, undo, redo and wrapping */
@media (max-width:759px){
  .te .dx-mb{grid-template-columns:repeat(5,minmax(0,1fr))}
  .te .dx-tb [data-cmd^="sec:"],.te .dx-tb [data-cmd="keys"],.te .dx-tb .te-prevb,.te .dx-tb .te-splitb,.te .dx-tb .dx-sep{display:none}
  .te-tabs{min-height:34px}
  .te-tab{max-width:160px;padding-left:10px}
  .te-x{width:26px;height:26px}
  .te.split .te-work{flex-direction:column}
  .te.split .te-ed2{box-shadow:inset 0 1px 0 var(--dx-line2)}
  .te[data-pane="pv"] .te-ed,.te[data-pane="pv"] .te-ed2{display:none}
  .te:not([data-pane="pv"]) .te-pv{display:none}
  .te-pv{box-shadow:none}
  .te-mbpv[aria-pressed="true"]{color:var(--dx-acc)}
  .te-ft [data-eol],.te-ft [data-ind]{display:none}
  .te-sb{padding:0 6px}
  .te-dr{width:auto}
  .te-fdo{grid-template-columns:repeat(3,minmax(0,1fr))}
  .te-fdt span{display:none}
  .te-fdt{justify-content:center;min-height:36px}
  .te-fdt b{font-size:13px}
  .te-con{height:42%}
}
/* <</app:texted>> */
/* <<app:article>> */
/* ================= 2026-10-01 the online article formatter (tool article-formatter, app-article.js) =================
   The document editor's window (.dx): the article on a sheet in the middle, the phone preview at the right (what the
   official account will show: the article as it is copied out), the sections in the rail. The article's look is all in
   the .ar-doc rules below, driven by the theme's custom properties; everything that must survive copying is drawn with
   the element's own box (borders, backgrounds, padding) — the few things drawn with ::before here (counters, dots) are
   made into real elements when the article is copied out (app-article.js prepareForExport). */
.app[data-kind="article"]{position:relative}
.ar .ar-doci{background:#C2410C}
.ar-main{min-width:0}
.ar .dx-tb .dx-b[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.ar-blk{width:96px;margin-right:4px}
.ar .ar-insb span,.ar .ar-rulesb span{font-size:12.5px}
.ar-work{flex:1;min-height:0;display:flex}
.ar-stage{position:relative;flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;padding:28px 24px 96px;background:var(--dx-desk);scrollbar-width:thin}
.ar-paper{max-width:660px;min-height:calc(100% - 20px);margin:0 auto;padding:40px 30px 72px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(20,17,46,.05),0 1px 3px rgba(20,17,46,.08),0 12px 30px -16px rgba(20,17,46,.28)}
.ar-doc{min-height:240px;outline:0;caret-color:var(--a)}
.ar-doc:focus{outline:0}
.ar-doc section[data-c]:hover,.ar-doc ol[data-c]:hover,.ar-doc ul[data-c]:hover{outline:1px dashed var(--a30);outline-offset:4px}
.ar-doc figcaption:empty::before{content:var(--capph,"");color:#B5B5B5}
.ar-doc figure:not(:focus-within) figcaption:empty{display:none}
.ar-doc img{cursor:pointer}
.ar-xhost{position:absolute;left:-10000px;top:0;visibility:hidden;pointer-events:none}
::highlight(ar-find){background:rgba(250,204,21,.45)}
::highlight(ar-cur){background:rgba(249,115,22,.62)}
/* the bar over a special block */
.ar-bbar{position:absolute;z-index:5;display:flex;align-items:center;gap:1px;padding:2px 3px;background:var(--sf2);box-shadow:0 0 0 1px var(--dx-line2),0 8px 20px -10px rgba(var(--shd),.4)}
.ar-bbar[hidden]{display:none}
.ar-bbar .dx-b{min-width:28px;height:28px}
.ar-bbar .dx-b svg{width:15px;height:15px}
.ar-bbn{padding:0 8px 0 6px;font:600 11.5px/1 var(--sans);color:var(--ink3);white-space:nowrap}
/* the phone preview */
.ar-pv{flex:none;width:430px;display:flex;flex-direction:column;background:var(--dx-hd);box-shadow:inset 1px 0 0 var(--dx-line2)}
.ar-pv[hidden]{display:none}
.ar-pvh{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 6px 0 12px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.ar-pvh b{font:600 12.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.ar-pvh .sp{flex:1}
.ar-pvh .pf-seg button{min-width:30px;height:26px;padding:0 7px;font-size:12px}
.ar-pvb{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;overflow:auto}
.ar-phone{flex:1;min-height:420px;display:flex;padding:14px 9px;border-radius:30px;background:#20232C;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 18px 40px -18px rgba(0,0,0,.5)}
.ar-frame{display:block;flex:1;width:375px;max-width:100%;border:0;border-radius:20px;background:#FFFFFF}
.ar-pvn{flex:none;margin:0;max-width:390px;font:12px/1.5 var(--sans);color:var(--ink3);text-align:center}
.ar-pvn.bad{color:#B45309}
/* the line at the foot */
.ar-ft{gap:6px}
.ar-sb{flex:none;height:26px;padding:0 9px;font:500 12px/1 var(--sans);color:var(--ink3);white-space:nowrap;transition:background .1s,color .1s}
.ar-sb:hover{background:var(--dx-hover);color:var(--ink)}
.ar-sb.bad{color:#B45309;font-weight:600}
/* drawers */
.ar-dr{width:340px}
.ar-themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ar-th{display:grid;gap:5px;padding:10px 10px 8px;text-align:left;box-shadow:inset 0 0 0 1px var(--dx-line);transition:box-shadow .1s}
.ar-th:hover{box-shadow:inset 0 0 0 1px var(--dx-line2)}
.ar-th.on{box-shadow:inset 0 0 0 2px var(--c)}
.ar-th i{display:block;height:6px;border-radius:3px;background:#E9EAEE}
.ar-th .ar-th-h{height:10px;width:62%;background:var(--c)}
.ar-th .ar-th-h.band,.ar-th .ar-th-h.bar{background:var(--c10);box-shadow:inset 4px 0 0 var(--c)}
.ar-th .ar-th-h.line{background:none;box-shadow:inset 0 -2px 0 var(--c)}
.ar-th .ar-th-h.center{margin:0 auto;width:48%}
.ar-th .ar-th-h.pill{width:44%;border-radius:6px;margin:0 auto}
.ar-th .ar-th-l.s{width:70%}
.ar-th span{font:600 12px/1.2 var(--sans);color:var(--ink)}
.ar-sw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:8px}
.ar-sw button,.ar-swc{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .08s}
.ar-sw button:hover{transform:scale(1.1)}
.ar-sw button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--ink)}
.ar-swc{position:relative;display:grid;place-items:center;color:var(--ink2);background:var(--dx-hd);cursor:pointer}
.ar-swc input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ar-tune{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;margin-top:10px}
.ar-tune>span{font:600 12px/1.3 var(--sans);color:var(--ink2);white-space:nowrap}
.ar-tune .dxd-chips{margin:0;gap:4px}
.ar-tune .dxd-chip{min-height:28px;padding:3px 9px;font-size:12px}
.ar-ink i{display:inline-block;width:10px;height:10px;border-radius:50%}
.ar-rule{align-items:center}
.ar-rule input{margin-top:0}
.ar-rule span{flex:1;display:grid;gap:1px;min-width:0}
.ar-rule b{font:600 13px/1.35 var(--sans);color:var(--ink)}
.ar-rule small{font:12px/1.4 var(--sans);color:var(--ink3)}
.ar-rule i{flex:none;min-width:26px;padding:3px 6px;border-radius:10px;background:var(--dx-hd);font:600 11.5px/1 var(--sans);font-style:normal;color:var(--ink4);text-align:center;font-variant-numeric:tabular-nums}
.ar-rule i.on{background:var(--dx-on);color:var(--dx-ont)}
.ar-rn{margin-top:6px}
.ar-cks{display:grid;gap:0;margin:-6px 0 8px}
.ar-ck{display:flex;gap:10px;padding:10px 2px;box-shadow:inset 0 -1px 0 var(--dx-line);cursor:pointer}
.ar-ck:hover{background:var(--dx-hover)}
.ar-ck>i{flex:none;width:9px;height:9px;margin-top:5px;border-radius:50%;background:#16A34A}
.ar-ck.warn>i{background:#F59E0B}
.ar-ck.bad>i{background:#DC2626}
.ar-ck.info>i{background:#2458E6}
.ar-ck>div{flex:1;display:grid;gap:3px;min-width:0}
.ar-ck b{font:600 13px/1.35 var(--sans);color:var(--ink)}
.ar-ck span{font:12.5px/1.5 var(--sans);color:var(--ink3);word-break:break-word}
.ar-ck .btn{justify-self:start;height:28px;margin-top:4px;padding:0 10px;font-size:12px}
.ar-fdn{display:flex;align-items:center;gap:2px;min-height:32px;margin:6px 0;font:600 12.5px/1 var(--sans);color:var(--dx-ont)}
.ar-fdn .sp{flex:1}
.ar-art{padding:0;gap:0}
.ar-art button[data-art]{flex:1;min-width:0;display:grid;gap:2px;padding:7px 10px;text-align:left}
.ar-art button[data-art] b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ar-art.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc);background:var(--dx-on)}
.ar .fld small{float:right;font-weight:500;color:var(--ink4)}
.ar .fld small.bad{color:#DC2626}
.ar-dot{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%}
/* the keys over a phone's keyboard */
.ar-keys{display:none}
.ar-keys.up:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-around;height:44px;padding:0 4px;background:var(--sf2);box-shadow:0 -1px 0 var(--dx-line2),0 -8px 20px -12px rgba(var(--shd),.35)}
.ar-keys button{display:grid;place-items:center;min-width:40px;height:38px;color:var(--ink2)}
.ar-keys button:active{background:var(--dx-on);color:var(--dx-ont)}

/* ================= the article's look (the theme) ================= */
.ar-doc{--a:#2458E6;--at:#2458E6;--a6:#F3F6FE;--a10:#E9EEFC;--a16:#DDE6FB;--a30:#BDCDF7;--ink:#3F3F3F;--mut:#767676;--line:#E5E5E5;--fs:15px;--lh:1.75;--ls:.5px;--ps:1em;--pad:8px;--ind:0em;--al:justify;--ir:4px;--iw:100%;
  padding:0 var(--pad);font-size:var(--fs);line-height:var(--lh);letter-spacing:var(--ls);color:var(--ink);text-align:var(--al);word-break:break-word;overflow-wrap:break-word;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:400;font-style:normal}
.ar-doc p{margin:0 0 var(--ps);text-indent:var(--ind)}
.ar-doc h1,.ar-doc h2,.ar-doc h3{text-indent:0;letter-spacing:.5px;text-align:left;word-break:inherit;text-transform:none}
.ar-doc *{word-break:inherit}
.ar-doc h1{margin:.2em 0 1em;font-size:1.45em;line-height:1.4;font-weight:700;color:#1F1F1F}
.ar-doc h2{margin:1.8em 0 1em;font-size:1.15em;line-height:1.45;font-weight:700;color:var(--ink)}
.ar-doc h3{margin:1.4em 0 .7em;font-size:1.04em;line-height:1.5;font-weight:700;color:var(--at)}
.ar-doc[data-h="bar"] h2{padding:2px 0 2px 10px;border-left:4px solid var(--a)}
.ar-doc[data-h="band"] h2{padding:6px 12px;border-left:4px solid var(--a);background-color:var(--a10);color:var(--at)}
.ar-doc[data-h="line"] h2{padding:0 0 6px;border-bottom:1px solid var(--a30);color:var(--at)}
.ar-doc[data-h="center"] h2{padding:8px 0;border-top:1px solid var(--a30);border-bottom:1px solid var(--a30);color:var(--at);text-align:center;letter-spacing:2px}
.ar-doc[data-h="pill"] h2{display:table;margin:1.8em auto 1em;padding:4px 18px;border-radius:999px;background-color:var(--a);color:#FFFFFF;text-align:center;font-size:1.05em}
.ar-doc[data-h="num"]{counter-reset:arh}
.ar-doc[data-h="num"]>h2{counter-increment:arh}
.ar-doc[data-h="num"]>h2::before{content:counter(arh,decimal-leading-zero);margin-right:8px;color:var(--a);font-size:1.35em;font-weight:800}
.ar-doc .x-num{margin-right:8px;color:var(--a);font-size:1.35em;font-weight:800}
.ar-doc blockquote{margin:1.2em 0;padding:8px 14px;color:#666666}
.ar-doc[data-q="bar"] blockquote{border-left:3px solid var(--a30)}
.ar-doc[data-q="card"] blockquote{padding:12px 16px;border-radius:6px;background-color:var(--a6)}
.ar-doc[data-q="mark"] blockquote{border-left:3px solid var(--a);background-color:var(--a6)}
.ar-doc blockquote p{margin:0 0 .5em;text-indent:0}
.ar-doc blockquote p:last-child{margin-bottom:0}
.ar-doc hr{height:0;margin:2em auto;border:0;border-top:1px solid var(--line);overflow:visible;text-align:center}
.ar-doc[data-hr="dots"] hr,.ar-doc[data-hr="diamond"] hr{height:auto;border:0;line-height:1}
.ar-doc[data-hr="dots"] hr::after{content:"• • •";color:var(--a);letter-spacing:8px}
.ar-doc[data-hr="diamond"] hr::after{content:"◆";color:var(--a);font-size:12px}
.ar-doc[data-hr="fade"] hr{height:1px;border:0;background-image:linear-gradient(to right,rgba(255,255,255,0),var(--a),rgba(255,255,255,0))}
.ar-doc .x-hr{margin:2em 0;text-align:center;text-indent:0;line-height:1}
.ar-doc .x-hr[data-s="line"]{border-top:1px solid var(--line)}
.ar-doc .x-hr[data-s="dots"]{color:var(--a);letter-spacing:8px}
.ar-doc .x-hr[data-s="fade"]{height:1px;background-image:linear-gradient(to right,rgba(255,255,255,0),var(--a),rgba(255,255,255,0))}
.ar-doc .x-hr[data-s="diamond"]{color:var(--a);font-size:12px}
.ar-doc ul,.ar-doc ol{margin:0 0 var(--ps);padding-left:1.6em}
.ar-doc li{margin:.25em 0;text-indent:0}
.ar-doc li::marker{color:var(--a)}
.ar-doc a{color:var(--at);text-decoration:none;border-bottom:1px dashed var(--a30)}
.ar-doc strong,.ar-doc b{font-weight:700}
.ar-doc mark{padding:0 2px;background-color:var(--a16);color:inherit}
.ar-doc code{padding:1px 4px;border-radius:3px;background-color:var(--a6);color:var(--at);font-family:Menlo,Consolas,monospace;font-size:.88em;letter-spacing:0}
.ar-doc span[data-c="acc"]{color:var(--at)}
.ar-doc sup{font-size:.7em;color:var(--at)}
.ar-doc figure{margin:1.2em 0;text-align:center;text-indent:0}
.ar-doc figure img{display:block;width:var(--iw);max-width:100%;height:auto;margin:0 auto;border-radius:var(--ir)}
.ar-doc figure[data-w="75"] img{width:75%}
.ar-doc figure[data-w="50"] img{width:50%}
.ar-doc[data-shadow] figure img{box-shadow:0 4px 14px rgba(0,0,0,.12)}
.ar-doc figcaption{margin-top:.5em;font-size:.8em;line-height:1.5;color:var(--mut);text-align:center;letter-spacing:0}
.ar-doc table{width:100%;margin:1em 0;border-collapse:collapse;font-size:.9em;text-indent:0;letter-spacing:0}
.ar-doc th,.ar-doc td{padding:6px 8px;border:1px solid var(--line);text-align:left;vertical-align:top}
.ar-doc th{background-color:var(--a10);color:var(--at);font-weight:700}
.ar-doc pre,.ar-doc .x-pre{margin:1em 0;padding:12px 14px;border-radius:6px;background-color:#F6F8FA;color:#24292E;font-family:Menlo,Consolas,monospace;font-size:13px;line-height:1.6;letter-spacing:0;white-space:pre;overflow-x:auto;text-align:left;text-indent:0}
.ar-doc .x-pre{white-space:nowrap}
.ar-doc[data-code="dark"] pre,.ar-doc[data-code="dark"] .x-pre{background-color:#1E1E1E;color:#D4D4D4}
/* our components */
.ar-doc section[data-c]{text-indent:0}
.ar-doc section[data-c] p{text-indent:0}
.ar-doc section[data-c="callout"]{margin:1.2em 0;padding:10px 14px;border-left:3px solid var(--a);border-radius:4px;background-color:var(--a6)}
.ar-doc section[data-c="callout"][data-v="note"]{border-left-color:#868E96;background-color:#F4F5F7}
.ar-doc section[data-c="callout"][data-v="warn"]{border-left-color:#E8590C;background-color:#FFF4E6}
.ar-doc section[data-c="callout"][data-v="sum"]{border-left-color:#2B8A3E;background-color:#EBFBEE}
.ar-doc section[data-c="callout"] p{margin:0 0 .4em}
.ar-doc section[data-c="callout"] p:last-child{margin-bottom:0}
.ar-doc section[data-c="callout"] .k-t{font-weight:700;color:var(--at)}
.ar-doc section[data-c="callout"][data-v="note"] .k-t{color:#495057}
.ar-doc section[data-c="callout"][data-v="warn"] .k-t{color:#C2410C}
.ar-doc section[data-c="callout"][data-v="sum"] .k-t{color:#2B8A3E}
.ar-doc section[data-c="card"]{margin:1.2em 0;padding:12px 16px;border:1px solid var(--a30);border-radius:8px}
.ar-doc section[data-c="card"][data-v="fill"]{border-color:transparent;background-color:var(--a6)}
.ar-doc section[data-c] .k-h{margin:0 0 .4em;font-size:1.05em;font-weight:700;color:var(--at)}
.ar-doc section[data-c="card"] p:last-child,.ar-doc section[data-c="author"] p:last-child{margin-bottom:0}
.ar-doc section[data-c="stats"]{display:flex;justify-content:space-between;margin:1.2em -4px}
.ar-doc section[data-c="stats"] .k-c{flex:1 1 0%;margin:0 4px;padding:10px 4px;border-radius:6px;background-color:var(--a6);text-align:center}
.ar-doc section[data-c="stats"] .k-n{margin:0;font-size:1.6em;line-height:1.25;font-weight:800;color:var(--a);letter-spacing:0}
.ar-doc section[data-c="stats"] .k-l{margin:4px 0 0;font-size:.8em;line-height:1.4;color:var(--mut)}
.ar-doc section[data-c="golden"]{margin:1.6em 0;padding:16px 12px;border-top:1px solid var(--a30);border-bottom:1px solid var(--a30);text-align:center}
.ar-doc section[data-c="golden"][data-v="left"]{padding:6px 0 6px 14px;border:0;border-left:4px solid var(--a);text-align:left}
.ar-doc section[data-c="golden"] .k-q{margin:0;font-size:1.12em;line-height:1.6;font-weight:600;color:var(--at)}
.ar-doc section[data-c="golden"] .k-src{margin:.6em 0 0;font-size:.82em;color:var(--mut)}
.ar-doc section[data-c="divtext"]{display:flex;align-items:center;margin:2em 0 1.2em}
.ar-doc section[data-c="divtext"] .k-l{flex:1 1 0%;height:0;border-top:1px solid var(--a30)}
.ar-doc section[data-c="divtext"] .k-t{padding:0 12px;font-size:.9em;font-weight:700;color:var(--a);letter-spacing:2px;white-space:nowrap}
.ar-doc section[data-c="divtext"][data-v="num"] .k-t{margin:0 10px;padding:2px 12px;border-radius:2px;background-color:var(--a);color:#FFFFFF}
.ar-doc section[data-c="divtext"][data-v="dot"] .k-l{border-top:2px dotted var(--a30)}
.ar-doc ol[data-c="steps"]{margin:1.2em 0;padding:0;list-style:none;counter-reset:ars}
.ar-doc ol[data-c="steps"]>li{position:relative;margin:0 0 10px;padding:1px 0 1px 38px;counter-increment:ars}
.ar-doc ol[data-c="steps"]>li::before{content:counter(ars);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--a);color:#FFFFFF;font-size:13px;line-height:24px;font-weight:700;text-align:center;letter-spacing:0}
.ar-doc .x-steps{margin:1.2em 0}
.ar-doc .x-step{display:flex;align-items:flex-start;margin:0 0 10px}
.ar-doc .x-sn{flex:0 0 24px;width:24px;height:24px;margin:1px 14px 0 0;border-radius:50%;background-color:var(--a);color:#FFFFFF;font-size:13px;line-height:24px;font-weight:700;text-align:center;letter-spacing:0;text-indent:0}
.ar-doc .x-sb{flex:1 1 0%}
.ar-doc ul[data-c="timeline"]{margin:1.2em 0;padding:0 0 0 18px;border-left:2px solid var(--a30);list-style:none}
.ar-doc ul[data-c="timeline"]>li{position:relative;margin:0 0 12px;padding-left:4px}
.ar-doc ul[data-c="timeline"]>li::before{content:"";position:absolute;left:-25px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--a);box-shadow:0 0 0 3px #FFFFFF}
.ar-doc .x-tl{margin:1.2em 0;padding:0 0 0 18px;border-left:2px solid var(--a30)}
.ar-doc .x-ti{margin:0 0 12px}
.ar-doc .x-td{display:inline-block;width:10px;height:10px;margin:0 8px 0 -24px;border-radius:50%;background-color:var(--a);vertical-align:middle}
.ar-doc section[data-c="author"]{margin:1.6em 0;padding:12px 16px;border-left:4px solid var(--a);border-radius:6px;background-color:var(--a6)}
.ar-doc section[data-c="author"] p{margin:0 0 .3em}
.ar-doc section[data-c="qr"]{margin:1.6em 0;text-align:center}
.ar-doc section[data-c="qr"] figure{margin:0}
.ar-doc section[data-c="qr"] figure img{width:150px}
.ar-doc section[data-c="qr"] .k-t{margin:.4em 0 0;font-size:.85em;color:var(--mut)}
.ar-doc section[data-c="lead"]{margin:0 0 1.4em;padding:8px 12px;border-radius:4px;background-color:var(--a6);color:var(--at);font-size:.85em;text-align:center}
.ar-doc section[data-c="lead"] p,.ar-doc section[data-c="end"] p{margin:0}
.ar-doc section[data-c="end"]{margin:2.4em 0 1em;color:var(--mut);font-size:.85em;text-align:center;letter-spacing:3px}
.ar-doc section[data-c="faq"]{margin:1em 0}
.ar-doc section[data-c="faq"] .k-q{margin:0 0 .3em;font-weight:700;color:var(--at)}
.ar-doc section[data-c="faq"] .k-a{margin:0;padding-left:12px;border-left:2px solid var(--a16)}
.ar-doc section[data-c="bi"]{margin:0 0 var(--ps)}
.ar-doc section[data-c="bi"] p{margin:0}
.ar-doc section[data-c="bi"] .k-en{margin-top:.2em;color:var(--mut);font-size:.9em}
.ar-doc section[data-c="note"]{margin:2em 0 0;padding-top:10px;border-top:1px solid var(--line);color:var(--mut);font-size:.78em;line-height:1.7}
.ar-doc section[data-c="note"] p{margin:0 0 .2em}
.ar-doc section[data-c="note"] .k-h{margin:0 0 .3em;font-size:1em;font-weight:700;color:var(--mut)}
.ar-doc section[data-c="note"] .k-ref{word-break:break-all}
.ar-doc section[data-c="imgs"]{display:flex;margin:1.2em -4px}
.ar-doc section[data-c="imgs"] figure{flex:1 1 0%;margin:0 4px}
.ar-doc section[data-c="imgs"] figure img{width:100%}
.ar-doc section[data-c="swipe"]{margin:1.2em 0;overflow-x:auto;white-space:nowrap;text-align:left}
.ar-doc section[data-c="swipe"] figure{display:inline-block;width:78%;margin:0 8px 0 0;vertical-align:top;white-space:normal}
.ar-doc section[data-c="swipe"] figure img{width:100%}
.ar-doc section[data-c="toc"]{margin:1.2em 0;padding:12px 16px;border-radius:6px;background-color:var(--a6)}
.ar-doc section[data-c="toc"] p{margin:0 0 .2em}
.ar-doc section[data-c="toc"] .k-h3{padding-left:1.2em}

/* narrower: a slimmer preview, then the preview over the sheet */
@media (max-width:1240px){.ar-pv{width:380px}.ar-frame{width:340px}.ar .ar-insb span,.ar .ar-rulesb span{display:none}}
@media (max-width:1020px){.ar-pv{position:absolute;top:0;right:0;bottom:0;z-index:6;box-shadow:-12px 0 28px -16px rgba(var(--shd),.45)}.ar-main{position:relative}.ar .dx-cmdk{min-width:0}.ar .dx-cmdk span,.ar .dx-cmdk kbd{display:none}
  /* (a tablet, a phone on its side: the less used buttons go to "find a command", so the rest fits without scrolling) */
  .ar .dx-tb [data-cmd="underline"],.ar .dx-tb [data-cmd="strike"],.ar .dx-tb [data-cmd="almenu"],.ar .dx-tb [data-cmd="image"],.ar .dx-tb [data-cmd="keys"],.ar .dx-tb .dx-sep{display:none}
  .ar-blk{width:72px}.ar .dx-docb{max-width:170px}.ar .ar-copy{padding:0 11px}.ar .ar-copy span{display:none}}
/* a phone: the sheet edge to edge, the preview in its place, the sections at the foot */
@media (max-width:759px){
  .ar .dx-mb{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* (the top keeps the article's name, undo and redo; the formatting is in the row over the keyboard) */
  .ar .dx-tb .dx-b:not([data-cmd="undo"]):not([data-cmd="redo"]),.ar .dx-tb .dx-pick,.ar .dx-tb .dx-sep{display:none}
  .ar-stage{padding:0}
  .ar-paper{max-width:none;min-height:100%;padding:16px 6px 96px;box-shadow:none}
  .ar[data-pane="pv"] .ar-stage{display:none}
  .ar:not([data-pane="pv"]) .ar-pv{display:none}
  .ar-pv{position:static;width:auto;flex:1;box-shadow:none}
  .ar-pvb{align-items:stretch;padding:8px 0 0}
  .ar-phone{padding:0;border-radius:0;background:none;box-shadow:none;min-height:0}
  .ar-frame{width:100% !important;border-radius:0}
  .ar-pvx{display:none}
  .ar-dr{width:auto}
  .ar-ft .ar-sb[data-themen]{display:none}
}
@media (max-width:759px) and (hover:hover) and (pointer:fine){.ar-keys:not([hidden]){display:flex;align-items:center;justify-content:space-around;height:44px;padding:0 4px;background:var(--sf2);box-shadow:0 -1px 0 var(--dx-line2)}}
@media (orientation:landscape) and (max-height:520px){.ar-stage{padding:8px 12px 48px}.ar-paper{padding:20px 18px 48px}}
/* <</app:article>> */
/* <<app:mindmap>> */
/* ================= 2026-10-01 the online mind map (tool mindmap-editor, app-mindmap.js) =================
   The document editor's window (.dx): the map on its canvas in the middle (an SVG drawn by app-mindmap.js; its colours
   are written on the drawing so pictures and prints match), the outline in its place when chosen, the sections in the
   rail and their drawers, the sheets at the foot. */
.app[data-kind="mindmap"]{position:relative}
.mm{--mm-sel:#2458E6;--mm-bg:#FFFFFF}
.mm.mm-dark{--mm-sel:#74C0FC}
.mm .mm-doci{background:#5B3FD6}
.mm .dx-tb .dx-b[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.mm .mm-lb span{font-size:12.5px}
.mm-main{min-width:0;position:relative}
.mm-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--mm-bg);outline:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}
.mm-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.mm-n{cursor:pointer}
.mm-ring{fill:none;stroke:var(--mm-sel);stroke-width:2;opacity:0;transition:opacity .1s}
.mm-n:hover .mm-ring{opacity:.35}
.mm-n.on .mm-ring{opacity:1}
.mm-n.lead .mm-ring{stroke-width:2.6}
.mm-n.hit .mm-ring{opacity:1;stroke:#F59F00;stroke-width:2.4}
.mm-n.cur .mm-ring{stroke:#E8590C;stroke-width:3.2}
.mm-n.ed text{opacity:0}
.mm-n.lift{opacity:.6}
.mm-fold{cursor:pointer}
.mm-fold:not(.shut){opacity:0;transition:opacity .12s}
.mm-n:hover .mm-fold,.mm-n.on .mm-fold{opacity:1}
@media (pointer:coarse){.mm-fold:not(.shut){opacity:.75}}
.mm-rel{cursor:pointer}
.mm-hd{cursor:grab}
.mm-ghost{fill:var(--mm-sel);fill-opacity:.16;stroke:var(--mm-sel);stroke-width:1.5;stroke-dasharray:4 3}
.mm-dropc{fill:none;stroke:#0E9F6E;stroke-width:2.6}
.mm-dropl{fill:none;stroke:#0E9F6E;stroke-width:3.2;stroke-linecap:round}
.mm.dragging .mm-stage{cursor:grabbing}
.mm.picking .mm-stage,.mm.picking .mm-n{cursor:crosshair}
.mm.brush .mm-stage,.mm.brush .mm-n{cursor:copy}
.mm-dim{opacity:.16;transition:opacity .35s}
.mm-hid{opacity:0;pointer-events:none;transition:opacity .35s}
.mm.presenting .mm-n,.mm.presenting [data-k]{transition:opacity .35s}
/* over the map */
.mm-over{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mm-over>*{pointer-events:auto}
.mm-ed{position:absolute;left:0;top:0;margin:0;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;
  opacity:0;pointer-events:none;caret-color:transparent;outline:0;box-shadow:none;transform:translate(-9999px,0);z-index:3}
.mm-ed.edit{opacity:1;pointer-events:auto;caret-color:var(--mm-sel);outline:2px solid var(--mm-sel);outline-offset:3px}
.mm-plus{position:absolute;left:0;top:0;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mm-sel);color:#FFFFFF;box-shadow:0 2px 8px -2px rgba(0,0,0,.35);opacity:.85;transition:opacity .1s,transform .1s}
.mm-plus:hover{opacity:1}
.mm-plus[hidden],.mm-qbar[hidden],.mm-rbar[hidden],.mm-box[hidden],.mm-crumbs[hidden],.mm-pbar[hidden]{display:none}
.mm-qbar{position:absolute;left:0;top:0;z-index:4;display:flex;gap:1px;padding:3px;background:var(--sf2);box-shadow:0 0 0 1px var(--dx-line2),0 10px 24px -12px rgba(var(--shd),.5)}
.mm-qbar button{display:grid;justify-items:center;align-content:center;gap:1px;min-width:46px;height:44px;padding:0 4px;font:500 10.5px/1.1 var(--sans);color:var(--ink2)}
.mm-qbar button:active{background:var(--dx-on);color:var(--dx-ont)}
.mm-qbar button[hidden]{display:none}
.mm-rbar{position:absolute;left:0;top:0;z-index:4;display:flex;gap:6px}
.mm-rbar button{display:flex;align-items:center;gap:5px;height:32px;padding:0 12px;font:600 12.5px/1 var(--sans);color:#FFFFFF;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.mm-rbar [data-rc="ok"]{background:#2F9E44}
.mm-rbar [data-rc="bad"]{background:#E03131}
.mm-box{position:absolute;left:0;top:0;z-index:2;border:1px dashed var(--mm-sel);background:rgba(36,88,230,.07)}
.mm-crumbs{position:absolute;left:10px;top:10px;z-index:3;display:flex;align-items:center;gap:2px;max-width:calc(100% - 20px);padding:3px;overflow-x:auto;background:var(--sf2);box-shadow:0 0 0 1px var(--dx-line2),0 6px 16px -10px rgba(var(--shd),.4);scrollbar-width:none}
.mm-crumbs button{flex:none;height:26px;padding:0 8px;font:500 12.5px/1 var(--sans);color:var(--ink2);white-space:nowrap}
.mm-crumbs button:hover{background:var(--dx-hover);color:var(--ink)}
.mm-crumbs button[aria-current]{color:var(--dx-ont);font-weight:600}
.mm-crumbs i{display:grid;color:var(--ink4)}
.mm-crumbs .mm-crx{padding:0 6px}
.mm-zoom{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;gap:1px;padding:2px;background:var(--sf2);box-shadow:0 0 0 1px var(--dx-line2),0 6px 16px -10px rgba(var(--shd),.4)}
.mm-zoom button{display:grid;place-items:center;min-width:30px;height:28px;color:var(--ink2);font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums}
.mm-zoom button:hover{background:var(--dx-hover);color:var(--ink)}
.mm-zoom .mm-zv{min-width:48px}
.mm-zoom [aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.mm-mini{position:absolute;right:10px;bottom:48px;z-index:3;width:210px;height:140px;background:var(--sf2);box-shadow:0 0 0 1px var(--dx-line2),0 8px 20px -12px rgba(var(--shd),.45);cursor:pointer}
.mm-mini[hidden]{display:none}
.mm-mini .mm-ring,.mm-mini .mm-fold:not(.shut){display:none}
.mm-vp{fill:rgba(36,88,230,.08);stroke:#2458E6}
.mm-pbar{position:absolute;left:50%;bottom:18px;z-index:5;display:flex;align-items:center;gap:4px;padding:4px;transform:translateX(-50%);background:rgba(17,24,39,.86);color:#FFFFFF;border-radius:24px;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);opacity:.35;transition:opacity .2s}
.mm-pbar:hover,.mm.presenting .mm-stage:active~.mm-pbar{opacity:1}
.mm-pbar button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#FFFFFF}
.mm-pbar button:hover{background:rgba(255,255,255,.14)}
.mm-pbar b{min-width:64px;font:600 13px/1 var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.mm.presenting .dx-top,.mm.presenting .dx-rail,.mm.presenting .dx-dr,.mm.presenting .dx-ft,.mm.presenting .dx-mb,.mm.presenting .mm-zoom,.mm.presenting .mm-crumbs,.mm.presenting .mm-mini{display:none}
.mm.presenting .mm-stage{cursor:pointer}
.mm:fullscreen{background:var(--mm-bg)}
/* the outline */
.mm-ol{display:none}
.mm.outline .mm-ol{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 16px 120px;background:var(--dx-desk);scrollbar-width:thin}
.mm.outline .mm-stage{display:none}
.mm-olw{max-width:860px;margin:0 auto;padding:18px 18px 22px;background:var(--sf);box-shadow:0 0 0 1px var(--dx-line),0 10px 26px -18px rgba(var(--shd),.35)}
.mm-or{display:flex;align-items:flex-start;gap:3px;padding:2px 6px 2px calc(var(--d) * 24px + 2px);border-radius:4px}
.mm-or.on{background:var(--dx-on)}
.mm-ob{flex:none;display:grid;place-items:center;width:20px;height:24px;color:var(--ink3)}
.mm-ob:disabled{visibility:hidden}
.mm-od{flex:none;width:7px;height:7px;margin:9px 5px 0 0;border-radius:50%;background:var(--ink3)}
.mm-od.shut{box-shadow:0 0 0 3px var(--dx-line2)}
.mm-otd{flex:none;display:grid;place-items:center;width:15px;height:15px;margin:5px 3px 0 0;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink3);color:#FFFFFF}
.mm-otd.on{background:#2F9E44;box-shadow:none}
.mm-omk{flex:none;display:grid;margin-top:4px}
.mm-onum{flex:none;padding-top:2px;font:600 14.5px/1.6 var(--sans);color:var(--ink3)}
.mm-ot{flex:1;min-width:0;min-height:24px;padding:1px 2px;font:15px/1.6 var(--sans);color:var(--ink);white-space:pre-wrap;word-break:break-word;outline:0}
.mm-or.top .mm-ot{font-size:20px;font-weight:700;line-height:1.45}
.mm-or.top .mm-od{margin-top:12px;background:var(--mm-sel)}
.mm-olb{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.mm-olb i{padding:2px 7px;border-radius:9px;background:var(--dx-hd);font:500 11px/1.3 var(--sans);font-style:normal;color:var(--ink2)}
.mm-onote{flex:none;display:grid;place-items:center;width:22px;height:24px;color:var(--ink3)}
.mm-osep{margin:14px 0 6px;padding:6px 8px 0;box-shadow:inset 0 1px 0 var(--dx-line);font:700 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.mm-ohint{max-width:860px;margin:10px auto 0;font:12px/1.5 var(--sans);color:var(--ink3);text-align:center}
/* the foot: the sheets */
.mm-ft{gap:8px}
.mm-sheets{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.mm-tab{flex:none;height:26px;max-width:160px;padding:0 10px;overflow:hidden;font:500 12px/26px var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.mm-tab:hover{background:var(--dx-hover);color:var(--ink)}
.mm-tab.on{background:var(--dx-on);color:var(--dx-ont);font-weight:600}
.mm-tabadd{display:grid;place-items:center;padding:0 7px}
/* drawers */
.mm-dr{width:336px}
.mm-kbd{display:block;margin-top:1px;font:500 10.5px/1.2 var(--sans);color:var(--ink4)}
.mm-sts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mm-st,.mm-tpl{display:grid;justify-items:center;gap:4px;padding:8px 4px 7px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line);transition:box-shadow .1s,background .1s}
.mm-st:hover,.mm-tpl:hover{background:var(--dx-hover)}
.mm-st.on{box-shadow:inset 0 0 0 2px var(--dx-acc);color:var(--dx-ont);background:var(--dx-on)}
.mm-st span,.mm-tpl span{font:500 12px/1.25 var(--sans);text-align:center}
.mm-tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mm-tpl svg{width:56px;height:35px}
.mm-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mm-th{display:grid;gap:4px;padding:4px 4px 6px;box-shadow:inset 0 0 0 1px var(--dx-line);transition:box-shadow .1s}
.mm-th:hover{box-shadow:inset 0 0 0 1px var(--dx-line2)}
.mm-th.on{box-shadow:inset 0 0 0 2px var(--dx-acc)}
.mm-th svg{display:block;width:100%;height:auto}
.mm-th span{font:500 12px/1.2 var(--sans);color:var(--ink);text-align:center}
.mm-shapes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:10px}
.mm-shapes button{display:grid;place-items:center;height:32px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line)}
.mm-shapes button.on{box-shadow:inset 0 0 0 2px var(--dx-acc);color:var(--dx-ont);background:var(--dx-on)}
.mm-shapes svg{width:30px;height:18px}
.mm-sw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-bottom:10px}
.mm-sw button,.mm-swc{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .08s}
.mm-sw button:hover{transform:scale(1.1)}
.mm-sw button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--ink)}
.mm-sw .mm-swa{display:grid;place-items:center;border-radius:6px;aspect-ratio:auto;background:var(--dx-hd);font:600 10.5px/1 var(--sans);color:var(--ink2)}
.mm-swc{position:relative;display:grid;place-items:center;color:var(--ink2);background:var(--dx-hd);cursor:pointer}
.mm-swc input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.mm-mkrow{display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px;align-items:center;margin-bottom:6px}
.mm-mkrow>span{font:500 12px/1.2 var(--sans);color:var(--ink3)}
.mm-mkrow>div{display:flex;flex-wrap:wrap;gap:3px}
.mm-mk{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;transition:background .1s}
.mm-mk:hover{background:var(--dx-hover)}
.mm-mk.on{background:var(--dx-on);box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.mm-mkm{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px;align-items:center;padding:2px 6px}
.mm-mkm>span{font:500 11.5px/1.2 var(--sans);color:var(--ink3)}
.mm-mkm>div{display:flex;flex-wrap:wrap;gap:1px}
.mm-mkmenu{min-width:300px}
.mm-chl{display:inline-flex;align-items:center;min-height:30px;margin-right:2px;font:600 12px/1.2 var(--sans);color:var(--ink3)}
.mm-mkc{padding:4px 7px}
.mm-x small{display:block;font:500 11px/1.25 var(--sans);color:var(--ink4)}
.mm-fdn{display:flex;align-items:center;gap:2px;min-height:32px;margin:6px 0;font:600 12.5px/1 var(--sans);color:var(--dx-ont)}
.mm-fdn .sp{flex:1}
.mm-hits{margin-top:10px;max-height:340px;overflow:auto}
.mm-ck{margin-bottom:4px;box-shadow:inset 0 0 0 1px var(--dx-line)}
.mm-ck summary{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;font:500 13px/1.3 var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.mm-ck summary::-webkit-details-marker{display:none}
.mm-ck summary span{flex:1}
.mm-ck summary b{min-width:24px;padding:2px 7px;border-radius:10px;background:var(--dx-hd);font:600 11.5px/1.2 var(--sans);text-align:center}
.mm-ck[disabled] summary{color:var(--ink3);cursor:default}
.mm-ck .dxd-list{padding:0 8px 8px}
.mm-shr,.mm-mapr{padding:0;gap:0}
.mm-shr>button,.mm-mapr>button[data-map]{flex:1;min-width:0;display:grid;gap:2px;padding:7px 10px;text-align:left}
.mm-shr b,.mm-mapr b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mm-shr.on,.mm-mapr.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc);background:var(--dx-on)}
.mm-shb{display:flex;flex:none}
.mm-shb .dx-b{min-width:26px;height:28px}
.mm-warn{color:#B45309}
.mm-bta{width:100%;min-height:200px;font:14px/1.6 ui-monospace,"Cascadia Mono",Consolas,"Microsoft YaHei",monospace;tab-size:2;white-space:pre}
.mm-nta{width:100%;min-height:180px;font:14px/1.6 var(--sans)}
.mm-shta{width:100%;font:12px/1.45 ui-monospace,Consolas,monospace;word-break:break-all}
.mm-batch .dx-dlgb,.mm-notebox .dx-dlgb{width:min(560px,calc(100vw - 32px))}
.mm-relopt{align-items:center;margin:4px 0 8px}
.mm-relopt>span{font:600 12px/1.2 var(--sans);color:var(--ink3)}
.mm-relopt input{margin:0 2px 0 0;accent-color:var(--dx-acc)}
/* the keys over a phone's keyboard */
.mm-keys{display:none}
.mm-keys.up:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-around;height:48px;padding:0 4px;background:var(--sf2);box-shadow:0 -1px 0 var(--dx-line2),0 -8px 20px -12px rgba(var(--shd),.35)}
.mm-keys button{display:grid;justify-items:center;gap:1px;min-width:46px;height:44px;padding-top:3px;font:500 10px/1 var(--sans);color:var(--ink2)}
.mm-keys button:active{background:var(--dx-on);color:var(--dx-ont)}
/* narrower: labels go, then less-used buttons go to "find a command" */
@media (max-width:1240px){.mm .mm-lb span{display:none}}
@media (max-width:1100px){.mm .dx-cmdk{min-width:0}.mm .dx-cmdk span,.mm .dx-cmdk kbd{display:none}.mm .dx-tb [data-cmd="keys"],.mm .dx-tb [data-cmd="label"],.mm .dx-tb [data-cmd="todo"]{display:none}}
@media (max-width:1020px){.mm .dx-tb [data-cmd="boundary"],.mm .dx-tb [data-cmd="summary"],.mm .dx-tb [data-cmd="markmenu"],.mm .dx-tb .dx-sep{display:none}.mm .dx-docb{max-width:170px}.mm .mm-exp{padding:0 11px}.mm .mm-exp span{display:none}}
/* a phone: the map edge to edge, the sections at the foot, the bar over a selected topic */
@media (max-width:759px){
  .mm .dx-mb{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mm .dx-tb .dx-b:not([data-cmd="undo"]):not([data-cmd="redo"]),.mm .dx-tb .dx-sep{display:none}
  .mm-dr{width:auto}
  .mm-zoom{right:8px;bottom:8px}
  .mm-zoom [data-cmd="zoomout"],.mm-zoom [data-cmd="zoomin"],.mm-zoom .mm-minib{display:none}
  .mm-mini{display:none}
  .mm.outline .mm-ol{padding:10px 0 120px}
  .mm-olw{padding:10px 8px 16px;box-shadow:none}
  .mm-or{padding-left:calc(var(--d) * 18px)}
  .mm-themes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mm-sw{grid-template-columns:repeat(8,minmax(0,1fr))}
  .mm-pbar{bottom:12px;opacity:.75}
}
@media (orientation:landscape) and (max-height:520px){.mm-zoom{bottom:6px}.mm-pbar{bottom:8px}}
/* <</app:mindmap>> */
/* <<app:slides>> */
/* ================= 2026-10-01 the online slides editor (tool ppt-editor, app-slides.js) =================
   The document editor's window (.dx): the slides listed at the side (along the foot on a phone), the slide being edited in
   the middle with its notes under it, the sections in the rail and their drawers, the presentation over everything.
   How a slide itself is drawn lives in app-slides.js (the same rules go into its pictures). */
.app[data-kind="slides"]{position:relative}
.pp{--pp-sel:#2458E6}
.pp .pp-doci{background:#C2410C}
.pp .dx-tb .dx-b[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.pp .pp-lb span{font-size:12.5px}
.pp .pp-playb{color:#C2410C}
.pp-main{display:flex;flex-direction:row;min-width:0;min-height:0;position:relative}
/* the slides at the side */
.pp-thumbs{flex:none;width:204px;overflow-y:auto;overflow-x:hidden;padding:12px 10px 40px 4px;background:var(--dx-desk);box-shadow:inset -1px 0 0 var(--dx-line);outline:0;scrollbar-width:thin;overscroll-behavior:contain}
.pp-th{position:relative;display:flex;align-items:flex-start;gap:6px;margin-bottom:10px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.pp-thn{flex:none;width:22px;padding-top:2px;font:600 11.5px/1 var(--sans);color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
.pp-thv{position:relative;overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 1px var(--dx-line2)}
.pp-ths{transform-origin:0 0;pointer-events:none}
.pp-th:hover .pp-thv{box-shadow:0 0 0 1px var(--ink4)}
.pp-th.on .pp-thv{box-shadow:0 0 0 2px var(--pp-sel)}
.pp-th.on .pp-thn{color:var(--pp-sel)}
.pp-th.picked .pp-thv{box-shadow:0 0 0 2px var(--pp-sel),0 0 0 5px rgba(36,88,230,.2)}
.pp-th.hid .pp-thv{opacity:.42}
.pp-th.hid .pp-thn{text-decoration:line-through}
.pp-thtr,.pp-thnote{position:absolute;left:6px;display:grid;place-items:center;width:16px;height:16px;color:var(--ink3)}
.pp-thtr{top:20px}
.pp-thnote{top:38px}
.pp-th.dropb::before,.pp-th.dropa::after{content:"";position:absolute;left:28px;right:0;height:3px;background:var(--pp-sel)}
.pp-th.dropb::before{top:-7px}
.pp-th.dropa::after{bottom:-7px}
.pp-thumbs.dragging,.pp-thumbs.dragging .pp-th{cursor:grabbing}
.pp-thadd{display:grid;place-items:center;width:calc(100% - 28px);height:38px;margin-left:28px;color:var(--ink3);border:1px dashed var(--dx-line2)}
.pp-thadd:hover{color:var(--ink);background:var(--dx-hover)}
/* the slide being edited */
.pp-center{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
.pp-stage{position:relative;flex:1;min-height:0;display:flex;overflow:auto;background:var(--dx-desk);outline:0;touch-action:none;user-select:none;-webkit-user-select:none;scrollbar-width:thin}
.pp-wrap{position:relative;flex:none;margin:auto;box-shadow:0 0 0 1px var(--dx-line2),0 14px 34px -18px rgba(var(--shd),.5)}
.pp-canvas{position:absolute;left:0;top:0;transform-origin:0 0}
.pp-canvas .pp-el{cursor:move}
.pp-canvas .pp-tc[contenteditable="true"],.pp-canvas .pp-cell[contenteditable="true"]{cursor:text;user-select:text;-webkit-user-select:text;caret-color:var(--pp-sel)}
.pp.typing .pp-canvas .pp-el{cursor:default}
.pp-canvas .pp-tx[data-prompt]::before{content:attr(data-prompt);opacity:.42;pointer-events:none;white-space:pre-wrap}
.pp-canvas .pp-el.pp-phe{outline:1px dashed rgba(128,128,128,.55);outline-offset:-1px}
.pp-canvas .pp-imgph{display:grid;place-items:center;align-content:center;gap:6px;background:rgba(128,128,128,.08);outline:1px dashed rgba(128,128,128,.55);outline-offset:-1px;color:rgba(110,110,110,.8)}
.pp-canvas .pp-imgph[data-prompt]::after{content:attr(data-prompt);font:500 16px/1.3 var(--sans)}
.pp-over{position:absolute;inset:0;z-index:2;pointer-events:none}
.pp-selbox{position:absolute;box-shadow:0 0 0 1.5px var(--pp-sel);transform-origin:50% 50%;pointer-events:none}
.pp-selbox.many{box-shadow:0 0 0 1px var(--pp-sel)}
.pp-selbox.locked{box-shadow:0 0 0 1.5px #868E96}
.pp-selbox.typing{box-shadow:0 0 0 1px rgba(36,88,230,.6)}
.pp-hd{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;background:#FFFFFF;box-shadow:0 0 0 1.5px var(--pp-sel);border-radius:2px;pointer-events:auto;touch-action:none}
.pp-hd[data-h="nw"]{left:0;top:0;cursor:nwse-resize}
.pp-hd[data-h="n"]{left:50%;top:0;cursor:ns-resize}
.pp-hd[data-h="ne"]{left:100%;top:0;cursor:nesw-resize}
.pp-hd[data-h="e"]{left:100%;top:50%;cursor:ew-resize}
.pp-hd[data-h="se"]{left:100%;top:100%;cursor:nwse-resize}
.pp-hd[data-h="s"]{left:50%;top:100%;cursor:ns-resize}
.pp-hd[data-h="sw"]{left:0;top:100%;cursor:nesw-resize}
.pp-hd[data-h="w"]{left:0;top:50%;cursor:ew-resize}
.pp-hd.pp-rot{left:50%;top:-28px;border-radius:50%;cursor:grab}
.pp-hd.pp-rot::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:18px;margin-left:-.75px;background:var(--pp-sel)}
.pp-hd.pp-pt{border-radius:50%;cursor:crosshair}
.pp-cropnote{position:absolute;inset:-4px;border:2px dashed #F59F00;pointer-events:none}
.pp-guide{position:absolute;background:#E8590C;pointer-events:none}
.pp-guide.v{top:0;bottom:0;width:1px}
.pp-guide.h{left:0;right:0;height:1px}
.pp-marq{position:absolute;border:1px solid var(--pp-sel);background:rgba(36,88,230,.08)}
@media (pointer:coarse){.pp-hd{width:18px;height:18px;margin:-9px 0 0 -9px}.pp-hd.pp-rot{top:-36px}}
.pp-meas{position:fixed;left:-30000px;top:0;visibility:hidden;pointer-events:none}
/* the bar over a selected element (touch) */
.pp-qbar{position:absolute;left:0;top:0;z-index:6;display:flex;gap:1px;padding:3px;background:var(--sf2);box-shadow:0 0 0 1px var(--dx-line2),0 10px 24px -12px rgba(var(--shd),.5)}
.pp-qbar[hidden]{display:none}
.pp-qbar button{display:grid;justify-items:center;align-content:center;gap:1px;min-width:46px;height:44px;padding:0 4px;font:500 10.5px/1.1 var(--sans);color:var(--ink2)}
.pp-qbar button:active{background:var(--dx-on);color:var(--dx-ont)}
.pp-qbar button[hidden]{display:none}
/* notes and the foot */
.pp-notes{flex:none;height:92px;background:var(--sf);box-shadow:inset 0 1px 0 var(--dx-line)}
.pp-notes textarea{display:block;width:100%;height:100%;margin:0;padding:8px 14px;border:0;border-radius:0;resize:none;background:transparent;font:13.5px/1.55 var(--sans);color:var(--ink);outline:0}
.pp-notes textarea::placeholder{color:var(--ink4)}
.pp.notes-off .pp-notes{display:none}
.pp-ft{gap:8px}
.pp-ftb{display:flex;align-items:center;gap:5px;height:26px;padding:0 8px;font:500 12px/1 var(--sans);color:var(--ink3)}
.pp-ftb:hover{background:var(--dx-hover);color:var(--ink)}
.pp-ftb[aria-pressed="true"]{color:var(--dx-ont)}
.pp-zoom{display:flex;gap:1px}
.pp-zoom button{display:grid;place-items:center;min-width:28px;height:26px;color:var(--ink2);font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums}
.pp-zoom button:hover{background:var(--dx-hover);color:var(--ink)}
.pp-zoom .pp-zv{min-width:48px}
/* drawers */
.pp-dr{width:340px}
.pp-kbd{display:block;margin-top:1px;font:500 10.5px/1.2 var(--sans);color:var(--ink4)}
.pp-chl{display:inline-flex;align-items:center;min-height:30px;margin-right:2px;font:600 12px/1.2 var(--sans);color:var(--ink3)}
.pp-x small{display:block;font:500 11px/1.25 var(--sans);color:var(--ink4)}
.pp-lays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pp-lay{display:grid;justify-items:center;gap:4px;padding:7px 3px 6px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line);transition:background .1s}
.pp-lay:hover{background:var(--dx-hover)}
.pp-lay span{font:500 11.5px/1.25 var(--sans);text-align:center}
.pp-shps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-bottom:8px}
.pp-shps button{display:grid;place-items:center;height:36px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line)}
.pp-shps button:hover{background:var(--dx-hover);color:var(--ink)}
.pp-shps button.on{box-shadow:inset 0 0 0 2px var(--dx-acc);color:var(--dx-ont);background:var(--dx-on)}
.pp-shps svg{width:32px;height:22px}
.pp-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pp-thm,.pp-tpl{display:grid;gap:4px;padding:4px 4px 6px;box-shadow:inset 0 0 0 1px var(--dx-line);transition:box-shadow .1s}
.pp-thm:hover,.pp-tpl:hover{box-shadow:inset 0 0 0 1px var(--dx-line2)}
.pp-thm.on{box-shadow:inset 0 0 0 2px var(--dx-acc)}
.pp-thm svg,.pp-tpl svg{display:block;width:100%;height:auto}
.pp-thm span,.pp-tpl span{font:500 12px/1.2 var(--sans);color:var(--ink);text-align:center}
.pp-tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pp-accs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:8px}
.pp-acc{position:relative;display:block;aspect-ratio:1;cursor:pointer}
.pp-acc i{position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.pp-acc input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pp-sw{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin-bottom:6px}
.pp-sw button,.pp-swc{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .08s}
.pp-sw button:hover{transform:scale(1.12)}
.pp-sw button.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--ink)}
.pp-swn{display:grid;place-items:center;color:var(--ink3);background:var(--sf)}
.pp-swc{position:relative;display:grid;place-items:center;color:var(--ink2);background:var(--dx-hd);cursor:pointer}
.pp-swc input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pp-cm{padding:8px 10px;width:290px}
.pp-row{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.pp-row .sp{flex:1}
.pp-num{width:64px;height:30px;padding:0 6px;text-align:center;font-variant-numeric:tabular-nums}
.pp-geo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:8px 0}
.pp-geo label{display:grid;gap:3px;font:600 11px/1.2 var(--sans);color:var(--ink3)}
.pp-geo .pp-num{width:100%}
.pp-bus .dxd-chip{min-width:34px;justify-content:center}
.pp-trs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
.pp-tr{display:grid;justify-items:center;gap:5px;padding:8px 4px 7px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--dx-line)}
.pp-tr:hover{background:var(--dx-hover)}
.pp-tr.on{box-shadow:inset 0 0 0 2px var(--dx-acc);background:var(--dx-on);color:var(--dx-ont)}
.pp-tr span{font:500 11.5px/1.2 var(--sans)}
.pp-trx{position:relative;display:block;width:36px;height:22px;overflow:hidden;background:var(--sf);box-shadow:inset 0 0 0 1px currentColor;opacity:.85}
.pp-trx::after{content:"";position:absolute;inset:3px;background:currentColor;opacity:.35}
.pp-trx-none::after{opacity:0}
.pp-trx-fade::after{background:linear-gradient(90deg,currentColor,transparent)}
.pp-trx-push::after{left:14px;right:-10px}
.pp-trx-wipe::after{right:50%}
.pp-trx-split::after{left:12px;right:12px}
.pp-trx-cover::after{left:10px;top:6px}
.pp-trx-reveal::after{right:12px;bottom:6px}
.pp-trx-zoom::after{inset:7px 11px}
.pp-trx-flip::after{transform:skewY(-14deg);left:8px;right:8px}
.pp-anr{gap:6px}
.pp-anr.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc);background:var(--dx-on)}
.pp-anr>span:first-child{flex:1;min-width:0;display:grid;gap:2px}
.pp-anr small,.pp-anr b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pp-anc{display:flex;align-items:center;gap:2px;flex:none}
.pp-anc select{width:auto;height:28px;padding:0 4px;font-size:12px}
.pp-anc .dx-b{min-width:26px;height:28px}
.pp-anc [data-anup] svg{transform:rotate(90deg)}
.pp-cks{display:grid;gap:4px}
.pp-ck{display:flex;gap:8px;padding:8px 10px;box-shadow:inset 0 0 0 1px var(--dx-line)}
.pp-ck>i{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#F59F00}
.pp-ck.overflow>i,.pp-ck.contrast>i,.pp-ck.outside>i{background:#E03131}
.pp-ck.empty>i,.pp-ck.titlepos>i{background:#868E96}
.pp-ck>div{flex:1;min-width:0;display:grid;gap:3px}
.pp-ck b{font:600 13px/1.3 var(--sans);color:var(--ink)}
.pp-ck span{font:12px/1.3 var(--sans);color:var(--ink3);overflow:hidden;text-overflow:ellipsis}
.pp-ckb{display:flex;gap:4px;margin-top:2px}
.pp-ok{display:flex;align-items:center;gap:6px;margin:8px 0 0;font:600 13px/1.3 var(--sans);color:#2F9E44}
.pp-hits{margin-top:10px;max-height:340px;overflow:auto}
.pp-deckr{padding:0;gap:0}
.pp-deckr>button[data-deck]{flex:1;min-width:0;display:grid;gap:2px;padding:7px 10px;text-align:left}
.pp-deckr b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pp-deckr.on{box-shadow:inset 0 0 0 1.5px var(--dx-acc);background:var(--dx-on)}
.pp-imp{margin:8px 0 0;padding-left:18px;font:13px/1.6 var(--sans);color:var(--ink2)}
.pp-cdata,.pp-ota{width:100%;min-height:200px;font:14px/1.6 ui-monospace,"Cascadia Mono",Consolas,"Microsoft YaHei",monospace;tab-size:12;white-space:pre}
.pp-ota{tab-size:2}
.pp-chartbox .dx-dlgb,.pp-outbox .dx-dlgb{width:min(600px,calc(100vw - 32px))}
.pp-alb{margin-top:8px}
.pp-alb input{margin:0 4px 0 0;accent-color:var(--dx-acc)}
/* menus */
.pp-laymenu{min-width:220px}
.pp-laym{display:flex;align-items:center;gap:10px}
.pp-laym svg{flex:none;color:var(--ink3)}
.pp-shmenu{min-width:300px}
.pp-shm{display:grid;gap:4px;padding:4px 8px}
.pp-shm>span{font:600 11.5px/1.2 var(--sans);color:var(--ink3)}
.pp-shm>div{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.pp-shm button{display:grid;place-items:center;height:32px;color:var(--ink2)}
.pp-shm button:hover{background:var(--dx-hover);color:var(--ink)}
.pp-shm svg{width:30px;height:20px}
/* the keys over a phone's keyboard */
.pp-keys{display:none}
.pp-keys.up:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-around;height:48px;padding:0 4px;background:var(--sf2);box-shadow:0 -1px 0 var(--dx-line2),0 -8px 20px -12px rgba(var(--shd),.35)}
.pp-keys button{display:grid;justify-items:center;gap:1px;min-width:46px;height:44px;padding-top:3px;font:500 10px/1 var(--sans);color:var(--ink2)}
.pp-keys button:active{background:var(--dx-on);color:var(--dx-ont)}
/* presenting */
.pp-show{position:fixed;inset:0;z-index:2147483000;overflow:hidden;background:#000000;outline:0;cursor:default;perspective:2400px;touch-action:none;user-select:none;-webkit-user-select:none}
.pp-show[hidden]{display:none}
.pp-show:fullscreen{background:#000000}
.pp-sl{position:absolute;left:50%;top:50%;z-index:1;overflow:hidden}
.pp-sl .pp-slide{position:absolute;left:0;top:0}
.pp-ink{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.pp-show.tool-pen{cursor:crosshair}
.pp-laser{position:fixed;left:0;top:0;z-index:4;display:none;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#FF2D20 0,#FF2D20 38%,rgba(255,45,32,.35) 62%,transparent 70%);pointer-events:none}
.pp-show.tool-laser{cursor:none}
.pp-show.tool-laser .pp-laser{display:block}
.pp-show.blank-black::after,.pp-show.blank-white::after{content:"";position:absolute;inset:0;z-index:5;background:#000000}
.pp-show.blank-white::after{background:#FFFFFF}
.pp-sbar{position:absolute;left:50%;bottom:16px;z-index:6;display:flex;align-items:center;gap:2px;padding:4px 6px;transform:translateX(-50%);background:rgba(17,24,39,.84);color:#FFFFFF;border-radius:24px;opacity:0;transition:opacity .25s}
.pp-show.moving .pp-sbar,.pp-sbar:hover,.pp-sbar:focus-within{opacity:1}
@media (pointer:coarse){.pp-sbar{opacity:.8}}
.pp-sbar button{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#FFFFFF}
.pp-sbar button:hover{background:rgba(255,255,255,.16)}
.pp-sbar button.on{background:rgba(255,255,255,.28)}
.pp-sbar b{min-width:64px;font:600 13px/1 var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.pp-sbar i{width:1px;height:20px;margin:0 4px;background:rgba(255,255,255,.25)}
.pp-grid{position:absolute;inset:0;z-index:7;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:18px;padding:28px;overflow:auto;background:rgba(10,12,16,.95)}
.pp-grid button{display:grid;justify-items:center;gap:6px;color:#DEE2E6;font:600 12px/1 var(--sans)}
.pp-grid button>div{background:#FFFFFF;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.pp-grid button.on>div{box-shadow:0 0 0 3px #4C8DFF}
.pp-grid button.hid{opacity:.5}
/* effects and transitions (the individual transform properties: an element keeps its own turn) */
@keyframes pp-fade{from{opacity:0}}
@keyframes pp-flyL{from{translate:-1600px 0}}
@keyframes pp-flyR{from{translate:1600px 0}}
@keyframes pp-flyT{from{translate:0 -1100px}}
@keyframes pp-flyB{from{translate:0 1100px}}
@keyframes pp-zoom{from{scale:.3;opacity:0}}
@keyframes pp-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pp-float{from{translate:0 48px;opacity:0}}
@keyframes pp-bounce{0%{translate:0 -420px}55%{translate:0 0}72%{translate:0 -44px}86%{translate:0 0}93%{translate:0 -10px}100%{translate:0 0}}
@keyframes pp-pulse{50%{scale:1.08}}
@keyframes pp-spin{to{rotate:360deg}}
@keyframes pp-grow{to{scale:1.15}}
@keyframes pp-fadeOut{to{opacity:0}}
@keyframes pp-flyOut{to{translate:0 1100px}}
@keyframes pp-zoomOut{to{scale:.3;opacity:0}}
@keyframes pp-tr-fade-in{from{opacity:0}}
@keyframes pp-tr-fade-out{to{opacity:0}}
@keyframes pp-tr-push-in{from{translate:100vw 0}}
@keyframes pp-tr-push-out{to{translate:-100vw 0}}
@keyframes pp-tr-wipe-in{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pp-tr-wipe-out{to{opacity:1}}
@keyframes pp-tr-split-in{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pp-tr-split-out{to{opacity:1}}
@keyframes pp-tr-cover-in{from{translate:100vw 0}}
@keyframes pp-tr-cover-out{to{opacity:1}}
@keyframes pp-tr-reveal-in{from{opacity:1}}
@keyframes pp-tr-reveal-out{to{translate:-100vw 0}}
@keyframes pp-tr-zoom-in{from{scale:.55;opacity:0}}
@keyframes pp-tr-zoom-out{to{scale:1.25;opacity:0}}
@keyframes pp-tr-flip-in{0%,50%{rotate:y 90deg}100%{rotate:y 0deg}}
@keyframes pp-tr-flip-out{0%{rotate:y 0deg}50%,100%{rotate:y -90deg}}
@media (prefers-reduced-motion:reduce){.pp-show .pp-el,.pp-sl{animation-duration:.01s!important}}
/* the presenter's window */
.pp-pv{position:fixed;inset:0;z-index:2147483000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#14161A;color:#E9ECEF;font-family:var(--sans)}
.pp-pvtop{display:flex;align-items:center;gap:10px;padding:10px 16px;font:600 14px/1 var(--sans)}
.pp-pvtop .sp{flex:1}
.pp-pvtop b{font:700 28px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums;color:#FFFFFF}
.pp-pvtop .dx-b,.pp-pvnh .dx-b{color:#E9ECEF}
.pp-pvtop .dx-b:hover,.pp-pvnh .dx-b:hover{background:rgba(255,255,255,.12)}
.pp-pvmain{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;min-height:0;padding:0 16px}
.pp-pvcur{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.pp-pvs{overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.pp-pvside{display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;min-height:0}
.pp-pvnext small,.pp-pvnh small{font:600 12px/1 var(--sans);letter-spacing:.06em;color:#ADB5BD}
.pp-pvnext>div{display:flex;align-items:flex-start;height:26vh;margin-top:8px}
.pp-pvnotes{display:flex;flex-direction:column;min-height:0;padding:10px 14px;background:#1D2025}
.pp-pvnh{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.pp-pvnh .sp{flex:1}
.pp-pvnt{flex:1;overflow:auto;white-space:pre-wrap;line-height:1.55;color:#F1F3F5}
.pp-pvnt.pp-none{color:#868E96}
.pp-pvbar{display:flex;justify-content:center;gap:12px;padding:12px}
.pp-pvbar .btn{min-width:140px;justify-content:center;gap:6px}
.pp-pvend{display:grid;place-items:center;width:100%;height:100%;color:#868E96;font:600 14px/1 var(--sans);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pp-pverr{padding:40px;text-align:center;color:var(--ink3)}
@media (max-width:759px){.pp-pvmain{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr)}.pp-pvside{display:contents}.pp-pvnext>div{height:18vh}.pp-pvtop b{font-size:22px}}
/* narrower: labels go, then less-used buttons go to "find a command" */
@media (max-width:1240px){.pp .pp-lb span{display:none}}
@media (max-width:1100px){.pp .dx-cmdk{min-width:0}.pp .dx-cmdk span,.pp .dx-cmdk kbd{display:none}.pp .dx-tb [data-cmd="keys"],.pp .dx-tb [data-cmd="listmenu"],.pp .dx-tb [data-cmd="alignmenu"]{display:none}}
@media (max-width:1020px){.pp .dx-tb [data-cmd="line"],.pp .dx-tb [data-cmd="chart"],.pp .dx-tb [data-cmd="laymenu"],.pp .dx-tb [data-cmd="colormenu"],.pp .dx-tb .dx-sep{display:none}.pp .dx-docb{max-width:170px}.pp .pp-exp{padding:0 11px}.pp .pp-exp span{display:none}.pp-thumbs{width:160px}}
@media (orientation:landscape) and (max-height:520px){.pp-notes{display:none}.pp-thumbs{width:132px;padding-top:8px}.pp-th{margin-bottom:6px}}
/* a phone: the slide edge to edge, the slides along the foot, the sections in the bottom bar */
@media (max-width:759px){
  .pp .dx-mb{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pp .dx-tb .dx-b:not([data-cmd="undo"]):not([data-cmd="redo"]),.pp .dx-tb .dx-sep{display:none}
  .pp-main{flex-direction:column}
  .pp-center{order:1}
  .pp-thumbs{order:2;width:auto;height:94px;display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;padding:8px 12px;box-shadow:inset 0 1px 0 var(--dx-line);touch-action:pan-x}
  .pp-th{flex:none;flex-direction:column;align-items:center;gap:3px;margin:0;touch-action:pan-x}
  .pp-thn{width:auto;padding:0;font-size:10.5px}
  .pp-thtr,.pp-thnote{display:none}
  .pp-th.dropb::before{left:-7px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .pp-th.dropa::after{right:-7px;left:auto;top:0;bottom:0;width:3px;height:auto}
  .pp-thadd{flex:none;width:44px;height:44px;margin:0}
  .pp-notes{height:60px}
  .pp-notes textarea{padding:6px 12px;font-size:13px}
  .pp-ft .pp-zoom [data-cmd="zoomout"],.pp-ft .pp-zoom [data-cmd="zoomin"]{display:none}
  .pp-dr{width:auto}
  .pp-lays,.pp-themes,.pp-tpls,.pp-trs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp-sbar{bottom:10px}
}
/* <</app:slides>> */
/* <<app:coderun>> */
/* ================= 2026-10-01 the code workshop (programmer tools, kind 'coderun', app-coderun.js) =================
   The document editor's window (.dx): the project's files as tabs, the code at the left and what it does at the right —
   the program's output (a terminal that takes input), the input given beforehand, the compiler's problems, the files it
   wrote, its pictures; or the debugger (its buttons, the record's timeline, variables, watches, calls, breakpoints, the
   output so far, a console); or the page's preview with its console; or the text made from HTML. Narrower: the right
   part goes under the code; a phone: one pane at a time, chosen in the bar at the foot. */
.app[data-kind="coderun"]{position:relative}
.cw{--cw-side:46%;--cw-fs:14px}
.cw .cw-doci{font:700 11.5px/1 var(--mono);color:#FFFFFF;letter-spacing:-.02em;background:#475569}
.cw .cw-doci[data-m="py"]{background:#2563EB}
.cw .cw-doci[data-m="cpp"]{background:#7C3AED}
.cw .cw-doci[data-m="web"]{background:#EA580C}
.cw .cw-doci[data-m="h2t"]{background:#0F766E}
.cw .dx-tb .dx-b[aria-pressed="true"]{background:var(--dx-on);color:var(--dx-ont)}
.cw-langs button{min-width:44px;height:28px;padding:0 10px;font:600 12.5px/1 var(--sans)}
.cw-langs[hidden],.cw-cosep[hidden],.cw-dbgb[hidden]{display:none}
/* run and debug: the two buttons that matter most */
.cw-runb{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;margin-left:6px;background:#15803D;color:#FFFFFF;font:600 13px/1 var(--sans);transition:background .12s}
.cw-runb:hover{background:#166534}
.cw-runb svg{width:15px;height:15px}
.cw-runb.stop{background:#DC2626}
.cw-runb.stop:hover{background:#B91C1C}
.cw-dbgb{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;font:600 13px/1 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--dx-line2);transition:background .12s}
.cw-dbgb:hover{background:var(--dx-hover)}
.cw-dbgb:disabled{opacity:.45}
.cw-dbgb svg{width:16px;height:16px;color:#C2410C}
/* the file tabs */
.cw-tabs{flex:none;display:flex;align-items:stretch;min-height:34px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line)}
.cw-tabs::-webkit-scrollbar{display:none}
.cw-tab{position:relative;flex:none;display:flex;align-items:center;gap:4px;max-width:200px;min-width:0;padding:0 4px 0 12px;font:500 12.5px/1 var(--mono);color:var(--ink3);box-shadow:inset -1px 0 0 var(--dx-line);cursor:pointer;user-select:none;-webkit-user-select:none}
.cw-tab:not(:has(.cw-x)){padding-right:12px}
.cw-tab:hover{background:var(--dx-hover);color:var(--ink)}
.cw-tab.on{background:var(--sf);color:var(--ink);font-weight:600}
.cw-tab.on::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--dx-acc)}
.cw-tab.main .cw-tn::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;background:#15803D;vertical-align:2px}
.cw-tn{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cw-x{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--ink3);opacity:.55}
.cw-x:hover{opacity:1;background:var(--dx-hover);color:var(--ink)}
.cw-x svg{width:12px;height:12px}
.cw-tadd{position:sticky;right:0;flex:none;display:grid;place-items:center;width:34px;color:var(--ink2);background:var(--dx-hd)}
.cw-tadd:hover{background:var(--dx-hover);color:var(--ink)}
.cw-tadd svg{width:15px;height:15px}
/* the code and the right part, side by side */
.cw-main{min-width:0}
.cw-work{flex:1;min-height:0;display:flex}
.cw-code{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.cw-ed{flex:1;min-height:0;display:flex}
.cw-ed>.ce{flex:1}
.cw-stale{flex:none;padding:6px 12px;background:rgba(245,158,11,.12);font:500 12px/1.4 var(--sans);color:#8A5300}
.cw-stale[hidden]{display:none}
.cw-split{flex:none;width:6px;margin:0 -3px;z-index:2;cursor:col-resize;position:relative}
.cw-split::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:1px;background:var(--dx-line2)}
.cw-split:hover::after,.cw.dragging .cw-split::after,.cw-split:focus-visible::after{left:1px;width:3px;background:var(--dx-acc)}
.cw.dragging{user-select:none;-webkit-user-select:none}
.cw.dragging iframe{pointer-events:none}
.cw-side{flex:none;width:var(--cw-side);min-width:260px;display:flex;flex-direction:column;background:var(--sf);box-shadow:inset 1px 0 0 var(--dx-line)}
.cw-runv,.cw-dbgv,.cw-webv,.cw-h2tv{flex:1;min-height:0;display:flex;flex-direction:column}
.cw-runv[hidden],.cw-dbgv[hidden],.cw-webv[hidden],.cw-h2tv[hidden]{display:none}
.cw-oh{flex:none;display:flex;align-items:center;gap:2px;min-height:36px;padding:0 4px 0 6px;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line);overflow-x:auto;scrollbar-width:none}
.cw-oh::-webkit-scrollbar{display:none}
.cw-oh .sp{flex:1}
.cw-oh .dx-b{min-width:30px;height:30px}
.cw-oh .dx-b svg{width:15px;height:15px}
.cw-oh .dx-b[hidden]{display:none}
.cw-oht{padding:0 8px;font:600 12.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.cw-ot{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;font:500 12.5px/1 var(--sans);color:var(--ink3);box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
.cw-ot:hover{color:var(--ink)}
.cw-ot[aria-selected="true"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--dx-acc)}
.cw-ot svg{width:14px;height:14px}
.cw-ot i{font:600 10.5px/1 var(--sans);font-style:normal;color:var(--ink3)}
.cw-ot i:empty{display:none}
.cw-ot i:not(:empty){min-width:16px;padding:2px 4px;background:var(--dx-hover);text-align:center}
.cw-ot i.err{background:#DC2626;color:#FFFFFF}
.cw-ot i.warn{background:#F59E0B;color:#1F1300}
.cw-rst{flex:none;padding:0 8px;font:500 11.5px/1 var(--sans);color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cw-rst.on{color:#15803D}
.cw-rst.on::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#16A34A;animation:cw-blink 1s infinite}
@keyframes cw-blink{50%{opacity:.25}}
/* the terminal */
.cw-term{flex:1;min-height:0;overflow:auto;padding:10px 12px 16px;font:calc(var(--cw-fs) - 1px)/1.55 var(--mono);color:var(--ink);background:var(--sf);white-space:pre-wrap;word-break:break-all;scrollbar-width:thin;outline:0}
.cw-term[hidden]{display:none}
.cw-tl{min-height:1.55em}
.cw-term .o2{color:#B42318}
.cw-term .o3{color:#1D4ED8;font-weight:600}
.cw-term .sys{color:var(--ink3);font:italic 500 12px/1.55 var(--sans)}
.cw-term .sys.dim{color:var(--ink4);font-style:normal}
.cw-term .sys.ok{color:#15803D;font-style:normal}
.cw-term .sys.warn{color:#A15C07;font-style:normal}
.cw-term .sys.err{color:#B42318;font-style:normal;font-weight:600}
.cw-term .sys.hint{display:inline-block;margin:2px 0;padding:6px 10px;background:rgba(36,88,230,.07);box-shadow:inset 2px 0 0 #2458E6;color:var(--ink2);font-style:normal;white-space:pre-wrap}
.cw-tcut{margin-bottom:6px;font:italic 12px/1.4 var(--sans);color:var(--ink4)}
.cw-term .bd{font-weight:700}
.cw-term .ul{text-decoration:underline}
.cw-term .fk{color:#1F2330}.cw-term .fr{color:#C62828}.cw-term .fg{color:#2E7D32}.cw-term .fy{color:#A16207}.cw-term .fb{color:#1D4ED8}.cw-term .fm{color:#A21CAF}.cw-term .fc{color:#0E7490}.cw-term .fw{color:#6B7280}
.cw-term .fK{color:#6B7280}.cw-term .fR{color:#EF4444}.cw-term .fG{color:#16A34A}.cw-term .fY{color:#CA8A04}.cw-term .fB{color:#3B82F6}.cw-term .fM{color:#D946EF}.cw-term .fC{color:#06B6D4}.cw-term .fW{color:#9CA3AF}
.cw-tin{display:inline-flex;align-items:center;gap:6px;vertical-align:top}
.cw-tin input{width:22ch;min-width:10ch;max-width:100%;height:1.55em;padding:0 4px;border:0;background:rgba(36,88,230,.08);box-shadow:inset 0 -2px 0 #2458E6;font:inherit;color:#1D4ED8;outline:0}
.cw-tin button{height:1.4em;padding:0 6px;font:600 10.5px/1 var(--sans);color:var(--ink3);box-shadow:inset 0 0 0 1px var(--dx-line2)}
.cw-tin button:hover{color:var(--ink);background:var(--dx-hover)}
.cw.asking .cw-ot[data-out="term"]{color:#1D4ED8}
/* the input given beforehand */
.cw-inp{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px}
.cw-inp[hidden]{display:none}
.cw-inp .dxd-note{margin:0}
.cw-stdin{flex:1;min-height:120px;width:100%;padding:8px 10px;border:0;box-shadow:inset 0 0 0 1px var(--dx-line2);background:var(--sf);font:var(--cw-fs)/1.5 var(--mono);color:var(--ink);resize:none;outline:0}
.cw-stdin:focus{box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.cw-inr{display:flex;align-items:center;gap:8px}
.cw-inr .sp{flex:1}
/* problems, files, pictures */
.cw-probs,.cw-files,.cw-gfx{flex:1;min-height:0;overflow:auto;padding:6px 0;scrollbar-width:thin}
.cw-probs[hidden],.cw-files[hidden],.cw-gfx[hidden]{display:none}
.cw-empty{margin:18px 14px}
.cw-pi{display:flex;align-items:flex-start;gap:9px;width:100%;padding:8px 12px;text-align:left;box-shadow:inset 0 -1px 0 var(--dx-line)}
.cw-pi:not(:disabled):hover{background:var(--dx-hover)}
.cw-pi:disabled{cursor:default}
.cw-pi>b{flex:none;padding-top:1px;color:#B42318}
.cw-pi.warning>b{color:#B45309}
.cw-pi>b svg{width:15px;height:15px}
.cw-pi span{min-width:0;display:grid;gap:4px;font:13px/1.45 var(--sans);color:var(--ink)}
.cw-pi em{font:600 11.5px/1.2 var(--mono);font-style:normal;color:var(--ink3)}
.cw-pi small{padding:5px 8px;background:rgba(36,88,230,.07);font:12.5px/1.45 var(--sans);color:var(--ink2)}
.cw-pi code{padding:5px 8px;background:var(--dx-hd);font:11.5px/1.4 var(--mono);color:var(--ink2);white-space:pre;overflow-x:auto}
.cw-pn{padding:2px 12px 6px 36px;font:12px/1.4 var(--mono);color:var(--ink3)}
.cw-files>.dxd-note{margin:6px 12px}
.cw-fo{display:flex;align-items:flex-start;gap:8px;padding:8px 8px 8px 12px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.cw-fo>b{flex:none;color:var(--ink3);padding-top:2px}
.cw-fo>span{flex:1;min-width:0;display:grid;gap:3px}
.cw-fo em{font:600 13px/1.3 var(--mono);font-style:normal;color:var(--ink)}
.cw-fo small{font:11.5px/1 var(--sans);color:var(--ink3)}
.cw-fo code{max-height:4.5em;overflow:hidden;font:11.5px/1.45 var(--mono);color:var(--ink2);white-space:pre-wrap;word-break:break-all}
.cw-foa{flex:none;display:flex}
.cw-fig{margin:0 12px 12px;box-shadow:inset 0 0 0 1px var(--dx-line2)}
.cw-figb{display:grid;place-items:center;padding:8px;background:#FFFFFF}
.cw-figb img,.cw-figb canvas{display:block;max-width:100%;height:auto}
.cw-figb canvas{width:100%}
.cw-fig figcaption{display:flex;align-items:center;gap:4px;padding:0 4px 0 10px;min-height:34px;background:var(--dx-hd);font:500 12px/1 var(--sans);color:var(--ink2)}
.cw-fig figcaption .sp{flex:1}
.cw-fview{max-height:60vh;margin:0;overflow:auto;font:12.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all}
.cw-fdlg .dx-dlgb{width:min(760px,100%)}
/* the debugger */
.cw-dtb{flex:none;display:flex;align-items:center;gap:1px;min-height:38px;padding:0 6px;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line);overflow-x:auto;scrollbar-width:none}
.cw-dtb::-webkit-scrollbar{display:none}
.cw-dtb .dx-b{min-width:32px;height:32px}
.cw-dtb .dx-b:not(:disabled) svg{color:var(--ink)}
.cw-dtb [data-cmd="d:cont"]:not(:disabled) svg{color:#15803D}
.cw-dtb [data-cmd="d:stop"]:not(:disabled) svg{color:#DC2626}
.cw-dtl{flex:none;display:flex;align-items:center;gap:4px;padding:4px 8px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.cw-dtl input{flex:1;min-width:60px;accent-color:#F59E0B}
.cw-dtl .dx-b{min-width:26px;height:26px}
.cw-dpos{flex:none;min-width:120px;font:500 11.5px/1.2 var(--sans);color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
.cw-dsc{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.cw-ds{box-shadow:inset 0 -1px 0 var(--dx-line)}
.cw-dsh{display:flex;align-items:center;gap:7px;width:100%;min-height:32px;padding:0 10px;text-align:left;font:600 12px/1 var(--sans);color:var(--ink2);text-transform:none}
.cw-dsh:hover{background:var(--dx-hover)}
.cw-dsh svg{width:14px;height:14px;color:var(--ink3)}
.cw-dsh small{flex:1;min-width:0;overflow:hidden;font:500 11.5px/1 var(--mono);color:var(--ink3);text-align:right;white-space:nowrap;text-overflow:ellipsis}
.cw-dcnt{margin-left:auto;padding:2px 5px;background:var(--dx-hover);font:600 10.5px/1 var(--sans);font-style:normal;color:var(--ink3)}
.cw-dsb{padding:0 0 8px}
.cw-dsb>.dxd-note{margin:4px 12px}
.cw-vr{display:grid;grid-template-columns:18px minmax(60px,auto) 1fr auto;align-items:center;gap:6px;min-height:24px;padding:0 10px 0 calc(6px + var(--d, 0) * 14px);font:12px/1.35 var(--mono)}
.cw-vr:hover{background:var(--dx-hover)}
.cw-vt{display:grid;place-items:center;width:18px;height:18px;color:var(--ink3)}
.cw-vt svg{width:12px;height:12px}
.cw-vn{color:#7A2DB8;white-space:nowrap}
.cw-vr.par .cw-vn{font-style:italic}
.cw-vv{min-width:0;overflow:hidden;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.cw-vy{font:11px/1 var(--sans);color:var(--ink4);white-space:nowrap}
.cw-vr.chg{background:rgba(245,158,11,.16)}
.cw-vr.chg .cw-vv{color:#9A4F0C;font-weight:600}
.cw-vr.more .cw-vv{color:var(--ink3);font-style:italic}
.cw-vg{margin:6px 10px 2px;font:600 11px/1 var(--sans);color:var(--ink3)}
.cw-dev{margin:2px 10px 6px;padding:4px 8px;font:12px/1.4 var(--mono);background:rgba(22,163,74,.08);color:#166534}
.cw-dev.exc{background:rgba(229,72,77,.08);color:#B42318}
.cw-wr{display:grid;grid-template-columns:minmax(60px,auto) 1fr auto;align-items:center;gap:8px;min-height:26px;padding:0 4px 0 12px;font:12px/1.35 var(--mono)}
.cw-wr .dx-b{min-width:22px;height:22px}
.cw-wr.err .cw-vv{color:#B42318;font-family:var(--sans)}
.cw-wr.wp .cw-vv{color:var(--ink3);font-family:var(--sans)}
.cw-wadd{display:flex;gap:4px;padding:4px 8px 0 12px}
.cw-wadd input,.cw-coni input,.cw-bpc{flex:1;min-width:0;height:28px;padding:0 8px;border:0;box-shadow:inset 0 0 0 1px var(--dx-line2);background:var(--sf);font:12.5px/1 var(--mono);color:var(--ink);outline:0}
.cw-wadd input:focus,.cw-coni input:focus,.cw-bpc:focus{box-shadow:inset 0 0 0 1.5px var(--dx-acc)}
.cw-fr{display:flex;align-items:baseline;gap:8px;width:100%;padding:5px 12px;text-align:left}
.cw-fr:hover{background:var(--dx-hover)}
.cw-fr.on{background:var(--dx-on);color:var(--dx-ont)}
.cw-fr b{font:600 12.5px/1.3 var(--mono)}
.cw-fr small{margin-left:auto;font:11.5px/1 var(--mono);color:var(--ink3)}
.cw-bp{display:flex;align-items:center;gap:6px;padding:3px 4px 3px 10px}
.cw-bp label{display:flex;align-items:center;gap:4px;font:600 11px/1 var(--sans);color:var(--ink3)}
.cw-bp label input{accent-color:#E5484D}
.cw-bpl{flex:1;min-width:0;display:grid;gap:2px;text-align:left}
.cw-bpl em{font:600 12px/1.2 var(--mono);font-style:normal;color:var(--ink)}
.cw-bpl code{overflow:hidden;font:11px/1.2 var(--mono);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.cw-bp .cw-bpc{flex:0 1 120px;height:26px;font-size:11.5px}
.cw-bp.off .cw-bpl{opacity:.5}
.cw-bp .dx-b{min-width:22px;height:22px}
.cw-bpclr{margin:4px 8px 0}
.cw-dout{max-height:220px;margin:0;padding:6px 12px;overflow:auto;font:12px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;scrollbar-width:thin}
.cw-dout .o2,.cw-dout .o4{color:#B42318}
.cw-dout .o3{color:#1D4ED8;font-weight:600}
.cw-dout .o4{color:#A15C07}
.cw-con{max-height:240px;min-height:60px;overflow:auto;padding:4px 12px;font:12px/1.5 var(--mono);scrollbar-width:thin}
.cw-con .dxd-note{margin:4px 0}
.cw-cl{white-space:pre-wrap;word-break:break-all;color:var(--ink)}
.cw-cl.cmd{color:var(--ink3)}
.cw-cl.err{color:#B42318}
.cw-cl.warn{color:#A15C07}
.cw-cl.ok{color:#15803D}
.cw-cl.dim{color:var(--ink3)}
.cw-coni{display:flex;align-items:center;gap:6px;padding:4px 8px 0 12px}
.cw-coni span{font:600 11.5px/1 var(--mono);color:var(--ink3)}
.cw-dstale{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;background:rgba(245,158,11,.12);font:12px/1.4 var(--sans);color:#8A5300}
.cw-dstale .dx-b{gap:4px;padding:0 8px;font:600 12px/1 var(--sans)}
.cw-dend{padding:8px 12px;background:rgba(22,163,74,.08);font:600 12.5px/1.45 var(--sans);color:#166534}
.cw-dend.err{background:rgba(229,72,77,.08);color:#B42318}
.cw-dintro{display:grid;justify-items:center;gap:10px;padding:26px 18px 18px;text-align:center}
.cw-dintro>svg{width:40px;height:40px;color:#C2410C}
.cw-dintro h3{margin:0;font:700 16px/1.3 var(--sans);color:var(--ink)}
.cw-dintro p{max-width:420px;margin:0;font:13px/1.55 var(--sans);color:var(--ink2)}
.cw-dintro ul{max-width:420px;margin:4px 0 0;padding:0 0 0 18px;text-align:left;font:12.5px/1.6 var(--sans);color:var(--ink3)}
.cw-dlang button{min-width:52px;height:30px}
.cw .cw-dgo{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px}
.cw .cw-dgo kbd{padding:2px 5px;background:rgba(255,255,255,.18);font:600 10.5px/1 var(--sans)}
.cw-kl{display:grid;gap:4px}
.cw-kl div{display:flex;align-items:center;gap:8px;font:12.5px/1.3 var(--sans);color:var(--ink2)}
.cw-kl kbd{flex:none;min-width:74px;padding:3px 6px;background:var(--dx-hd);box-shadow:inset 0 0 0 1px var(--dx-line2);font:600 11px/1 var(--mono);color:var(--ink);text-align:center}
.cw.dbgon .cw-dbgb{box-shadow:inset 0 0 0 1.5px #C2410C}
/* the page's preview and its console */
.cw-dev button{min-width:28px;height:26px;padding:0 7px}
.cw-auto{margin-right:4px;font-size:12px}
.cw-pvb{flex:1;min-height:0;display:flex;justify-content:center;overflow:auto;background:var(--dx-desk)}
.cw-frame{flex:none;display:block;width:100%;height:100%;border:0;background:#FFFFFF}
.cw[data-pvw="tablet"] .cw-pvb,.cw[data-pvw="phone"] .cw-pvb{padding:12px}
.cw[data-pvw="tablet"] .cw-frame{width:768px;max-width:100%;box-shadow:0 0 0 1px var(--dx-line2),0 8px 24px -12px rgba(var(--shd),.35)}
.cw[data-pvw="phone"] .cw-frame{width:390px;max-width:100%;box-shadow:0 0 0 1px var(--dx-line2),0 8px 24px -12px rgba(var(--shd),.35)}
.cw-wconb.err{color:#DC2626}
.cw-wconb.err::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:#DC2626}
.cw-wcon{flex:none;display:flex;flex-direction:column;height:36%;min-height:130px;box-shadow:inset 0 1px 0 var(--dx-line2)}
.cw-wcon[hidden]{display:none}
.cw-wch{flex:none;display:flex;align-items:center;gap:6px;min-height:32px;padding:0 4px 0 12px;background:var(--dx-hd);box-shadow:inset 0 -1px 0 var(--dx-line)}
.cw-wch b{font:600 12.5px/1 var(--sans)}
.cw-wch .sp{flex:1}
.cw-wcf button{height:24px;padding:0 8px;font:500 11.5px/1 var(--sans)}
.cw-wcl{flex:1;min-height:0;overflow:auto;font:12px/1.5 var(--mono);scrollbar-width:thin}
.cw-wcl .dxd-note{margin:8px 12px}
.cw-wl{display:flex;align-items:baseline;gap:6px;padding:3px 10px 3px 12px;box-shadow:inset 0 -1px 0 var(--dx-line)}
.cw-wl span{flex:1;min-width:0;white-space:pre-wrap;word-break:break-all}
.cw-wl i{flex:none;font-style:normal;color:var(--ink4)}
.cw-wl button{flex:none;font:11px/1 var(--mono);color:var(--ink3);text-decoration:underline}
.cw-wl.warn{background:rgba(245,158,11,.08);color:#8A5300}
.cw-wl.error{background:rgba(229,72,77,.07);color:#B42318}
.cw-wl.info,.cw-wl.debug{color:var(--ink2)}
.cw-wl.cmd{color:var(--ink3)}
.cw-wl.result span{color:#1D4ED8}
.cw-wci{flex:none;display:flex;align-items:center;gap:6px;padding:0 8px 0 12px;min-height:32px;box-shadow:inset 0 1px 0 var(--dx-line)}
.cw-wci span{font:700 14px/1 var(--mono);color:#2458E6}
.cw-wci input{flex:1;min-width:0;height:30px;border:0;background:none;font:12.5px/1 var(--mono);color:var(--ink);outline:0}
.cw-libs{display:grid;gap:4px}
.cw-libs .dxd-tg{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px}
.cw-libs small{grid-column:2;font:11px/1.2 var(--mono);color:var(--ink4)}
/* HTML to text (its header in two rows when the pane is narrow: the outputs, then the numbers and buttons) */
.cw-h2tv .cw-oh{flex-wrap:wrap;row-gap:0;padding-top:2px;padding-bottom:2px;overflow:visible}
.cw-h2m{flex:0 1 auto;max-width:100%;overflow-x:auto;scrollbar-width:none}
.cw-h2m::-webkit-scrollbar{display:none}
.cw-h2m button{flex:none;height:28px;padding:0 10px;font:500 12px/1 var(--sans);white-space:nowrap}
.cw-h2s{flex:none;padding:0 6px;font:500 11.5px/1 var(--sans);color:var(--ink3);white-space:nowrap}
.cw-h2to{flex:1;min-height:0;display:flex}
.cw-h2to>.ce{flex:1}
/* the drawer */
.cw-dr{width:320px}
.cw-fl{display:grid;gap:1px;margin:0 -6px 10px}
.cw-fli{display:flex;align-items:center;gap:2px}
.cw-fli.on{background:var(--dx-on)}
.cw-fln{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;text-align:left;font:500 12.5px/1 var(--mono);color:var(--ink)}
.cw-fln span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cw-fln small{flex:none;padding:2px 5px;background:rgba(21,128,61,.12);font:600 10.5px/1 var(--sans);color:#15803D}
.cw-fli .dx-b{min-width:28px;height:28px}
.cw-exl{display:grid;gap:4px}
.cw-ex{display:grid;gap:3px;width:100%;padding:8px 10px;text-align:left;box-shadow:inset 0 0 0 1px var(--dx-line2)}
.cw-ex:hover{background:var(--dx-hover)}
.cw-ex b{font:600 13px/1.3 var(--sans);color:var(--ink)}
.cw-ex small{font:12px/1.4 var(--sans);color:var(--ink3)}
.cw .dxd-c .inp{width:100%;font-family:var(--mono)}
.cw-link{width:100%;font:12px/1.4 var(--mono);resize:none;word-break:break-all}
.cw-sharedlg .dx-dlgb{width:min(620px,100%)}
/* the status bar */
.cw-ft{gap:6px}
.cw-rt{flex:none;max-width:46%;overflow:hidden;font:500 11.5px/1 var(--sans);color:var(--ink3);white-space:nowrap;text-overflow:ellipsis}
.cw-rt.loading{color:#A15C07}
.cw-rt.loading::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:cw-spin .8s linear infinite}
.cw-rt.ready{color:#15803D}
.cw-rt.failed{color:#B42318}
@keyframes cw-spin{to{transform:rotate(360deg)}}
/* a warning's line in the editor */
.ce-l.cw-warnl{background:rgba(245,158,11,.1)}
/* the dark theme */
html[data-theme="dark"] .cw-term .o2,html[data-theme="dark"] .cw-pi>b,html[data-theme="dark"] .cw-cl.err,html[data-theme="dark"] .cw-wl.error,html[data-theme="dark"] .cw-dout .o2,html[data-theme="dark"] .cw-term .sys.err,html[data-theme="dark"] .cw-dend.err,html[data-theme="dark"] .cw-wr.err .cw-vv{color:#FF9B9B}
html[data-theme="dark"] .cw-term .o3,html[data-theme="dark"] .cw-tin input,html[data-theme="dark"] .cw-dout .o3,html[data-theme="dark"] .cw-wl.result span{color:#93B4FF}
html[data-theme="dark"] .cw-term .sys.ok,html[data-theme="dark"] .cw-cl.ok,html[data-theme="dark"] .cw-dend,html[data-theme="dark"] .cw-rt.ready,html[data-theme="dark"] .cw-rst.on{color:#7FD99A}
html[data-theme="dark"] .cw-term .sys.warn,html[data-theme="dark"] .cw-cl.warn,html[data-theme="dark"] .cw-wl.warn,html[data-theme="dark"] .cw-dout .o4,html[data-theme="dark"] .cw-stale,html[data-theme="dark"] .cw-dstale,html[data-theme="dark"] .cw-rt.loading{color:#F0C674}
html[data-theme="dark"] .cw-vn{color:#D6A8FF}
html[data-theme="dark"] .cw-vr.chg .cw-vv{color:#FFC27A}
html[data-theme="dark"] .cw-dev{color:#7FD99A}
html[data-theme="dark"] .cw-term .fk{color:#D4D7E0}
html[data-theme="dark"] .ce-l.cw-warnl{background:rgba(245,158,11,.14)}
/* narrower: the right part goes under the code */
@media (max-width:1240px){.cw .dx-cmdk span,.cw .dx-cmdk kbd{display:none}.cw .dx-cmdk{min-width:0}}
@media (max-width:1100px){.cw .dx-tb [data-cmd="keys"],.cw .dx-tb [data-cmd="share"]{display:none}.cw-dbgb span{display:none}.cw-dbgb{padding:0 9px}}
@media (min-width:760px) and (max-width:1020px){
  .cw-work{flex-direction:column}
  .cw-split{display:none}
  .cw-side{width:auto;min-width:0;height:44%;box-shadow:inset 0 1px 0 var(--dx-line2)}
  .cw-code{min-height:0}
  .cw .dx-tb .dx-sep,.cw .dx-tb [data-cmd="fmt"]{display:none}
}
/* a phone: one pane at a time; Run and Debug stay at the top */
@media (max-width:759px){
  .cw .dx-mb{display:grid}
  .cw .dx-tb [data-cmd="fmt"],.cw .dx-tb [data-cmd="keys"],.cw .dx-tb [data-cmd="share"],.cw .dx-tb .dx-sep{display:none}
  .cw-langs button{min-width:0;padding:0 8px;height:28px}
  .cw-runb{height:32px;padding:0 11px;margin-left:2px}
  .cw-dbgb{height:32px;padding:0 8px}
  .cw-dbgb span{display:none}
  .cw .dx-save span{display:none}
  .cw-work{flex-direction:column}
  .cw-split{display:none}
  .cw-side{width:auto;min-width:0;min-height:0;flex:1;box-shadow:none}
  .cw-code{min-height:0}
  .cw .dx-docb{flex:none}
  .cw .dx-doct{display:none}
  .cw .dx-tb [data-cmd="redo"],.cw .dx-cmdk{display:none}
  .cw[data-pane="code"] .cw-side{display:none}
  .cw[data-pane="out"] .cw-code{display:none}
  .cw[data-pane="dbg"] .cw-code{flex:none;height:42%;box-shadow:inset 0 -1px 0 var(--dx-line2)}
  .cw[data-pane="dbg"][data-mode="web"] .cw-code,.cw[data-pane="dbg"][data-mode="h2t"] .cw-code{display:none}
  .cw-dr{width:auto}
  .cw-oh .cw-ot span{display:none}
  .cw-oh .cw-ot{padding:0 9px}
  .cw-oh .cw-ot[aria-selected="true"] span{display:inline}
  .cw-dpos{min-width:0}
  .cw-dtb .dx-sep{display:none}
  .cw-wcon{height:40%}
  .cw-h2m button{padding:0 7px}
  .cw-ft .cw-rt{max-width:58%}
  .cw:not(.running) .cw-ft .cw-rst,.cw.running .cw-ft .cw-rt{display:none}
  .cw-tabs{min-height:32px}
  .cw-tab{max-width:150px;padding-left:10px}
  .cw-x{width:26px;height:26px}
  .cw-mb button[aria-pressed="true"]{color:var(--dx-acc)}
}
/* a phone held sideways: the top bar slimmer */
@media (max-width:1020px) and (max-height:520px){
  .cw .dx-top{min-height:42px}
  .cw-tabs{min-height:28px}
  .cw-oh{min-height:30px}
  .cw-ot{height:30px}
}
/* the keys over a phone's keyboard (shown only while the keyboard is up) */
.cw-keys{display:none}
.cw-keys.up:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:var(--sf2);box-shadow:0 -1px 0 var(--dx-line2),0 -8px 20px -12px rgba(var(--shd),.35)}
.cw-keys::-webkit-scrollbar{display:none}
.cw-keys button{flex:none;display:grid;place-items:center;min-width:38px;height:36px;padding:0 8px;font:500 15px/1 var(--mono);color:var(--ink2)}
.cw-keys button:active{background:var(--dx-on);color:var(--dx-ont)}
.cw-keys i{flex:none;width:1px;height:22px;margin:0 4px;background:var(--dx-line2)}
/* <</app:coderun>> */