@layer base;
@layer base{

body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","PingFang TC","Microsoft JhengHei","Heiti TC","Nirmala UI","Kohinoor Devanagari","Devanagari Sangam MN","Segoe UI Arabic","Geeza Pro",Tahoma,sans-serif}
html[lang^="ko"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","PingFang TC","Microsoft JhengHei","Heiti TC","Nirmala UI","Kohinoor Devanagari","Devanagari Sangam MN","Segoe UI Arabic","Geeza Pro",Tahoma,sans-serif}
html[lang^="ja"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo","PingFang SC","Microsoft YaHei","Hiragino Sans GB","PingFang TC","Microsoft JhengHei","Heiti TC","Nirmala UI","Kohinoor Devanagari","Devanagari Sangam MN","Segoe UI Arabic","Geeza Pro",Tahoma,sans-serif}
html[lang="zh-CN"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"PingFang TC","Microsoft JhengHei","Heiti TC","Nirmala UI","Kohinoor Devanagari","Devanagari Sangam MN","Segoe UI Arabic","Geeza Pro",Tahoma,sans-serif}
html[lang="zh-TW"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang TC","Microsoft JhengHei","Heiti TC","Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Nirmala UI","Kohinoor Devanagari","Devanagari Sangam MN","Segoe UI Arabic","Geeza Pro",Tahoma,sans-serif}
html[lang^="hi"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Nirmala UI","Kohinoor Devanagari","Devanagari Sangam MN","Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","PingFang TC","Microsoft JhengHei","Heiti TC","Segoe UI Arabic","Geeza Pro",Tahoma,sans-serif}

:root{
  
  
  --bg:var(--bgcolor-gray-100, #f7f7f7);
  --panel:var(--bgcolor-white, #fff);
  --line:var(--msg-line, #dce8f0);
  
  --ink:var(--msg-text, #152534);
  
  --dim:var(--msg-sub, #5a6b78);
  --title-ink:var(--wd-title-color, #242424);
  
  --accent:var(--msg-blue, #1678BE);
  --accent-hover:#126AA8;
  --accent-ink:var(--btn-accented-color, #fff);
  --live:#0b4f9e; --live-bg:#dcecff;
  --done:var(--notices-success-bg, #0f6b3f); --done-bg:#d8f2e4;
  --bad:#98231c;  --bad-bg:#fde0dd;
  --act:#8a4b00;  --act-bg:#ffe8c9;
  --mute:#4b5560; --mute-bg:#e8ebee;
  
  --r-pill:var(--wd-form-brd-radius, 999px);   
  --r-box:var(--wd-brd-radius, 20px);          
  --r-dot:50%;                                  
  
  
  --page-max:var(--msg-shell, 1660px);
  
  --gutter:max(14px, calc((100% - var(--page-max)) / 2));
  --tap:44px;          
  
  
  --t:200ms;
  --ease:cubic-bezier(.2,.8,.3,1);
  --lift:translateY(-5px);
  
  --edge:rgba(255,255,255,1);            
  --glass:rgba(255,255,255,.5);          
  --shade:0 5px 16px rgba(15,23,42,.07); 
  --shade-hi:0 14px 32px rgba(15,23,42,.14);
  --press:inset 0 1px 3px rgba(15,23,42,.28);
  --shadow-hover:var(--shadow-card-hover, 0 2px 5px rgba(16,42,67,.06), 0 12px 28px rgba(16,42,67,.10));
  
  
  --glow-run:22,120,190;
  --glow-stop:192,57,43;
  --glow-done:29,158,117;
  --glow-wait:184,121,26;
  
  --glow-brand:130,140,152;
  --glow-engines:108,92,231;
  --glow-off:236,64,122;
  --glow-resume:0,184,169;
  --glow-verify:22,120,190;
  --glow-approve:0,200,120;
  --glow-reject:236,64,122;
  --glow-hold:255,152,0;
  --glow-more:108,92,231;
  --glow-model:92,107,192;
  --glow-start:0,210,190;
  --glow-summary:100,120,140;
  --glow-link:41,171,226;
  --glow-ease:cubic-bezier(.2,.8,.3,1);
  --ring-accent:var(--msg-blue-100, #d6ebfb);
  
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101316; --panel:#191d22; --ink:#eceff2; --dim:#98a2ac; --line:#2a3037;
    --title-ink:#f4f7fa;
    
    --accent:#5aa2f0; --accent-ink:#08121d;
    --live:#84bcff; --live-bg:#12314f;
    --done:#71d7a4; --done-bg:#0f3625;
    --bad:#ff9a91;  --bad-bg:#431915;
    --act:#ffc46b;  --act-bg:#402b0e;
    --mute:#b3bcc5; --mute-bg:#2a3037;
  }
}
*{box-sizing:border-box}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; padding:0; margin:-1px}
.items{list-style:none; margin:0; padding:0}
.items li{position:relative; padding-inline-start:13px; overflow-wrap:anywhere}
.items li::before{content:"·"; position:absolute; inset-inline-start:2px; color:var(--dim)}

html,body{min-height:100%}
@supports (height:100svh){ html,body{min-height:100svh} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.5;
  display:flex; flex-direction:column; min-height:100%;
}

:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-box)}
.skip{position:absolute; inset-inline-start:-9999px}
.skip:focus{inset-inline-start:8px; top:8px; z-index:9; background:var(--panel); padding:8px 12px;
  border-radius:var(--r-box); border:1px solid var(--line)}

.top{display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--panel);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; flex-wrap:wrap;
  
  padding-inline:var(--gutter)}
.brand{font-weight:700; letter-spacing:.02em; white-space:nowrap;
  display:inline-flex; align-items:center; text-decoration:none; color:inherit}

.brand .logo{height:44px; width:auto; display:block}

.globe{display:inline-grid; place-items:center;
  width:40px; height:40px; min-height:var(--tap); border-radius:var(--r-dot);
  color:var(--dim); cursor:pointer; background:none; border:0}
.globe:hover{color:var(--ink)}
.globe svg{width:20px; height:20px; display:block}
.langpop{position:fixed; inset:auto; top:54px; inset-inline-end:12px; margin:0;
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-box); padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.16);
  min-width:150px}
.langpop .langs{flex-direction:column; gap:4px}
.top form.pick{display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap}
select,input,button,textarea{font:inherit; color:inherit}
button{white-space:nowrap}

.top button{padding:0 12px; border-radius:var(--r-pill); min-height:34px;
  border:1px solid var(--line); background:var(--panel); cursor:pointer}

.top select{inline-size:9.5rem; min-inline-size:9.5rem; flex:0 0 auto}
#project{font-weight:600}
.top select[name=view],.top select[name=group]{font-size:.85rem; color:var(--dim)}

select,input[type=search],input[type=text],input[type=password],input[type=email],
input[type=url],input[type=number],textarea{
  background-color:var(--panel);
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 14px; min-height:var(--tap); max-width:100%;
  color:var(--ink); font:inherit;
  box-shadow:var(--shade), inset 0 1px 0 var(--edge);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
textarea{border-radius:var(--r-box); padding:12px 14px}

select{appearance:none; -webkit-appearance:none; padding-inline-end:34px;
  background-repeat:no-repeat;
  background-position:left 0 top 0, right 17px center, right 12px center;
  background-size:auto, 6px 6px, 6px 6px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)),
    linear-gradient(45deg,transparent 50%,var(--dim) 50%),
    linear-gradient(135deg,var(--dim) 50%,transparent 50%)}
:where(select,input,textarea):focus-visible{border-color:var(--accent)}

::placeholder{color:var(--dim); opacity:1}
.grow{flex:1 1 120px; min-width:0}

.top form.pick{flex:1 1 340px}

.top input[type=search]{flex:1 1 150px; min-width:0}
.top .spacer{flex:1 1 auto}
.bell{display:inline-flex; align-items:center; gap:6px; min-height:var(--tap);
  min-width:var(--tap); justify-content:center; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--panel); text-decoration:none; color:inherit}
.bell b{font-variant-numeric:tabular-nums}
.bell.on{background:var(--bad-bg); color:var(--bad); border-color:transparent; font-weight:700}
.me{color:var(--dim); font-size:.85rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:22ch}

.tools>summary{list-style:none; cursor:pointer}
.tools>summary::-webkit-details-marker{display:none}

.tools[open] .tray{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 0}

.langs{display:flex; flex-wrap:wrap; gap:8px}
.langs button{min-height:var(--tap)}
.langs button.now{border-color:var(--accent); color:var(--accent); font-weight:700}

.tools[open]{flex:1 1 100%}

@media not all and (max-width:62.5rem){
  .tools{display:contents}
  .tools::details-content{content-visibility:visible; display:contents}
  .tools>summary{display:none}
  .tools .tray{display:contents}
}

.langbox>summary{list-style:none; cursor:pointer}
.langbox>summary::-webkit-details-marker{display:none}

.langbox[open] .langs{flex-basis:100%; margin-block-start:8px; padding:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-box)}

.shell{flex:1 1 auto; display:flex; align-items:stretch; min-height:0}

.rail{display:none}
.rail ul{list-style:none; margin:0; padding:0}
.rail a{display:flex; gap:6px; align-items:center; padding:9px 8px; border-radius:var(--r-box);
  text-decoration:none; color:inherit; min-height:var(--tap); flex-wrap:nowrap}
.rail a[aria-current=true]{background:var(--live-bg); color:var(--live); font-weight:600}

.rail .pname{min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.rail .n{margin-inline-start:auto; display:flex; gap:4px; font-variant-numeric:tabular-nums;
  font-size:.78rem; white-space:nowrap; flex:0 0 auto}
.rail .h{font-weight:600; border-radius:var(--r-box); padding:1px 4px}
.rail .h.act{background:var(--act-bg); color:var(--act)}
.rail .h.bad{background:var(--bad-bg); color:var(--bad)}
.rail .h.live{background:var(--live-bg); color:var(--live)}
.rail .h.done{background:var(--done-bg); color:var(--done)}

.canvas{flex:1 1 auto; padding:14px; min-width:0; padding-inline:var(--gutter)}

h1,h2{font-family:Urbanist,inherit; color:var(--title-ink)}
h1{font-size:1.05rem; margin:0 0 10px; font-weight:600}
h2{font-size:.85rem; margin:18px 0 8px; 
  letter-spacing:.01em}

.inbox{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-box);
  padding:10px 12px; margin:0 0 14px}

.inbox.t-act{border-color:var(--act); border-width:2px}
.inbox.t-bad{border-color:var(--bad); border-width:2px}
.inbox ul{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px}
.inbox li{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.inbox .what{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
.inbox li > .ago{flex:1 0 100%}

.decide{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0}
.decide button{min-height:var(--tap); padding:0 14px; border-radius:var(--r-pill); border:0;
  background:var(--accent); color:var(--accent-ink); font-weight:700; cursor:pointer}
.decide button.mic{background:var(--panel); color:var(--ink); border:1px solid var(--line)}

.decide button.go{grid-column:1 / -1}

.decide button.stop{color:var(--bad); border-color:var(--bad)}
.facts{flex:1 1 100%; font-size:.87rem; color:var(--dim)}
.facts p{margin:0 0 4px} .facts p:last-child{margin:0}
.facts code{overflow-wrap:anywhere}

.facts .brief{display:flex; gap:6px 10px; flex-wrap:wrap}
.facts details{background:var(--bg); border-radius:var(--r-box); padding:0 10px; margin-top:6px}
.facts details[open]{padding:8px 10px}

.facts summary{min-height:var(--tap); display:flex; align-items:center}

form.inline button{min-height:var(--tap); padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--panel); color:inherit; cursor:pointer}
form.inline{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

.skip:focus{min-height:var(--tap); display:flex; align-items:center}

.demo{background:var(--act-bg); color:var(--act); font-weight:700; padding:6px 12px;
  text-align:center}

.hello{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-box);
  padding:20px; margin:0 0 14px}
.hello h2{margin:0 0 6px; text-transform:none; letter-spacing:0; font-size:1.05rem;
  color:var(--ink)}
.hello ol{margin:10px 0 0; padding-inline-start:20px}
.hello li{margin:0 0 4px}
.pn{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:12px 0 0}

.guarantee{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-box);
  padding:12px; margin:0 0 14px}
.guarantee summary{min-height:var(--tap); display:flex; align-items:center;
  gap:4px 10px; flex-wrap:wrap; cursor:pointer; color:var(--ink)}
.guarantee summary b{font-size:.85rem; color:var(--dim); 
  letter-spacing:.01em}

.guarantee summary .brief{color:var(--dim); font-size:.92rem; overflow-wrap:anywhere}
.guarantee details[open] .gg{margin-top:8px}
.guarantee .gg{display:grid; gap:8px; grid-template-columns:repeat(4,minmax(0,1fr))}
.guarantee .g{border-radius:var(--r-box); padding:9px 11px; min-width:0;
  display:flex; flex-direction:column; gap:2px}
.guarantee .g b{font-size:.87rem; overflow-wrap:anywhere}
.guarantee .g span{font-size:.85rem; overflow-wrap:anywhere}
.guarantee .g.blocked{background:var(--done-bg); color:var(--done)}
.guarantee .g.detected{background:var(--act-bg); color:var(--act)}
.guarantee .g.none{background:var(--mute-bg); color:var(--mute)}
.guarantee .more{margin:8px 0 0; font-size:.85rem; color:var(--dim);
  overflow-wrap:anywhere}

@media (max-width:64rem){ .guarantee .gg{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:45rem){ .guarantee .gg{grid-template-columns:minmax(0,1fr)} }

.rows{list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr))}

.item,.inbox,.eff,.audit,.guarantee,.blocked,.act,.empty,.hello,
.facts details,.drawer,.langbox[open] .langs{
  background-image:linear-gradient(180deg,var(--panel),var(--bg));
  border:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:var(--shade), inset 0 1px 0 var(--edge);
  position:relative}

.item::before,.inbox::before,.eff::before,.audit::before,.hello::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:var(--r-box);
  background:linear-gradient(180deg,var(--glass),rgba(255,255,255,0) 45%)}
.item{overflow:hidden; display:flex; flex-direction:column}
.item.live{--glow:var(--glow-run)}
.item.action{--glow:var(--glow-wait)}
.item.alert{--glow:var(--glow-stop)}
.item.done{--glow:var(--glow-done)}

.item::after{content:""; position:absolute; inset-inline:0; inset-block-end:0;
  block-size:3px; background:transparent;
  transition:background-color var(--t) var(--ease)}
.item.alert::after{background:var(--bad)}
.item.action::after{background:var(--act)}
.item.live::after{background:var(--accent)}
.item.alert{border-color:var(--bad); border-width:2px}
.item.action{border-color:var(--act); border-width:2px}

.open{display:flex; flex-direction:column; gap:8px; align-items:stretch; width:100%;
  text-align:start; background:none; border:0; padding:14px; flex:1 1 auto;
  min-height:var(--tap); cursor:pointer; color:inherit; text-decoration:none}
.open:hover{background:var(--bg)}
.open:hover .goal{text-decoration:underline}
.line{display:flex; gap:8px; align-items:center; justify-content:space-between}
.who,.pj{display:flex; align-items:center; gap:7px; min-width:0; font-weight:600}
.who .name,.pj .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.line .goal{flex:1 1 auto; min-width:0; color:var(--ink); font-weight:600;
  font-size:1.08rem; overflow-wrap:anywhere}
.current-work{display:flex;align-items:flex-start;gap:7px;min-width:0;padding:8px 10px;
  border:1px solid rgba(var(--glow),.22);border-radius:var(--r-box);
  background:rgba(var(--glow),.045);color:var(--ink);font-size:.9rem;line-height:1.45}
.current-work b{flex:0 0 auto;color:rgb(var(--glow));font-size:.82rem}
.current-work span{min-width:0;overflow-wrap:anywhere}
.what{min-width:0; color:var(--dim); overflow-wrap:anywhere; font-size:.92rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0}
.what .who{font-weight:400}

.what .who .name{max-width:16ch}
.ckp{color:var(--dim)}

.denials{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px}
.denials li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  font-size:.92rem; overflow-wrap:anywhere}
.denials b{flex:1 1 auto; min-width:0}
.denials .target{color:var(--dim); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em}
.denials time{color:var(--dim); font-size:.85em; white-space:nowrap}
.denials .where{color:var(--dim); font-size:.8em; background:var(--bg);
  border-radius:var(--r-box); padding:1px 6px; white-space:nowrap}
.stat{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border-radius:var(--r-pill); padding:3px 10px; font-size:.82rem; font-weight:600}
.stat.t-live{background:var(--live-bg); color:var(--live)}
.stat.t-done{background:var(--done-bg); color:var(--done)}
.stat.t-bad{background:var(--bad-bg); color:var(--bad)}
.stat.t-act{background:var(--act-bg); color:var(--act)}
.stat.t-mute{background:var(--mute-bg); color:var(--mute)}
.ago{color:var(--dim); font-size:.82rem; white-space:nowrap}
.act{display:inline-block; margin:0 14px 12px; padding:9px 14px; border-radius:var(--r-box);
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  min-height:var(--tap); line-height:26px; font-weight:600}
.sub{margin:0 14px 12px; color:var(--dim); font-size:.85rem; overflow-wrap:anywhere}
.empty{color:var(--dim); background:var(--panel); border:1px dashed var(--line);
  border-radius:var(--r-box); padding:22px; text-align:center}
.group{margin:0 0 6px; font-weight:600; display:flex; gap:7px; align-items:center}
.more{color:var(--dim); font-size:.85rem; margin:8px 0 0}

.h-row{display:flex; gap:6px; flex-wrap:wrap}
.h{font-weight:600; border-radius:var(--r-box); padding:2px 7px; font-size:.8rem;
  display:inline-flex; gap:4px; align-items:center; font-variant-numeric:tabular-nums}
.h.t-act{background:var(--act-bg); color:var(--act)}
.h.t-bad{background:var(--bad-bg); color:var(--bad)}
.h.t-live{background:var(--live-bg); color:var(--live)}
.h.t-done{background:var(--done-bg); color:var(--done)}
.h.t-mute{background:var(--mute-bg); color:var(--mute); font-weight:400}
.item.picked{border-color:var(--accent); border-width:2px}

.eff{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-box); padding:14px}

.mm{display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr))}
.m{display:flex; flex-direction:column; gap:2px; min-width:0}
.m b{font-size:1.2rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.m span{color:var(--dim); font-size:.83rem}
.m i{color:var(--dim); font-size:.78rem; font-style:normal}

.drawer{width:min(420px,100%); flex:0 0 auto; background:var(--panel);
  border-inline-start:1px solid var(--line); padding:14px; overflow:auto}
.drawer dl{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:10px 0 0}
.drawer dt{color:var(--dim); font-size:.85rem}
.drawer dd{margin:0; overflow-wrap:anywhere}
.drawer .close{float:inline-end}
details summary{cursor:pointer; color:var(--dim); min-height:var(--tap);
  display:flex; align-items:center}

.audit-detail{margin-top:6px}
.audit-detail li{padding:6px 0 6px 14px}
.audit-detail .who{color:var(--dim); font-size:.83rem; font-style:normal}
.audit-detail .why{display:block; color:var(--dim); font-size:.88rem;
  overflow-wrap:anywhere}
.audit-detail .no{color:var(--dim); font-style:italic}
.flow{list-style:none; margin:8px 0 0; padding:0}
.flow li{display:flex; gap:8px; flex-wrap:wrap; padding:6px 0;
  border-bottom:1px solid var(--line); font-size:.87rem}
.flow .who2{color:var(--dim)}

.dock{position:sticky; bottom:0; background:var(--panel); border-top:1px solid var(--line);
  padding:10px 12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  
  padding-inline:var(--gutter)}

.dock input[type=text]{flex:1 1 240px; min-width:0}

.dock input.dock-proj{flex:0 1 200px}
@media (max-width:45rem){ .dock input[type=text]{flex:1 1 100px}
  .dock input.dock-proj{flex:1 1 140px} }
.dock button{min-height:var(--tap); padding:0 16px; border-radius:var(--r-pill); border:0;
  background:var(--accent); color:var(--accent-ink); font-weight:700; cursor:pointer}
.dock .mic{background:var(--bg); color:var(--ink); border:1px solid var(--line);
  min-width:var(--tap); padding:0 12px}
.dock .voice,.pn .voice{background:var(--bg);color:var(--ink);border:1px solid var(--line);
  min-height:var(--tap);padding:0 12px;white-space:nowrap}
.voice span{color:var(--bad)}
.dock .voice.listening,.pn .voice.listening{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.voice.listening span{color:var(--accent)}
.say{color:var(--dim); font-size:.85rem; width:100%}
.say.bad{color:var(--bad)}

.bottom{display:none}
.warn{background:var(--bad-bg); color:var(--bad); padding:8px 12px; font-weight:600}
.warn[hidden]{display:none}

@media (max-width:62.5rem){
  .top input[type=search]{display:none}
  .top select[name=view]{display:none}
  
  .top button{min-height:var(--tap)}
  
  .langbox{display:contents}
  .langbox::details-content{content-visibility:visible; display:contents}
  .langbox>summary{display:none}
}

@media not all and (max-width:62.5rem){
  .inbox ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media not all and (max-width:73.75rem){
  .inbox ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:73.75rem){ .rows{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:45rem){ .rows{grid-template-columns:minmax(0,1fr)}
  .mm{grid-template-columns:repeat(2,minmax(0,1fr))} }

.rows:has(> li:only-child){grid-template-columns:minmax(0,1fr)}

@media (max-width:51.25rem){
  .rail{display:none}
  .top select[name=group]{display:none}
  .drawer{position:fixed; inset:auto 0 0 0; max-height:80svh; width:100%;
    border-inline-start:0; border-top:1px solid var(--line); z-index:6;
    border-radius:var(--r-box) var(--r-box) 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.18)}
  .bottom{display:flex; background:var(--panel); border-top:1px solid var(--line)}
  .bottom a{flex:1 1 0; text-align:center; padding:8px 4px; text-decoration:none;
    color:var(--dim); font-size:.78rem; min-height:var(--tap)}
  .bottom a[aria-current=true]{color:var(--accent); font-weight:700}
  .bottom .g{display:block; font-size:1.15rem}
}

@media (pointer:coarse){
  .top button{min-height:var(--tap)}
  .facts summary{min-height:var(--tap)}
}
.led{width:10px; height:10px; border-radius:var(--r-dot); flex:0 0 auto; margin-inline-end:6px;
  background:var(--mute); box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
.led.idle{background:var(--mute)}
.led.work{background:var(--live)}
.led.ask{background:var(--act)}
.led.stop{background:var(--bad)}
.led.done{background:var(--done)}
.led.pulse{animation:ledpulse 1.4s ease-in-out infinite}
@keyframes ledpulse{0%,100%{opacity:1} 50%{opacity:.35}}
@keyframes workcardpulse{
  0%,100%{border-color:rgba(var(--glow),.38);box-shadow:0 0 0 1px rgba(var(--glow),.10),0 0 10px 1px rgba(var(--glow),.08),0 0 20px 3px rgba(var(--glow),.04),var(--shade)}
  50%{border-color:rgba(var(--glow),.82);box-shadow:0 0 0 1px rgba(var(--glow),.38),0 0 18px 3px rgba(var(--glow),.20),0 0 32px 6px rgba(var(--glow),.10),0 9px 24px -7px rgba(var(--glow),.28)}
}
.item.live{animation:workcardpulse 1.8s ease-in-out infinite}

.retry{margin-inline-start:auto; font-size:.85em; color:var(--dim); white-space:nowrap}

.file{color:var(--dim); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em}

.decide button,.mic,.voice,.bell,.item,.inbox li,.dock button,
.dock input[type=text],.top input,.top select{
  transition:background-color var(--t) var(--ease),
             color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             transform var(--t) var(--ease)}

.brand.out{display:inline-flex; align-items:center; gap:5px; min-height:var(--tap);
  text-decoration:none; color:inherit; padding-inline-end:6px; border-radius:var(--r-pill)}
.brand.out span[aria-hidden]{opacity:.55; font-size:1.05em}

.item .open{display:block; padding:14px 16px 16px; text-decoration:none; color:inherit}
.item .pj .name{font-size:.98rem}

.wk .goal,.item .goal{display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}

.decide button,.dock button,.mic,.bell,.langbox>summary,
.inline button,.act button,button[type=submit],
.form button,.pn button,.cta a,.cta button,.more button,.go{
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  box-shadow:var(--shade), inset 0 1px 0 var(--edge)}

.decide button.go,.dock button[type=submit],.act button{
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0))}

.prow{list-style:none; border-block-end:1px solid var(--line)}
.prow:last-child{border-block-end-color:transparent}

.prow .open{display:flex; flex-direction:row; align-items:center; gap:10px;
  height:var(--tap); flex-wrap:nowrap;
  padding:0 12px; text-decoration:none; color:inherit; overflow:hidden;
  border-radius:var(--r-pill); transition:background-color var(--t) var(--ease)}
.prow .pdot{inline-size:8px; block-size:8px; border-radius:var(--r-dot);
  background:var(--line); flex:0 0 auto}
.prow.live .pdot{background:var(--accent)}
.prow.action .pdot{background:var(--act)}
.prow.alert .pdot{background:var(--bad)}
.prow .name{flex:1 1 auto; min-width:0; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .h-row{flex:0 0 auto; display:flex; gap:6px; align-items:center; flex-wrap:nowrap}
.prow[aria-current] .open,.prow .open[aria-current]{background:var(--mute-bg)}

ul.rows.plist{display:block; background-image:linear-gradient(180deg,var(--panel),var(--bg));
  border:1px solid var(--line); border-radius:var(--r-box); padding:4px 0;
  box-shadow:var(--shade), inset 0 1px 0 var(--edge)}

.workflow-stages{
  display:flex; gap:1px; align-items:center; padding:6px 14px;
  margin:0; border-bottom:1px solid var(--line); background:var(--mute-bg);
  font-size:.7rem;
}
.stage{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  gap:3px; position:relative; min-width:0;
}
.stage .dot{
  display:block; width:6px; height:6px; border-radius:var(--r-dot);
  background:var(--line); transition:background-color var(--t) var(--ease), width var(--t) var(--ease), height var(--t) var(--ease);
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}
.stage.passed .dot{
  background:var(--done); width:7px; height:7px;
  box-shadow:none;
}
.stage.current .dot{
  background:var(--accent); width:8px; height:8px;
  box-shadow:0 0 0 2px var(--accent-bg, var(--accent))40;
}

.stage.stalled .dot{
  background:var(--bad); width:8px; height:8px;
  box-shadow:0 0 0 2px var(--bad-bg);
}
.stage .sr{
  color:var(--dim); line-height:1.1; text-align:center; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:normal;
}
.stage.passed .sr{color:var(--done); font-weight:600}
.stage.current .sr{color:var(--accent); font-weight:600}
.stage.stalled .sr{color:var(--bad); font-weight:600}

.bell.stop{color:var(--bad); border-color:var(--line)}

.two{display:grid; gap:24px; align-items:start}
.two > *,.cards,.card,.grid2 > *{min-width:0}
@media (min-width:64rem){ .two{grid-template-columns:minmax(320px,1fr) minmax(320px,1fr)} }

@media (min-width:64rem){
  .two:has(.cards > .card:only-child){grid-template-columns:minmax(0,1fr)}
}

.now h2,.engines h2{margin:0 0 10px; font-size:1.05rem}
.lede{margin:0 0 10px; color:var(--dim); font-size:.9rem}

.cards{display:grid; gap:12px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-box);
  padding:16px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), var(--shade), inset 0 1px 0 var(--edge);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.card + .card{margin-top:0}
.c-what{margin:0 0 4px; font-weight:600}
.c-goal{margin:0 0 6px; color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.c-why{margin:0 0 10px; color:var(--dim); font-size:.9rem}
.c-why .at{font-family:var(--mono,inherit); font-size:.85em; color:var(--dim)}
.c-act{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 8px}
.c-more{margin:0}
.c-more > summary{color:var(--dim); font-size:.9rem; min-height:var(--tap);
  display:flex; align-items:center}

.card--stop{border-color:var(--bad)}
.card--ask{border-color:var(--act)}
.card--done{border-color:var(--done)}

.engines .rows{display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-box); padding:4px 0; list-style:none; margin:0;
  box-shadow:var(--shade), inset 0 1px 0 var(--edge)}
.engines .row{border-block-end:1px solid var(--line)}
.engines .row:last-child{border-block-end-color:transparent}
.engines .row form{margin:0}
.rowbtn{display:flex; align-items:center; gap:10px; inline-size:100%;
  height:var(--tap); padding:0 14px; background:transparent; border:0;
  border-radius:var(--r-pill); cursor:pointer; text-align:start; color:inherit;
  font:inherit; box-shadow:none}
.rowbtn .name{flex:1 1 auto; min-width:0; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rowbtn .state{flex:0 0 auto; color:var(--dim); font-size:.85rem; white-space:nowrap}
.row.picked .rowbtn{background:var(--mute-bg)}
.dot{inline-size:8px; block-size:8px; border-radius:var(--r-dot); flex:0 0 auto;
  background:var(--line)}
.dot--run{background:var(--accent)}
.dot--ask{background:var(--act)}
.dot--stop{background:var(--bad)}
.dot--idle{background:var(--line)}

.found{margin-block-start:18px}
.found h2{font-size:1rem}

.found-list{list-style:none;margin:10px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.found-card{--glow:var(--glow-engines);position:relative;display:flex;flex-direction:column;
  gap:4px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-box);background:var(--panel);color:var(--ink);text-decoration:none}
.found-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.found-actions{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:auto}
.found-actions form{margin:0}
.found-actions button,.found-actions a,.found-register{min-height:var(--tap);padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);
  color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer}
.found-register{margin-block-start:8px;border-color:var(--accent);color:var(--accent)}
.found-meta{font-size:.8rem;color:var(--dim)}
.found-ok{color:var(--good);font-weight:700;font-size:.82rem;margin-block-start:8px}
.found-no{position:absolute;top:14px;inset-inline-end:16px;font-size:.72rem;
  color:var(--dim);letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.7}
.found-name{font-weight:700;font-size:1.02rem}
.found-list .path{font-size:.75rem;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}

.setupbar{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:14px}
.operator{display:flex;flex-wrap:wrap;gap:8px 18px;margin-block:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-box);background:var(--panel);font-size:.88rem}
.operator span{color:var(--dim)}
.operator b{color:var(--ink)}
.c-use{margin:4px 0;color:var(--dim);font-size:.82rem}
.c-use b{color:var(--ink)}
.c-use i{font-style:normal}
.chip{--glow:var(--glow-engines);display:inline-flex;align-items:center;gap:8px;
  min-height:var(--tap);padding:0 14px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--panel);color:var(--ink);
  text-decoration:none;font-size:.9rem}
