:root{
    color-scheme:dark;
    --ink:#090806;
    --pitch:#0e0c09;
    --forge:#15120d;
    --slab:#1a1610;
    --slab2:#211c14;
    --steel:#342d22;
    --steel-lit:#4a4030;
    --gold:#c8a24a;
    --gold2:#edcf77;
    --gold-dim:#8e7439;
    --silver:#aaa99f;
    --bone:#eee8da;
    --mute:#938b7c;
    --purple:#a77be6;
    --moon:#cabbe8;
    --good:#a9c98e;
    --bad:#c77979;
    --amber:#d09538;
    --shadow:0 26px 80px rgba(0,0,0,.52);
    --ease:cubic-bezier(.22,1,.36,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    min-height:100vh;
    color:var(--bone);
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.5;
    background:
      radial-gradient(ellipse at 50% -10%,rgba(200,162,74,.12),transparent 45%),
      radial-gradient(ellipse at 86% 20%,rgba(167,123,230,.07),transparent 34%),
      var(--ink);
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.42;
    background:
      repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
      repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 5px);
    mask-image:radial-gradient(ellipse at 50% 24%,rgba(0,0,0,.92),transparent 84%);
  }

  button,input,select{font:inherit;color:inherit;}
  button{touch-action:manipulation;cursor:pointer;}
  input,select{min-width:0;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--gold2);outline-offset:3px;}
  [hidden]{display:none!important;}

  /* EUTOPIA site bar */
  .eu-topbar{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    height:52px;padding:0 clamp(13px,3vw,22px);
    border-bottom:1px solid rgba(168,120,255,.18);
    background:rgba(10,4,22,.88);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    font-family:"Inter","Segoe UI",system-ui,sans-serif;
  }
  .eu-topbar a{text-decoration:none;}
  .eu-back{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 13px 7px 10px;
    border:1px solid rgba(168,120,255,.18);
    border-radius:9px;background:rgba(255,255,255,.025);
    color:#E8DFF5;font-size:.85rem;font-weight:650;
    transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s;
  }
  .eu-back:hover{
    color:#F6F1FF;background:rgba(255,91,225,.08);
    border-color:rgba(255,91,225,.34);
    box-shadow:0 0 16px rgba(157,92,255,.12);
    transform:translateY(-1px);
  }
  .eu-back svg{transition:transform .25s var(--ease);}
  .eu-back:hover svg{transform:translateX(-3px);}
  .eu-brand{
    display:flex;align-items:baseline;gap:6px;
    font-family:"Archivo","Segoe UI",system-ui,sans-serif;
    font-weight:800;font-size:.78rem;letter-spacing:.16em;
  }
  .eu-brand span{color:#F6F1FF;}
  .eu-brand em{
    font-style:normal;
    background:linear-gradient(100deg,#FF5BE1,#9D5CFF 45%,#4CA8FF 78%,#45E5F0);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .eu-yt{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 13px;border-radius:9px;
    border:1px solid rgba(255,120,235,.34);
    background:linear-gradient(180deg,rgba(255,91,225,.16),rgba(157,92,255,.09));
    color:#F6F1FF;font-size:.8rem;font-weight:600;
    transition:box-shadow .25s,border-color .25s,transform .25s var(--ease);
  }
  .eu-yt:hover{transform:translateY(-1px);border-color:#FF5BE1;box-shadow:0 0 20px rgba(255,91,225,.34);}

  .wrap{
    width:min(1050px,100%);
    margin:0 auto;
    padding:34px 18px 72px;
  }

  /* Header */
  .mast{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:34px;
    margin-bottom:27px;
    padding-bottom:27px;
    border-bottom:1px solid var(--steel);
  }
  .kicker{
    margin:0 0 7px;
    color:var(--gold-dim);
    font-size:.68rem;font-weight:850;letter-spacing:.25em;text-transform:uppercase;
  }
  h1{
    margin:0;
    max-width:760px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.1rem,5vw,3.5rem);
    font-weight:600;line-height:1.04;letter-spacing:-.025em;
    color:var(--gold2);
  }
  .dek{
    max-width:720px;
    margin:12px 0 0;
    color:var(--mute);
    font-size:.95rem;
  }
  .tree-mark{
    position:relative;
    width:90px;height:90px;
    display:grid;place-items:center;
    border:1px solid var(--steel-lit);border-radius:50%;
    background:radial-gradient(circle,rgba(200,162,74,.12),transparent 60%),var(--pitch);
    box-shadow:0 0 36px rgba(200,162,74,.07);
  }
  .tree-mark::before,.tree-mark::after{
    content:"";position:absolute;border:1px solid rgba(200,162,74,.22);border-radius:50%;
    animation:orbit 10s linear infinite;
  }
  .tree-mark::before{inset:12px;}
  .tree-mark::after{inset:24px;animation-direction:reverse;animation-duration:7s;}
  .tree-mark svg{width:46px;height:46px;color:var(--gold2);}
  @keyframes orbit{to{transform:rotate(360deg);}}

  .assumption{
    display:flex;align-items:flex-start;gap:10px;
    margin:0 0 20px;padding:11px 13px;
    border:1px solid rgba(208,149,56,.30);
    border-left:3px solid var(--amber);border-radius:3px;
    background:rgba(208,149,56,.05);
    color:#ccb993;font-size:.79rem;
  }
  .assumption strong{color:#eed4a0;}

  /* Main layout */
  .calc-grid{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:18px;
    align-items:start;
  }
  .panel{
    border:1px solid var(--steel);border-radius:3px;
    background:linear-gradient(160deg,rgba(255,255,255,.018),transparent 34%),linear-gradient(180deg,var(--slab),var(--pitch));
    box-shadow:var(--shadow);
  }
  .panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:15px 17px;border-bottom:1px solid var(--steel);
    background:rgba(0,0,0,.18);
  }
  .panel-head h2{
    margin:0;color:var(--gold2);
    font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;font-weight:600;
  }
  .panel-head span{
    color:var(--mute);font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  }
  .panel-body{padding:17px;}

  .section{padding:1px 0;}
  .section + .section{
    margin-top:20px;padding-top:20px;border-top:1px solid var(--steel);
  }
  .section-top{
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    margin-bottom:11px;
  }
  .section-label{
    margin:0;color:var(--gold-dim);
    font-size:.65rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;
  }
  .section-help{
    margin:4px 0 0;color:var(--mute);font-size:.76rem;
  }
  .mini-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}

  .text-btn{
    min-height:31px;padding:5px 9px;
    border:1px solid var(--steel);border-radius:2px;
    background:rgba(0,0,0,.18);color:#aaa294;
    font-size:.68rem;font-weight:750;
  }
  .text-btn:hover{border-color:var(--gold-dim);color:var(--gold2);}
  .text-btn.danger:hover{border-color:#875255;color:#d7a3a3;}

  /* Saved setup */
  .saved-tree{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:13px 14px;
    border:1px solid rgba(200,162,74,.30);border-radius:3px;
    background:rgba(200,162,74,.045);
  }
  .saved-tree small{
    display:block;margin-bottom:3px;color:var(--gold-dim);
    font-size:.59rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
  }
  .saved-tree strong{font-size:.88rem;color:var(--bone);}
  .saved-tree span{color:var(--mute);font-size:.72rem;}
  .saved-tree button{
    flex:0 0 auto;
    padding:7px 10px;border:1px solid var(--steel-lit);border-radius:2px;
    background:var(--forge);color:var(--gold2);font-size:.7rem;font-weight:750;
  }

  /* Current setup cards */
  .net-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
  }
  .net-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:12px;
    border:1px solid var(--steel);border-radius:3px;background:rgba(0,0,0,.18);
  }
  .net-card[data-rarity="purple"]{--rarity:var(--purple);}
  .net-card[data-rarity="gold"]{--rarity:var(--gold2);}
  .net-card[data-rarity="full"]{--rarity:var(--moon);}
  .net-card::before{
    content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--rarity);opacity:.86;
  }
  .net-header{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    gap:10px;
    align-items:start;
    min-height:72px;
    margin-bottom:8px;
  }
  .net-visual{
    width:52px;height:64px;overflow:hidden;
    border:1px solid rgba(255,255,255,.08);border-radius:2px;
    background:rgba(0,0,0,.22);box-shadow:0 0 0 1px rgba(0,0,0,.22) inset;
  }
  .net-visual img{
    display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  }
  .net-copy{min-width:0;}
  .net-name{
    display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px;
  }
  .net-name strong{font-size:.86rem;}
  .net-dot{
    width:7px;height:7px;border-radius:50%;background:var(--rarity);box-shadow:0 0 8px var(--rarity);
  }
  .net-rate{min-height:36px;color:var(--mute);font-size:.67rem;line-height:1.35;}
  .net-card > .stepper{margin-top:auto;}

  .rarity-btn{
    display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:center;
  }
  .rarity-btn .net-visual{
    width:54px;height:66px;
  }
  .rarity-btn-copy{min-width:0;}


  .stepper{
    display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:5px;margin-top:9px;
  }
  .stepper button{
    height:34px;border:1px solid var(--steel);border-radius:2px;background:var(--forge);
    color:var(--gold2);font-size:1rem;
  }
  .stepper button:hover{border-color:var(--gold-dim);background:#1d1912;}
  .stepper input{
    width:100%;height:34px;padding:0 4px;
    border:1px solid var(--steel);border-radius:2px;background:#0c0a07;
    text-align:center;font-weight:750;outline:none;
  }
  .stepper input:focus{border-color:var(--gold);}

  .save-note{
    min-height:18px;margin:8px 0 0;color:#766f64;font-size:.66rem;
  }
  .save-note.is-saved{color:#9caf87;}

  /* Upgrade entry: all three rarities stay visible and editable */
  .upgrade-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
  }
  .upgrade-card{
    position:relative;
    padding:11px;
    border:1px solid var(--steel);
    border-radius:3px;
    background:rgba(0,0,0,.18);
    transition:border-color .18s,background .18s,transform .16s var(--ease),box-shadow .18s;
  }
  .upgrade-card:hover{
    transform:translateY(-1px);
    border-color:var(--steel-lit);
  }
  .upgrade-card.has-value{
    border-color:rgba(200,162,74,.48);
    background:linear-gradient(180deg,rgba(200,162,74,.09),rgba(0,0,0,.16));
    box-shadow:0 0 18px rgba(200,162,74,.045);
  }
  .upgrade-card[data-rarity="purple"]{--rarity:var(--purple);}
  .upgrade-card[data-rarity="gold"]{--rarity:var(--gold2);}
  .upgrade-card[data-rarity="full"]{--rarity:var(--moon);}
  .upgrade-card::before{
    content:"";
    position:absolute;
    left:-1px;top:-1px;bottom:-1px;width:2px;
    background:var(--rarity);
    opacity:.85;
  }
  .upgrade-head{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:9px;
    align-items:center;
    margin-bottom:9px;
  }
  .upgrade-head .net-visual{
    width:48px;
    height:59px;
  }
  .upgrade-head b{
    display:block;
    color:var(--bone);
    font-size:.8rem;
    line-height:1.2;
  }
  .upgrade-head span{
    display:block;
    margin-top:3px;
    color:var(--mute);
    font-size:.61rem;
    line-height:1.3;
  }
  .upgrade-card .field + .field{margin-top:8px;}
  .upgrade-card .field label{
    font-size:.62rem;
    color:#8f8779;
  }
  .upgrade-card .input-wrap input{
    height:35px;
    font-size:.78rem;
  }
  .upgrade-card .number-box input,
  .upgrade-card .number-box button{
    height:34px;
  }

  /* Shared form controls */
  .field label{
    display:block;
    margin-bottom:5px;
    color:var(--silver);
    font-size:.7rem;
  }
  .number-box{
    display:grid;
    grid-template-columns:32px minmax(42px,1fr) 32px;
    gap:5px;
    width:100%;
  }
  .number-box button{
    width:100%;
    height:39px;
    border:1px solid var(--steel);
    border-radius:2px;
    background:var(--forge);
    color:var(--gold2);
    line-height:1;
    transition:border-color .16s,background .16s,transform .12s;
  }
  .number-box button:hover{
    border-color:var(--gold-dim);
    background:#1d1912;
  }
  .number-box button:active{transform:scale(.96);}

  .number-box input,
  .input-wrap input,
  select{
    width:100%;
    height:39px;
    border:1px solid var(--steel);
    border-radius:2px;
    background:#0c0a07;
    outline:none;
  }
  .number-box input{
    padding:0 4px;
    text-align:center;
    font-weight:750;
  }
  .number-box input:focus,
  .input-wrap input:focus,
  select:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 1px rgba(200,162,74,.10);
  }

  /* Remove native number spinners. The +/- buttons remain, and fields are still typeable. */
  input[type="number"]{
    appearance:textfield;
    -moz-appearance:textfield;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }

  .input-wrap{
    position:relative;
    width:100%;
  }
  .input-wrap input{
    padding:0 45px 0 9px;
  }
  .input-unit{
    position:absolute;
    right:9px;
    top:50%;
    transform:translateY(-50%);
    color:#6f675b;
    font-size:.58rem;
    font-weight:850;
    pointer-events:none;
  }

  /* Upgrade cards: denser, aligned, and easier to scan */
  .upgrade-card{
    min-width:0;
  }
  .upgrade-head{
    min-height:61px;
  }
  .upgrade-head > div:last-child{
    min-width:0;
  }
  .upgrade-card .field + .field{
    margin-top:10px;
  }
  .upgrade-card .field label{
    margin-bottom:4px;
    color:#9b9283;
    font-size:.61rem;
    white-space:nowrap;
  }
  .upgrade-card .number-box{
    grid-template-columns:30px minmax(38px,1fr) 30px;
  }
  .upgrade-card .number-box input,
  .upgrade-card .number-box button,
  .upgrade-card .input-wrap input{
    height:34px;
  }
  .upgrade-card .input-wrap input{
    padding-left:8px;
    padding-right:40px;
    font-size:.73rem;
  }
  .upgrade-card .input-unit{
    right:7px;
    font-size:.52rem;
  }
  .upgrade-card.has-value .upgrade-head b{
    color:var(--gold2);
  }

  .capacity-box{
    margin-top:11px;
    padding:11px 12px;
    border:1px solid rgba(200,162,74,.18);
    border-radius:3px;
    background:rgba(200,162,74,.028);
    transition:border-color .18s,background .18s;
  }
  .capacity-box.is-good{
    border-color:rgba(169,201,142,.28);
    background:rgba(169,201,142,.035);
  }
  .capacity-box.is-bad{
    border-color:rgba(199,121,121,.42);
    background:rgba(199,121,121,.045);
  }
  .capacity-top{
    display:grid;
    grid-template-columns:minmax(160px,1fr) minmax(220px,1.1fr);
    gap:12px;
    align-items:end;
  }
  .capacity-top label{
    display:block;
    margin-bottom:5px;
    color:var(--silver);
    font-size:.67rem;
  }
  .capacity-top label span{color:#6f675b;}
  .capacity-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid var(--steel);
    border-radius:2px;
    overflow:hidden;
  }
  .capacity-stats div{
    min-width:0;
    padding:6px 7px;
    text-align:center;
    background:rgba(0,0,0,.16);
  }
  .capacity-stats div + div{border-left:1px solid var(--steel);}
  .capacity-stats small{
    display:block;
    color:#766f64;
    font-size:.5rem;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
  }
  .capacity-stats b{
    display:block;
    margin-top:2px;
    color:#d8ceb9;
    font-size:.74rem;
    font-variant-numeric:tabular-nums;
  }
  .capacity-box.is-good .capacity-stats b:last-child{color:var(--good);}
  .capacity-box.is-bad .capacity-stats b:last-child{color:var(--bad);}
  .capacity-message{
    margin:7px 0 0;
    color:#7f776b;
    font-size:.63rem;
    line-height:1.45;
  }
  .capacity-box.is-good .capacity-message{color:#90aa7d;}
  .capacity-box.is-bad .capacity-message{color:#c88e8e;}

  .cadence-grid{
    display:grid;grid-template-columns:minmax(0,1fr) 135px;gap:12px;align-items:end;
    margin-top:13px;
  }
  select{
    padding:0 34px 0 10px;
    appearance:none;
    background-image:
      linear-gradient(45deg,transparent 50%,#817765 50%),
      linear-gradient(135deg,#817765 50%,transparent 50%);
    background-position:
      calc(100% - 15px) 16px,
      calc(100% - 10px) 16px;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
  }

  /* Right states */
  .results{
    position:sticky;top:70px;min-height:320px;
    transition:border-color .28s,box-shadow .28s;
  }
  .results:has(.result-body:not([hidden])){
    border-color:#433823;
    box-shadow:var(--shadow),0 0 42px rgba(200,162,74,.035);
  }
  .empty-state{
    min-height:315px;padding:36px 28px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  }
  .empty-glyph{
    width:58px;height:58px;margin-bottom:14px;
    display:grid;place-items:center;border:1px solid var(--steel-lit);border-radius:50%;
    color:var(--gold);background:rgba(200,162,74,.035);
    font-family:Georgia,serif;font-size:1.45rem;
  }
  .empty-state h3{
    margin:0;color:var(--bone);
    font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;font-weight:600;
  }
  .empty-state p{
    max-width:330px;margin:8px 0 0;color:var(--mute);font-size:.8rem;
  }

  .result-body{padding:18px;}

  /* When a valid tree exists but no upgrade is entered yet, the right panel
     remains useful by showing the current cycle as the primary timer. */
  .result-body.current-only .timer-current,
  .result-body.current-only .timer-cut,
  .result-body.current-only .saving,
  .result-body.current-only .timer-track,
  .result-body.current-only .quick-metrics,
  .result-body.current-only .cadence-note,
  .result-body.current-only .roi-box,
  .result-body.current-only .copy-row{
    display:none;
  }
  .result-body.current-only{
    padding:18px;
  }
  .result-body.current-only .timer-console{
    min-height:315px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:22px 16px 18px;
  }
  .result-body.current-only .timer-dial{
    width:min(292px,80vw);
  }
  .result-body.current-only .timer-ring-progress{
    opacity:.72;
    filter:drop-shadow(0 0 9px rgba(237,207,119,.18));
  }
  .result-body.current-only .timer-center{
    width:86%;
  }
  .result-body.current-only .timer-main{
    font-size:clamp(2.25rem,4.4vw,3.15rem);
    line-height:1;
    white-space:nowrap;
  }
  .result-body.current-only .timer-upgrade{
    display:none;
  }

  .current-timer-hint{
    position:relative;
    z-index:3;
    max-width:360px;
    margin:14px auto 0;
    padding:10px 12px 0;
    border-top:1px solid rgba(200,162,74,.13);
    color:#887f70;
    font-size:.68rem;
    line-height:1.45;
    text-align:center;
  }
  .current-timer-hint strong{
    display:block;
    margin-bottom:2px;
    color:#c9b882;
    font-size:.74rem;
    font-weight:750;
  }
  .current-timer-hint span{
    display:block;
  }

  .timer-console{
    position:relative;
    overflow:hidden;
    padding:18px 16px 16px;
    border:1px solid rgba(200,162,74,.22);
    border-radius:4px;
    background:
      radial-gradient(circle at 50% 44%,rgba(200,162,74,.08),transparent 37%),
      linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.12));
  }
  .timer-console::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.28;
    background:
      linear-gradient(90deg,transparent 49.8%,rgba(200,162,74,.06) 50%,transparent 50.2%),
      linear-gradient(transparent 49.8%,rgba(200,162,74,.035) 50%,transparent 50.2%);
  }

  /* Mistfall-style atmosphere: slow mist, drifting soul motes, and a brief rune sweep.
     These are intentionally subtle and disabled by prefers-reduced-motion. */
  .timer-console::after{
    content:"";
    position:absolute;
    inset:-35% -20%;
    z-index:0;
    pointer-events:none;
    opacity:.12;
    background:
      radial-gradient(ellipse at 30% 44%,rgba(237,207,119,.18),transparent 30%),
      radial-gradient(ellipse at 72% 58%,rgba(167,123,230,.13),transparent 28%);
    filter:blur(18px);
    animation:mistDrift 11s ease-in-out infinite alternate;
  }

  .soul-motes{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
  }
  .soul-mote{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(237,207,119,.82);
    box-shadow:
      0 0 7px rgba(237,207,119,.55),
      0 0 13px rgba(167,123,230,.14);
    opacity:.12;
    animation:soulFloat var(--mote-dur,7s) ease-in-out infinite;
    animation-delay:var(--mote-delay,0s);
  }
  .soul-mote:nth-child(1){left:18%;top:70%;--mote-dur:7.4s;--mote-delay:-2.1s;}
  .soul-mote:nth-child(2){left:27%;top:35%;--mote-dur:9.1s;--mote-delay:-5.4s;}
  .soul-mote:nth-child(3){left:78%;top:66%;--mote-dur:8.3s;--mote-delay:-1.8s;}
  .soul-mote:nth-child(4){left:70%;top:28%;--mote-dur:10.2s;--mote-delay:-6.7s;}
  .soul-mote:nth-child(5){left:46%;top:81%;--mote-dur:6.8s;--mote-delay:-3.2s;}
  .soul-mote:nth-child(6){left:56%;top:18%;--mote-dur:8.8s;--mote-delay:-4.6s;}

  .rune-sweep{
    position:absolute;
    inset:-30% 18%;
    z-index:1;
    pointer-events:none;
    opacity:0;
    transform:rotate(18deg) translateX(-170%);
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(237,207,119,.04) 34%,
      rgba(237,207,119,.28) 49%,
      rgba(255,248,205,.42) 50%,
      rgba(167,123,230,.14) 55%,
      transparent 72%
    );
    filter:blur(1px);
  }
  .timer-console.is-sweeping .rune-sweep{
    animation:runeSweep .72s var(--ease);
  }

  @keyframes mistDrift{
    0%{transform:translate3d(-2%,1%,0) scale(1);}
    100%{transform:translate3d(3%,-2%,0) scale(1.05);}
  }
  @keyframes soulFloat{
    0%,100%{transform:translate3d(0,8px,0) scale(.75);opacity:.08;}
    35%{opacity:.26;}
    60%{transform:translate3d(8px,-14px,0) scale(1.1);opacity:.18;}
  }
  @keyframes runeSweep{
    0%{opacity:0;transform:rotate(18deg) translateX(-170%);}
    20%{opacity:.4;}
    70%{opacity:.16;}
    100%{opacity:0;transform:rotate(18deg) translateX(170%);}
  }

  /* Value changes get a brief, readable transition rather than a hard jump. */
  .timer-main.timer-changing{
    animation:timerShift .34s var(--ease);
  }
  .saving-copy strong.timer-changing,
  .quick strong.timer-changing{
    animation:valueRise .3s var(--ease);
  }
  @keyframes timerShift{
    0%{opacity:.48;transform:translateY(6px) scale(.985);filter:blur(1.5px);}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
  }
  @keyframes valueRise{
    0%{opacity:.45;transform:translateY(4px);}
    100%{opacity:1;transform:translateY(0);}
  }

  /* Current and upgrade cards react to input changes with rarity-colored energy. */
  .net-card,
  .upgrade-card{
    isolation:isolate;
  }
  .net-card::after,
  .upgrade-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:0;
    border-radius:inherit;
    background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--rarity) 18%,transparent),transparent 62%);
  }
  .net-card.is-pulsing::after,
  .upgrade-card.is-pulsing::after{
    animation:cardPulse .48s var(--ease);
  }
  .net-card.is-pulsing .net-visual img,
  .upgrade-card.is-pulsing .net-visual img{
    animation:itemPulse .48s var(--ease);
  }
  @keyframes cardPulse{
    0%{opacity:0;}
    35%{opacity:1;}
    100%{opacity:0;}
  }
  @keyframes itemPulse{
    0%{transform:scale(1);filter:brightness(1);}
    40%{transform:scale(1.035);filter:brightness(1.18);}
    100%{transform:scale(1);filter:brightness(1);}
  }

  /* The cycle ring breathes once when a comparison updates. */
  .timer-ring-progress.is-pulsing{
    animation:ringPulse .48s var(--ease);
  }
  @keyframes ringPulse{
    0%{filter:drop-shadow(0 0 4px rgba(237,207,119,.12));}
    45%{filter:drop-shadow(0 0 13px rgba(237,207,119,.52));}
    100%{filter:drop-shadow(0 0 7px rgba(237,207,119,.24));}
  }

  .timer-current{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-bottom:12px;
    color:var(--mute);
    font-size:.68rem;
  }
  .timer-current span{
    font-weight:850;
    letter-spacing:.11em;
    text-transform:uppercase;
  }
  .timer-current strong{
    color:#cfc6b7;
    font-family:Georgia,"Times New Roman",serif;
    font-size:.95rem;
    font-weight:600;
  }

  .timer-dial{
    position:relative;
    width:min(280px,78vw);
    aspect-ratio:1;
    margin:0 auto;
    display:grid;
    place-items:center;
  }
  .timer-dial::before,
  .timer-dial::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
  }
  .timer-dial::before{
    inset:10%;
    border:1px solid rgba(200,162,74,.12);
    box-shadow:
      0 0 0 7px rgba(200,162,74,.015),
      0 0 42px rgba(200,162,74,.06);
  }
  .timer-dial::after{
    inset:22%;
    border:1px solid rgba(200,162,74,.09);
  }

  .timer-ring{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform:rotate(-90deg);
    overflow:visible;
  }
  .timer-ring-track,
  .timer-ring-progress{
    fill:none;
    stroke-width:7;
  }
  .timer-ring-track{
    stroke:rgba(200,162,74,.10);
  }
  .timer-ring-progress{
    stroke:url(#timerGradient);
    stroke-linecap:round;
    filter:drop-shadow(0 0 7px rgba(237,207,119,.24));
    transition:stroke-dashoffset .72s var(--ease);
  }

  .timer-center{
    position:relative;
    z-index:2;
    width:70%;
    text-align:center;
  }
  .timer-overline{
    display:block;
    margin-bottom:5px;
    color:var(--gold-dim);
    font-size:.59rem;
    font-weight:850;
    letter-spacing:.15em;
    text-transform:uppercase;
  }
  .timer-main{
    display:block;
    color:var(--gold2);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2rem,4.6vw,3.25rem);
    font-weight:600;
    line-height:.98;
    letter-spacing:-.025em;
    text-shadow:0 0 30px rgba(200,162,74,.16);
  }
  .timer-upgrade{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:10px;
    color:#b6ad9f;
    font-size:.67rem;
  }
  .timer-upgrade img{
    width:26px;
    height:32px;
    border:1px solid rgba(200,162,74,.25);
    border-radius:2px;
    object-fit:cover;
    box-shadow:0 0 13px rgba(200,162,74,.08);
  }
  .timer-upgrade b{
    color:#ddd4c4;
    font-weight:700;
  }

  .timer-cut{
    position:absolute;
    right:7%;
    bottom:14%;
    z-index:3;
    min-width:65px;
    padding:7px 8px;
    border:1px solid rgba(169,201,142,.24);
    border-radius:3px;
    background:rgba(12,15,9,.86);
    text-align:center;
    box-shadow:0 7px 22px rgba(0,0,0,.26);
  }
  .timer-cut small{
    display:block;
    color:#819574;
    font-size:.52rem;
    font-weight:850;
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  .timer-cut strong{
    display:block;
    margin-top:1px;
    color:var(--good);
    font-size:.84rem;
  }

  .saving{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:11px;
    margin-top:7px;
    padding:11px 12px;
    border-top:1px solid var(--steel);
    border-bottom:1px solid var(--steel);
    background:rgba(0,0,0,.08);
  }
  .saving-icon{
    width:27px;height:27px;
    display:grid;place-items:center;
    border:1px solid rgba(200,162,74,.24);
    border-radius:50%;
    color:var(--gold2);
    font-size:.75rem;
  }
  .saving-copy small{
    display:block;color:var(--gold-dim);
    font-size:.56rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
  }
  .saving-copy strong{
    display:block;margin-top:1px;color:var(--gold2);
    font-family:Georgia,"Times New Roman",serif;font-size:1.28rem;font-weight:600;
  }
  .saving-percent{
    color:var(--good);
    font-size:.77rem;
    font-weight:800;
    text-align:right;
  }
  .saving-percent span{
    display:block;
    color:#746d61;
    font-size:.54rem;
    font-weight:750;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .timer-track{
    position:relative;
    z-index:1;
    margin-top:12px;
  }
  .timer-track-labels{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:5px;
    color:#746d61;
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
  }
  .timer-track-line{
    position:relative;
    height:6px;
    overflow:hidden;
    border:1px solid #292319;
    border-radius:999px;
    background:#090806;
  }
  .timer-track-line span{
    display:block;
    height:100%;
    width:100%;
    transform-origin:left center;
    transform:scaleX(1);
    border-radius:inherit;
    background:linear-gradient(90deg,var(--gold-dim),var(--gold2));
    box-shadow:0 0 10px rgba(200,162,74,.18);
    transition:transform .72s var(--ease);
  }

  .quick-metrics{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:14px;border:1px solid var(--steel);border-radius:2px;overflow:hidden;
  }
  .quick{
    padding:12px 13px;background:rgba(0,0,0,.15);
  }
  .quick + .quick{border-left:1px solid var(--steel);}
  .quick small{
    display:block;color:var(--mute);
    font-size:.59rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;
  }
  .quick strong{display:block;margin-top:4px;color:var(--bone);font-size:.91rem;}
  .quick.good strong{color:var(--good);}

  .cadence-note{
    margin-top:13px;padding:11px 12px;
    border-left:2px solid var(--gold-dim);
    background:rgba(200,162,74,.035);
    color:#b8ae9b;font-size:.75rem;line-height:1.5;
  }
  .cadence-note strong{color:var(--gold2);}

  .roi-box{
    margin-top:14px;border:1px solid rgba(200,162,74,.3);border-radius:3px;overflow:hidden;
  }
  .roi-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 13px;border-bottom:1px solid var(--steel);background:rgba(200,162,74,.045);
  }
  .roi-head h3{
    margin:0;color:var(--gold2);
    font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:600;
  }
  .roi-head span{color:var(--mute);font-size:.63rem;}
  .roi-grid{display:grid;grid-template-columns:repeat(3,1fr);}
  .roi-stat{padding:12px 13px;}
  .roi-stat + .roi-stat{border-left:1px solid var(--steel);}
  .roi-stat small{
    display:block;color:var(--mute);
    font-size:.57rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;
  }
  .roi-stat strong{display:block;margin-top:4px;color:var(--bone);font-size:.85rem;}
  .roi-stat.good strong{color:var(--good);}
  .roi-warning{
    padding:9px 13px;border-top:1px solid var(--steel);
    color:#b99978;background:rgba(180,66,71,.025);font-size:.69rem;
  }

  .copy-row{
    display:flex;justify-content:flex-end;margin-top:14px;
  }
  .btn{
    min-height:37px;padding:7px 13px;
    border:1px solid var(--steel-lit);border-radius:2px;background:var(--forge);
    color:var(--silver);font-size:.72rem;font-weight:750;
  }
  .btn:hover{border-color:var(--gold-dim);color:var(--gold2);}
  .btn.done{border-color:var(--good);color:var(--good);}

  /* Reference */
  .reference{margin-top:20px;}
  details.fold{
    border:1px solid var(--steel);border-radius:3px;background:var(--forge);
  }
  details.fold + details.fold{margin-top:9px;}
  details.fold summary{
    padding:13px 15px;color:var(--gold);
    font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  }
  details.fold summary::marker{color:var(--gold-dim);}
  .fold-body{padding:0 15px 15px;color:#bdb5a6;font-size:.81rem;}
  .fold-body p{margin:0 0 10px;}
  .fold-body ul{margin:0;padding-left:19px;}
  .fold-body li{margin:5px 0;}
  .formula{
    margin:10px 0;padding:10px 11px;border-left:2px solid var(--gold);
    background:#0c0a07;color:#d8ceb9;
    font-family:Consolas,"Courier New",monospace;font-size:.74rem;overflow:auto;
  }
  table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.75rem;}
  th,td{padding:8px 7px;border-bottom:1px solid var(--steel);text-align:left;vertical-align:top;}
  th{color:var(--gold-dim);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;}
  td{color:#c8c0b1;}
  .match{color:var(--good);}

  .meta{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    margin-top:22px;padding-top:16px;border-top:1px solid var(--steel);text-align:center;
  }
  .meta b{display:block;color:var(--bone);font-size:.8rem;font-weight:650;}
  .meta span{color:var(--mute);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;}
  .brand{margin-top:22px;text-align:center;}
  .brand b{color:var(--gold);font-size:.7rem;font-weight:850;letter-spacing:.28em;}
  .brand p{margin:4px 0 0;color:#6f675b;font-size:.69rem;}

  .bump{animation:bump .34s var(--ease);}
  @keyframes bump{
    0%{transform:translateY(4px);opacity:.72;}
    100%{transform:translateY(0);opacity:1;}
  }

  @media (max-width:860px){
    .calc-grid{grid-template-columns:1fr;}
    .results{position:static;}
  }
  @media (min-width:651px) and (max-width:860px){
    .upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  @media (max-width:650px){
    .wrap{padding:25px 12px 52px;}
    .mast{grid-template-columns:1fr;}
    .tree-mark{display:none;}
    .net-grid,.upgrade-grid{grid-template-columns:1fr;}
    .net-header{grid-template-columns:46px minmax(0,1fr);}
    .net-visual{width:46px;height:58px;}
    .upgrade-head{grid-template-columns:48px minmax(0,1fr);}
    .cadence-grid{grid-template-columns:1fr;}
    .capacity-top{grid-template-columns:1fr;}
    .roi-grid{grid-template-columns:1fr;}
    .roi-stat + .roi-stat{border-left:0;border-top:1px solid var(--steel);}
    .meta{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .eu-brand{display:none;}
    .eu-back,.eu-yt{padding-left:9px;padding-right:9px;font-size:.75rem;}
    .timer-dial{width:min(250px,80vw);}
    .timer-main{font-size:2.15rem;}
    .result-body.current-only .timer-main{font-size:2rem;}
    .timer-cut{right:3%;bottom:13%;}
    .saving{grid-template-columns:auto 1fr;}
    .saving-percent{grid-column:2;text-align:left;margin-top:-5px;}
    .quick-metrics{grid-template-columns:1fr;}
    .quick + .quick{border-left:0;border-top:1px solid var(--steel);}
  }

  /* =========================================================
     DIAL v7
     One meaning for the ring: the outer arc is the current
     cycle, the inner arc is the cycle after the upgrade, and
     the green sweep between them is the time saved.
     ========================================================= */

  .result-body.current-only .saving,
  .result-body.current-only .quick-metrics,
  .result-body.current-only .cadence-note,
  .result-body.current-only .roi-box,
  .result-body.current-only .copy-row,
  .result-body.current-only .leg-after,
  .result-body.current-only .leg-saved{
    display:none;
  }
  .result-body.current-only .dial-legend{
    grid-template-columns:minmax(0,1fr);
    max-width:210px;
  }

  .dial-wrap{
    position:relative;
    z-index:1;
    width:min(300px,82vw);
    aspect-ratio:1;
    margin:2px auto 0;
    display:grid;
    place-items:center;
  }

  .dial-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform:rotate(-90deg);
    overflow:visible;
  }

  .dial-ticks line{
    stroke:rgba(200,162,74,.24);
    stroke-linecap:round;
  }
  .dial-ticks line.major{
    stroke:rgba(237,207,119,.42);
  }

  .arc-base,
  .arc-inner-base{
    fill:none;
    stroke:rgba(200,162,74,.09);
  }
  .arc-base{stroke-width:9;}
  .arc-inner-base{stroke-width:5;}

  .arc-before{
    fill:none;
    stroke:url(#arcAfter);
    stroke-width:9;
    stroke-linecap:round;
    filter:drop-shadow(0 0 10px rgba(237,207,119,.26));
  }

  .arc-saved{
    fill:none;
    stroke:url(#arcSaved);
    stroke-width:9;
    stroke-linecap:round;
    opacity:0;
    filter:drop-shadow(0 0 8px rgba(169,201,142,.32));
    transition:opacity .4s var(--ease);
  }
  .dial-wrap.has-upgrade .arc-saved{opacity:.95;}

  .arc-after{display:none;}

  .arc-saved-rot{
    transform-origin:130px 130px;
    transition:transform .68s var(--ease);
  }

  .arc-inner-base{
    stroke:rgba(200,162,74,.07);
    transition:opacity .4s var(--ease);
  }
  .dial-wrap:not(.has-upgrade) .arc-inner-base{opacity:0;}

  .dial-center{
    position:relative;
    z-index:2;
    width:78%;
    text-align:center;
  }

  .dial-overline{
    display:block;
    margin-bottom:6px;
    color:var(--gold-dim);
    font-size:.58rem;
    font-weight:850;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  .dial-time{
    display:block;
    color:var(--gold2);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.7rem,3.9vw,2.55rem);
    font-weight:600;
    line-height:1.04;
    white-space:nowrap;
    letter-spacing:-.028em;
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 34px rgba(200,162,74,.18);
  }

  .dial-ready{
    display:block;
    margin-top:7px;
    color:#8d8578;
    font-size:.66rem;
    letter-spacing:.02em;
  }
  .dial-ready b{color:#c2b696;font-weight:650;}

  .dial-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:9px;
    min-height:20px;
    color:#b6ad9f;
    font-size:.66rem;
  }
  .dial-item img{
    width:23px;
    height:29px;
    border:1px solid rgba(200,162,74,.28);
    border-radius:2px;
    object-fit:cover;
  }
  .dial-item b{color:#e3d9c5;font-weight:700;}

  .dial-legend{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    max-width:400px;
    margin:14px auto 0;
  }
  .leg{
    padding:8px 9px;
    border:1px solid var(--steel);
    border-radius:3px;
    background:rgba(0,0,0,.22);
    text-align:center;
  }
  .leg-key{
    display:block;
    width:20px;
    height:3px;
    margin:0 auto 6px;
    border-radius:2px;
  }
  .leg-before .leg-key{background:linear-gradient(90deg,#c8a24a 50%,#7e9c62 50%);}
  .leg-after .leg-key{background:linear-gradient(90deg,#c8a24a,#f6e9b4);}
  .leg-saved .leg-key{background:linear-gradient(90deg,#6f8f57,#a9c98e);}
  .leg small{
    display:block;
    color:var(--mute);
    font-size:.55rem;
    font-weight:850;
    letter-spacing:.11em;
    text-transform:uppercase;
  }
  .leg b{
    display:block;
    margin-top:3px;
    color:var(--bone);
    font-family:Georgia,"Times New Roman",serif;
    font-size:.9rem;
    font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .leg-after b{color:var(--gold2);}
  .leg-saved b{color:var(--good);}
  .leg u{
    display:block;
    margin-top:2px;
    text-decoration:none;
    color:#7f8f6d;
    font-size:.6rem;
    font-weight:750;
    letter-spacing:.04em;
  }

  .dial-note{
    position:relative;
    z-index:1;
    max-width:330px;
    margin:11px auto 0;
    color:#847c6f;
    font-size:.69rem;
    line-height:1.5;
    text-align:center;
  }

  /* Entrance: arcs sweep, centre lifts, legend staggers. */
  @keyframes dialLift{
    from{opacity:0;transform:translateY(9px) scale(.97);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  @keyframes legIn{
    from{opacity:0;transform:translateY(7px);}
    to{opacity:1;transform:translateY(0);}
  }
  .dial-center.is-fresh{animation:dialLift .5s var(--ease) both;}
  .dial-legend.is-fresh .leg{
    animation:legIn .42s var(--ease) both;
  }
  .dial-legend.is-fresh .leg:nth-child(2){animation-delay:.07s;}
  .dial-legend.is-fresh .leg:nth-child(3){animation-delay:.14s;}

  /* A single soft pulse on the saved arc when the saving grows. */
  @keyframes savedFlare{
    0%{filter:drop-shadow(0 0 6px rgba(169,201,142,.2));}
    45%{filter:drop-shadow(0 0 20px rgba(169,201,142,.6));}
    100%{filter:drop-shadow(0 0 8px rgba(169,201,142,.32));}
  }
  .arc-saved.is-flaring{animation:savedFlare .7s var(--ease);}

  @media (max-width:560px){
    .dial-wrap{width:min(258px,84vw);}
    .dial-time{font-size:1.75rem;}
    .dial-legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
    .leg{padding:7px 5px;}
    .leg b{font-size:.78rem;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
    }
  }