:root{
--safe-top: env(safe-area-inset-top,0px);
--safe-bottom: env(safe-area-inset-bottom,0px);
--bg:#070d10;
--fg:#edf4ed;
--sub:#b7d8c3;
--muted:#99a79f;
--accent:#72e0ad;
--accent-strong:#a0f4cb;
--aqua:#7fdcff;
--violet:#b9a7ff;
--amber:#d7b35e;
--petal:#f0a7b7;
--warn:#e3b15d;
--panel:rgba(9,18,20,.76);
--panel-strong:rgba(10,22,24,.95);
--line:rgba(205,230,224,.20);
--line-strong:rgba(114,224,173,.48);
--shadow:0 18px 48px rgba(0,0,0,.36),0 1px 0 rgba(255,255,255,.03) inset;
--chrome-h:82px; --footer-h:28px;
--control-scale:1;
--control-hit-min:44px;
--hud-left:12px;
--hud-top-gap:12px;
--top-hud-slot-h:58px;
--hud-panel-gap:10px;
--left-panel-top:calc(var(--hud-top-gap) + var(--top-hud-slot-h) + var(--hud-panel-gap));
--side-rail-top:var(--left-panel-top);
--right-dock-column-w:420px;
--right-rail-gap:10px;
--right-param-top:calc(var(--safe-top) + var(--chrome-h) + var(--hud-top-gap));
--live-dock-bottom:calc(var(--footer-h) + var(--safe-bottom) + 12px);
--right-param-max-h:clamp(260px, calc(100vh - var(--right-param-top) - var(--live-dock-bottom) - 166px), 560px);
--quick-dock-top:var(--right-param-top);
--quick-dock-right:calc(24px + var(--right-dock-column-w));
}
*{box-sizing:border-box;min-width:0}
html,body{height:100%;margin:0;background:linear-gradient(140deg,#070d10 0%,#081314 46%,#0d1118 100%);color:var(--fg);
font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;overflow:hidden}
button,select,input{font:inherit}


/* --- Top / Footer -------------------------------------------------------- */
header{position:fixed;left:0;right:0;top:0;height:var(--chrome-h);padding-top:var(--safe-top);
z-index:50;border-bottom:1px solid rgba(160,244,203,.22);background:linear-gradient(180deg,rgba(8,15,17,.96),rgba(7,11,10,.88));backdrop-filter:blur(18px);box-shadow:0 10px 34px rgba(0,0,0,.24)}
#titleBar,#ctrlBar{display:flex;align-items:center;padding:0 18px}
#titleBar{height:48px;border-bottom:1px solid rgba(197,220,204,.10);justify-content:space-between;gap:14px}
#ctrlBar{height:34px;font-size:12px;color:var(--muted);overflow:hidden;gap:10px}
.brand-lockup{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{position:relative;width:36px;height:36px;border:1px solid rgba(160,244,203,.52);border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(33,61,55,.92),rgba(8,19,21,.96));box-shadow:0 0 0 1px rgba(160,244,203,.14) inset,0 0 24px rgba(114,224,173,.18);overflow:hidden}
.brand-mark-membrane{position:absolute;inset:7px;border:1.5px solid rgba(127,220,255,.72);border-radius:50% 44% 52% 46%;transform:rotate(-18deg);box-shadow:0 0 12px rgba(127,220,255,.18)}
.brand-mark-core{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff7c2 0%,#a0f4cb 48%,#2a6270 100%);box-shadow:0 0 16px rgba(160,244,203,.62)}
.brand-mark-wave{position:absolute;left:6px;right:6px;bottom:9px;height:8px;border-bottom:2px solid rgba(240,167,183,.65);border-radius:50%;transform:rotate(-7deg)}
#titleBar h1{margin:0;display:flex;flex-direction:column;gap:2px;line-height:1.05;color:var(--fg);font-size:15px}
#titleBar h1 small{font-size:11px;font-weight:500;color:#9fcfc0}
.state{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--petal);box-shadow:0 0 0 5px rgba(240,167,183,.10),0 0 18px rgba(240,167,183,.18)}
.runtime-strip{display:flex;gap:8px;align-items:center;min-width:0;white-space:nowrap;overflow:hidden}
.header-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:rgba(16,24,21,.72);color:var(--sub)}
.life-compass-strip{gap:5px;padding:2px 4px;border:1px solid rgba(160,244,203,.16);border-radius:999px;background:linear-gradient(90deg,rgba(17,40,39,.62),rgba(14,20,28,.48));box-shadow:0 0 0 1px rgba(255,255,255,.02) inset}
.compass-title{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;background:rgba(160,244,203,.14);color:#dfffee;font-weight:800;font-size:11px}
.compass-step{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid rgba(205,230,224,.13);border-radius:999px;color:#c7dcd7;background:rgba(6,14,16,.36)}
.compass-step.accent{border-color:rgba(240,167,183,.36);color:#ffe3ea;background:rgba(73,31,43,.34)}
.compass-arrow{color:rgba(127,220,255,.78);font-weight:800}
.warn-pill{border-color:rgba(227,177,93,.52)!important;color:#f0c981!important;background:rgba(42,31,12,.82)!important}
.origin-warn-hidden{display:none;margin-left:auto}
.hidden-file-input{display:none}
.inline-control-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#tapeInfo{font:11px ui-monospace,Menlo,Consolas,monospace;opacity:.78;line-height:1.3}
.cockpit-nav{display:flex;gap:4px;margin-left:auto;align-items:center;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.cockpit-nav::-webkit-scrollbar{display:none}
.cockpit-nav-label{display:inline-flex;align-items:center;height:24px;padding:0 7px;color:#8fa49d;font-size:10.5px;white-space:nowrap;text-transform:uppercase;border:1px solid rgba(205,230,224,.12);border-radius:8px;background:rgba(8,13,14,.44)}
.cockpit-tab{height:24px;padding:0 9px;border:1px solid rgba(205,230,224,.18);border-radius:8px;background:rgba(12,23,25,.78);color:#a9bbb6;font-size:12px;cursor:pointer}
.cockpit-tab[aria-pressed="true"]{border-color:rgba(160,244,203,.62);color:var(--fg);background:linear-gradient(180deg,rgba(45,78,65,.72),rgba(26,45,49,.74));box-shadow:0 0 0 2px rgba(114,224,173,.14) inset,0 0 18px rgba(114,224,173,.12)}
.cockpit-tab:focus{outline:2px solid var(--accent);outline-offset:2px}
body.surface-minimal .cockpit-nav .cockpit-tab:not([data-cockpit-view="orgel"]){opacity:.62;background:rgba(9,17,18,.58);border-color:rgba(205,230,224,.12)}
body.surface-minimal .cockpit-nav .cockpit-tab:not([data-cockpit-view="orgel"]):hover,
body.surface-minimal .cockpit-nav .cockpit-tab:not([data-cockpit-view="orgel"]):focus{opacity:1}
.lang-toggle{flex:0 0 auto;margin-left:4px;white-space:nowrap}
.guide-toggle{flex:0 0 auto;margin-left:4px;white-space:nowrap}


footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);
border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:2px 12px;color:var(--muted);font-size:11px;background:rgba(7,11,10,.9);backdrop-filter:blur(10px); z-index:60}
.pill{display:inline-flex;gap:6px;align-items:center;background:rgba(16,24,21,.76);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
#runState{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sig{flex:0 0 auto;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px ui-monospace,Menlo,Consolas,monospace;opacity:.7}


/* --- Screen / Canvas ----------------------------------------------------- */
#screen{position:fixed;left:0;right:0;top:var(--chrome-h);bottom:var(--footer-h);overflow:hidden;background:
linear-gradient(140deg,rgba(6,13,16,1),rgba(8,18,17,.98) 45%,rgba(13,14,22,1));isolation:isolate}
#viz{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:transparent; z-index:1}
#viz[data-ximon-pettable="1"]{cursor:default}
.ximon-petting-cue{position:absolute;left:0;top:0;z-index:156;pointer-events:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;background:rgba(9,13,11,.72);border:1px solid rgba(248,229,139,.56);box-shadow:0 0 0 5px rgba(248,229,139,.08),0 10px 24px rgba(0,0,0,.30);filter:drop-shadow(0 0 10px rgba(248,229,139,.28));animation:ximonPettingCueFloat .9s ease-in-out infinite alternate}
.ximon-petting-cue[hidden]{display:none}
@keyframes ximonPettingCueFloat{0%{opacity:.78;transform:translateY(0) scale(.96)}100%{opacity:1;transform:translateY(-2px) scale(1.03)}}
.entry-coach{position:absolute;left:50%;bottom:calc(var(--footer-h) + var(--safe-bottom) + 18px);transform:translateX(-50%);z-index:116;display:flex;align-items:center;gap:9px;width:max-content;max-width:min(580px, calc(100vw - var(--right-dock-column-w) - 126px));padding:8px 11px;border:1px solid rgba(160,244,203,.34);border-radius:10px;background:linear-gradient(90deg,rgba(11,25,23,.86),rgba(18,30,34,.74));backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.02) inset;color:var(--fg);pointer-events:none}
.entry-coach strong{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:rgba(160,244,203,.16);color:#e7fff0;font-size:11px;white-space:nowrap}
.entry-coach span{color:#c9ddd7;font-size:12px;line-height:1.35}
body[data-plain-guide-open="1"] .entry-coach,
body:not(.surface-minimal) .entry-coach{display:none}
.pwa-resume-prompt{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:155;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(560px, calc(100vw - var(--right-dock-column-w) - 116px));padding:9px 10px;border:1px solid rgba(160,244,203,.38);border-radius:10px;background:linear-gradient(90deg,rgba(11,25,23,.94),rgba(26,32,42,.86));backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,.32);color:var(--fg)}
.pwa-resume-prompt[hidden]{display:none}
.pwa-resume-prompt strong{display:block;color:#e7fff0;font-size:12px;line-height:1.25}
.pwa-resume-prompt span{display:block;color:#bdd5cf;font-size:11.5px;line-height:1.32;margin-top:2px}
.pwa-resume-actions{display:flex;gap:6px;flex:0 0 auto}
.pwa-resume-actions button{min-height:34px;padding:6px 10px;border:1px solid rgba(205,230,224,.20);border-radius:8px;background:rgba(12,23,25,.94);color:var(--fg);cursor:pointer;font-size:12px}
.pwa-resume-actions button:hover{border-color:var(--line-strong)}
body[data-plain-guide-open="1"] .pwa-resume-prompt{display:none}
#screen::before{
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:
linear-gradient(115deg,rgba(127,220,255,.08),rgba(114,224,173,.035) 28%,rgba(240,167,183,.045) 70%,rgba(9,13,11,0)),
radial-gradient(ellipse at 50% 52%,rgba(114,224,173,.030),rgba(9,13,11,0) 38%,rgba(9,13,11,.18) 100%),
linear-gradient(90deg,rgba(9,13,11,.30) 0,rgba(9,13,11,.10) 1px,rgba(9,13,11,0) 16px),
linear-gradient(180deg,rgba(9,13,11,.30) 0,rgba(9,13,11,.10) 1px,rgba(9,13,11,0) 16px);
box-shadow:inset 0 0 0 1px rgba(9,13,11,.54),inset 0 0 140px rgba(0,0,0,.30);
}
.cockpit-panel{position:absolute;left:12px;top:70px;z-index:18;width:min(392px, calc(100vw - 24px));max-height:calc(100% - 92px);overflow:auto;padding:12px;border:1px solid rgba(205,230,224,.19);border-radius:10px;background:linear-gradient(180deg,rgba(10,23,24,.82),rgba(8,13,14,.72));backdrop-filter:blur(16px);box-shadow:var(--shadow);display:none}
body[data-cockpit-view="kernel"] .cockpit-panel,
body[data-cockpit-view="canonical"] .cockpit-panel,
body[data-cockpit-view="evidence"] .cockpit-panel,
body[data-cockpit-view="research"] .cockpit-panel{display:block}
.cockpit-view{display:none}
body[data-cockpit-view="kernel"] [data-cockpit-panel="kernel"],
body[data-cockpit-view="canonical"] [data-cockpit-panel="canonical"],
body[data-cockpit-view="evidence"] [data-cockpit-panel="evidence"],
body[data-cockpit-view="research"] [data-cockpit-panel="research"]{display:block}
.cockpit-view h2{margin:0 0 10px;color:var(--sub);font-size:13px;line-height:1.2}
.cockpit-readout{margin:0;display:grid;gap:7px}
.cockpit-readout div{display:grid;grid-template-columns:minmax(96px, .62fr) minmax(0, 1.38fr);gap:8px;align-items:start;padding:7px 0;border-top:1px solid rgba(197,220,204,.12)}
.cockpit-readout div:first-child{border-top:0}
.cockpit-readout dt{color:var(--muted)}
.cockpit-readout dd{margin:0;color:var(--fg);text-align:right;overflow-wrap:anywhere;word-break:break-word;white-space:normal;line-height:1.25}
.cockpit-readout [data-cockpit-value="life"],
.cockpit-readout [data-cockpit-value="lifeSummary"],
.cockpit-readout [data-cockpit-value="affect"],
.cockpit-readout [data-cockpit-value="affectSummary"],
.cockpit-readout [data-cockpit-value="expression"],
.cockpit-readout [data-cockpit-value="presence"],
.cockpit-readout [data-cockpit-value="canonical"],
.cockpit-readout [data-cockpit-value="canonicalRole"],
.cockpit-readout [data-cockpit-value="comprehensionState"],
.cockpit-readout [data-cockpit-value="preferenceFeedback"],
.cockpit-readout [data-cockpit-value="viabilityRelaxation"],
.cockpit-readout [data-cockpit-value="criticalityMode"],
.cockpit-readout [data-cockpit-value="criticalityPreview"]{font-size:11px}
.readout-fold{margin-top:10px;border-top:1px solid rgba(197,220,204,.12);padding-top:8px;color:var(--fg)}
.readout-fold summary{cursor:pointer;color:var(--sub);font-size:12px;line-height:1.25}
.readout-guide{margin-top:8px;font-size:11px;line-height:1.45;color:var(--muted)}
.readout-guide p{margin:0 0 7px}
.readout-guide code{font-size:10px;color:var(--fg);overflow-wrap:anywhere}
.readout-terms{margin:8px 0 0;display:grid;gap:6px}
.readout-terms div{display:grid;grid-template-columns:minmax(54px,.35fr) minmax(0,1fr);gap:8px;border-top:1px solid rgba(197,220,204,.10);padding-top:6px}
.readout-terms dt{color:var(--sub);font-weight:700}
.readout-terms dd{margin:0;color:var(--muted);overflow-wrap:anywhere}
.canonical-explain{margin-top:8px;color:var(--muted);font-size:11px;line-height:1.45}
.canonical-explain p{margin:0 0 7px}
.canonical-ximon-overview-wrap{margin-top:10px}
.canonical-ximon-overview{min-width:0;border:1px solid rgba(197,220,204,.14);border-radius:8px;background:rgba(15,24,21,.66);padding:9px;display:grid;gap:8px}
.canonical-ximon-canvas{width:100%;aspect-ratio:32/21;height:auto;display:block;border-radius:8px;background:radial-gradient(circle at 50% 52%,rgba(114,224,173,.10),rgba(9,13,11,.30) 62%,rgba(9,13,11,.58));border:1px solid rgba(197,220,204,.10)}
.canonical-overview-copy h3{margin:0;color:var(--sub);font-size:12px;line-height:1.25}
.canonical-overview-copy p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.35}
.canonical-role-bars{display:grid;gap:6px}
.canonical-bar-row{display:grid;grid-template-columns:minmax(78px,.55fr) minmax(70px,1fr) 34px;gap:7px;align-items:center;padding-top:6px;border-top:1px solid rgba(197,220,204,.09)}
.canonical-bar-label{color:var(--fg);font-size:10.5px;line-height:1.2}
.canonical-bar-track{height:8px;border-radius:999px;background:rgba(197,220,204,.10);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(197,220,204,.07)}
.canonical-bar-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(108,221,182,.82),rgba(248,232,164,.88))}
.canonical-bar-row b{color:var(--fg);font:10px ui-monospace,Menlo,Consolas,monospace;text-align:right}
.canonical-bar-change{grid-column:1 / -1;color:var(--muted);font-size:10px;line-height:1.25}
.plain-guide-panel{
position:absolute;
left:12px;
top:12px;
z-index:560;
width:min(760px, calc(100vw - var(--right-dock-column-w) - 72px));
height:min(786px, calc(100% - 24px));
min-width:min(320px, calc(100vw - 24px));
min-height:320px;
max-width:max(280px, calc(100vw - var(--right-dock-column-w) - 72px));
max-height:calc(100% - 24px);
overflow:auto;
resize:both;
overscroll-behavior:contain;
padding:14px;
border:1px solid rgba(160,244,203,.40);
border-radius:10px;
background:linear-gradient(180deg,rgba(9,20,22,.96),rgba(8,13,14,.94));
backdrop-filter:blur(18px);
box-shadow:0 22px 58px rgba(0,0,0,.44);
color:var(--fg);
}
.plain-guide-panel[hidden]{display:none}
.plain-guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:sticky;top:-14px;margin:-14px -14px 12px;padding:13px 14px 10px;background:linear-gradient(180deg,rgba(8,13,11,.98),rgba(8,13,11,.90));border-bottom:1px solid rgba(197,220,204,.14);z-index:1}
.plain-guide-kicker{margin:0 0 3px;color:var(--accent-strong);font-size:11px;letter-spacing:0;text-transform:uppercase}
.plain-guide-head h2{margin:0;color:var(--fg);font-size:16px;line-height:1.25}
.plain-guide-close{flex:0 0 auto;min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(15,24,21,.94);color:var(--fg);font-size:12px;cursor:pointer}
.plain-guide-close:hover{border-color:var(--line-strong)}
.plain-guide-close:focus{outline:2px solid var(--accent);outline-offset:2px}
.plain-guide-body{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plain-guide-card{padding:11px;border:1px solid rgba(197,220,204,.13);border-radius:8px;background:rgba(15,24,21,.66)}
.plain-guide-card-wide{grid-column:1/-1}
.plain-guide-card h3{margin:0 0 8px;color:var(--sub);font-size:13px;line-height:1.25}
.plain-guide-card p{margin:0 0 8px;color:var(--muted);font-size:12px;line-height:1.55}
.plain-guide-steps,.plain-guide-legend{margin:0;padding-left:20px;color:var(--muted);font-size:12px;line-height:1.5}
.plain-guide-steps li,.plain-guide-legend li{margin:5px 0}
.plain-guide-terms{display:grid;gap:6px;margin:8px 0 0}
.plain-guide-terms div{display:grid;grid-template-columns:minmax(76px,.34fr) minmax(0,1fr);gap:8px;padding-top:6px;border-top:1px solid rgba(197,220,204,.10)}
.plain-guide-terms dt{color:var(--sub);font-weight:700;font-size:12px}
.plain-guide-terms dd{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.public-comprehension-card{background:linear-gradient(180deg,rgba(20,35,28,.78),rgba(15,24,21,.62));border-color:rgba(160,244,203,.22)}
.comprehension-strip div{grid-template-columns:minmax(70px,.22fr) minmax(0,1fr)}
.comprehension-strip dd{color:var(--fg)}
.comfort-note{padding-top:8px;border-top:1px solid rgba(197,220,204,.10)}
.claim-boundary-list li{margin:6px 0}
.plain-guide-map{margin:8px 0 8px;border:1px solid rgba(197,220,204,.12);border-radius:8px;background:#f8fbfb;overflow:hidden}
.plain-guide-map img{display:block;width:100%;height:auto;max-height:380px;object-fit:contain}
body[data-plain-guide-open="1"] .cockpit-panel,
body[data-plain-guide-open="1"] #agent-voices-ui,
body[data-plain-guide-open="1"] #pp-av{display:none}
body[data-cockpit-view="kernel"] #paramPanel,
body[data-cockpit-view="canonical"] #paramPanel,
body[data-cockpit-view="evidence"] #paramPanel,
body[data-cockpit-view="research"] #paramPanel,
body[data-cockpit-view="kernel"] #agent-voices-ui,
body[data-cockpit-view="canonical"] #agent-voices-ui,
body[data-cockpit-view="evidence"] #agent-voices-ui,
body[data-cockpit-view="research"] #agent-voices-ui,
body[data-cockpit-view="kernel"] #pp-av,
body[data-cockpit-view="canonical"] #pp-av,
body[data-cockpit-view="evidence"] #pp-av,
body[data-cockpit-view="research"] #pp-av{display:none}


/* --- Right quick tab ----------------------------------------------------- */
#togDock{position:fixed;right:var(--quick-dock-right);top:var(--quick-dock-top);z-index:130;display:flex;gap:8px;align-items:flex-start;max-height:calc(100vh - var(--quick-dock-top) - var(--footer-h) - var(--safe-bottom) - 12px)}
#togTab{width:var(--control-hit-min);height:var(--control-hit-min);border:1px solid rgba(205,230,224,.20);background:var(--panel-strong);color:var(--fg);border-radius:10px;
padding:0;font-size:16px;cursor:pointer;box-shadow:var(--shadow)}
#overlayTopRight{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:8px;
border:1px solid rgba(205,230,224,.20);border-radius:10px;background:linear-gradient(180deg,rgba(10,23,24,.84),rgba(8,13,14,.74));backdrop-filter:blur(16px);
width:202px;max-height:calc(100vh - var(--chrome-h) - var(--footer-h) - var(--quick-dock-top) - 24px);overflow:auto;box-shadow:var(--shadow)}
#togDock.collapsed #overlayTopRight{display:none}
.minisel,.mini-btn{min-height:max(var(--control-hit-min), calc(32px * var(--control-scale)));font-size:calc(12px * var(--control-scale));padding:7px 9px;border-radius:9px;border:1px solid rgba(205,230,224,.20);background:rgba(12,23,25,.92);color:var(--fg);cursor:pointer;width:100%}
.minisel:focus,.mini-btn:focus,.live-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.mini-btn[aria-pressed="true"]{border-color:var(--line-strong);box-shadow:0 0 0 2px rgba(114,224,173,.18) inset}


/* --- Util panel (sheet on mobile) --------------------------------------- */
#utilWrap{
position:fixed; left:0; right:0; top:auto;
bottom:calc(var(--footer-h) + var(--safe-bottom)); transform:none;
display:none;
z-index:500;
background:rgba(4,7,6,.54);
backdrop-filter:blur(3px);
}
#utilWrap.open{display:block}
#utilPanel{
margin:10px auto 0; width:min(94vw,560px);
background:linear-gradient(180deg,rgba(10,23,24,.97),rgba(8,13,14,.96));backdrop-filter:blur(18px);
border:1px solid rgba(205,230,224,.22);border-radius:10px;
padding:10px;max-height:60vh;overflow:auto;
display:grid;grid-template-columns:1fr 1fr;gap:8px;
z-index:510;
box-shadow:var(--shadow);
}
.sheet-head{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
padding-bottom:6px; margin-bottom:6px; border-bottom:1px solid var(--line);position:sticky;top:-10px;background:var(--panel-strong);z-index:1}
.sheet-head strong{font-size:12px; color:var(--sub)}
#utilClose{min-height:max(var(--control-hit-min), calc(28px * var(--control-scale))); font-size:calc(12px * var(--control-scale)); padding:4px 10px; border-radius:8px; border:1px solid var(--line); background:rgba(15,24,21,.92); color:var(--fg); cursor:pointer}
#utilPanel button,#utilPanel select,#utilPanel .tool-link{border-radius:9px;border:1px solid rgba(205,230,224,.20);background:rgba(12,23,25,.92);color:var(--fg);min-height:var(--control-hit-min);padding:7px 10px}
#utilPanel .tool-link{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px}
#utilPanel .tool-link:hover{border-color:rgba(160,244,203,.54);background:rgba(24,45,43,.94)}
#utilPanel button:hover,.mini-btn:hover,.live-btn:hover,#togTab:hover{border-color:var(--line-strong)}
#utilPanel label.full{border:1px solid rgba(197,220,204,.12);border-radius:8px;padding:8px;background:rgba(8,13,11,.42)}
.pwa-save-tools{grid-column:1 / -1;border:1px solid rgba(197,220,204,.13);border-radius:9px;background:rgba(8,13,11,.42);padding:0;overflow:hidden}
.pwa-save-tools summary{cursor:pointer;min-height:36px;display:flex;align-items:center;padding:7px 10px;color:var(--sub);font-size:12px;line-height:1.25}
.pwa-save-tools p{margin:0;padding:0 10px 8px;color:var(--muted);font-size:11.5px;line-height:1.4}
.pwa-save-button-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px 8px}
.pwa-save-button-row button{min-height:36px}
.pwa-save-info{margin:0 10px 10px;padding:6px 7px;border:1px solid rgba(197,220,204,.10);border-radius:7px;background:rgba(15,24,21,.58);color:var(--sub);font:10.5px/1.35 ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.preference-log-tools{grid-column:1 / -1;border:1px solid rgba(160,244,203,.16);border-radius:9px;background:rgba(8,13,11,.42);padding:0;overflow:hidden}
.preference-log-tools summary{cursor:pointer;min-height:36px;display:flex;align-items:center;padding:7px 10px;color:#d8f6e7;font-size:12px;line-height:1.25}
.preference-log-tools p{margin:0;padding:0 10px 8px;color:var(--muted);font-size:11.5px;line-height:1.42}
.preference-log-button-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px 8px}
.preference-log-button-row button{min-height:36px}
.preference-log-info{margin:0 10px 10px;padding:6px 7px;border:1px solid rgba(160,244,203,.13);border-radius:7px;background:rgba(15,24,21,.58);color:var(--sub);font:10.5px/1.35 ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.preference-log-map-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:0 10px 10px}
.preference-log-map-card{margin:0;padding:7px;border:1px solid rgba(160,244,203,.13);border-radius:8px;background:rgba(11,18,16,.52);min-width:0}
.preference-log-map-card figcaption{margin:0 0 5px;color:#d8f6e7;font:700 11.5px/1.25 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
.preference-log-map-card canvas{display:block;width:100%;height:132px;border-radius:6px;background:rgba(9,17,16,.96)}
.preference-log-map-note{padding:6px 0 0!important;margin:0!important;color:var(--muted);font-size:10.5px!important;line-height:1.35!important}
@media (min-width:520px){.preference-log-map-grid{grid-template-columns:1fr 1fr}}
.preference-log-mini{order:-1;flex:0 0 auto;width:min(340px, 100%);margin-top:0;margin-left:auto;border:1px solid rgba(160,244,203,.17);border-radius:9px;background:linear-gradient(180deg,rgba(9,21,20,.74),rgba(7,12,12,.68));box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.preference-log-map-toggle{width:100%;justify-content:flex-start;text-align:left;font-size:12px;padding:6px 9px;min-height:max(var(--control-hit-min), calc(34px * var(--control-scale)));border:0;border-bottom:1px solid rgba(160,244,203,.12);border-radius:0;background:rgba(12,23,22,.72);color:#d8f6e7}
.preference-log-map-body{padding:7px 0 0;border-top:1px solid rgba(160,244,203,.06);background:rgba(8,13,11,.30);max-height:min(360px, calc(100vh - var(--footer-h) - var(--safe-bottom) - 174px));overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.preference-log-mini[data-collapsed="1"] .preference-log-map-body{display:none}
.preference-log-info-compact{margin:0 10px 7px}
.preference-log-map-dock-note{padding:0 10px 9px!important}
#prefThermoMini{order:2;flex:0 0 auto}


/* --- HUD ----------------------------------------------------------------- */
#paramPanel{position:fixed;top:var(--right-param-top);right:12px;left:auto;z-index:125;width:min(var(--right-dock-column-w), calc(100vw - 24px));max-height:var(--right-param-max-h);overflow:hidden;display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;
font:12px ui-monospace,Menlo,Consolas,monospace;background:linear-gradient(180deg,rgba(9,20,22,.70),rgba(8,13,14,.62));border:1px solid rgba(205,230,224,.20);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.24)}
.param-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 .6em;position:sticky;top:-10px;z-index:1;padding:2px 0 7px;background:linear-gradient(180deg,rgba(8,13,11,.96),rgba(8,13,11,.84));border-bottom:1px solid rgba(197,220,204,.12)}
#paramPanel h3{margin:0;color:var(--sub);font:700 12px ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
.param-panel-toggle{min-height:30px;min-width:112px;padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:rgba(15,24,21,.92);color:var(--fg);font:11px ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;cursor:pointer;white-space:nowrap}
.param-panel-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}
.param-panel-toggle:hover{border-color:var(--line-strong)}
#paramPanel[data-collapsed="1"]{width:min(var(--right-dock-column-w), calc(100vw - 24px))}
#paramPanel[data-collapsed="1"] .param-panel-head{margin-bottom:0}
#paramPanel[data-collapsed="1"] #paramPanelBody{display:none}
.param-panel-body{flex:1 1 auto;min-height:0;min-width:0;max-height:calc(var(--right-param-max-h) - 48px);overflow:auto;overscroll-behavior:contain;padding-right:2px}
.param-simple-note{margin:0 0 8px;padding:7px 8px;border:1px solid rgba(160,244,203,.18);border-radius:8px;background:rgba(17,36,35,.46);color:#d7e8e3;font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
.kv{display:grid;grid-template-columns:minmax(116px, .78fr) minmax(0, 1.22fr);column-gap:9px;row-gap:5px;align-items:start}
.kv div{min-width:0}
.kv div:nth-child(odd){color:var(--muted);line-height:1.25}
.kv div:nth-child(even){text-align:right;color:var(--fg);overflow-wrap:anywhere;word-break:break-word;white-space:normal;line-height:1.28}
#pp-life,#pp-affect,#pp-expression,#pp-presence,#pp-psycho{grid-column:1 / -1;text-align:left;font-size:11px;line-height:1.36;margin-top:-2px;padding:6px 8px;border:1px solid rgba(197,220,204,.12);border-radius:7px;background:linear-gradient(90deg,rgba(17,36,35,.58),rgba(15,24,28,.48))}
#pp-preference-feedback{grid-column:1 / -1;text-align:left;font-size:11px;line-height:1.36;margin-top:-2px;padding:6px 8px;border:1px solid rgba(240,167,183,.20);border-radius:7px;background:linear-gradient(90deg,rgba(73,31,43,.28),rgba(15,24,28,.48))}
#pp-dynamic-viability{grid-column:1 / -1;text-align:left;font-size:11px;line-height:1.36;margin-top:-2px;padding:6px 8px;border:1px solid rgba(127,220,255,.18);border-radius:7px;background:linear-gradient(90deg,rgba(21,48,58,.34),rgba(15,24,28,.48))}


/* --- Live dock ----------------------------------------------------------- */
#liveDock{
position:fixed;
right:12px;
bottom:var(--live-dock-bottom);
z-index:200;
display:flex;
flex-direction:column;
align-items:stretch;
width:min(var(--right-dock-column-w, 420px), calc(100vw - 24px));
max-width:calc(100vw - 24px);
--live-dock-available-h:calc(100vh - var(--right-param-top) - var(--right-param-max-h) - var(--live-dock-bottom) - 10px);
max-height:clamp(132px, var(--live-dock-available-h), 300px);
overflow:auto;
overscroll-behavior:contain;
}
.dock-row{order:0;flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end;max-width:100%;padding:7px;background:linear-gradient(180deg,rgba(10,23,24,.84),rgba(8,13,14,.74));border:1px solid rgba(205,230,224,.20);border-radius:10px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.live-btn{min-height:max(var(--control-hit-min), calc(34px * var(--control-scale)));font-size:calc(12px * var(--control-scale));border-radius:9px;border:1px solid rgba(205,230,224,.20);background:rgba(12,23,25,.92);color:var(--fg);cursor:pointer;padding:0 11px}
.tool.active{border-color:rgba(160,244,203,.70);box-shadow:0 0 0 2px rgba(114,224,173,.24) inset,0 0 18px rgba(114,224,173,.12)}


/* DockLatch */
#dockTog{width:auto;min-width:max(var(--control-hit-min), calc(34px * var(--control-scale)));white-space:nowrap;flex:0 0 auto}
#liveDock.collapsed .group{display:none}
#liveDock.collapsed .dock-row button:not(#dockTog):not(#btnStart):not(#btnStop):not(#toolSeed):not(#toolInteract){display:none}
#liveDock .dock-hint{display:none;font-size:11px;color:var(--muted)}
#liveDock.collapsed .dock-hint{display:block; text-align:right; margin-top:6px}
#liveDock[data-preference-map-open="1"]{
width:min(420px, calc(100vw - 24px));
max-height:min(448px, calc(100vh - var(--footer-h) - var(--safe-bottom) - 92px));
}
#liveDock[data-preference-map-open="1"] .dock-row,
#liveDock[data-preference-map-open="1"] #prefThermoMini,
#liveDock[data-preference-map-open="1"] .group,
#liveDock[data-preference-map-open="1"] .dock-hint{display:none}
#liveDock[data-preference-map-open="1"] .preference-log-mini{width:100%;margin-left:0}
#liveDock[data-preference-map-open="1"] .preference-log-map-body{
max-height:min(398px, calc(100vh - var(--footer-h) - var(--safe-bottom) - 144px));
}
@media (min-width:920px){
#liveDock[data-preference-map-open="1"]{
right:calc(24px + var(--right-dock-column-w, 420px));
width:min(420px, calc(100vw - var(--right-dock-column-w, 420px) - 48px));
}
}
@media (max-width:919px){
body:has(#liveDock[data-preference-map-open="1"]) #paramPanel{display:none}
}


/* --- Collapsible groups (compact) --- */
.group{order:3;flex:0 0 auto;background:linear-gradient(180deg,rgba(10,23,24,.80),rgba(8,13,14,.70));border:1px solid rgba(205,230,224,.18);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.24);width:340px;margin-top:8px;margin-left:auto;overflow:hidden}
.group summary{
cursor:pointer;list-style:none;
padding:6px 10px; min-height:max(var(--control-hit-min), calc(34px * var(--control-scale))); line-height:1.2;
color:var(--sub); font-size:12px;
user-select:none;
}
.group summary::-webkit-details-marker{display:none}
.group summary:focus{outline:2px solid var(--accent);border-radius:8px}
.gbody{padding:6px 10px 10px}
.slider-grid{display:grid;grid-template-columns:auto auto;grid-auto-rows:minmax(30px,auto);gap:6px 10px;align-items:center}
.slider-grid>label{text-align:right;color:var(--muted)}
.slider-grid input[type=range]{min-width:140px}
.slider-grid>output{grid-column:2;text-align:right;min-width:48px;color:var(--sub);font:12px ui-monospace,Menlo,Consolas,monospace}
input[type=range]{accent-color:var(--accent)}
.control-slider-help{grid-column:1 / -1;margin-top:5px;border-top:1px solid rgba(197,220,204,.12);padding-top:4px;color:var(--sub);font-size:11px;line-height:1.35}
.control-slider-help summary{cursor:pointer;min-height:28px;display:flex;align-items:center;color:var(--sub)}
.control-slider-help dl{margin:2px 0 0;display:grid;gap:5px}
.control-slider-help div{display:grid;grid-template-columns:minmax(64px,auto) 1fr;gap:7px;align-items:start}
.control-slider-help dt{margin:0;color:var(--fg);font:11px ui-monospace,Menlo,Consolas,monospace}
.control-slider-help dd{margin:0;color:var(--muted)}


