:root{
  --paper:#f4eee2;--card:#fffdf8;--card-2:#fbf6ec;--sunk:#f0e9da;
  --navy:#0e1a2b;--navy-2:#1a2c43;--navy-soft:#33465c;--slate:#6a7787;--slate-2:#8a93a0;
  --brass:#c9a35c;--brass-deep:#a8761f;--brass-hi:#e8cf9a;
  --forest:#2d5038;--green:#4f7d63;--green-bg:#e7efe7;
  --amber:#b3801f;--amber-bg:#f6ecd4;
  --clay:#b05438;--clay-bg:#f6e3dc;
  --blue:#3a5a78;--blue-bg:#e6edf3;
  --line:#e5ddcd;--line-soft:#efe8d9;
  --shadow:0 1px 2px rgba(40,30,12,.05),0 8px 22px rgba(40,30,12,.06);
  --shadow-lift:0 2px 6px rgba(40,30,12,.08),0 18px 44px rgba(40,30,12,.12);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{color:var(--navy);font-family:'Spline Sans',-apple-system,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 700px at 78% -12%,rgba(201,163,92,.16),transparent 58%),radial-gradient(900px 540px at 4% 4%,rgba(14,26,43,.05),transparent 55%),linear-gradient(180deg,#efe7d6,#e6dcc7 72%,#e0d5bd);min-height:100vh;}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.page-wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:30px 24px 56px;}
.kicker{text-align:center;margin-bottom:18px;}
.kicker .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-deep);font-weight:600;}
.kicker h1{font-family:'Fraunces',serif;font-weight:500;font-size:27px;letter-spacing:-.01em;margin:7px 0 0;}
.kicker h1 .dot{color:var(--brass-deep);}
.kicker p{font-size:13.5px;color:var(--navy-soft);max-width:60ch;margin:7px auto 0;}