.chip .d{width:8px;height:8px;border-radius:var(--r-dot);background:rgb(var(--glow-done))}
.chip.on{border-color:var(--accent);color:var(--accent)}
.chip.warn{border-color:rgb(var(--glow-wait));color:rgb(var(--glow-wait))}
.chip.warn .d{background:rgb(var(--glow-wait))}

.quicks{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0 10px}
.quicks-t{font-size:.78rem; color:var(--dim); font-weight:600; margin-inline-end:4px}
.quick-row{display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%}
.quick{display:inline-flex; align-items:stretch}
.quick form{display:inline-flex; margin:0}
.quick > form:first-child button{min-height:var(--tap); padding:0 14px; border:1px solid var(--line);
  border-radius:var(--r-pill) 0 0 var(--r-pill); background:var(--panel); color:var(--ink);
  font:inherit; font-weight:600; cursor:pointer; max-width:220px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.quick .rm button{min-height:var(--tap); width:34px; border:1px solid var(--line); border-inline-start:0;
  border-radius:0 var(--r-pill) var(--r-pill) 0; background:var(--panel); color:var(--dim); cursor:pointer; font-size:1rem}
.quick-add{display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%; margin-top:2px}
.quick-add input{min-height:var(--tap); padding:0 12px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--panel); font:inherit}
.quick-add input[name=label]{width:120px} .quick-add input[name=text]{flex:1; min-width:180px}
.quick-add button{min-height:var(--tap); padding:0 16px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--panel); color:var(--ink); font:inherit; font-weight:600; cursor:pointer}

