/* Lobster interactive mock-up.
   Ported from design/lobster-ui-plan.html (v0.7). Tokens live in styles.css.
   Motion only runs inside `.full` (Full lobster) and never under prefers-reduced-motion. */

:where(.desk) button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:inherit;-webkit-appearance:none;appearance:none}
.desk :focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:6px}

/* the desk stands in for the user's desktop; the glass mutes it */
.desk{position:relative;width:1160px;height:728px;border-radius:20px;overflow:hidden;padding:34px;font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--ink);text-align:left;
  background:#b77ea8;
  background:linear-gradient(140deg,light-dark(#5b7fb8,#1d2b4a),light-dark(#b77ea8,#4a2c48) 45%,light-dark(#e7a46d,#5d3c22) 80%,light-dark(#6aa08f,#1f3d36))}
.desk .blob{position:absolute;border-radius:50%;filter:blur(2px)}
.desk .b1{width:260px;height:260px;left:-40px;top:40px;background:#ffd36b}
.desk .b2{width:340px;height:340px;right:-60px;bottom:-80px;background:#3fb6a8}
.desk .b3{width:180px;height:180px;left:46%;top:-50px;background:#ff6f91}
.desk .bigtxt{position:absolute;right:30px;top:40px;font-size:140px;font-weight:800;color:rgba(255,255,255,.35);letter-spacing:-.05em;line-height:1.2}

.sp{flex:1}
.i2{color:var(--ink2)}.i3{color:var(--ink3)}
.coral-t{color:var(--coral)}
.add-t{color:var(--add-fg)}.del-t{color:var(--del-fg)}
.kbd{font-family:var(--mono);font-size:11px;background:var(--chip);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px}
.mono{font-family:var(--mono);font-size:11.5px}

/* glyphs */
.gly{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;font-family:var(--glyph);font-size:13px;line-height:1;color:var(--ink);background:var(--glass-3);border:1px solid var(--edge);box-shadow:var(--hi),0 1px 2px rgba(0,0,0,.12);position:relative}
.gly.xs{width:16px;height:16px;border-radius:5px;font-size:10px}
.gly.md{width:30px;height:30px;border-radius:9px;font-size:17px}
.gly.lg{width:56px;height:56px;border-radius:16px;font-size:30px}
.gly.xl{width:92px;height:92px;border-radius:26px;font-size:50px}
.gly.wait,.gly.rev{box-shadow:0 0 0 2px var(--coral),var(--hi)}
.gly.fail{transform:rotate(180deg);opacity:.5}
.gly.egg{background:transparent;border:1.5px dashed var(--ink3);box-shadow:none;color:var(--ink3);font-family:inherit;font-size:11px}
.full .gly.run{animation:bob 1.8s ease-in-out infinite}
.full .gly.wait{animation:tilt 2.4s ease-in-out infinite}
.full .gly.wait::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--coral);animation:ring 1.6s ease-out 2 forwards}
.full .gly.hatch{animation:hatch .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes bob{50%{transform:translateY(-2px)}}
@keyframes tilt{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-12deg)}90%{transform:rotate(8deg)}}
@keyframes ring{to{inset:-9px;opacity:0}}
@keyframes hatch{0%{transform:scale(.4) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0)}}
@keyframes pulse{50%{opacity:.3}}

/* status pills: shape carries state; coral only when a human is needed */
.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:1px 8px 1px 6px;border-radius:99px;white-space:nowrap;background:var(--chip);color:var(--ink2)}
.st::before{font-size:10px}
.st.queued::before{content:"○"}.st.running::before{content:"◐"}
.full .st.running::before{animation:pulse 1.4s infinite}
.st.review,.st.input{background:var(--coral);color:#fff}
.st.review::before{content:"●"}.st.input::before{content:"?"}
.st.done{background:var(--ink);color:var(--wall)}.st.done::before{content:"✓"}
.st.failed{background:transparent;border:1px dashed var(--ink3)}.st.failed::before{content:"✕"}

/* window chrome */
.win{position:relative;z-index:2;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.titlebar{height:46px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line)}
.lights{display:flex;gap:7px}.lights i{width:12px;height:12px;border-radius:50%;display:block;background:var(--ink3)}
.tb-title{font-weight:650;font-size:13px;display:flex;gap:8px;align-items:center}
.btn{font-size:12.5px;border-radius:8px;padding:6px 12px;background:var(--glass-3);border:1px solid var(--edge);box-shadow:var(--hi),0 1px 2px rgba(0,0,0,.08);white-space:nowrap;cursor:default;color:var(--ink);display:inline-flex;gap:6px;align-items:center;transition:transform .08s}
button.btn{cursor:pointer}
button.btn:active{transform:scale(.95)}
.btn.sm{padding:3px 9px;font-size:11.5px}
.btn.ink{background:var(--ink);color:var(--wall);border-color:transparent}
.btn.coral{background:var(--coral);color:#fff;border-color:transparent;font-weight:650}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ===== main window: rail · context · stage ===== */
.app{display:grid;grid-template-columns:210px 320px 1fr;height:660px}
.side{padding:10px 8px;display:flex;flex-direction:column;gap:2px;font-size:13px;border-right:1px solid var(--line);background:rgba(255,255,255,.04)}
.rail-top{display:flex;align-items:center;gap:8px;padding:4px 6px 12px;color:var(--ink3);font-size:12px}
.rsearch{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink3);background:var(--chip);border-radius:8px;padding:5px 9px;margin:0 2px 8px}
.lbl{font-size:10.5px;font-weight:650;color:var(--ink3);padding:10px 8px 4px;text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between}
.item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;width:100%}
button.item:hover{background:var(--hover)}
.item.on{background:var(--hover);font-weight:600}
.ri{width:18px;text-align:center;color:var(--ink2);font-size:12px}
.ri.coral-t{color:var(--coral)}
.badge{margin-left:auto;font-size:10.5px;font-weight:700;color:#fff;background:var(--coral);border-radius:99px;padding:0 6px}
.cnt{margin-left:auto;font-size:11px;color:var(--ink3);display:flex;gap:3px}
.side .foot{margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
.mood{font-size:11.5px;color:var(--ink3);padding:4px 8px 6px}

.ctx{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--glass);min-height:0}
.ctx-h{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;font-weight:650;font-size:14px}
.ctx-h .ic{color:var(--ink3);font-weight:400;padding:0 4px;border-radius:5px}
.ctx-br{display:block;font-size:11px;font-weight:400;color:var(--ink3)}
.ctx-seg{margin:0 10px 6px;display:flex;background:var(--chip);border-radius:9px;padding:2px}
.ctx-seg>*{flex:1;text-align:center;font-size:12px;padding:4px;border-radius:7px;color:var(--ink2)}
.ctx-seg>.on{background:var(--glass-3);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ctx-body{flex:1;overflow:auto;min-height:0}
.qhead{padding:11px 14px 5px;font-size:10.5px;font-weight:650;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between}
.task{margin:0 8px 5px;padding:10px 11px;border-radius:10px;border:1px solid transparent;display:flex;gap:10px;width:calc(100% - 16px);text-align:left}
button.task:hover{background:var(--hover)}
.task.on{background:var(--glass-3);border-color:var(--edge);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.task.attn{box-shadow:inset 3px 0 0 var(--coral)}
.task.on.attn{box-shadow:inset 3px 0 0 var(--coral),0 1px 4px rgba(0,0,0,.08)}
.task .body{display:block;min-width:0;flex:1}
.task .t{display:block;font-size:13px;font-weight:560;margin-bottom:4px;line-height:1.3}
.task .m{display:flex;gap:7px;align-items:center;font-size:11.5px;color:var(--ink2);flex-wrap:wrap}
.add-n{color:var(--add-fg);font-family:var(--mono);font-size:11px}.del-n{color:var(--del-fg);font-family:var(--mono);font-size:11px}
.addrow{margin:8px;padding:9px 11px;border:1.5px dashed var(--line);border-radius:10px;font-size:12.5px;color:var(--ink2);display:flex;justify-content:space-between;width:calc(100% - 16px)}
.lane{padding:6px 12px 12px}
.lane-cap{font-size:11px;color:var(--ink3);padding:4px 2px 10px}
.lrow{display:grid;grid-template-columns:30px 1fr;gap:10px;position:relative;padding-bottom:16px}
.lrow::before{content:"";position:absolute;left:14.5px;top:32px;bottom:2px;width:1.5px;background:var(--ink3);opacity:.35}
.lrow.last::before{display:none}
.lrow .t{font-size:12.5px;font-weight:560;line-height:1.3}
.lrow .m{font-size:11px;color:var(--ink2);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:3px}
.pr{font-size:10.5px;font-weight:650;border-radius:99px;padding:0 7px;background:var(--chip)}
.pr.merged{background:var(--ink);color:var(--wall)}.pr.rv{background:var(--coral);color:#fff}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--glass-2)}
.otabs{display:flex;gap:3px;padding:7px 8px 0;border-bottom:1px solid var(--line);align-items:flex-end;min-height:41px}
.otab{display:flex;gap:7px;align-items:center;font-size:12.5px;padding:6px 10px;border-radius:9px 9px 0 0;color:var(--ink2);max-width:230px;min-width:0}
.otab .ot-b{display:flex;gap:7px;align-items:center;min-width:0}
.otab .ot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.otab.on{background:var(--glass-3);color:var(--ink);font-weight:600}
.otab .x{opacity:.45;margin-left:2px}.otab .x:hover{opacity:1}
.otab.plus{color:var(--ink3);font-size:14px}
.detail{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.sbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink2)}
.sb-link{padding:1px 8px;border-radius:6px;background:var(--chip)}

.dhead{padding:14px 18px 11px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.dhead .t{font-size:16px;font-weight:650;margin-bottom:5px;line-height:1.3}
.dhead .m{display:flex;gap:12px;font-size:12px;color:var(--ink2);flex-wrap:wrap;align-items:center}
.dbody{flex:1;display:grid;grid-template-columns:180px 1fr;min-height:0}
.files{border-right:1px solid var(--line);overflow:auto;padding:8px 6px;font-size:12px}
.file{display:flex;justify-content:space-between;gap:6px;padding:5px 8px;border-radius:6px}
.file.on{background:var(--hover);font-weight:600}
.files .lbl{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em}
.hh .mono{overflow:hidden;text-overflow:ellipsis;min-width:0}
.file .n{font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fopts{margin-top:12px;padding:8px;font-size:11.5px;color:var(--ink2)}
.diff{overflow:auto;padding:12px 14px}
.hunk{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px;background:var(--glass-3);transition:opacity .25s}
.hunk.accepted{box-shadow:inset 3px 0 0 var(--ink)}.hunk.rejected{opacity:.35}
.hh{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:6px 10px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--ink2)}
.hbtn{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 8px;color:var(--ink2)}
.hunk.accepted .hbtn.a{background:var(--ink);color:var(--wall);border-color:transparent}
.hunk.rejected .hbtn.r{background:var(--chip);color:var(--ink);text-decoration:line-through}
.ln{display:grid;grid-template-columns:36px 36px 1fr;font-family:var(--mono);font-size:12px;line-height:20px}
.ln span{color:var(--ink3);text-align:right;padding-right:8px;user-select:none}
.ln code{font-family:inherit;font-size:inherit;white-space:pre;padding:0 0 0 8px;background:none;border:0;border-radius:0}
.ln.add{background:var(--add-bg)}.ln.add code{color:var(--add-fg)}
.ln.del{background:var(--del-bg)}.ln.del code{color:var(--del-fg)}
.why{font-size:12px;color:var(--ink2);background:var(--chip);border-radius:9px;padding:8px 10px;margin-bottom:12px;display:flex;gap:8px;align-items:center}
.actionbar{border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:8px;align-items:center}
.ask{flex:1;border-radius:8px;padding:6px 10px;font-size:12.5px;color:var(--ink2);background:var(--chip)}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink2);padding:30px;text-align:center}
.center .big{font-size:16px;color:var(--ink);font-weight:650}
.live{width:100%;max-width:500px;text-align:left;border:1px solid var(--line);border-radius:11px;background:var(--glass-3);font-size:12px}
.live div{padding:7px 12px;border-bottom:1px solid var(--line);display:flex;gap:10px;justify-content:space-between}
.live div:last-child{border:0}
.tm{color:var(--ink3);font-family:var(--mono);font-size:11px;width:56px;flex:none}

/* composer + tank */
.compose{flex:1;display:flex;flex-direction:column;min-height:0;overflow:auto}
.tank{position:relative;height:210px;margin:14px 14px 4px;border-radius:16px;overflow:hidden;border:1px solid var(--edge);flex:none;
  background:linear-gradient(180deg,light-dark(rgba(255,255,255,.35),rgba(255,255,255,.06)),transparent 30%),linear-gradient(0deg,var(--chip),transparent 60%);box-shadow:var(--hi)}
.tank::before{content:"";position:absolute;left:0;right:0;top:16px;height:1px;background:var(--ink3);opacity:.25}
.swim{position:absolute;left:var(--x);z-index:2}
.full .swim{left:-8%;animation:swim linear infinite}
.tank:hover .swim,.tank:hover .bubble{animation-play-state:paused}
@keyframes swim{to{left:104%}}
.bubble{display:none;position:absolute;bottom:-10px;width:7px;height:7px;border-radius:50%;border:1px solid var(--ink3);opacity:.5}
.full .bubble{display:block;animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-230px);opacity:0}}
.tank-cap{position:absolute;left:12px;bottom:8px;font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.say{position:absolute;right:12px;bottom:10px;z-index:3;font-size:12px;border-radius:10px;padding:6px 10px;display:none;max-width:70%}
.cq{font-size:19px;font-weight:650;margin:14px 20px 10px;letter-spacing:-.01em}
.cbox{margin:0 16px;border-radius:14px;border:1px solid var(--edge);background:var(--glass-3);box-shadow:var(--hi),0 4px 14px rgba(0,0,0,.06)}
.cbox .top,.cbox .bot{display:flex;gap:8px;align-items:center;padding:10px 12px;font-size:12px;color:var(--ink2);flex-wrap:wrap}
.cbox .txt{padding:4px 14px 18px;font-size:14px;color:var(--ink3)}
.cchip{display:inline-flex;gap:6px;align-items:center;background:var(--chip);border-radius:8px;padding:3px 9px;font-size:12px;color:var(--ink)}
.rr{color:var(--ink2)}
.chint{font-size:11.5px;color:var(--ink2);margin:10px 20px}
.caret{display:inline-block;width:2px;height:18px;background:var(--ink);vertical-align:-4px;margin-left:2px}
.full .caret{animation:pulse 1s infinite}

/* sheets & overlays */
.dim{position:absolute;inset:0;background:rgba(0,0,0,.15);z-index:1}
.sheet{position:relative;z-index:2;margin:30px auto 0;border-radius:16px;box-shadow:var(--shadow)}
.palette{width:580px;max-width:100%;overflow:hidden}
.palette .in{padding:18px 20px;font-size:18px;border-bottom:1px solid var(--line)}
.palette .row{display:flex;gap:10px;align-items:center;padding:10px 20px;font-size:13px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.palette .row .k{color:var(--ink2);width:70px;font-size:12px}
.chip{border-radius:7px;padding:2px 9px;font-size:12px;background:var(--chip)}
.chip.on{background:var(--ink);color:var(--wall);font-weight:600}
.palette .ft{display:flex;justify-content:space-between;padding:10px 20px;font-size:12px;color:var(--ink2)}
.prs{width:600px;max-width:100%;padding:22px}
.prs-h{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.prs-h h3{font-size:16px;margin:0}
.prs-opts{display:flex;gap:16px;font-size:12.5px;margin-bottom:16px;color:var(--ink2)}
.prs-act{display:flex;justify-content:flex-end;gap:8px}
.field{margin-bottom:12px}
.flabel{font-size:11.5px;font-weight:600;color:var(--ink2);margin-bottom:4px}
.field .box{border-radius:8px;padding:7px 10px;font-size:13px;background:var(--chip)}
.field .box.area{height:110px;font-size:12.5px;color:var(--ink2);white-space:pre-line}
.confetti{position:absolute;left:50%;top:50%;font-family:var(--glyph);font-size:20px;color:var(--ink);z-index:5;pointer-events:none;animation:fly .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.toastx{position:absolute;z-index:6;left:50%;bottom:26px;transform:translateX(-50%);border-radius:12px;padding:10px 16px;font-size:13px;font-weight:600;display:none}
.menubar{position:absolute;top:0;left:0;right:0;height:26px;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 14px;font-size:12.5px;border-radius:0;border-width:0 0 1px}
.mb-icon{display:flex;align-items:center;gap:5px;font-weight:600;background:var(--hover);padding:1px 7px;border-radius:5px}
.mb-icon .b{background:var(--coral);color:#fff;border-radius:99px;font-size:10px;padding:0 5px}
.popover{position:absolute;z-index:3;top:34px;right:120px;width:350px;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.popover .sec{padding:9px 14px 3px;font-size:10.5px;font-weight:650;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.popover .r{display:flex;gap:10px;align-items:center;padding:8px 14px;font-size:12.5px}
.popover .r .x{flex:1;min-width:0}.popover .r .x div:last-child{font-size:11.5px;color:var(--ink2)}
.popover .ft{border-top:1px solid var(--line);padding:8px 14px;font-size:12px;color:var(--ink2);display:flex;justify-content:space-between}
.notif{position:absolute;z-index:3;bottom:24px;right:24px;width:350px;border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;display:flex;gap:12px;font-size:12.5px}
.notif .nglyph{width:40px;height:40px;font-size:22px;border-radius:11px}
.mtable{width:100%;border-collapse:collapse;font-size:12.5px}
.mtable th{text-align:left;font-size:10.5px;color:var(--ink3);text-transform:uppercase;font-weight:650;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
.mtable td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.agrid{display:grid;grid-template-columns:1fr 260px}
.agrid-t{padding:10px 14px;background:var(--glass-2)}
.hatchery{border-left:1px solid var(--line);padding:22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hatchery .nm{font-size:18px;font-weight:700}
.settings{display:grid;grid-template-columns:170px 1fr}
.snav{padding:12px 8px;font-size:13px;border-right:1px solid var(--line)}
.snav div{padding:5px 10px;border-radius:7px}.snav .on{background:var(--hover);font-weight:600}
.sbody{padding:16px 26px;background:var(--glass-2)}
.srow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.srow small{display:block;color:var(--ink2);font-size:12px}
.toggle{width:34px;height:20px;border-radius:99px;background:var(--ink);position:relative;flex:none}.toggle::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--wall)}
.toggle.off{background:var(--chip)}.toggle.off::after{right:auto;left:2px;background:#fff}
.slider{width:140px;height:4px;border-radius:9px;background:linear-gradient(90deg,var(--ink) 60%,var(--chip) 60%);position:relative}
.slider::after{content:"";position:absolute;left:60%;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transform:translate(-50%,-50%)}
.mini-seg{display:inline-flex;background:var(--chip);border-radius:8px;padding:2px;font-size:12px}
.mini-seg span{padding:3px 10px;border-radius:6px;color:var(--ink2)}.mini-seg span.on{background:var(--glass-3);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* ===== file explorer + chat ===== */
.fx-app{display:grid;grid-template-columns:186px 250px 1fr;height:640px}
.fx-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--glass-2)}
.fx-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.fx-head .t{font-size:13.5px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-head .m{font-size:11.5px;color:var(--ink2);display:flex;gap:8px;align-items:center}
.stog{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;color:var(--ink2);padding:3px 8px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
.stog.on{background:var(--chip);border-color:var(--line);color:var(--ink);font-weight:600}
.fx-split{flex:1;display:flex;min-height:0}
.fx-chat{flex:1;min-width:0;display:flex;flex-direction:column}
.fx-msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.fx-user{align-self:flex-end;max-width:80%;background:var(--glass-3);border:1px solid var(--edge);border-radius:12px 12px 4px 12px;padding:7px 11px;box-shadow:var(--hi)}
.fx-asst{max-width:92%;color:var(--ink)}
.fx-tool{font-family:var(--mono);font-size:11.5px;color:var(--ink2);display:flex;gap:6px;align-items:baseline}
.fx-tool .p{color:var(--ink);border-bottom:1px dotted var(--ink3)}
button.p:hover{border-bottom-style:solid}
.perm{border:1px solid var(--edge);background:var(--glass-3);border-radius:10px;padding:9px 12px;box-shadow:var(--hi);display:flex;align-items:center;gap:10px;font-size:12.5px}
.gauge{display:flex;justify-content:flex-end;gap:6px;align-items:center;padding:0 14px 6px;font-size:11px;color:var(--ink2)}
.gauge .bar{width:44px;height:4px;border-radius:9px;background:var(--chip);display:inline-block;position:relative;overflow:hidden}
.gauge .bar i{position:absolute;inset:0 62% 0 0;background:var(--ink2)}
.fx-comp{margin:0 12px 12px;border-radius:12px;border:1px solid var(--edge);background:var(--glass-3);box-shadow:var(--hi)}
.fx-comp .chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0}
.fx-comp .chips:empty{display:none}
.fx-comp .txt{padding:9px 12px 4px;font-size:13px;color:var(--ink3)}
.fx-comp .bot{display:flex;gap:8px;align-items:center;padding:6px 10px 8px;font-size:11.5px;color:var(--ink3)}
.fchip{display:inline-flex;gap:5px;align-items:center;background:var(--chip);border-radius:7px;padding:2px 8px;font-family:var(--mono);font-size:11px;color:var(--ink)}
.full .fchip{animation:hatch .35s cubic-bezier(.3,1.6,.5,1)}
.fchip .x{opacity:.5}.fchip .x:hover{opacity:1}
.fx-seam{width:1px;background:var(--line);flex:none}
.fx-side{width:330px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--glass-3)}
.fx-pane{display:flex;flex-direction:column;min-height:0}
.fx-ph{display:flex;align-items:center;gap:2px;padding:7px 8px;border-bottom:1px solid var(--line)}
.fx-ph .cap{font-size:10.5px;font-weight:650;color:var(--ink3);letter-spacing:.06em;padding-left:6px}
.fx-ph .url{flex:1;font-size:11px;background:var(--chip);border-radius:6px;padding:2px 8px;color:var(--ink2)}
.tbtn{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--ink2);font-size:12px}
button.tbtn:hover{background:var(--hover)}
.fx-root{display:flex;align-items:center;gap:6px;margin:8px 10px 4px;font-size:11px;color:var(--ink2);white-space:nowrap;min-width:0}
.fx-root .mono{color:var(--ink);overflow:hidden;text-overflow:ellipsis;min-width:0}
.fx-search{display:flex;align-items:center;gap:6px;margin:4px 10px 6px;background:var(--chip);border-radius:8px;padding:4px 8px;font-size:12px;color:var(--ink3)}
.fx-filter{display:flex;margin:0 10px 6px;background:var(--chip);border-radius:8px;padding:2px}
.fx-filter>*{flex:1;text-align:center;font-size:11.5px;padding:3px;border-radius:6px;color:var(--ink2)}
.fx-filter>.on{background:var(--glass-3);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.fx-tree{flex:1;overflow:auto;padding:2px 6px 10px;min-height:0}
.fx-row{display:flex;align-items:center;gap:5px;padding:0 6px;border-radius:6px;font-size:12px;position:relative;min-height:24px}
.fx-row:hover{background:var(--hover)}
.fx-row.on{background:var(--ink);color:var(--wall)}
.fx-row.on .fx-git,.fx-row.on .fx-read,.fx-row.on .fx-tw,.fx-row.on .fx-ic{color:var(--wall)}
.fx-row.ign{opacity:.42}
.fx-open{display:flex;align-items:center;gap:5px;flex:1;min-width:0;padding:3px 0}
.fx-row .fx-n{font-family:var(--mono);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fx-row.dir .fx-n{font-family:inherit;font-size:12px;font-weight:560}
.fx-tw{width:10px;color:var(--ink3);font-size:9px;flex:none;text-align:center}
.fx-ic{width:14px;color:var(--ink3);font-size:11px;flex:none;text-align:center}
.fx-git{font-family:var(--mono);font-size:10.5px;font-weight:700;width:12px;text-align:center;color:var(--ink2)}
.fx-git.A{color:var(--add-fg)}.fx-git.D{color:var(--del-fg)}.fx-git.Q{color:var(--ink3)}
.fx-read{font-size:10px;color:var(--ink3)}
.fx-dot{width:5px;height:5px;border-radius:50%;background:var(--ink2);margin-right:3px}
.fx-att{display:none;font-size:11px;padding:0 6px;border-radius:5px;background:var(--glass-3);border:1px solid var(--edge);color:var(--ink);box-shadow:var(--hi)}
.fx-row:hover .fx-att,.fx-row:focus-within .fx-att{display:inline-block}
.fx-legend{border-top:1px solid var(--line);padding:6px 12px;font-size:10.5px;color:var(--ink3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fx-hseam{height:1px;background:var(--line);flex:none}
.fx-view{flex:1;display:flex;flex-direction:column;min-height:0}
.fx-vh{padding:8px 12px;border-bottom:1px solid var(--line)}
.fx-crumb{font-family:var(--mono);font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-crumb b{color:var(--ink);font-weight:600}
.fx-vm{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--ink2);margin-top:5px;flex-wrap:wrap}
.fx-vacts{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.fx-code{flex:1;overflow:auto;padding:6px 0;font-family:var(--mono);font-size:11.5px;line-height:19px}
.fx-code div{display:grid;grid-template-columns:34px 1fr;white-space:pre}
.fx-code span:first-child{color:var(--ink3);text-align:right;padding-right:10px;user-select:none}
.fx-code .ch{background:var(--add-bg);box-shadow:inset 2px 0 0 var(--add-fg)}
.fx-code .ch span:last-child{color:var(--add-fg)}
.fx-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;color:var(--ink2);font-size:12px}
.fx-empty b{color:var(--ink);font-size:13px}

@media (prefers-reduced-motion:reduce){
  .desk *,.desk *::before,.desk *::after{animation:none!important;transition:none!important}
  .desk .swim{left:var(--x)!important}
  .desk .bubble{display:none!important}
}