/* --- Candy --------------------------------------------------------------- */
.foldpulse{animation:pulse .8s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,247,196,.7)}100%{box-shadow:0 0 0 10px rgba(126,247,196,0)}}
.ripple{position:absolute;border-radius:50%;pointer-events:none;border:2px solid rgba(126,247,196,.55);
box-shadow:0 0 8px rgba(126,247,196,.4), inset 0 0 8px rgba(126,247,196,.25);animation:rippleAnim .9s ease-out forwards}
.ripple.seed{border-color:rgba(126,247,196,.28); box-shadow:0 0 6px rgba(126,247,196,.22), inset 0 0 6px rgba(126,247,196,.15)}
.ripple.int{border-color:rgba(126,247,196,.60)}
@keyframes rippleAnim{0%{opacity:.85;transform:scale(.2)}70%{opacity:.35;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}


.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* --- Like FAB (always-available) ---------------------------------------- */
#likeFab{
position:absolute;
left:12px;
bottom:calc(var(--footer-h) + var(--safe-bottom) + 12px);
width:max(var(--control-hit-min), calc(56px * var(--control-scale))); height:max(var(--control-hit-min), calc(56px * var(--control-scale))); border-radius:50%;
border:1px solid rgba(240,167,183,.62); background:radial-gradient(circle at 42% 34%,rgba(255,244,191,.18),rgba(35,24,31,.96) 56%,rgba(13,21,22,.96)); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:calc(22px * var(--control-scale)); line-height:1; cursor:pointer;
box-shadow:0 12px 30px rgba(0,0,0,.36),0 0 0 5px rgba(240,167,183,.08),0 0 22px rgba(240,167,183,.12);
z-index:150;
}
#likeFab:focus{outline:2px solid var(--accent)}
#likeFab:hover{filter:brightness(1.08)}
#likeFab:active{transform:translateY(1px)}
#likeFab[data-ximon-petting-pulse="1"]{animation:ximonPettingLikeConfirm .98s cubic-bezier(.2,.8,.2,1);filter:brightness(1.28) saturate(1.18);border-color:rgba(248,229,139,.95);background:radial-gradient(circle at 42% 36%,rgba(255,248,190,.28),rgba(28,44,34,.96) 54%,rgba(13,21,18,.96));color:#fff7c7}
#likeFab[data-ximon-petting-confirm="1"]::after{content:"✓";position:absolute;right:-2px;top:-5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#f8e58b;color:#172219;border:1px solid rgba(255,255,255,.56);font:700 12px ui-sans-serif,system-ui;box-shadow:0 5px 14px rgba(0,0,0,.26)}
@keyframes ximonPettingLikeConfirm{0%{transform:scale(1);box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 0 0 rgba(248,229,139,.78)}28%{transform:scale(1.18);box-shadow:0 16px 34px rgba(0,0,0,.38),0 0 0 13px rgba(248,229,139,.22)}100%{transform:scale(1);box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 0 22px rgba(248,229,139,0)}}