.dot.pulse{animation:ledpulse 1.4s ease-in-out infinite}

.lamp{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  color:var(--dim); font-size:.88rem}
.lamp.on{color:var(--ink)}
.lamp.warn{color:var(--act)}
.lamp.warn b{font-weight:600}

.morebox{margin:20px 0 0}
.morebox > summary{min-height:var(--tap); display:flex; align-items:center;
  color:var(--dim); cursor:pointer}
.grid2{display:grid; gap:12px; margin-top:12px}
@media (min-width:45rem){ .grid2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.setrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 8px}

.card,button,.mic,.bell,.act,.rowbtn,summary,.open,.brand,
.rows > .row,.more a,.foot a,.langs button,.bottom a,.c-more a,.card p a{--glow:var(--glow-run)}
.card--run{--glow:var(--glow-run)}
.card--stop,.bell.stop,.btn-danger,.row--stop{--glow:var(--glow-stop)}
.card--done,.row--done{--glow:var(--glow-done)}
.card--ask,.card--wait,.row--ask{--glow:var(--glow-wait)}
.row--idle{--glow:var(--glow-run)}

.brand{--glow:var(--glow-brand)}
.bell.pick{--glow:var(--glow-engines)}
.bell.stop{--glow:var(--glow-off)}
button[value=RESUME]{--glow:var(--glow-resume)}
button[value=VERIFY]{--glow:var(--glow-verify)}
.decide button.go,button[value=APPROVE]{--glow:var(--glow-approve)}
.decide button.stop,button[value=REJECT]{--glow:var(--glow-reject)}
button[value=HOLD]{--glow:var(--glow-hold)}
.c-more>summary,.act{--glow:var(--glow-more)}
.dock select,select[name=model]{--glow:var(--glow-model)}
.dock button[type=submit]{--glow:var(--glow-start)}
.morebox>summary,.langbox>summary{--glow:var(--glow-summary)}
.more a,.bottom a,.card p a{--glow:var(--glow-link)}

