:root{
    --bg:#eef4f8;
    --grid-line:#dce8f0;
    --ink:#102131;
    --muted:#5c6b78;
    --panel:#ffffffcc;
    --line:#d8e2ea;
    --accent:#2563eb;
    --blue:#149bd7;
    --dark:#071018;
    --focus:rgba(37,99,235,.18);
    --shadow:0 10px 25px rgba(0,0,0,.10);
    --radius:18px;
    --red:#ef4444;
    --blue:#3b82f6;
    --green:#22c55e;
    --amber:#f59e0b;
    --pink:#ec4899;
    --cyan:#06b6d4;
    --violet:#8b5cf6;
    --lime:#84cc16;
  }
  *{box-sizing:border-box}
  html,body{min-height:100%}
  body{
    margin:0;
    font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color:var(--ink);
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
      var(--bg);
    background-size:34px 34px;
    touch-action:manipulation;
  }
  button,input,select{font:inherit}
  .wrap{
    max-width:1200px;
    margin:0 auto;
    padding:14px 14px 28px;
  }
  .topbar{
    display:grid;
    grid-template-columns:minmax(230px, 1fr) auto;
    align-items:center;
    gap:16px;
    padding:12px 18px;
    background:var(--dark);
    color:#fff;
    box-shadow:0 6px 14px rgba(15,33,49,.12);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
  }
  .brand img{
    width:142px;
    height:auto;
    display:block;
    object-fit:contain;
    flex:0 0 auto;
  }
  
  .brand-logo {
    display: inline-flex;
    border-radius: 6px;
  }

  .brand-logo:focus-visible {
    outline: 4px solid rgba(20, 155, 215, 0.35);
    outline-offset: 3px;
  }

  .home-button {
    min-height: var(--touch, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 2px solid #263d51;
    border-radius: 8px;
    background: #122436;
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
  }

  .home-button:hover,
  .home-button:focus-visible {
    background: var(--blue, #149bd7);
    border-color: #8fd8f3;
    color: #06111a;
  }.title-block{min-width:0}
  h1{
    margin:0;
    font-size:clamp(1.35rem, 2vw, 2.05rem);
    line-height:1.05;
    font-weight:800;
    letter-spacing:0;
  }
.top-actions{
    display:flex;
    align-items:center;
    justify-content:end;
    gap:8px;
    flex-wrap:wrap;
  }
  .icon-button{
    width:48px;
    min-height:48px;
    padding:0;
    display:inline-grid;
    place-items:center;
    background:#122436;
    color:#ffffff;
    border:2px solid #263d51;
    border-radius:8px;
    cursor:pointer;
  }
  .icon-button:hover,
  .icon-button[aria-pressed="true"]{
    background:var(--blue);
    border-color:#8fd8f3;
    color:#06111a;
  }
  .icon{
    width:24px;
    height:24px;
    display:block;
    pointer-events:none;
  }
  .app{
    display:grid;
    grid-template-columns:minmax(320px, 1fr) minmax(340px, 420px);
    gap:14px;
    align-items:start;
  }
  .stage,.side,.bar{
    background:var(--panel);
    border:2px solid rgba(17,24,39,.20);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .stage{
    padding:14px;
    min-height:620px;
  }
  .bar{
    padding:12px;
    margin-bottom:14px;
  }
  .side{
    padding:12px;
  }
  .toolbar{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
  }
  .segmented{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
    width:min(560px, 100%);
  }
  .btn{
    min-height:52px;
    border:0;
    border-radius:16px;
    background:var(--accent);
    color:#fff;
    font-size:18px;
    font-weight:900;
    padding:12px 16px;
    cursor:pointer;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(37,99,235,.25);
  }
  .btn:hover{filter:brightness(.98)}
  .btn:active{transform:translateY(1px)}
  .btn.active{
    color:#fff;
    border-color:var(--accent);
    background:#111827;
    box-shadow:0 8px 18px rgba(37,99,235,.22);
  }
  .btn.dark{
    color:#fff;
    background:#111827;
    box-shadow:0 8px 18px rgba(17,24,39,.18);
  }
  .btn.ghost{
    background:#fff;
    color:var(--ink);
    border:2px solid rgba(17,24,39,.25);
    box-shadow:none;
  }
  .btn.icon{
    width:44px;
    min-width:44px;
    padding:0;
    display:inline-grid;
    place-items:center;
    font-size:22px;
  }
  .chartShell{
    display:grid;
    place-items:center;
    min-height:460px;
    padding:8px;
    overflow:auto;
    overscroll-behavior:contain;
    touch-action:none;
  }
  svg{
    width:620px;
    max-width:100%;
    height:auto;
    display:block;
    overflow:visible;
  }
  .slice{
    stroke:#fff;
    stroke-width:3;
    transition:filter .15s ease, opacity .15s ease;
  }
  .slice:hover{filter:brightness(1.04)}
  .separator{
    stroke:#111827;
    stroke-width:2;
    stroke-linecap:round;
    opacity:.72;
  }
  .handle{
    fill:#fff;
    stroke:#111827;
    stroke-width:3;
    cursor:grab;
  }
  .handle:active{cursor:grabbing}
  .centre{
    fill:#fff;
    stroke:#111827;
    stroke-width:2;
  }
  .sliceText{
    font-weight:950;
    font-size:21px;
    fill:#111827;
    paint-order:stroke;
    stroke:#fff;
    stroke-width:5px;
    stroke-linejoin:round;
    pointer-events:none;
  }
  .sliceName{
    font-weight:850;
    font-size:13px;
    fill:#111827;
    opacity:.9;
    paint-order:stroke;
    stroke:#fff;
    stroke-width:4px;
    stroke-linejoin:round;
    pointer-events:none;
  }
  .total{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }
  .stat{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
    min-width:0;
  }
  .stat span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-bottom:4px;
  }
  .stat strong{
    display:block;
    font-size:clamp(18px, 2.4vw, 28px);
    line-height:1.05;
    overflow-wrap:anywhere;
  }
  .side h2{
    margin:0 0 10px;
    font-size:18px;
  }
  .presetGrid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
    margin-bottom:12px;
  }
  .segmentList{
    display:grid;
    gap:8px;
  }
  .wholeControl{
    margin:0 0 12px;
  }
  .segment{
    display:grid;
    grid-template-columns:28px minmax(84px, 1fr) 82px 44px;
    gap:8px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:8px;
  }
  .swatch{
    width:24px;
    height:24px;
    border-radius:999px;
    border:2px solid rgba(17,24,39,.26);
  }
  label{
    display:grid;
    gap:5px;
    color:var(--ink);
    font-size:16px;
    font-weight:800;
  }
  input,select{
    width:100%;
    min-height:48px;
    border:2px solid rgba(17,24,39,.35);
    border-radius:14px;
    background:#fff;
    color:var(--ink);
    padding:10px 12px;
    outline:none;
    font-size:18px;
  }
  input:focus,select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--focus);
  }
  .footerTools{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px;
  }
  .toast{
    min-height:24px;
    margin-top:10px;
    color:var(--muted);
    font-size:13px;
    font-weight:750;
  }
  .toast.error{
    color:#b42318;
    font-size:16px;
    font-weight:900;
  }
  .copyright{
    position:fixed;
    left:14px;
    bottom:10px;
    white-space:nowrap;
    color:var(--muted);
    font-size:.84rem;
    font-weight:700;
    z-index:10;
  }
  .instructions-dialog{
    width:min(820px, calc(100vw - 32px));
    max-height:min(780px, calc(100vh - 32px));
    border:0;
    border-radius:var(--radius);
    padding:0;
    overflow:hidden;
    color:var(--ink);
    box-shadow:0 24px 70px rgba(6,17,26,.32);
  }
  .instructions-dialog::backdrop{
    background:rgba(6,17,26,.50);
  }
  .instructions-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    background:var(--navy);
    color:#ffffff;
  }
  .instructions-header h2{
    margin:0;
    font-size:1.25rem;
    line-height:1.15;
  }
  .instructions-body{
    max-height:calc(min(780px, 100vh - 32px) - 76px);
    overflow:auto;
    padding:16px 18px 20px;
    line-height:1.45;
    background:#ffffff;
  }
  .instructions-body h3{
    margin:16px 0 8px;
    font-size:1.05rem;
  }
  .instructions-body h3:first-child{
    margin-top:0;
  }
  .instructions-body p,
  .instructions-body ul,
  .instructions-body ol{
    margin:0 0 10px;
  }
  .instructions-body li{
    margin-bottom:6px;
  }
  .instructions-body strong{
    color:#06111a;
  }
  body.fit-screen .wrap{
    max-width:none;
    padding:10px 14px 28px;
  }
  body.fit-screen .stage{
    min-height:auto;
  }
  body.fit-screen .app{
    grid-template-columns:minmax(380px, 1fr) minmax(320px, 380px);
  }
  body.fit-screen .chartShell{
    min-height:360px;
    padding:0;
  }
  body.fit-screen svg{
    width:auto;
    max-width:100%;
    max-height:min(62vh, 620px);
  }
  @media print{
    body{
      background:#ffffff;
    }
    .side,
    .bar,
    .total,
    .top-actions,
    .instructions-dialog{
      display:none;
    }
    .topbar{
      display:block;
      background:transparent;
      border:0;
      box-shadow:none;
      margin-bottom:18px;
      padding:0;
      print-color-adjust:exact;
      -webkit-print-color-adjust:exact;
    }
    .brand{
      display:block;
    }
    .brand img{
      width:142px;
    }
    .title-block{
      display:none;
    }
    .copyright{
      display:block;
      position:fixed;
      left:0;
      bottom:0;
      color:#26394a;
      background:transparent;
      box-shadow:none;
    }
    .wrap{
      max-width:none;
      padding:0;
    }
    .app{
      display:block;
    }
    .stage{
      border:0;
      box-shadow:none;
      background:#ffffff;
    }
  }
  @media (max-width:900px){
    .topbar{align-items:start}
    .app{grid-template-columns:1fr}
    .stage{min-height:auto}
    .total{grid-template-columns:repeat(2, 1fr)}
  }
  @media (max-width:560px){
    .wrap{padding:12px 10px 20px}
    .topbar{
      grid-template-columns:1fr;
      padding:12px;
    }
    .brand img{width:112px}
    .top-actions{justify-content:stretch}
    .top-actions .btn{flex:1}
    .segmented{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .chartShell{min-height:320px;padding:0}
    .segment{grid-template-columns:24px minmax(70px, 1fr) 72px 40px}
    .presetGrid{grid-template-columns:1fr}
    .total{grid-template-columns:1fr}
    .sliceText{font-size:17px}
  }