@font-face{font-family:Poppins;src:url(/assets/Poppins-Regular.ttf)}
@font-face{font-family:Poppins;src:url(/assets/Poppins-SemiBold.ttf);font-weight:600}
@font-face{font-family:Poppins;src:url(/assets/Poppins-Bold.ttf);font-weight:700}
[data-motion=paused] *{animation-play-state:paused!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.seg-hit:focus-visible{stroke:#00ffbc;stroke-width:6;outline:none}

  :root{
    --gable:#1B2F3C;
    --gable-light:#243d4e;
    --gable-lighter:#2d4f64;
    --gable-deep:#0F2230;
    --turquoise:#00FFBC;
    --dodger:#00B1FF;
    --cerulean:#0084B2;
    --malibu:#5CD5FF;
    --meadow:#17CE95;
    --ink:#1B2F3C;
    --muted:#5A6B7A;
    --line:#E2E9EE;
    --accent:#007A5E;
    --accent-2:#0084B2;
    --amber:#C77B30;
    --slate:#8FA4B3;
    --cloud:#D4DFE6;
    --white:#FFFFFF;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%}
  body{
    background:radial-gradient(ellipse at 50% -10%, #1E3441 0%, #14242E 48%, #0B161D 100%);
    font-family:'Poppins',system-ui,-apple-system,sans-serif;
    color:#fff;overflow:hidden;
    -webkit-font-smoothing:antialiased;
    touch-action:manipulation;
  }

  /* ---------- shell ---------- */
  .app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:18px 26px 20px;gap:12px}
  .topbar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
  .brandmark{display:flex;align-items:center;gap:13px}
  .brandmark .logo{width:34px;height:24px;flex:0 0 auto}
  .brandmark .titles h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.1}
  .brandmark .titles p{margin:2px 0 0;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--slate);font-weight:600}
  .topbar .steps{display:flex;gap:8px;align-items:center;font-size:11.5px;color:#93AAB8;font-family:'JetBrains Mono',monospace}
  .topbar .steps b{color:#fff;font-weight:500}
  .topbar .steps .sep{opacity:.35}

  .main{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:24px;min-height:0}

  /* ---------- left: wheel + tray ---------- */
  .left{display:flex;flex-direction:column;min-height:0;gap:10px}
  .stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
  svg#wheel{width:100%;height:100%;max-height:100%;overflow:visible;display:block}

  .seg-hit{fill:transparent;cursor:pointer}
  .seg-tile{pointer-events:none;transition:opacity .3s, filter .3s}
  .seg-outline{fill:none;stroke:var(--dodger);stroke-width:3.5;opacity:0;transition:opacity .3s;
    filter:drop-shadow(0 0 12px rgba(0,177,255,.8));pointer-events:none}
  .seg-outline.on{opacity:1}
  .seg-usedmark{fill:none;stroke:rgba(92,213,255,.6);stroke-width:2;opacity:0;transition:opacity .35s;pointer-events:none}
  .seg-usedmark.on{opacity:1}
  .seg-dim{opacity:0;transition:opacity .38s;pointer-events:none}
  .seg-dim.on{opacity:.74}
  .seg-dim.half{opacity:.44}
  .seg-label{pointer-events:none;font-family:'Poppins',sans-serif;font-weight:600;fill:#22323D;letter-spacing:.2px}
  .seg-icon{pointer-events:none;stroke:#1B2F3C;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ring-tag{pointer-events:none;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
    letter-spacing:2.2px;text-transform:uppercase;fill:#7E97A6}
  .core-title{font-weight:700;font-size:27px;fill:#1B2F3C;letter-spacing:-.4px;transition:opacity .3s}
  .core-sub{font-weight:400;font-size:12.4px;fill:#55697A;transition:opacity .3s}
  .core-kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:2px;fill:#8AA0AE}
  .core-kicker.match{fill:#0084B2}

  .arc-link{fill:none;stroke:var(--dodger);stroke-width:4;stroke-linecap:round;opacity:.95;
    stroke-dasharray:7 9;animation:arcflow 1.1s linear infinite;pointer-events:none;
    filter:drop-shadow(0 0 9px rgba(0,177,255,.6))}
  .arc-link.soft{stroke:#8FB6CC;opacity:.55;filter:none;animation-duration:1.8s}
  .arc-node{fill:var(--malibu);pointer-events:none;filter:drop-shadow(0 0 7px rgba(92,213,255,.85))}
  .arc-node.soft{fill:#8FB6CC;filter:none}
  @keyframes arcflow{to{stroke-dashoffset:-16}}

  .tray{flex:0 0 auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
    border-radius:16px;padding:15px 19px 17px;min-height:132px;backdrop-filter:blur(3px)}
  .tray-head{display:flex;align-items:baseline;gap:12px;margin-bottom:2px}
  .tray-head .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;position:relative;top:-1px}
  .tray-head h2{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.1px}
  .tray-head .ring{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:1.6px;text-transform:uppercase;color:var(--slate)}
  .tray-blurb{margin:5px 0 13px;font-size:12.8px;line-height:1.62;color:#A9BECB;font-weight:300;max-width:88ch}
  .tray-items{display:flex;flex-wrap:wrap;gap:8px}
  .cap{display:inline-flex;align-items:center;gap:8px;padding:9px 9px 9px 13px;border-radius:999px;
    background:#fff;color:var(--ink);font-size:13px;font-weight:500;cursor:grab;border:1.5px solid transparent;
    transition:transform .13s, box-shadow .13s, opacity .13s;user-select:none;box-shadow:0 3px 10px rgba(0,0,0,.22);
    animation:capIn .3s cubic-bezier(.34,1.56,.64,1) backwards}
  .cap:nth-child(2){animation-delay:.04s}.cap:nth-child(3){animation-delay:.08s}
  .cap:nth-child(4){animation-delay:.12s}.cap:nth-child(5){animation-delay:.16s}
  @keyframes capIn{from{transform:translateY(9px) scale(.9);opacity:0}to{transform:none;opacity:1}}
  .cap:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.32)}
  .cap:active{cursor:grabbing}
  .cap .plus{font-family:'JetBrains Mono',monospace;font-weight:700;opacity:.4;font-size:13px}
  .cap.used{opacity:.4;cursor:default;background:rgba(255,255,255,.3);box-shadow:none;animation:none}
  .cap.used:hover{transform:none}
  .cap.dragging{opacity:.35}
  .tray-empty{font-size:13.2px;color:#93AAB8;font-weight:300;padding:14px 2px;line-height:1.68}
  .tray-empty b{color:#DCE7ED;font-weight:600}

  /* ---------- right: canvas + result ---------- */
  .right{background:#fff;color:var(--ink);border-radius:20px;padding:0;display:flex;flex-direction:column;
    min-height:0;box-shadow:0 26px 70px rgba(0,0,0,.42)}
  .right-head{padding:22px 26px 0;flex:0 0 auto}
  .right-head .eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
  .right-head h2{margin:8px 0 4px;font-size:21px;font-weight:700;letter-spacing:-.35px}
  .right-head p{margin:0;font-size:12.8px;line-height:1.6;color:var(--muted);font-weight:300}

  .canvas{margin:14px 18px 0;flex:0 0 auto;border:2px dashed #CFDBE3;border-radius:15px;
    min-height:118px;padding:13px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;
    transition:border-color .18s, background .18s, box-shadow .3s;background:#FAFCFD}
  .canvas.over{border-color:var(--accent);background:#F0FAF6}
  .canvas.has{align-content:flex-start;border-style:solid;border-color:#E2E9EE}
  .canvas.matched{border-color:rgba(0,122,94,.5);box-shadow:0 0 0 4px rgba(0,122,94,.08)}
  .canvas-hint{font-size:13px;color:#93A6B4;text-align:center;width:100%;line-height:1.72;font-weight:300}
  .canvas-hint b{color:var(--ink);font-weight:600}
  .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 9px 8px 12px;border-radius:11px;
    font-size:12.4px;font-weight:600;color:#fff;box-shadow:0 3px 9px rgba(27,47,60,.2);
    animation:pop .25s cubic-bezier(.34,1.56,.64,1)}
  @keyframes pop{from{transform:scale(.78);opacity:0}to{transform:scale(1);opacity:1}}
  .chip .ringtag{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:1px;
    text-transform:uppercase;opacity:.72;display:block;margin-bottom:1px}
  .chip .x{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.24);display:grid;
    place-items:center;cursor:pointer;font-size:11px;line-height:1;flex:0 0 auto;font-weight:700}
  .chip .x:hover{background:rgba(255,255,255,.45)}
  .arrow{color:#B6C6D1;font-size:15px;line-height:1;user-select:none}

  .actions{padding:11px 18px 0;display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}
  .btn{font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;padding:8px 15px;border-radius:999px;
    border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .16s}
  .btn:hover{border-color:var(--accent);color:var(--accent)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn.primary:hover{background:#00654E;border-color:#00654E;color:#fff}
  .btn:disabled{opacity:.4;cursor:default}
  .btn:disabled:hover{border-color:var(--line);color:var(--muted)}
  .kbd-hint{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:#A9B9C4;align-self:center}
  .kbd-hint b{color:#7C919F;font-weight:500;border:1px solid #DCE5EB;border-radius:4px;padding:1px 5px}

  .result{flex:1 1 auto;overflow-y:auto;padding:16px 26px 26px;min-height:0}
  .result::-webkit-scrollbar{width:7px}
  .result::-webkit-scrollbar-thumb{background:#D3DEE5;border-radius:4px}

  .verdict{border-radius:14px;padding:19px 21px;background:#F3FAF7;border-left:4px solid var(--accent);
    animation:riseIn .35s ease backwards}
  @keyframes riseIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
  .verdict.generic{background:#FFF8F0;border-left-color:var(--amber)}
  .verdict.empty{background:#F6F9FB;border-left-color:#C3D2DC}
  .verdict .tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:2px;
    text-transform:uppercase;color:var(--accent)}
  .verdict.generic .tag{color:var(--amber)}
  .verdict.empty .tag{color:#8FA3B0}
  .verdict h3{margin:8px 0 10px;font-size:23px;font-weight:700;letter-spacing:-.45px;line-height:1.15}
  .verdict p{margin:0 0 12px;font-size:13.8px;line-height:1.7;color:#33475A;font-weight:300}
  .verdict p:last-child{margin-bottom:0}
  .verdict p strong{font-weight:600;color:var(--ink)}
  .eq{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);
    background:rgba(27,47,60,.05);border-radius:8px;padding:11px 13px;line-height:1.85;margin:0 0 14px}
  .eq b{color:var(--ink);font-weight:700}

  .block{margin-top:18px;animation:riseIn .35s ease backwards}
  .block:nth-of-type(2){animation-delay:.06s}
  .block:nth-of-type(3){animation-delay:.12s}
  .block:nth-of-type(4){animation-delay:.18s}
  .block h4{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
    color:#8B9EAC;font-family:'JetBrains Mono',monospace}
  .block p{margin:0;font-size:13.6px;line-height:1.7;color:#33475A;font-weight:300}
  .block .tools{display:flex;flex-wrap:wrap;gap:6px}
  .block .tools span{font-size:11.6px;font-weight:500;padding:5px 11px;border-radius:999px;
    background:#EEF4F8;color:#3C5567}
  .hookup{background:#F5F9FB;border-radius:11px;padding:14px 16px;border-left:3px solid var(--accent-2)}
  .hookup p{font-size:13.3px}

  .quickstarts{margin-top:16px}
  .qs{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);
    border-radius:11px;margin-bottom:7px;cursor:pointer;transition:all .16s;background:#fff}
  .qs:hover{border-color:var(--accent-2);background:#F5FBFD;transform:translateX(2px)}
  .qs .go{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--accent-2);color:#fff;
    display:grid;place-items:center;font-size:11px;font-weight:700}
  .qs .eqline{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);line-height:1.5}
  .qs .eqline b{color:var(--ink)}

  .nudges{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}
  .nudge{display:flex;gap:11px;align-items:flex-start;padding:10px 2px;font-size:13.1px;line-height:1.6;
    color:#33475A;font-weight:300;cursor:pointer;border-radius:9px;transition:background .15s}
  .nudge:hover{background:#F5F9FB}
  .nudge .go{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--accent-2);color:#fff;
    display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px}
  .nudge b{font-weight:600;color:var(--ink)}
  .nudge em{font-style:normal;color:var(--accent-2);font-weight:600}

  .footnote{margin-top:20px;font-size:11.8px;line-height:1.7;color:#8B9EAC;font-weight:300}

  /* ---------- tooltip ---------- */
  .tip{position:fixed;z-index:60;background:#0F2230;color:#fff;padding:8px 12px;border-radius:9px;
    font-size:11.8px;line-height:1.45;max-width:230px;pointer-events:none;display:none;font-weight:400;
    box-shadow:0 8px 24px rgba(0,0,0,.45)}
  .tip b{display:block;font-weight:600;margin-bottom:2px}
  .tip span{color:#9FB6C4;font-size:10.5px;font-family:'JetBrains Mono',monospace;letter-spacing:.8px;
    text-transform:uppercase}

  /* ---------- ghost + fly ---------- */
  .ghost{position:fixed;z-index:70;pointer-events:none;padding:8px 13px;border-radius:999px;background:#fff;
    color:var(--ink);font-size:12.6px;font-weight:500;box-shadow:0 10px 26px rgba(0,0,0,.4);display:none}
  .flyer{position:fixed;z-index:80;pointer-events:none;padding:8px 13px;border-radius:999px;background:#fff;
    color:var(--ink);font-size:12.6px;font-weight:500;box-shadow:0 10px 26px rgba(0,0,0,.4)}

  /* ---------- capability info card ---------- */
  .cap .info{width:19px;height:19px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    background:rgba(27,47,60,.08);color:#5A7080;font-family:'JetBrains Mono',monospace;font-size:11px;
    font-weight:700;line-height:1;transition:all .15s;cursor:pointer}
  .cap .info:hover{background:var(--cerulean);color:#fff}
  .cap.used .info{opacity:.4}
  .infocard-backdrop{position:fixed;inset:0;z-index:95;background:rgba(8,16,22,.6);display:none;
    align-items:center;justify-content:center;padding:24px}
  .infocard-backdrop.vis{display:flex}
  .infocard{background:#1F3542;border:1px solid rgba(92,213,255,.22);border-radius:16px;
    padding:22px 24px 20px;max-width:430px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.55);
    animation:riseIn .28s ease}
  .infocard .ic-ring{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
    letter-spacing:1.8px;text-transform:uppercase}
  .infocard h3{margin:7px 0 12px;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.3px;line-height:1.2}
  .infocard .ic-desc{font-size:13.3px;line-height:1.7;color:var(--cloud);font-weight:300;margin:0 0 14px}
  .infocard .ic-gives{font-size:12.4px;line-height:1.65;color:var(--slate);font-weight:300;margin:0 0 16px;
    padding:11px 13px;background:rgba(0,177,255,.07);border-left:3px solid var(--dodger);border-radius:8px}
  .infocard .ic-gives b{color:var(--malibu);font-weight:600}
  .infocard .ic-foot{display:flex;gap:9px;justify-content:flex-end}
  .ic-btn{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;padding:8px 16px;
    border-radius:999px;border:1px solid rgba(255,255,255,.16);background:none;color:var(--cloud);
    cursor:pointer;transition:all .16s}
  .ic-btn:hover{border-color:rgba(255,255,255,.35)}
  .ic-btn.primary{background:var(--cerulean);border-color:var(--cerulean);color:#fff}
  .ic-btn.primary:hover{background:var(--dodger);border-color:var(--dodger)}

  @media (max-width:1420px){
    .main{grid-template-columns:minmax(0,1fr) 392px}
  }
  @media (max-width:1120px), (orientation:portrait){
    body{overflow:auto;overflow-x:hidden}
    .app{height:auto;min-height:100vh;min-height:100dvh}
    .main{grid-template-columns:1fr}
    .stage{min-height:0}
    svg#wheel{width:min(100%, 92vh);height:auto;aspect-ratio:1/1;margin:0 auto}
    .right{min-height:0}
    .result{overflow-y:visible;max-height:none}
    .topbar .steps{display:none}
  }
  /* phones */
  @media (max-width:700px){
    .app{padding:12px 14px 16px;gap:10px}
    .brandmark .titles h1{font-size:17px}
    .brandmark .titles p{font-size:9.5px;letter-spacing:1.2px}
    .tray{padding:13px 14px 15px;min-height:0}
    .tray-head{flex-wrap:wrap;gap:8px}
    .tray-head h2{font-size:13.5px}
    .tray-blurb{font-size:12.2px}
    .cap{font-size:12.4px;padding:9px 8px 9px 12px;min-height:38px}
    .right-head{padding:18px 18px 0}
    .right-head h2{font-size:18px}
    .canvas{margin:12px 14px 0;min-height:96px;padding:11px}
    .chip{font-size:11.6px;padding:8px 8px 8px 11px}
    .actions{padding:10px 14px 0}
    .btn{min-height:38px;padding:8px 14px}
    .kbd-hint{display:none}
    .result{padding:14px 18px 20px}
    .verdict{padding:16px 16px}
    .verdict h3{font-size:19.5px}
    .verdict p{font-size:13.2px}
    .block p{font-size:13px}
    .eq{font-size:10.5px}
    .infocard{padding:18px 18px 16px;border-radius:14px}
    .infocard h3{font-size:17px}
    .tour-tip{max-width:calc(100vw - 32px)}
    .tip{display:none !important}   /* hover tooltips have no place on touch */
  }

/* Website adaptation: ordinary page scrolling and native controls. */
html, body{height:auto;overflow:visible}
.app{height:auto;min-height:100dvh;max-width:1600px;margin:auto}
.main{align-items:start}
svg#wheel{height:auto;aspect-ratio:1/1;max-height:none}
.result{overflow:visible;max-height:none}
.topbar{flex-wrap:wrap;gap:16px}.topbar .steps{display:none}
.activity-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}
a{color:#5CD5FF}.activity-note{font-size:13px;color:#D4DFE6;margin:0;max-width:80ch}
.activity-help{font-size:13px;line-height:1.7;color:#D4DFE6}
.activity-help summary{cursor:pointer;color:white;padding:10px 0}
.segment-picker{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600}
select{width:100%;min-height:44px;padding:10px;font:inherit;color:#1B2F3C;background:white;border-radius:6px}
.cap-pair{display:inline-flex;align-items:center;gap:4px;max-width:100%}
.cap{font-family:inherit;text-align:left;white-space:normal;min-height:44px}
.cap-info{flex-shrink:0;width:44px;height:44px;border:1px solid #93AAB8;border-radius:50%;background:transparent;color:white;font:600 16px Poppins,sans-serif;cursor:pointer}
.qs,.nudge{width:100%;font-family:inherit;text-align:left}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #00FFBC;outline-offset:4px}
.infocard-backdrop{inset:auto;margin:auto;padding:0;width:calc(100% - 32px);max-width:480px;max-height:calc(100dvh - 32px);border:0;border-radius:16px;color:white;background:#1F3542;overflow:auto}
.infocard-backdrop[open]{display:block}.infocard{max-width:none}
.infocard-backdrop::backdrop{background:rgba(8,16,22,.8)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-motion=paused] *{animation:none!important}
@media(max-width:1120px){.main{grid-template-columns:1fr}}
@media(max-width:420px){.brandmark .logo{display:none}.actions{flex-wrap:wrap}.btn{white-space:normal}.chip{max-width:100%;overflow-wrap:anywhere}}
/* Legible labels on the light canvas/result surfaces. */
.canvas-hint,.canvas-hint b,.verdict.empty .tag,.footnote{color:#536B7B}
.result h4{color:#536B7B!important}
.chip .ringtag{opacity:1}.chip .x{width:28px;height:28px;border:0;color:white;background:rgba(0,0,0,.25)}
.nudge{background:white;border:0;border-bottom:1px solid var(--line)}
.nudge em{color:#006C92}.nudge .go{background:#006C92}
.verdict.generic .tag{color:#8B4B10}
.ic-btn.primary{background:#006C92;border-color:#006C92}
.ic-btn.primary:hover{background:#005574;border-color:#005574}
.canvas-link{font-size:13px;padding:10px 0}
.btn{transition:border-color .16s,color .16s,background-color .16s}