.card,button,.mic,.bell,.act,.rowbtn,summary,.open,.brand,
.rows > .row,select,input,textarea{
  transition:border-color var(--t) var(--glow-ease),
             box-shadow var(--t) var(--glow-ease),
             background-color var(--t) var(--glow-ease),
             color var(--t) var(--glow-ease)}

@media (hover:hover) and (pointer:fine){
  
  .card:hover,.item:hover,.inbox:hover,.eff:hover,.audit:hover,
  .guarantee:hover,.blocked:hover,.found-card:hover,.found-card:focus-visible{
    border-color:rgb(var(--glow));
    background-color:rgba(var(--glow),.02);
    box-shadow:0 0 0 1px rgba(var(--glow),.55),
               0 0 20px 4px rgba(var(--glow),.22),
               0 0 34px 7px rgba(var(--glow),.10),
               0 10px 28px -6px rgba(var(--glow),.30)}
  .item.live:hover{animation-play-state:paused}

  
  button:hover,.mic:hover,.bell:hover,.act:hover,.open:hover,
  summary:hover,.langs button:hover,.chip:hover,.chip:focus-visible,
  
  .bottom a:hover,.c-more a:hover,.card p a:hover,
  .bottom a:focus-visible,.c-more a:focus-visible,.card p a:focus-visible{
    border-color:rgb(var(--glow));
    background-color:rgba(var(--glow),.02);
    box-shadow:0 0 0 1px rgba(var(--glow),.55),
               0 0 18px 3px rgba(var(--glow),.22),
               0 0 30px 6px rgba(var(--glow),.10),
               0 8px 22px -6px rgba(var(--glow),.28)}

  
  .btn-primary:hover,.decide button.go:hover,.dock button[type=submit]:hover{
    background-color:var(--accent-hover);
    box-shadow:0 0 0 1px rgba(var(--glow),.65),
               0 0 22px 4px rgba(var(--glow),.34),
               0 0 36px 7px rgba(var(--glow),.14),
               0 10px 26px -6px rgba(var(--glow),.40)}

  

  
  .more a:hover,.foot a:hover,.brand:hover,.bottom a:hover,.card p a:hover{
    box-shadow:0 0 14px -3px rgba(var(--glow),.28)}

  
  input:hover,select:hover,textarea:hover{box-shadow:none}
}