@media (max-width: 900px){
.plain-guide-panel{left:8px;right:8px;width:auto;max-width:none}
body[data-plain-guide-open="1"] #paramPanel,
body[data-plain-guide-open="1"] #togDock,
body[data-plain-guide-open="1"] #liveDock{display:none}
}
/* ==================== Mobile portrait ===================== */
@media (max-width: 640px){
:root{
  --chrome-h:96px;
  --hud-left:8px;
  --hud-top-gap:8px;
  --top-hud-slot-h:112px;
  --hud-panel-gap:8px;
  --right-dock-column-w:min(320px, calc(100vw - 16px));
  --right-param-top:calc(var(--safe-top) + var(--chrome-h) + 92px);
  --live-dock-bottom:calc(var(--footer-h) + var(--safe-bottom) + 8px);
  --right-param-max-h:clamp(240px, calc(100vh - var(--right-param-top) - var(--live-dock-bottom) - 148px), 48vh);
  --quick-dock-right:8px;
}
#titleBar{height:44px;padding:0 12px}
.brand-mark{width:30px;height:30px;font-size:11px}
#titleBar h1{font-size:13px}
#titleBar h1 small{font-size:10px}
#ctrlBar{height:52px;font-size:11px;padding:4px 12px;flex-wrap:wrap;align-content:center;gap:4px 6px;overflow:visible}
.runtime-strip{display:none}
.cockpit-nav{order:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-left:0;overflow:visible;max-width:100%;flex:1 1 100%;padding-bottom:0}
.cockpit-nav-label{display:none}
.cockpit-tab{height:21px;padding:0 4px;font-size:10px;white-space:nowrap;overflow:hidden;text-align:center}
.guide-toggle{order:2;margin-left:0;flex:0 0 auto;padding:0 8px}
.lang-toggle{order:3;margin-left:auto;flex:0 0 auto;padding:0 8px}
.header-chip{height:20px;padding:0 7px}
.header-chip:nth-child(3){display:none}
#togDock{left:8px;right:auto;top:auto;bottom: calc(var(--footer-h) + var(--safe-bottom) + 118px); transform:none; max-height:44vh}
#overlayTopRight{width:min(56vw,190px); max-height:44vh}
#paramPanel{top:var(--right-param-top); right:8px; left:auto; width:var(--right-dock-column-w); max-height:var(--right-param-max-h)}
.kv{grid-template-columns:minmax(86px,.58fr) minmax(0,1.42fr);column-gap:7px}
.cockpit-panel{left:8px;right:8px;top:58px;width:auto;max-height:46vh}
.plain-guide-panel{left:8px;right:8px;top:8px;width:auto;max-width:none;max-height:calc(100% - 16px);padding:12px}
.plain-guide-head{top:-12px;margin:-12px -12px 10px;padding:12px}
.plain-guide-body{grid-template-columns:1fr}
.plain-guide-map img{max-height:46vh}
.entry-coach{display:none}
.pwa-resume-prompt{left:8px;right:8px;top:8px;transform:none;width:auto;flex-direction:column;align-items:stretch;gap:8px}
.pwa-resume-actions{justify-content:space-between}
.pwa-resume-actions button{flex:1 1 auto}
body[data-plain-guide-open="1"] #paramPanel,
body[data-plain-guide-open="1"] #togDock,
body[data-plain-guide-open="1"] #liveDock{display:none}
.dock-row{justify-content:center}
#liveDock .group{width:100%}
.group[open]{max-height:46vh; overflow:auto}
#likeFab{width:54px;height:54px; font-size:20px; left:10px; bottom:calc(var(--footer-h) + var(--safe-bottom) + 58px)}
#liveDock{right:8px;left:auto;width:var(--right-dock-column-w);bottom:var(--live-dock-bottom);max-width:calc(100vw - 16px);max-height:clamp(148px, var(--live-dock-available-h), 244px)}
}