/* laptop frame */
.laptop{background:#11151c;border-radius:16px;padding:9px 9px 0;box-shadow:var(--shadow-lift),0 0 0 1px rgba(0,0,0,.2);}
.titlebar{display:flex;align-items:center;gap:14px;padding:7px 12px 11px;}
.tl-dots{display:flex;gap:7px;}
.tl-dots i{width:11px;height:11px;border-radius:50%;display:block;}
.tl-dots i:nth-child(1){background:#ff5f57;}.tl-dots i:nth-child(2){background:#febc2e;}.tl-dots i:nth-child(3){background:#28c840;}
.urlpill{flex:1;max-width:420px;margin:0 auto;background:#222a35;border-radius:8px;padding:5px 14px;font-size:12px;color:#aeb8c4;text-align:center;display:flex;align-items:center;justify-content:center;gap:7px;}
.urlpill svg{width:11px;height:11px;color:#6b7787;}
.app{display:flex;height:74vh;min-height:560px;max-height:760px;background:var(--paper);border-radius:9px 9px 0 0;overflow:hidden;}

/* sidebar */
.sidebar{width:236px;flex:none;background:linear-gradient(180deg,#10203a,#0e1a2b);display:flex;flex-direction:column;}
.logo{display:flex;align-items:center;gap:9px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07);}
.logo .wheel{width:22px;height:22px;color:var(--brass-hi);}
.logo .wm{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--paper);}
.logo .wm .dot{color:var(--brass-hi);}
.logo .sub{font-size:9.5px;color:rgba(240,227,206,.4);margin-top:2px;}
.navscroll{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:thin;}
.navscroll::-webkit-scrollbar{width:6px;}.navscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
.ngl{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,227,206,.32);padding:14px 10px 5px;}
.nav{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;color:rgba(240,227,206,.72);padding:9px 11px;border-radius:9px;border-left:2px solid transparent;transition:all .12s;position:relative;}
.nav .ni{width:16px;text-align:center;flex:none;opacity:.85;}
.nav:hover{background:rgba(255,255,255,.06);color:var(--paper);}
.nav.active{background:rgba(255,255,255,.1);color:var(--paper);border-left-color:var(--brass);}
.navbadge{margin-left:auto;background:var(--clay);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;}
.lockchip{margin-left:auto;font-size:13px;opacity:.5;}
.userfoot{padding:13px 16px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;}
.av{width:32px;height:32px;border-radius:50%;background:var(--forest);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none;}
.userfoot .un{font-size:12.5px;color:var(--paper);font-weight:600;}
.userfoot .ur{font-size:10px;color:rgba(240,227,206,.45);}

/* main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;border-bottom:1px solid var(--line);background:rgba(255,253,248,.6);backdrop-filter:blur(6px);}
.topbar h1{font-family:'Fraunces',serif;font-weight:500;font-size:21px;letter-spacing:-.01em;}
.topbar .sub{font-size:12px;color:var(--slate);margin-top:1px;}
.addbtn{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--navy);border:1px solid var(--brass-deep);border-radius:11px;padding:9px 18px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;display:flex;align-items:center;gap:6px;}
.addbtn:active{transform:translateY(1px);}
.content{flex:1;overflow-y:auto;padding:24px 26px 40px;scrollbar-width:thin;}
.content::-webkit-scrollbar{width:8px;}.content::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}

.wheel{flex:none;transform-origin:center;}
.wheel.turning{animation:spin 2.2s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.view{display:none;animation:fade .35s ease both;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.maxw{max-width:880px;}
.greetline{display:flex;gap:10px;align-items:flex-start;margin-bottom:4px;}
.greetline .wheel{width:16px;height:16px;margin-top:3px;color:var(--brass-deep);}
.greetline p{margin:0;font-size:14.5px;color:var(--navy-soft);max-width:70ch;}
.greetline p b{color:var(--navy);font-weight:600;}

.slabel{display:flex;align-items:center;gap:10px;margin:22px 0 11px;}
.slabel .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:600;}
.slabel .ln{flex:1;height:1px;background:var(--line);}
.slabel .more{font-size:12px;color:var(--brass-deep);font-weight:600;background:none;border:none;cursor:pointer;font-family:inherit;}

/* today grid */
.today-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start;}
@media(max-width:980px){.today-grid{grid-template-columns:1fr;}}

/* hero */
.hero{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;background:radial-gradient(circle,rgba(201,163,92,.14),transparent 70%);pointer-events:none;}
.hero .tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep);font-weight:700;margin-bottom:11px;}
.hero .tag .wheel{width:13px;height:13px;}
.hero .id{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--clay);padding:2px 8px;border-radius:5px;margin-bottom:9px;}
.hero h3{font-family:'Fraunces',serif;font-weight:500;font-size:24px;line-height:1.22;margin:0;}
.hero .nt{font-size:14px;color:var(--navy-soft);margin:11px 0 0;line-height:1.55;max-width:60ch;}
.hero .row{display:flex;align-items:center;gap:14px;margin-top:18px;}
.btn-brass{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--navy);border:1px solid var(--brass-deep);border-radius:12px;padding:12px 22px;font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 3px 10px rgba(168,118,31,.18);transition:transform .12s;}
.btn-brass:active{transform:translateY(1px);}
.link-q{background:none;border:none;color:var(--navy-soft);font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);}