.card:active,button:active,.mic:active,.bell:active,.act:active,
.rowbtn:active,summary:active,.open:active{
  box-shadow:0 0 0 1px rgba(var(--glow),.55),
             0 0 10px 2px rgba(var(--glow),.18),
             0 3px 10px -3px rgba(var(--glow),.22)}

:where(a,button,select,input,summary,textarea,[tabindex]):focus-visible{
  outline:none; border-color:rgb(var(--glow));
  box-shadow:0 0 0 4px rgba(var(--glow),.28)}

@media (prefers-color-scheme:dark){
  .card:hover{
    background-color:rgba(var(--glow),.05);
    box-shadow:0 0 0 1px rgba(var(--glow),.70),
               0 0 26px 6px rgba(var(--glow),.30),
               0 12px 32px -6px rgba(var(--glow),.38)}
  button:hover,.bell:hover,.act:hover{
    background-color:rgba(var(--glow),.05);
    box-shadow:0 0 0 1px rgba(var(--glow),.70),
               0 0 22px 5px rgba(var(--glow),.28),
               0 10px 26px -6px rgba(var(--glow),.34)}
}

body{padding:0}
.top{margin:14px var(--gutter) 0; padding:10px 14px; border:1px solid var(--line);
  border-radius:var(--r-box); box-shadow:0 1px 2px rgba(0,0,0,.04), var(--shade),
  inset 0 1px 0 var(--edge); padding-inline:14px}