.ghelp{grid-column:1 / -1;font-size:12px;opacity:.78;line-height:1.25;margin-top:4px}
.full{grid-column:1 / -1}
#shareInfo{grid-column:1 / -1;font:11px ui-monospace,Menlo,Consolas,monospace;opacity:.78;line-height:1.3}
#surfaceInfo{grid-column:1 / -1;font:11px ui-monospace,Menlo,Consolas,monospace;opacity:.78;line-height:1.3}
#surfaceScaleWrap{grid-column:1 / -1;display:flex;align-items:center;gap:8px}
#surfaceScaleWrap input[type=range]{flex:1 1 auto}
#surfaceScaleWrap output{min-width:56px;text-align:right}

.pref-thermo{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin-top:8px;
  width:340px;
  margin-left:auto;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.pref-thermo-toggle{
  text-align:left;
  font-size:12px;
  padding:6px 8px;
  min-height:max(var(--control-hit-min), calc(34px * var(--control-scale)));
}
.pref-thermo-body{
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(8,13,11,.48);
  padding:5px;
}
#prefThermoCanvas{
  width:100%;
  height:56px;
  display:block;
  border-radius:5px;
  background:#0f1815;
}
#prefThermoMeta{
  margin-top:4px;
  font:10px ui-monospace,Menlo,Consolas,monospace;
  line-height:1.25;
  opacity:.86;
  color:var(--sub);
  white-space:normal;
  overflow-wrap:anywhere;
}
.pref-thermo[data-collapsed="1"] #prefThermoBody{
  display:none;
}
.pref-sound-readout{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:5px}
.pref-sound-readout>div{display:flex;align-items:center;gap:6px;min-height:42px;padding:5px;border:1px solid rgba(197,220,204,.12);border-radius:6px;background:rgba(15,24,21,.58)}
.pref-sound-readout>div>span:last-child{flex:1 1 auto}
.pref-sound-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;color:var(--accent-strong);background:rgba(114,224,173,.08)}
.pref-sound-icon svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pref-sound-readout b{display:block;color:var(--muted);font-size:10px;line-height:1.1}
.pref-sound-readout em{display:block;color:var(--fg);font:11px ui-monospace,Menlo,Consolas,monospace;font-style:normal;line-height:1.2}
.pref-sound-vector{--x:50%;position:relative;display:block;height:6px;margin-top:4px;border-radius:999px;background:linear-gradient(90deg,rgba(153,167,159,.25),rgba(114,224,173,.32))}
.pref-sound-vector::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--x);border-radius:999px;background:rgba(114,224,173,.42)}
.pref-sound-vector::after{content:"";position:absolute;left:var(--x);top:50%;width:10px;height:10px;border-radius:50%;background:var(--accent-strong);box-shadow:0 0 0 2px rgba(114,224,173,.18);transform:translate(-50%,-50%)}
.pref-sound-help{margin-top:5px;border-top:1px solid rgba(197,220,204,.12);padding-top:4px;color:var(--sub);font-size:11px;line-height:1.3}
.pref-sound-help summary{cursor:pointer;min-height:28px;display:flex;align-items:center;color:var(--sub)}
.pref-sound-help ul{margin:2px 0 0 16px;padding:0;color:var(--muted)}
.pref-sound-help li{margin:3px 0}