/* owner chips */
.own{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.own .wheel{width:10px;height:10px;}
.own-linda{background:var(--brass-hi);color:#6b4e12;border:1px solid var(--brass);}
.own-claude{background:var(--green-bg);color:var(--forest);border:1px solid #cfe0d2;}
.own-both{background:linear-gradient(90deg,var(--brass-hi) 50%,var(--green-bg) 50%);color:var(--navy);border:1px solid var(--line);}
.cat-tag{font-size:10px;font-weight:600;color:var(--slate);background:var(--card-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;}

/* task rows */
.tasklist{display:flex;flex-direction:column;}
.trow{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:8px;box-shadow:var(--shadow);transition:opacity .4s,transform .3s,border-color .15s;}
.trow:hover{border-color:#dccfb4;}
.trow.done-anim{opacity:0;transform:translateX(40px) scale(.97);}
.trow .check{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:all .15s;}
.trow .check:hover{border-color:var(--green);}
.trow .check.on{background:var(--green);border-color:var(--green);}
.trow .check svg{width:13px;height:13px;opacity:0;}.trow .check.on svg{opacity:1;}
.trow .body{flex:1;min-width:0;cursor:pointer;}
.trow .ti-top{display:flex;align-items:center;gap:8px;}
.trow .tid{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:#fff;padding:2px 6px;border-radius:5px;flex-shrink:0;}
.trow .ttl{font-size:14.5px;font-weight:500;line-height:1.35;}
.trow.is-done .ttl{text-decoration:line-through;color:var(--slate-2);}
.trow .nt{font-size:12.5px;color:var(--slate);margin-top:5px;line-height:1.5;max-height:0;overflow:hidden;transition:max-height .35s,margin .35s;}
.trow.open .nt{max-height:320px;margin-top:6px;}
.trow .meta{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.trow .chev{flex:none;color:var(--slate-2);font-size:13px;align-self:center;}

/* bucket header */
.bkt{display:flex;align-items:center;gap:9px;margin:22px 2px 11px;}
.bkt .ic{font-size:15px;}.bkt .bl{font-size:13.5px;font-weight:700;}.bkt .ct{font-size:12px;color:var(--slate-2);font-weight:500;}
.bkt-today .bl{color:var(--clay);}.bkt-week .bl{color:var(--amber);}.bkt-next .bl{color:var(--blue);}.bkt-someday .bl{color:var(--slate);}.bkt-done .bl{color:var(--green);}
.bkt .clear{margin-left:auto;font-size:11px;color:var(--slate);background:none;border:1px solid var(--line);border-radius:12px;padding:3px 11px;cursor:pointer;font-family:inherit;}

/* pulse */
.pulse{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pstat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.pstat .bar{position:absolute;top:0;left:0;right:0;height:3px;}
.pstat .pv{font-family:'Fraunces',serif;font-size:24px;font-weight:600;line-height:1.05;}
.pstat .pl{font-size:11px;color:var(--slate);margin-top:3px;font-weight:500;}
.pstat .ps{font-size:10.5px;color:var(--brass-deep);margin-top:2px;min-height:13px;}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;max-width:560px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 8px;text-align:center;cursor:pointer;border-top:3px solid var(--line);transition:transform .1s,box-shadow .15s;box-shadow:var(--shadow);}
.tile:hover{transform:translateY(-1px);}
.tile.sel{box-shadow:0 0 0 2px var(--navy);}
.tile .tv{font-family:'Fraunces',serif;font-size:23px;font-weight:600;line-height:1;}
.tile .tl{font-size:10px;font-weight:600;margin-top:5px;}

/* fast add + filter */
.tasktools{display:flex;gap:12px;align-items:center;margin:16px 0 4px;flex-wrap:wrap;}
.fastadd{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:6px 7px 6px 15px;box-shadow:var(--shadow);flex:1;min-width:280px;max-width:520px;}
.fastadd input{flex:1;border:none;background:none;font-family:inherit;font-size:14px;color:var(--navy);outline:none;}
.fastadd input::placeholder{color:var(--slate-2);}
.fastadd button{flex:none;background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--navy);border:1px solid var(--brass-deep);border-radius:9px;width:32px;height:32px;font-size:19px;font-weight:600;cursor:pointer;line-height:1;}
.filterbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0 2px;}
.filterbar .fl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-right:2px;}
.filterbar .fl:not(:first-child){margin-left:10px;}
.chip{font-size:11.5px;padding:5px 12px;border-radius:18px;border:1px solid var(--line);background:var(--card);color:var(--slate);cursor:pointer;font-family:inherit;transition:all .12s;}
.chip:hover{border-color:var(--brass);}
.chip.on{background:var(--navy);color:var(--paper);border-color:var(--navy);}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
.card .ch{padding:13px 17px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card-2);}
.card .ct{font-family:'Fraunces',serif;font-size:15px;font-weight:600;}
.card .cbody{padding:15px 17px;}
.bdg{font-size:10px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.bdg-g{background:var(--green-bg);color:var(--green);}.bdg-a{background:var(--amber-bg);color:var(--amber);}.bdg-r{background:var(--clay-bg);color:var(--clay);}.bdg-b{background:var(--blue-bg);color:var(--blue);}.bdg-d{background:var(--sunk);color:var(--slate);}.bdg-p{background:#ece6f5;color:#6b4fa0;}

.sline{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;}
.sline:last-child{border-bottom:none;}
.sline .sd{flex:none;width:9px;height:9px;border-radius:50%;}
.sd-on{background:var(--green);}.sd-off{background:var(--clay);}.sd-pend{background:var(--amber);}
.sline .stxt{flex:1;color:var(--navy-soft);}.sline .stxt b{color:var(--navy);font-weight:600;}

.decision{background:linear-gradient(180deg,#fdf8ec,var(--card));border:1px solid #dcc99c;border-radius:15px;padding:16px 17px;margin-bottom:12px;}
.decision .dl{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-deep);font-weight:700;margin-bottom:7px;}
.decision .dl .wheel{width:13px;height:13px;}
.decision h4{font-family:'Fraunces',serif;font-weight:500;font-size:17px;margin:0;}
.decision p{font-size:13.5px;color:var(--navy-soft);margin:7px 0 0;line-height:1.5;}
.decision .two-opt{display:flex;gap:10px;margin-top:14px;}
.btn-quiet{flex:1;background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-family:inherit;font-weight:600;font-size:13px;color:var(--navy);cursor:pointer;}
.btn-quiet:hover{background:#fff;}

.acc{background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:9px;overflow:hidden;box-shadow:var(--shadow);}
.acc .ah{padding:14px 16px;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.acc .ah .at{font-weight:600;font-size:14.5px;}
.acc .ah .asub{font-size:12px;color:var(--slate);margin-top:3px;line-height:1.4;}
.acc .ah .chev{flex:none;color:var(--slate-2);transition:transform .25s;margin-top:2px;}
.acc.open .ah .chev{transform:rotate(180deg);}
.acc .abody{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.acc.open .abody{max-height:1600px;}
.acc .abody-in{padding:0 16px 16px;border-top:1px solid var(--line-soft);padding-top:13px;}
.script-txt{font-size:13px;color:var(--navy-soft);line-height:1.65;white-space:pre-wrap;}
.subhead{font-size:10px;font-weight:700;color:var(--forest);text-transform:uppercase;letter-spacing:.05em;margin:15px 0 7px;}
.kpirow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px;}
.kpirow:last-child{border-bottom:none;}
.kpirow .kl{color:var(--slate);}.kpirow .kv{font-weight:600;text-align:right;flex:none;max-width:55%;}
.pathway{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.pnode{font-size:11px;padding:4px 9px;border-radius:8px;background:var(--card-2);border:1px solid var(--line);color:var(--slate);}
.pnode.cur{background:var(--forest);color:var(--paper);border-color:var(--forest);font-weight:600;}
.parr{color:var(--slate-2);font-size:11px;}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;}
.chkitem{font-size:12.5px;color:var(--navy-soft);display:flex;gap:7px;align-items:flex-start;}
.chkitem::before{content:"☐";color:var(--brass-deep);}

.info-note{background:var(--blue-bg);border:1px solid #cdd9e4;border-radius:12px;padding:12px 15px;font-size:12.5px;color:var(--navy-2);margin-bottom:14px;line-height:1.5;}
.info-note.warn{background:var(--clay-bg);border-color:#e3c4b8;color:#7a3a28;}
.timeline-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);}
.timeline-row:last-child{border-bottom:none;}
.timeline-row .tt{flex:1;}
.timeline-row .tt .a{font-size:13.5px;font-weight:600;}
.timeline-row .tt .b{font-size:12px;color:var(--slate);margin-top:2px;line-height:1.45;}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
@media(max-width:980px){.cols2{grid-template-columns:1fr;}}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(160%);bottom:30px;background:var(--navy);color:var(--paper);border-radius:14px;padding:13px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lift);z-index:200;font-size:13.5px;transition:transform .4s cubic-bezier(.2,.8,.2,1);min-width:300px;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast .wheel{width:16px;height:16px;color:var(--brass-hi);}
.toast .tx{flex:1;}
.toast .tundo{background:none;border:none;color:var(--brass-hi);font-weight:700;font-size:13.5px;cursor:pointer;}

/* sheet (modal centered on desktop) */
.sheet-bg{position:fixed;inset:0;background:rgba(14,26,43,.45);z-index:190;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.sheet-bg.show{display:flex;}
.sheet{background:var(--paper);width:440px;max-width:92vw;border-radius:18px;padding:22px;box-shadow:var(--shadow-lift);animation:pop .25s ease;}
@keyframes pop{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
.sheet h3{font-family:'Fraunces',serif;font-weight:500;font-size:20px;margin:0 0 14px;}
.sheet label{font-size:11px;font-weight:600;color:var(--forest);display:block;margin:12px 0 5px;text-transform:uppercase;letter-spacing:.04em;}
.sheet input,.sheet textarea,.sheet select{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:14px;background:#fff;outline:none;color:var(--navy);}
.sheet textarea{resize:none;}
.sheet .seg{display:flex;gap:6px;}
.sheet .seg button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 4px;font-family:inherit;font-size:12px;font-weight:600;color:var(--slate);cursor:pointer;}
.sheet .seg button.on{background:var(--navy);color:var(--paper);border-color:var(--navy);}
.sheet .srow{display:flex;gap:12px;}.sheet .srow>div{flex:1;}
.sheet .save{width:100%;margin-top:18px;background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--navy);border:1px solid var(--brass-deep);border-radius:12px;padding:13px;font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;}

/* ===== advice cards (collapsible, rec-on-line, mermaid-on-expand) — UNIVERSAL ===== */
details.oi{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:12px;margin-bottom:9px;box-shadow:var(--shadow);overflow:hidden}
details.oi.answered{border-left-color:var(--green);opacity:.85}
details.oi>summary{list-style:none;cursor:pointer;padding:12px 15px;display:block}
details.oi>summary::-webkit-details-marker{display:none}
details.oi[open]>summary{border-bottom:1px solid var(--line-soft)}
.oi .oitop{display:flex;align-items:center;gap:9px}
.oi .oichip{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:20px;font-weight:700;white-space:nowrap;background:var(--clay-bg);color:var(--clay)}
.oi.answered .oichip{background:var(--green-bg);color:var(--green)}
.oi .oititle{font-weight:600;font-size:14px;flex:1;min-width:0}
.oi .oihint{font-size:11px;color:var(--slate-2);flex:none}
details.oi[open] .oihint{transform:rotate(180deg);display:inline-block}
.oi .oirec{margin-top:7px;font-size:13px;color:var(--forest);background:var(--green-bg);border:1px solid #cfe0d2;border-radius:9px;padding:7px 11px;line-height:1.4}
.oi .oirec b{color:var(--forest)}
.oi .recmark{font-size:10px;font-weight:800;background:var(--forest);color:#fff;padding:1px 6px;border-radius:5px;margin-left:4px;letter-spacing:.03em}
.oibody{padding:13px 15px}
.oibody .why{background:var(--blue-bg);border:1px solid #cdd9e4;border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--navy-2);line-height:1.5;margin-bottom:10px}
.oibody .why b{color:var(--blue)}
.oibody .opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.oibody .opt{font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;border-radius:10px;padding:8px 13px;border:1px solid var(--line);background:var(--card-2);color:var(--navy)}
.oibody .opt.rec{background:var(--green-bg);border-color:#cfe0d2;color:var(--forest)}
.oibody .opt.rec .rm{font-size:9px;font-weight:800;background:var(--forest);color:#fff;padding:1px 5px;border-radius:5px;margin-left:5px}
.oibody .mermaid{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;margin:10px 0;overflow:auto;min-height:40px}
.oibody .rmlink{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--brass-deep);text-decoration:none;background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:5px 11px}