.canvas{padding-block:14px}
.dock{margin:0 var(--gutter) 14px; padding:10px 14px; border:1px solid var(--line);
  border-top:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:0 1px 2px rgba(0,0,0,.04), var(--shade), inset 0 1px 0 var(--edge);
  padding-inline:14px}

button,.bell,.act,.mic,.btn{min-height:var(--tap); border-radius:var(--r-pill)}
button,.act,.btn{padding:0 24px}
.mic,.bell,.langs button{padding:0 14px; font-size:.9rem}

.card{border-inline-start:3px solid rgb(var(--glow));
  background-image:linear-gradient(90deg,rgba(var(--glow),.02),transparent 40%)}
.card .c-what{color:rgb(var(--glow))}
.rowbtn{border-inline-start:3px solid transparent}
.row--run .rowbtn,.row--stop .rowbtn,.row--ask .rowbtn,.row--done .rowbtn{
  border-inline-start-color:rgb(var(--glow))}
.row--run,.row--stop,.row--ask,.row--done{
  background-image:linear-gradient(90deg,rgba(var(--glow),.02),transparent 40%)}

.rowbtn:hover,.rows > .row:hover{
  background-color:rgba(var(--glow),.02);
  box-shadow:inset 3px 0 0 0 rgb(var(--glow)),
             0 0 14px -2px rgba(var(--glow),.18)}
