/* Two ways in, option A "The fork" (picked 2026-09-30). Shared by index.html and twoways.html; everything is
   scoped under .ways so it can't touch the hero or the lesson. */
.ways { --line:var(--c-haze-14); --line2:var(--c-haze-26); --muted:var(--c-muted); --accent:var(--c-thread); --cobaltk:var(--c-506cff);
  --sys:var(--font-system)}
.ways em { color:var(--brass); font-style:italic }
.ways .serif { font-family:var(--font-display); font-weight:400 }
.ways .head { text-align:center; padding:0 40px }
.ways .head .mono { color:var(--cobalt); margin-bottom:16px }
.ways .head h2 { font-size:clamp(46px,5.6vw,76px); line-height:1 }
.ways .head p { margin:16px auto 0; max-width:540px; color:var(--mist); font-size:16px; line-height:1.6 }
.js .ways .reveal { opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1) }
.js .ways .reveal.in { opacity:1; transform:none }

/* the fork: orb above, strands into two equal cards */
.ways .fork { position:relative; max-width:1180px; margin:0 auto; padding:0 40px 14vh }
.ways .fork canvas.strands { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none }
.ways .fork .orbtag { position:absolute; left:0; top:0; font:500 10px/1 var(--font-mono); color:var(--c-muted-90); white-space:nowrap; pointer-events:none }
.ways .fork .gap { height:310px }
.ways .pair { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch }
.ways .or { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--ink); border:1px solid var(--line2); color:var(--muted); font:italic 18px var(--font-display); z-index:2 }
.ways .foot { margin-top:34px; text-align:center; color:var(--mist); font-size:15px }
.ways .foot b { color:var(--cream); font-weight:600 }

/* product card: media on top, copy below, the buttons pinned to the bottom so both cards line up */
.ways .card { position:relative; display:flex; flex-direction:column; border-radius:22px; padding:22px 22px 26px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--c-14192e-72),var(--c-090c18-72));   /* no backdrop blur: behind the cards is flat ink (pixel diff: no visible change), and blurring it re-rendered both cards every frame */
  transition:transform .5s cubic-bezier(.2,.8,.2,1) }
.ways .card:hover, .ways .card:focus-within { transform:translateY(-6px) }
/* the hover border and shadow fade in on their own layers (opacity only), so hovering never repaints the whole card.
   The overlay border is .14 on top of the base .14, which lands on the old hover border (.26). */
.ways .card::before, .ways .card::after { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s }
.ways .card::before { border:1px solid var(--c-haze-14) }
.ways .card::after { box-shadow:0 40px 90px var(--c-black-45), 0 0 0 1px var(--c-thread-8); transition-duration:.5s }
.ways .card:hover::before, .ways .card:focus-within::before, .ways .card:hover::after, .ways .card:focus-within::after { opacity:1 }
.ways .media { container-type:inline-size }
.ways .copy { flex:1; display:flex; flex-direction:column }
.ways .card h3 { font-size:44px; line-height:1; margin-top:22px }
.ways .one { margin-top:10px; color:var(--mist); font-size:16px; line-height:1.5; max-width:440px; min-height:3em }
.ways .card ul { list-style:none; margin-top:18px; display:grid; gap:10px }
.ways .card li { display:flex; gap:12px; align-items:baseline; font-size:15px; color:var(--cream); line-height:1.45 }
.ways .card li b { font-weight:600 }
.ways .card li .d { color:var(--mist) }
.ways .card li::before { content:""; flex:0 0 6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--c-thread-70); transform:translateY(-2px) }
.ways .card.stu li::before { background:var(--brass); box-shadow:0 0 8px var(--c-brass-70) }
.ways .bottom { margin-top:auto; padding-top:22px }
.ways .chips { display:flex; flex-wrap:wrap; gap:8px }
.ways .chip { font:500 12px var(--font-body); padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:var(--mist); background:var(--c-cream-3) }
.ways .chip.hi { color:var(--cream); border-color:var(--line2) }
.ways .acts { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:20px } .ways .acts .link { margin-left:6px }
.ways .btn { display:inline-flex; align-items:center; white-space:nowrap; border-radius:999px; padding:13px 22px; font:600 15px var(--font-body); text-decoration:none; border:0; cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s }
.ways .btn:hover { transform:scale(1.04) }
.ways .btn.solid { background:var(--cream); color:var(--c-night) } .ways .btn.solid:hover { background:var(--c-white) }
.ways .btn.ghost { border:1px solid var(--line2); color:var(--cream); background:var(--c-cream-5) } .ways .btn.ghost:hover { background:var(--c-cream-10) }
.ways .btn { gap:8px } .ways svg.os { width:16px; height:16px; fill:currentColor; flex:0 0 auto; transform:translateY(-1px) }
.ways .chip { display:inline-flex; align-items:center; gap:6px } .ways .chip svg.os { width:12px; height:12px }
.ways .btn:focus-visible, .ways .tabs button:focus-visible, .ways .link:focus-visible { outline:2px solid var(--brass); outline-offset:3px }
.ways .link { color:var(--mist); font-size:14px; text-decoration:none; border-bottom:1px solid var(--line2); padding-bottom:1px } .ways .link:hover { color:var(--cream) }
.ways .small { margin-top:10px; color:var(--muted); font-size:12.5px }

