/* base reset */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: one calm phone-width column; tools open as full views under a sticky bar. Forest green from the logo, pulse red only for live signal. */
:root{
  --bg:#F2F4F1; --surface:#FFFFFF; --sunk:#E7ECE5; --ink:#172117; --muted:#5A6658; --line:#D8DFD5;
  --accent:#476447; --logo:url("icons/logo-color-128.png"); --accent-ink:#FFFFFF; --pulse:#C9364A; --good:#2B7A4B; --warn:#9A6512; --bad:#B4362F;
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F130F; --surface:#171D17; --sunk:#1E261D; --ink:#E6ECE4; --muted:#9AA696; --line:#2A3428;
  --accent:#8DBF8F; --logo:url("icons/logo-white-128.png"); --accent-ink:#0F1F10; --pulse:#F0687A; --good:#62C48C; --warn:#E2AA45; --bad:#F07B71; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F130F; --surface:#171D17; --sunk:#1E261D; --ink:#E6ECE4; --muted:#9AA696; --line:#2A3428;
  --accent:#8DBF8F; --logo:url("icons/logo-white-128.png"); --accent-ink:#0F1F10; --pulse:#F0687A; --good:#62C48C; --warn:#E2AA45; --bad:#F07B71; color-scheme:dark}

/* Color themes: each redefines the neutrals and accent for light and dark. Forest (above) is the default. */
:root[data-palette="ocean"]{ --bg:#EFF4F7; --surface:#FFFFFF; --sunk:#E2EBF1; --ink:#102130; --muted:#536676; --line:#D2DEE7; --accent:#1F6E96; --accent-ink:#FFFFFF }
@media (prefers-color-scheme:dark){:root[data-palette="ocean"]:not([data-theme="light"]){ --bg:#0C1218; --surface:#141D25; --sunk:#1A2631; --ink:#E3ECF2; --muted:#92A4B2; --line:#253442; --accent:#6FB7DD; --accent-ink:#04202E }}
:root[data-palette="ocean"][data-theme="dark"]{ --bg:#0C1218; --surface:#141D25; --sunk:#1A2631; --ink:#E3ECF2; --muted:#92A4B2; --line:#253442; --accent:#6FB7DD; --accent-ink:#04202E }
:root[data-palette="saffron"]{ --bg:#F6F3EC; --surface:#FFFDF9; --sunk:#ECE6DA; --ink:#231C12; --muted:#6B604F; --line:#E1D9CA; --accent:#8F5A12; --accent-ink:#FFFFFF }
@media (prefers-color-scheme:dark){:root[data-palette="saffron"]:not([data-theme="light"]){ --bg:#15120D; --surface:#1E1A13; --sunk:#262119; --ink:#EFE8DC; --muted:#A89C88; --line:#332C21; --accent:#E0A955; --accent-ink:#2A1A04 }}
:root[data-palette="saffron"][data-theme="dark"]{ --bg:#15120D; --surface:#1E1A13; --sunk:#262119; --ink:#EFE8DC; --muted:#A89C88; --line:#332C21; --accent:#E0A955; --accent-ink:#2A1A04 }
:root[data-palette="plum"]{ --bg:#F5F2F6; --surface:#FFFFFF; --sunk:#EAE3EC; --ink:#21172A; --muted:#66586F; --line:#DDD3E1; --accent:#6E3F86; --accent-ink:#FFFFFF }
@media (prefers-color-scheme:dark){:root[data-palette="plum"]:not([data-theme="light"]){ --bg:#130F17; --surface:#1C1621; --sunk:#241C2B; --ink:#ECE4F0; --muted:#A596AD; --line:#31273A; --accent:#C29BDB; --accent-ink:#24112F }}
:root[data-palette="plum"][data-theme="dark"]{ --bg:#130F17; --surface:#1C1621; --sunk:#241C2B; --ink:#ECE4F0; --muted:#A596AD; --line:#31273A; --accent:#C29BDB; --accent-ink:#24112F }
:root[data-palette="graphite"]{ --bg:#F3F4F5; --surface:#FFFFFF; --sunk:#E6E8EA; --ink:#15181B; --muted:#5B6168; --line:#D6D9DC; --accent:#2E3A46; --accent-ink:#FFFFFF }
@media (prefers-color-scheme:dark){:root[data-palette="graphite"]:not([data-theme="light"]){ --bg:#0E1012; --surface:#171A1D; --sunk:#1F2327; --ink:#E8EAEC; --muted:#9AA1A8; --line:#2B3035; --accent:#C9D2DB; --accent-ink:#121619 }}
:root[data-palette="graphite"][data-theme="dark"]{ --bg:#0E1012; --surface:#171A1D; --sunk:#1F2327; --ink:#E8EAEC; --muted:#9AA1A8; --line:#2B3035; --accent:#C9D2DB; --accent-ink:#121619 }


html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;min-height:56px}
.brand{font-family:var(--display);font-size:22px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.brand .logo{width:34px;height:34px;flex:none;background:var(--logo) center/contain no-repeat}
#viewTitle{font-weight:600;font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:none}
.iconbtn svg{width:20px;height:20px}
#themeBtn{margin-left:auto}
main.wrap{padding-block:20px 48px}
section{display:flex;flex-direction:column;gap:18px}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1}
h2{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2}
h3{font-size:15px;font-weight:700}
p{margin:0}
.lead{color:var(--muted);max-width:60ch}
.label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* home */
.hero{display:flex;flex-direction:column;gap:10px;padding-block:6px 4px}
.hero .trace{width:100%;height:46px;display:block}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tool{appearance:none;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-height:118px;transition:border-color .15s,transform .15s}
.tool:hover{border-color:var(--accent)}
.tool:active{transform:scale(.985)}
.tool .unit{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);background:var(--sunk);border-radius:6px;padding:2px 7px;align-self:flex-start}
.tool strong{font-size:16px;line-height:1.25}
.tool span.d{font-size:13px;color:var(--muted);line-height:1.35}
.tool.wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0;gap:12px}
.tool.wide .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
@media (max-width:360px){.tools{grid-template-columns:1fr}}

.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600}
.row .s{font-size:13px;color:var(--muted)}
.row .v{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:22px 16px;color:var(--muted);font-size:14px;text-align:left}
.chip{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid currentColor;white-space:nowrap}
.chip.good{color:var(--good)} .chip.fair{color:var(--warn)} .chip.poor{color:var(--bad)} .chip.neutral{color:var(--muted)}

.note{font-size:13px;color:var(--muted);border-left:3px solid var(--line);padding:2px 0 2px 12px}
.note strong{color:var(--ink)}
.safety{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}

/* tool views */
.seg{display:flex;background:var(--sunk);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:14px;padding:9px 8px;border-radius:9px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.stage{position:relative;background:#000;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-width:100%}
.stage video,.stage img{width:100%;height:100%;object-fit:cover;display:block}
.stage .guide{position:absolute;inset:0;pointer-events:none}
.stage .guide.face::after{content:"";position:absolute;left:30%;right:30%;top:8%;bottom:14%;border:2px dashed rgba(255,255,255,.7);border-radius:50%}
.stage .guide.face::before{content:"";position:absolute;left:35%;right:35%;top:13%;height:18%;border:2px solid rgba(255,255,255,.85);border-radius:8px}
.stage .guide.breath::after{content:"";position:absolute;left:25%;right:25%;top:6%;bottom:6%;border:2px dashed rgba(255,255,255,.7);border-radius:10px}
.stage .idle{position:absolute;inset:0;display:grid;place-items:center;color:#cfd8d4;font-size:14px;text-align:center;padding:16px}
.prog{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.18)}
.prog i{display:block;height:100%;width:0;background:var(--pulse);transition:width .2s linear}
canvas.wave{width:100%;height:84px;display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{appearance:none;font:inherit;font-weight:600;font-size:15px;border-radius:12px;padding:11px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;position:relative;line-height:1.2}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad);background:transparent}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.status{font-size:14px;color:var(--muted);min-height:1.5em}
.status.err{color:var(--bad)}
.result{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.big .n{font-family:var(--mono);font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.big .u{font-family:var(--mono);font-size:16px;color:var(--muted)}
.big .chip{align-self:center;margin-left:auto}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
input[type=text],select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;box-sizing:border-box}
textarea{min-height:70px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}

/* joint */
#jt-canvas{width:100%;display:block;border-radius:var(--r);background:var(--sunk);touch-action:manipulation;cursor:crosshair}
.ptlist{display:flex;gap:8px;flex-wrap:wrap;font-size:13px}
.ptlist span{padding:4px 10px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.ptlist span.on{background:var(--accent);color:var(--accent-ink)}
.meter{height:10px;background:var(--sunk);border-radius:999px;position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:999px}

/* skin */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.thumb{appearance:none;border:2px solid transparent;padding:0;background:var(--sunk);border-radius:10px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1;max-width:100%}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb span{position:absolute;left:0;right:0;bottom:0;font-size:11px;font-family:var(--mono);background:rgba(0,0,0,.55);color:#fff;padding:2px 4px}
.thumb[aria-pressed="true"]{border-color:var(--accent)}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.compare figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.compare img{width:100%;border-radius:10px;display:block;aspect-ratio:1;object-fit:cover}
.compare figcaption{font-size:13px;color:var(--muted)}
.preview{max-width:100%;border-radius:var(--r);display:block}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;z-index:20;max-width:calc(100% - 32px)}
.confirm{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;border:1px solid var(--bad);border-radius:12px;font-size:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* layout helpers (replace inline styles so the CSP can forbid them) */
.stack8{display:flex;flex-direction:column;gap:8px}
.stack16{display:flex;flex-direction:column;gap:16px}
.today{padding:10px 0;font-weight:700}

/* appearance */
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:380px){.swatches{grid-template-columns:1fr}}
.swatch{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.sw-chip{display:flex;flex:none;border-radius:10px;overflow:hidden}
.sw-chip i{position:relative;display:block;width:22px;height:40px;border:1px solid transparent}
.sw-chip i.l{border-radius:10px 0 0 10px;border-right:0}
.sw-chip i.d{border-radius:0 10px 10px 0;border-left:0}
.sw-chip i::after{content:"";position:absolute;left:5px;right:5px;top:13px;height:12px;border-radius:4px}
.sw-txt{display:flex;flex-direction:column;min-width:0}
.sw-txt strong{font-size:15px}
.sw-txt span{font-size:13px;color:var(--muted)}
.swatch[data-palette="ocean"] .l{background:#EFF4F7;border-color:#D2DEE7} .swatch[data-palette="ocean"] .l::after{background:#1F6E96} .swatch[data-palette="ocean"] .d{background:#0C1218;border-color:#253442} .swatch[data-palette="ocean"] .d::after{background:#6FB7DD}
.swatch[data-palette="saffron"] .l{background:#F6F3EC;border-color:#E1D9CA} .swatch[data-palette="saffron"] .l::after{background:#8F5A12} .swatch[data-palette="saffron"] .d{background:#15120D;border-color:#332C21} .swatch[data-palette="saffron"] .d::after{background:#E0A955}
.swatch[data-palette="plum"] .l{background:#F5F2F6;border-color:#DDD3E1} .swatch[data-palette="plum"] .l::after{background:#6E3F86} .swatch[data-palette="plum"] .d{background:#130F17;border-color:#31273A} .swatch[data-palette="plum"] .d::after{background:#C29BDB}
.swatch[data-palette="graphite"] .l{background:#F3F4F5;border-color:#D6D9DC} .swatch[data-palette="graphite"] .l::after{background:#2E3A46} .swatch[data-palette="graphite"] .d{background:#0E1012;border-color:#2B3035} .swatch[data-palette="graphite"] .d::after{background:#C9D2DB}
.swatch[data-palette="forest"] .l{background:#F2F4F1;border-color:#D8DFD5} .swatch[data-palette="forest"] .l::after{background:#476447} .swatch[data-palette="forest"] .d{background:#0F130F;border-color:#2A3428} .swatch[data-palette="forest"] .d::after{background:#8DBF8F}

/* about + legal */
.about-head{display:flex;align-items:center;gap:16px}
.big-logo{width:76px;height:76px;flex:none;background:var(--logo) center/contain no-repeat}
.about-head .lead{font-family:var(--display);font-size:22px;color:var(--accent);text-align:left}
.prose{display:flex;flex-direction:column;gap:12px;max-width:65ch}
.prose h2{margin-top:8px}
.prose h3{font-size:16px;margin-top:6px}
.prose p,.prose li{color:var(--ink)}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prose a,.foot a{color:var(--accent);text-underline-offset:3px}
.prose .meta{font-size:13px;color:var(--muted)}
.summary{background:var(--sunk);border-radius:12px;padding:12px 14px;font-size:15px}
.copyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copyrow .mono{font-size:15px;word-break:break-all;flex:1;min-width:0}
.sig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin-top:8px}
.sig div{display:flex;flex-direction:column-reverse;gap:6px;font-size:13px;color:var(--muted)}
.sig i{display:block;height:28px;border-bottom:1px solid var(--ink)}
@media (max-width:420px){.sig{grid-template-columns:1fr}}
.foot{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);padding-top:4px}
.footnav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:600;margin-bottom:4px}