.card:hover .c-goal,.card:hover .c-why{color:rgb(var(--glow))}

.engines .rows{display:grid; gap:12px; background:none; border:0;
  box-shadow:none; padding:0}
@media (min-width:45rem){
  .engines .rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.engines .row{border:1px solid var(--line); border-radius:var(--r-box);
  background:var(--panel); box-shadow:0 1px 2px rgba(0,0,0,.04), var(--shade),
  inset 0 1px 0 var(--edge); overflow:hidden}
.engines .row:last-child{border-block-end:1px solid var(--line)}
.engines .rowbtn{height:auto; min-height:var(--tap); padding:10px 14px;
  border-radius:0; border-inline-start:3px solid transparent}
.engines .row .state{font-size:.8rem}

.engines .rowbtn .name{flex:1 1 auto; min-inline-size:6ch}
.engines .rowbtn .state{flex:0 1 auto; min-inline-size:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

html{background:var(--bg)}
body{max-inline-size:var(--page-max); margin:16px auto; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:0 1px 2px rgba(0,0,0,.04), var(--shade)}

.top{border-start-start-radius:var(--r-box); border-start-end-radius:var(--r-box)}
.dock{border-end-start-radius:var(--r-box); border-end-end-radius:var(--r-box)}
.top{margin:0; border:0; border-block-end:1px solid var(--line);
  border-radius:0; box-shadow:none; background:var(--panel)}
.dock{margin:0; border:0; border-block-start:1px solid var(--line);
  border-radius:0; box-shadow:none; background:var(--panel)}
.canvas{background:var(--bg)}
@media (max-width:45rem){
  body{margin:0; border:0; border-radius:0; box-shadow:none}
}

.engines .row:hover,.engines .rowbtn:hover,.rows > .row:hover,.rowbtn:hover{
  border-color:rgb(var(--glow));
  background-color:rgba(var(--glow),.02);
  box-shadow:0 0 0 1px rgba(var(--glow),.55),
             0 0 18px 3px rgba(var(--glow),.22),
             0 0 30px 6px rgba(var(--glow),.10),
             0 8px 22px -6px rgba(var(--glow),.28)}
.engines .row:has(.rowbtn:hover){
  border-color:rgb(var(--glow));
  box-shadow:0 0 0 1px rgba(var(--glow),.55),
             0 0 18px 3px rgba(var(--glow),.22),
             0 0 30px 6px rgba(var(--glow),.10),
             0 8px 22px -6px rgba(var(--glow),.28)}

input:hover,select:hover,textarea:hover{box-shadow:none}
input:focus,select:focus,textarea:focus{
  border-color:rgb(var(--glow)); box-shadow:0 0 0 4px rgba(var(--glow),.28)}

a.ghost,.entry a,.guide-page a,.hero a{--glow:var(--glow-run);
  transition:color var(--t) var(--glow-ease), box-shadow var(--t) var(--glow-ease),
             border-color var(--t) var(--glow-ease)}
a.ghost:hover,.entry a:hover,.guide-page a:hover,.hero a:hover{
  color:rgb(var(--glow)); border-color:rgb(var(--glow));
  box-shadow:0 0 14px -3px rgba(var(--glow),.28)}
.row:hover,div.row:hover{
  background-color:rgba(var(--glow),.02);
  box-shadow:inset 3px 0 0 0 rgb(var(--glow)),
             0 0 14px -2px rgba(var(--glow),.18)}
.share-card{margin-block-start:18px;padding:16px;border:1px solid rgba(var(--good),.35);
  border-radius:var(--r-box);background:rgba(var(--good),.06)}
.share-card>summary{cursor:pointer;font-weight:800;color:rgb(var(--good))}
.share-preview{margin-block:14px;padding:18px;border-radius:var(--r-box);background:rgb(var(--paper));
  border:1px solid rgb(var(--line));text-align:center}
.share-preview .mark{font-size:2rem}.share-preview h3{margin:8px 0}.share-preview ul{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.share-preview li{padding:6px 10px;border-radius:var(--r-pill);background:rgba(var(--good),.1)}
.share-actions{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:12px}
.share-actions a,.share-actions button{min-height:44px;padding-inline:14px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none; animation:none}
  :hover{transform:none}
}