/* Students app window: Mac-style (the student app has a Mac beta) */
.ways .appwin { position:relative; border-radius:12px; overflow:hidden; background:var(--c-101322); border:1px solid var(--c-white-12);
  box-shadow:0 0 0 .5px var(--c-black-80), inset 0 1px 0 var(--c-white-7), 0 30px 70px var(--c-black-50) }
.ways .shots { position:relative; aspect-ratio:1800/1125; background:var(--c-0c0f1c) }
.ways .shots img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.025); transition:opacity .7s ease, transform 1.4s cubic-bezier(.2,.8,.2,1) }
.ways .shots img.on { opacity:1; transform:none }

/* tab rows under both media (Today / Review / Map, and Say it / Point / Assignment mode) */
.ways .tabs { display:flex; gap:6px; margin-top:12px }
.ways .tabs button { position:relative; flex:1; overflow:hidden; font:500 13px var(--font-body); color:var(--mist); background:var(--c-cream-3); border:1px solid var(--line); border-radius:10px; padding:9px 10px; cursor:pointer; text-align:left; transition:color .2s, border-color .2s, background .2s }
.ways .tabs button small { display:block; margin-top:2px; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ways .tabs button:hover { color:var(--cream) }
.ways .tabs button.on { color:var(--cream); border-color:var(--line2); background:var(--c-cream-6) }
.ways .tabs button i { position:absolute; left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left center; background:var(--brass) }   /* scaleX, not width: the fill runs on the compositor with no relayout */
.ways .tabs.cool button i { background:var(--accent) }
.ways .tabs button.on i { animation:waysfill var(--dur,4.5s) linear forwards } .ways .tabs.paused button.on i { animation-play-state:paused }
@keyframes waysfill { to { transform:scaleX(1) } }

/* Companion desk: a quiet screen with the real Knot overlay. Same height as the Students window (title bar + 16:10). */
.ways .desk { position:relative; height:calc(100cqw * 1125 / 1800 + 30.75px); border-radius:12px; overflow:hidden; border:1px solid var(--c-white-10);
  background:radial-gradient(120% 90% at 20% 0%, var(--c-1c2447) 0%, var(--c-0e1226) 55%, var(--c-0a0d1b) 100%); box-shadow:0 30px 70px var(--c-black-50); font-family:var(--sys) }
/* ClipoTxt Scene Layer Base */
.ways .cdesk-scene { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:16px; opacity:0; transform:scale(.97); pointer-events:none; transition:opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1) }
.ways .cdesk-scene.on { opacity:1; transform:none; pointer-events:auto }

/* Floating pills & badges */
.ways .cdesk-pill, .ways .cdesk-badge { position:absolute; top:12px; z-index:5; font:500 11px var(--font-mono); letter-spacing:.03em; border-radius:999px; padding:6px 14px; background:linear-gradient(150deg,var(--c-12141f-95),var(--c-080a12-92)); border:1px solid var(--c-f2efe6-13); box-shadow:0 8px 24px var(--c-black-50); color:var(--cream); display:inline-flex; align-items:center; gap:8px }
.ways .cdesk-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:waysblink 1s steps(1) infinite }
.ways .cdesk-pill .pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--c-4cc88c); box-shadow:0 0 8px var(--c-4cc88c); animation:waysblink 1.2s infinite }
.ways .cdesk-badge kbd { font:600 10px var(--sys); padding:2px 6px; border-radius:5px; background:var(--c-white-8); border:1px solid var(--c-white-20); color:var(--c-white) }
.ways .dot-green { width:7px; height:7px; border-radius:50%; background:var(--c-4cc88c); box-shadow:0 0 6px var(--c-4cc88c); flex:0 0 auto }