body.surface-minimal #agent-voices-ui,
body.surface-minimal #pp-av,
body.surface-minimal #liveDock .group,
body.surface-minimal #overlayTopRight > :not(#modeSel):not(#btnSurface){display:none !important}

body.surface-minimal #liveDock .dock-row button:not(#dockTog):not(#btnStart):not(#btnStop):not(#toolSeed):not(#toolInteract){display:none !important}
body.surface-minimal #togDock #togTab{display:none}
body.surface-minimal #togDock.collapsed #overlayTopRight{display:flex}
body.surface-minimal #overlayTopRight{width:202px}

#agent-voices-ui{
  position:fixed;
  top:calc(var(--safe-top) + var(--chrome-h) + var(--hud-top-gap));
  left:var(--hud-left);
  z-index:120;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
  width:fit-content;
  max-width:min(680px, calc(100vw - 124px));
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  color:var(--fg);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
#agent-voices-ui label{display:flex;gap:6px;align-items:center;flex:0 0 auto;white-space:nowrap}
#agent-voices-ui label:nth-of-type(2){flex:0 1 250px;min-width:220px}
#agent-voices-ui output{min-width:3ch;text-align:right;font:12px ui-monospace,Menlo,Consolas,monospace;color:var(--sub)}
#agent-voices-ui input[type=range]{width:clamp(96px, 12vw, 150px);flex:1 1 96px}
#agent-voices-ui select{min-height:30px;max-width:164px;border:1px solid var(--line);border-radius:6px;background:rgba(15,24,21,.92);color:var(--fg)}