/* Tab 1: Terminal Snip */
.ways .term-window { width:88%; max-width:440px; border-radius:10px; background:var(--c-101322); border:1px solid var(--c-white-12); box-shadow:0 20px 50px var(--c-black-60); overflow:hidden; position:relative }
.ways .term-bar { padding:8px 12px; background:var(--c-0a0d1b); border-bottom:1px solid var(--c-white-7); display:flex; align-items:center; gap:6px }
.ways .t-dot { width:8px; height:8px; border-radius:50% }
.ways .t-dot.red { background:#f87171 } .ways .t-dot.yellow { background:#fbbf24 } .ways .t-dot.green { background:#4ade80 }
.ways .t-title { margin-left:6px; font:500 10.5px var(--font-mono); color:var(--mist) }
.ways .term-body { padding:12px 14px; font:11.5px/1.55 var(--font-mono); display:grid; gap:6px }
.ways .term-line.prompt { color:var(--accent) }
.ways .term-line.err-block { padding:8px 10px; border-radius:6px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#fca5a5 }
.ways .err-text { font-weight:600; color:#f87171 }
.ways .err-sub { font-size:10px; opacity:.85; margin-top:2px }
.ways .term-line.dim { color:var(--muted); font-size:10px }
.ways .snip-overlay { position:absolute; inset:0; pointer-events:none; overflow:hidden }
.ways .snip-box { position:absolute; left:6%; top:32%; width:88%; height:52%; border:2px dashed var(--accent); background:rgba(99,102,241,.12); box-shadow:0 0 16px rgba(99,102,241,.3), inset 0 0 20px rgba(99,102,241,.1); border-radius:6px; opacity:0; transform:scale(.95); transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1) }
.ways .cdesk-scene.on .snip-box { opacity:1; transform:none }
.ways .snip-dim { position:absolute; right:6px; bottom:4px; font:600 9px var(--font-mono); color:var(--cream); background:var(--accent); padding:2px 5px; border-radius:4px }
.ways .snip-crosshair { position:absolute; width:16px; height:16px; border-left:2px solid #fff; border-top:2px solid #fff; left:4%; top:30%; opacity:0; transition:opacity .3s, transform .6s cubic-bezier(.2,.8,.2,1) }
.ways .cdesk-scene.on .snip-crosshair { opacity:1; transform:translate(2px,2px) }

/* Tab 2: OCR Laser Scan */
.ways .ocr-card { width:88%; max-width:440px; border-radius:10px; background:var(--c-101322); border:1px solid var(--c-white-12); box-shadow:0 20px 50px var(--c-black-60); overflow:hidden; position:relative }
.ways .ocr-bar { padding:8px 12px; background:var(--c-0a0d1b); border-bottom:1px solid var(--c-white-7); display:flex; justify-content:space-between; align-items:center }
.ways .ocr-tag { font:600 10px var(--font-mono); color:var(--accent); letter-spacing:.05em }
.ways .ocr-info { font:10px var(--font-mono); color:var(--mist) }
.ways .ocr-preview { position:relative; padding:14px; background:var(--c-0c0f1c); min-height:100px; display:grid; gap:8px }
.ways .ocr-laser { position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent); box-shadow:0 0 12px var(--accent), 0 0 20px rgba(99,102,241,.8); opacity:0; pointer-events:none; z-index:3 }
.ways .cdesk-scene.on .ocr-laser { animation:laserScan 2.4s ease-in-out infinite }
@keyframes laserScan { 0% { top:4%; opacity:0 } 15% { opacity:1 } 85% { opacity:1 } 100% { top:94%; opacity:0 } }
.ways .ocr-line-box { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border-radius:5px; font:11px var(--font-mono); color:var(--cream); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); opacity:.4; transition:opacity .4s ease, border-color .4s, background .4s }
.ways .ocr-line-box.active, .ways .cdesk-scene.on .ocr-line-box { opacity:1; border-color:rgba(76,200,140,.4); background:rgba(76,200,140,.07) }
.ways .ocr-line-box .conf { font:600 9px var(--font-mono); color:var(--c-4cc88c); padding:1px 4px; border-radius:3px; background:rgba(76,200,140,.15) }
.ways .ocr-status-foot { padding:7px 12px; background:var(--c-0a0d1b); border-top:1px solid var(--c-white-7); font:500 10.5px var(--sys); color:var(--mist); display:flex; align-items:center; gap:6px }
.ways .ok-icon { color:var(--c-4cc88c); font-weight:700 }

/* Tab 3: Paste Window */
.ways .paste-window { width:88%; max-width:440px; border-radius:10px; background:var(--c-101322); border:1px solid var(--c-white-12); box-shadow:0 20px 50px var(--c-black-60); overflow:hidden }
.ways .paste-bar { padding:8px 12px; background:var(--c-0a0d1b); border-bottom:1px solid var(--c-white-7); display:flex; align-items:center; gap:8px }
.ways .p-dot { width:7px; height:7px; border-radius:50%; background:var(--c-4cc88c) }
.ways .p-title { font:500 10.5px var(--font-mono); color:var(--mist) }
.ways .paste-body { padding:12px 14px; display:grid; gap:8px }
.ways .paste-prompt { font:500 11px var(--sys); color:var(--mist) }
.ways .paste-code { border-radius:7px; background:var(--c-080a14); border:1px solid var(--c-white-8); overflow:hidden }
.ways .code-header { padding:5px 10px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--c-white-6); display:flex; justify-content:space-between; font:10px var(--font-mono); color:var(--muted) }
.ways .copy-tag { color:var(--c-4cc88c) }
.ways .code-pre { margin:0; padding:8px 10px; font:10.5px/1.45 var(--font-mono); color:var(--cream); overflow-x:auto }
.ways .c-h { color:var(--accent); font-weight:600 }
.ways .c-k { color:var(--muted) }
.ways .c-err { color:#f87171 }
.ways .paste-foot { padding:6px 12px; background:var(--c-0a0d1b); border-top:1px solid var(--c-white-7); font:500 10px var(--sys); color:var(--mist); display:flex; align-items:center; gap:6px }

/* Tab 4: History Panel */
.ways .hist-card { width:88%; max-width:440px; border-radius:10px; background:var(--c-101322); border:1px solid var(--c-white-12); box-shadow:0 20px 50px var(--c-black-60); overflow:hidden }
.ways .hist-bar { padding:8px 12px; background:var(--c-0a0d1b); border-bottom:1px solid var(--c-white-7); display:flex; justify-content:space-between; align-items:center; gap:8px }
.ways .hist-search { font:11px var(--font-mono); color:var(--muted); display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.04); padding:4px 9px; border-radius:6px; border:1px solid var(--c-white-7); flex:1 }
.ways .hist-export-btn { font:600 11px var(--sys); color:var(--c-night); background:var(--cream); border:0; border-radius:6px; padding:4px 10px; cursor:pointer; transition:transform .15s, background .15s; white-space:nowrap }
.ways .hist-export-btn:hover { background:#fff }
.ways .hist-export-btn.press { transform:scale(.92) }
.ways .hist-list { padding:8px 12px; display:grid; gap:6px }
.ways .hist-item { padding:7px 10px; border-radius:6px; background:rgba(255,255,255,.03); border:1px solid var(--c-white-6); display:grid; gap:2px; transition:border-color .2s }
.ways .hist-item.hi { border-color:var(--c-thread-45); background:rgba(99,102,241,.08) }
.ways .hi-time { font:500 9.5px var(--font-mono); color:var(--accent) }
.ways .hi-txt { font:11px var(--font-mono); color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ways .hist-toast { padding:6px 12px; background:var(--c-0a0d1b); border-top:1px solid var(--c-white-7); font:500 10px var(--sys); color:var(--mist); display:flex; align-items:center; gap:6px }
.ways .ok-chk { color:var(--c-4cc88c); font-weight:700 }

/* Tab 5: System Tray & Toast */
.ways .tray-stage { width:88%; max-width:440px; display:grid; gap:12px }
.ways .tray-toast { border-radius:10px; background:linear-gradient(150deg,var(--c-12141f-95),var(--c-080a12-92)); border:1px solid var(--c-white-14); box-shadow:0 20px 50px var(--c-black-60); padding:12px 14px; display:grid; gap:5px; transform:translateY(8px); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s }
.ways .cdesk-scene.on .tray-toast { transform:none; opacity:1 }
.ways .tt-header { display:flex; align-items:center; gap:7px; font:500 10.5px var(--sys); color:var(--mist) }
.ways .tt-app { font-weight:600; color:var(--cream) }
.ways .tt-time { margin-left:auto; font-size:10px; color:var(--muted) }
.ways .tt-title { font:600 13px var(--sys); color:var(--cream) }
.ways .tt-desc { font:11px/1.4 var(--sys); color:var(--mist) }
.ways .tt-state-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font:600 10px var(--font-mono); margin-top:4px; width:max-content; background:rgba(76,200,140,.12); border:1px solid rgba(76,200,140,.3); color:var(--c-4cc88c); transition:background .3s, border-color .3s, color .3s }
.ways .tt-state-pill.paused { background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.3); color:#fbbf24 }
.ways .tt-dot { width:6px; height:6px; border-radius:50%; background:currentColor }
.ways .taskbar-mock { height:36px; border-radius:8px; background:rgba(10,13,27,.85); border:1px solid var(--c-white-8); display:flex; align-items:center; justify-content:space-between; padding:0 12px }
.ways .tb-icons { display:flex; gap:8px }
.ways .tb-ic { width:16px; height:16px; border-radius:3px; background:rgba(255,255,255,.1) }
.ways .tb-ic.win { background:var(--accent) }
.ways .tb-tray { display:flex; align-items:center; gap:10px }
.ways .tray-clipotxt { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:4px; background:rgba(99,102,241,.18); border:1px solid rgba(99,102,241,.4); box-shadow:0 0 8px rgba(99,102,241,.3) }
.ways .tb-clock { font:500 10.5px var(--font-mono); color:var(--mist) }

@media (max-width:980px) {
  .ways .pair { grid-template-columns:1fr } .ways .or { display:none }
}
@media (max-width:640px) {
  .ways .fork { padding:0 18px 12vh } .ways .card { padding:14px 14px 20px }
  .ways .cdesk-pill, .ways .cdesk-badge { top:8px; font-size:10px; padding:4px 10px }
  .ways .term-window, .ways .ocr-card, .ways .paste-window, .ways .hist-card, .ways .tray-stage { width:96% }
  .ways .tabs button { padding:8px; font-size:12px } .ways .tabs button small { font-size:10.5px }
}
@media (prefers-reduced-motion: reduce) {
  .js .ways .reveal { opacity:1; transform:none; transition:none }
  .ways .card, .ways .card::before, .ways .card::after, .ways .btn, .ways .shots img, .ways .cdesk-scene, .ways .tray-toast { transition:none } .ways .card:hover, .ways .btn:hover { transform:none }
  .ways .tabs button.on i { animation:none; transform:none }
}
/* "Did it install?" under the Companion download */
.didit { margin-top:14px; color:var(--muted); font-size:13px }
.didit summary { cursor:pointer; color:var(--accent); width:max-content }
.didit-body { margin-top:10px }
.didit-body p { margin:0 0 10px }
.didit-steps { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; padding:0 }
.didit-steps li { display:flex; flex-direction:column; gap:6px; font-size:12.5px }
.didit-steps img { display:block; width:160px; height:auto; border-radius:6px; border:1px solid var(--line) }
.didit-no { font:inherit; font-size:12.5px; color:inherit; background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer }
.didit-no:hover { border-color:var(--accent); color:var(--c-white) }
.didit-no:disabled { opacity:.5; cursor:wait }
.didit-note { margin-top:10px }
/* "Still stuck?", the follow-up question, and the Mac box under the student downloads */
.didit-body b { color:var(--cream); font-weight:600 }
.didit-body a { color:var(--accent) }
.didit .didit-h { margin:4px 0 8px; color:var(--cream); font-weight:600 }
.ways .card .didit-fixes { margin:0 0 12px; gap:7px }
.ways .card .didit-fixes li { display:block; font-size:12.5px; line-height:1.5; color:var(--muted) }
.ways .card .didit li::before { content:none }
.didit-ask { margin-top:4px }
.didit-saw { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }
.didit-saw button, .didit-send, .didit-copy { font:inherit; font-size:12.5px; color:inherit; background:transparent; border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer }
.didit-saw button:hover, .didit-copy:hover { border-color:var(--accent); color:var(--c-white) }
.didit-saw button[aria-pressed="true"] { border-color:var(--accent); background:var(--c-thread-14); color:var(--c-white) }
.didit .didit-tip { padding:8px 11px; border-left:2px solid var(--accent); background:var(--c-thread-6); border-radius:0 6px 6px 0 }
.didit-say { display:grid; gap:5px; margin-bottom:10px; font-size:12.5px }
.didit-say input { font:inherit; font-size:13px; color:var(--cream); background:var(--c-cream-4); border:1px solid var(--line2); border-radius:8px; padding:8px 10px; width:100%; max-width:360px }
.didit-say input:focus { outline:none; border-color:var(--accent) } .didit-say input:focus-visible { outline:2px solid var(--brass); outline-offset:2px }
.didit-send { color:var(--c-night); background:var(--cream); border-color:var(--cream); font-weight:600 }
.didit-send:hover { background:var(--c-white) }
.didit-send:disabled { opacity:.5; cursor:wait }
.didit-cmd { display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:7px 8px 7px 12px; width:max-content; max-width:100%; border:1px solid var(--line2); border-radius:8px; background:var(--c-black-35) }
.didit-cmd code { font:13px var(--font-mono); color:var(--cream); white-space:pre }
.didit summary:focus-visible, .didit button:focus-visible { outline:2px solid var(--brass); outline-offset:3px }
.ways .desk .b1 { z-index:3 }