#pp-av{
  position:fixed;
  top:auto;
  right:auto;
  bottom:calc(var(--footer-h) + var(--safe-bottom) + 86px);
  left:12px;
  padding:6px 8px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--fg);
  font:12px/1.3 ui-monospace,Menlo,Consolas,monospace;
  border-radius:8px;
  z-index:110;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  opacity:.82;
  pointer-events:none;
}


@media (max-width: 640px){
  #agent-voices-ui{left:var(--hud-left);right:8px;width:auto;max-width:none;max-height:104px;flex-wrap:wrap;align-items:stretch;overflow-x:hidden;overflow-y:auto;padding-right:78px}
  #agent-voices-ui label{flex:1 1 142px;min-height:30px}
  #agent-voices-ui label:nth-of-type(2){flex:1 1 100%;min-width:0}
  #agent-voices-ui input[type=range]{width:auto;min-width:96px}
  #agent-voices-ui select{width:100%;max-width:none}
}


@media (max-width: 420px) {
  footer{padding:2px 8px}
  #runState{max-width:62vw}
  #pp-av { left:74px !important; right:auto !important; top:auto !important; bottom:calc(var(--footer-h) + var(--safe-bottom) + 76px) !important; font-size: 11px !important; padding: 5px 6px !important; }
  #agent-voices-ui { transform: translateY(0); }
  .pref-thermo{ width:100%; }
  .pref-sound-readout{grid-template-columns:1fr}
  .pref-sound-readout>div{align-items:flex-start}
}