:root{
    --mono:ui-monospace,"Cascadia Mono","JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
    --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --rounded:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Segoe UI Variable Display","Comic Sans MS",var(--sans);
    --gutter:clamp(12px,3vw,26px);
    --cute:0;
    --font-display:var(--mono);
    --title-glow:0 0 calc(16px + var(--cute) * .22px) var(--title-glow-color);
  }

  html.kawaii{--font-display:var(--rounded)}

  /* ---------- night: tech ⇄ kawaii ---------- */
  [data-theme="night"]{
    --bg-tech:#0a0910;        --bg-cute:#1b1224;
    --panel-tech:#100e15;     --panel-cute:#241a2d;
    --panel2-tech:#15121c;    --panel2-cute:#2d2137;
    --line-tech:#241f2c;      --line-cute:#3e2d49;
    --line2-tech:#383044;     --line2-cute:#5d4675;
    --text-tech:#e8e3ee;      --text-cute:#f8edf7;
    --dim-tech:#8b8299;       --dim-cute:#c0a7cc;
    --accent-tech:#ff6fae;    --accent-cute:#ff8ec8;
    --accentdim-tech:#a8477a; --accentdim-cute:#ffb0da;

    --bg:color-mix(in oklab, var(--bg-tech), var(--bg-cute) calc(var(--cute) * 1%));
    --panel:color-mix(in oklab, var(--panel-tech), var(--panel-cute) calc(var(--cute) * 1%));
    --panel-2:color-mix(in oklab, var(--panel2-tech), var(--panel2-cute) calc(var(--cute) * 1%));
    --line:color-mix(in oklab, var(--line-tech), var(--line-cute) calc(var(--cute) * 1%));
    --line-2:color-mix(in oklab, var(--line2-tech), var(--line2-cute) calc(var(--cute) * 1%));
    --text:color-mix(in oklab, var(--text-tech), var(--text-cute) calc(var(--cute) * 1%));
    --dim:color-mix(in oklab, var(--dim-tech), var(--dim-cute) calc(var(--cute) * 1%));
    --accent:color-mix(in oklab, var(--accent-tech), var(--accent-cute) calc(var(--cute) * 1%));
    --accent-dim:color-mix(in oklab, var(--accentdim-tech), var(--accentdim-cute) calc(var(--cute) * 1%));

    --ok:#79e0a5;
    --focus:color-mix(in oklab, rgba(255,111,174,.28), rgba(255,142,200,.34) calc(var(--cute) * 1%));
    --title-glow-color:color-mix(in oklab, rgba(255,111,174,.28), rgba(255,150,205,.55) calc(var(--cute) * 1%));
    --shadow-color:color-mix(in oklab, rgba(0,0,0,.55), rgba(255,120,190,.30) calc(var(--cute) * 1%));
    --tint:color-mix(in oklab, rgba(255,111,174,.14), rgba(255,142,200,.20) calc(var(--cute) * 1%));
    --hover-fg:#120d12;
    --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0v32' fill='none' stroke='%23ffffff' stroke-opacity='.035'/%3E%3C/svg%3E");
    color-scheme:dark;
  }

  /* ---------- day: tech ⇄ kawaii ---------- */
  [data-theme="day"]{
    --bg-tech:#f1eff4;        --bg-cute:#fff4f8;
    --panel-tech:#fbfafc;     --panel-cute:#fffafc;
    --panel2-tech:#f5f3f8;    --panel2-cute:#fff0f6;
    --line-tech:#ddd8e5;      --line-cute:#ffdcea;
    --line2-tech:#c5bdcf;     --line2-cute:#f6c2d8;
    --text-tech:#1d1923;      --text-cute:#5b4350;
    --dim-tech:#6a6376;       --dim-cute:#8d7483;
    --accent-tech:#c2185b;    --accent-cute:#d4739b;
    --accentdim-tech:#e79ab8; --accentdim-cute:#f2a9c5;

    --bg:color-mix(in oklab, var(--bg-tech), var(--bg-cute) calc(var(--cute) * 1%));
    --panel:color-mix(in oklab, var(--panel-tech), var(--panel-cute) calc(var(--cute) * 1%));
    --panel-2:color-mix(in oklab, var(--panel2-tech), var(--panel2-cute) calc(var(--cute) * 1%));
    --line:color-mix(in oklab, var(--line-tech), var(--line-cute) calc(var(--cute) * 1%));
    --line-2:color-mix(in oklab, var(--line2-tech), var(--line2-cute) calc(var(--cute) * 1%));
    --text:color-mix(in oklab, var(--text-tech), var(--text-cute) calc(var(--cute) * 1%));
    --dim:color-mix(in oklab, var(--dim-tech), var(--dim-cute) calc(var(--cute) * 1%));
    --accent:color-mix(in oklab, var(--accent-tech), var(--accent-cute) calc(var(--cute) * 1%));
    --accent-dim:color-mix(in oklab, var(--accentdim-tech), var(--accentdim-cute) calc(var(--cute) * 1%));

    --ok:#1f7a4d;
    --focus:color-mix(in oklab, rgba(194,24,91,.18), rgba(212,115,155,.26) calc(var(--cute) * 1%));
    --title-glow-color:color-mix(in oklab, transparent, rgba(212,115,155,.30) calc(var(--cute) * 1%));
    --shadow-color:color-mix(in oklab, rgba(212,115,155,.22), rgba(212,115,155,.45) calc(var(--cute) * 1%));
    --tint:color-mix(in oklab, rgba(194,24,91,.10), rgba(242,169,197,.24) calc(var(--cute) * 1%));
    --hover-fg:#ffffff;
    --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0v32' fill='none' stroke='%23000000' stroke-opacity='.05'/%3E%3C/svg%3E");
    color-scheme:light;
  }

  :root{
    --radius:calc(4px + var(--cute) * .18px);
    --shadow:0 calc(14px + var(--cute) * .12px) calc(34px + var(--cute) * .18px) calc(-18px + var(--cute) * .04px) var(--shadow-color);
  }

  *,*::before,*::after{box-sizing:border-box}

  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

  body{
    margin:0;
    min-height:100vh;
    padding:0 var(--gutter) clamp(40px,6vw,70px);
    color:var(--text);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.65;
    background-color:var(--bg);
    overflow-x:hidden;
    transition:background-color .3s, color .3s;
  }

  /* фоновые слои: сетка гаснет, мягкие пятна проявляются */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:var(--grid);
    opacity:calc((100 - var(--cute)) / 100);
    transition:opacity .4s;
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(620px 420px at 14% 8%, rgba(255,140,200,.24), transparent 70%),
      radial-gradient(540px 400px at 86% 26%, rgba(180,150,240,.20), transparent 70%),
      radial-gradient(480px 380px at 40% 92%, rgba(255,200,140,.14), transparent 70%);
    opacity:calc(var(--cute) / 100);
    transition:opacity .4s;
  }

  #fx{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
  }

  .wrap{
    max-width:900px;
    margin:0 auto;
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:22px;
  }

  /* ---------- title bar ---------- */
  .top{
    position:sticky;
    top:0;
    z-index:40;
    margin:0 calc(-1 * var(--gutter)) -22px;
    padding:0 var(--gutter);
    background:var(--bg);
    border-bottom:1px solid var(--line);
    transition:background .3s, border-color .3s;
  }

  .bar{
    max-width:900px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:18px;
    height:46px;
  }

  .bar-l,.bar-r{display:flex;align-items:center;gap:10px;min-width:0}
  .bar-r{margin-left:auto}

  .brand{
    font-family:var(--font-display);
    font-size:13px;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--accent);
    text-decoration:none;
    white-space:nowrap;
  }
  .brand:hover{text-decoration:underline}

  .mascot{
    font-family:var(--mono);
    font-size:12px;
    line-height:1;
    letter-spacing:0;
    text-transform:none;
    padding:5px 7px;
    color:var(--accent);
    background:var(--panel-2);
    border:1px solid var(--line-2);
    border-radius:var(--radius);
    cursor:pointer;
    white-space:nowrap;
    box-shadow:none;
    transition:border-color .15s, background .15s;
  }
  .mascot:hover{background:var(--tint);border-color:var(--accent);color:var(--accent)}

  .sep{color:var(--line-2);font-family:var(--mono);font-size:12px}
  .dim{color:var(--dim);font-family:var(--mono);font-size:12px}

  .status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--dim);
    white-space:nowrap;
  }
  .status .led{
    width:6px;height:6px;border-radius:50%;
    background:var(--ok);
    box-shadow:0 0 8px var(--ok);
    animation:pulse 2.6s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

  .nav{display:flex;gap:2px;overflow:hidden}
  .nav a{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.04em;
    color:var(--dim);
    text-decoration:none;
    padding:4px 8px;
    border:1px solid transparent;
    white-space:nowrap;
    transition:color .15s, border-color .15s;
  }
  .nav a:hover{color:var(--accent);border-color:var(--line-2)}

  .tgl{
    min-width:58px;
    flex:none;
    height:28px;
    padding:0 8px;
    display:grid;
    place-items:center;
    font-family:var(--mono);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    line-height:1;
    color:var(--dim);
    background:transparent;
    border:1px solid var(--line-2);
    border-radius:var(--radius);
    cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
  }
  .tgl:hover{color:var(--accent);border-color:var(--accent);background:var(--tint)}

  /* ---------- panels ---------- */
  .panel{
    position:relative;
    padding:22px 24px 26px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    scroll-margin-top:66px;
    transition:background .3s, border-color .3s, border-radius .3s, box-shadow .3s;
  }
  .panel::before,.panel::after{
    content:"";
    position:absolute;
    width:7px;height:7px;
    border-color:var(--accent-dim);
    border-style:solid;
    opacity:calc((100 - var(--cute)) / 100);
    transition:opacity .4s;
  }
  .panel::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
  .panel::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

  .panel-head{
    display:flex;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
    padding-bottom:12px;
    margin-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .panel-head .idx{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent-dim);
    letter-spacing:.1em;
  }
  .panel-head h2{
    margin:0;
    font-family:var(--font-display);
    font-size:15px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--text);
  }
  .panel-head h2::before{content:"// ";color:var(--accent)}
  .panel-head .k{font-size:13px;color:var(--dim)}
  .panel .lead{margin:0 0 16px;color:var(--dim);font-size:14.5px;max-width:66ch}
  .panel p{margin:0 0 14px;max-width:70ch}
  .panel p:last-of-type{margin-bottom:0}

  .accent{color:var(--accent)}

  /* ---------- hero ---------- */
  .hero{padding-top:28px}
  .hero h1{
    margin:0 0 12px;
    font-family:var(--font-display);
    font-size:clamp(26px,5.4vw,40px);
    font-weight:700;
    letter-spacing:.04em;
    color:var(--accent);
    text-shadow:var(--title-glow);
  }
  .hero .lead{font-size:16px;color:var(--text);max-width:64ch;margin-bottom:18px}
  .hero .lead b{color:var(--accent);font-weight:600}

  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
  .tag{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--dim);
    border:1px solid var(--line-2);
    border-radius:var(--radius);
    padding:3px 8px;
    transition:border-radius .3s;
  }

  .cta{display:flex;gap:10px;flex-wrap:wrap}

  /* ---------- controls ---------- */
  button,.btn{
    font-family:var(--font-display);
    font-size:12.5px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
    border:1px solid var(--accent-dim);
    border-radius:var(--radius);
    padding:9px 16px;
    color:var(--accent);
    background:var(--panel-2);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background .15s, color .15s, border-color .15s, border-radius .3s;
  }
  button:hover,.btn:hover{background:var(--accent);color:var(--hover-fg);border-color:var(--accent)}
  button:active,.btn:active{transform:translateY(1px)}
  button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  button[disabled]{opacity:.45;cursor:default}

  button.ghost,.btn.ghost{color:var(--dim);border-color:var(--line-2)}
  button.ghost:hover,.btn.ghost:hover{background:var(--tint);color:var(--accent);border-color:var(--accent-dim)}

  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .chip{
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--dim);
    border-color:var(--line-2);
    padding:5px 10px;
  }

  /* ---------- lists & tables ---------- */
  .steps{list-style:none;margin:0;padding:0;counter-reset:s}
  .steps li{
    counter-increment:s;
    position:relative;
    padding:12px 0 12px 52px;
    border-bottom:1px solid var(--line);
  }
  .steps li:last-child{border-bottom:0}
  .steps li::before{
    content:"[" counter(s,decimal-leading-zero) "]";
    position:absolute;
    left:0;
    top:12px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--accent);
  }
  .steps b{display:block;font-weight:600;font-size:15px}
  .steps span{color:var(--dim);font-size:14.5px}

  .spec{width:100%;border-collapse:collapse;font-size:14px}
  .spec td{
    padding:9px 0;
    border-bottom:1px solid var(--line);
    vertical-align:top;
  }
  .spec tr:last-child td{border-bottom:0}
  .spec td:first-child{
    width:34%;
    font-family:var(--mono);
    font-size:13px;
    color:var(--accent);
    white-space:nowrap;
  }
  .spec td:last-child{color:var(--dim)}

  /* ---------- console blocks ---------- */
  .console{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--panel-2);
    overflow:hidden;
    transition:border-radius .3s, background .3s;
  }
  .console + .console{margin-top:14px}
  .console-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 12px;
    border-bottom:1px solid var(--line);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--dim);
    background:var(--panel);
  }
  .console-head .marker{color:var(--accent)}
  .console-body{padding:12px}

  textarea,input[type="text"],select{
    width:100%;
    font-family:var(--mono);
    font-size:13.5px;
    line-height:1.6;
    color:var(--text);
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 12px;
    outline:none;
    resize:vertical;
    transition:border-color .15s, box-shadow .15s, border-radius .3s;
  }
  select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff6fae' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .8rem center;
    background-size:10px;
    cursor:pointer;
    padding-right:2rem;
  }
  [data-theme="day"] select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23c2185b' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  }
  textarea::placeholder,input::placeholder{color:var(--dim);opacity:.75}
  textarea:focus,input:focus,select:focus{
    border-color:var(--accent-dim);
    box-shadow:0 0 0 3px var(--focus);
  }

  .field{margin-bottom:14px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .hint{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin:10px 0 0;letter-spacing:.03em}

  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}

  /* ---------- compare ---------- */
  .cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .cmp-col{min-width:0}
  .cmp-label{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--dim);
    margin-bottom:8px;
  }
  .cmp pre,.cmp-out{
    margin:0;
    font-family:var(--mono);
    font-size:12.5px;
    line-height:1.8;
    white-space:pre-wrap;
    word-break:break-word;
    color:var(--dim);
  }
  .cmp-out{color:var(--text)}
  .cmp mark{
    background:transparent;
    color:inherit;
    padding:1px 2px;
    border-radius:3px;
  }
  .cmp mark.d-changed{
    color:var(--accent);
    background:var(--tint);
  }
  .cmp mark.d-added{
    color:var(--ok);
    border-bottom:1px dashed var(--ok);
  }

  /* ---------- collection ---------- */
  .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
  .slot{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:8px;
    font-family:var(--mono);
    font-size:14px;
    color:var(--line-2);
    border:1px dashed var(--line-2);
    border-radius:var(--radius);
    background:var(--panel-2);
    transition:border-radius .3s;
  }
  .slot.on{
    color:var(--accent);
    border-style:solid;
    border-color:var(--accent-dim);
    box-shadow:inset 0 0 22px rgba(255,111,174,.09);
  }

  .ach{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
  .ach li{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--dim);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:7px 10px;
    background:var(--panel-2);
  }
  .ach li.done{color:var(--text);border-color:var(--accent-dim)}
  .ach .box{color:var(--line-2);flex:none}
  .ach li.done .box{color:var(--accent)}
  .ach .count{margin-left:auto;color:var(--dim);font-size:11.5px;text-align:right}

  /* ---------- form ---------- */
  .note-ok{
    display:none;
    margin-top:14px;
    padding:10px 12px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--ok);
    border:1px solid var(--ok);
    border-radius:var(--radius);
    background:var(--panel-2);
  }
  .note-ok.show{display:block}

  label{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--dim);
    margin:0 0 6px;
  }
  label::before{content:"// ";color:var(--accent-dim)}

  /* ---------- cute dock ---------- */
  .dock{
    position:fixed;
    left:var(--gutter);
    bottom:16px;
    z-index:45;
    width:236px;
    padding:10px 12px 11px;
    background:var(--panel);
    border:1px solid var(--line-2);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
    transition:background .3s, border-radius .3s, border-color .3s;
  }
  .dock-head{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.12em;
    text-transform:none;
    color:var(--dim);
  }
  .dock-head .marker{color:var(--accent)}
  .dock-val{margin-left:auto;color:var(--accent)}
  .dock-hint{margin:2px 0 0;font-family:var(--mono);font-size:10.5px;color:var(--dim);line-height:1.5}

  input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:20px;
    margin:6px 0 0;
    background:transparent;
    cursor:pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track{height:3px;background:var(--line-2);border-radius:999px}
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:14px;height:14px;
    margin-top:-5.5px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid var(--panel);
    box-shadow:0 0 10px var(--accent);
  }
  input[type="range"]::-moz-range-track{height:3px;background:var(--line-2);border-radius:999px}
  input[type="range"]::-moz-range-thumb{
    width:12px;height:12px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid var(--panel);
  }
  input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

  /* ---------- toast ---------- */
  .toast{
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translate(-50%,20px);
    max-width:min(92vw,460px);
    padding:9px 14px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--accent);
    background:var(--panel);
    border:1px solid var(--accent-dim);
    border-radius:var(--radius);
    box-shadow:0 12px 40px -18px rgba(0,0,0,.9);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s, transform .2s;
    z-index:60;
  }
  .toast::before{content:"> ";color:var(--dim)}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- particles ---------- */
  .mote{
    position:fixed;
    z-index:70;
    width:5px;height:5px;
    pointer-events:none;
    background:var(--accent);
    box-shadow:0 0 10px var(--accent);
    animation:mote 1.15s ease-out forwards;
  }
  @keyframes mote{
    0%{opacity:1;transform:translate(0,0) scale(1)}
    100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}
  }
  .glyph{
    position:fixed;
    z-index:70;
    pointer-events:none;
    font-size:18px;
    animation:mote 1.4s ease-out forwards;
  }

  /* ---------- footer ---------- */
  footer{
    padding:20px 0 8px;
    border-top:1px solid var(--line);
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--dim);
  }
  footer nav{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
  footer nav a{color:var(--dim);text-decoration:none;letter-spacing:.06em}
  footer nav a:hover{color:var(--accent)}
  footer .made b{color:var(--accent);font-weight:500}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    html{scroll-behavior:auto}
  }

  @media (max-width:860px){
    .nav{display:none}
  }

  @media (max-width:560px){
    body{font-size:15.5px}
    .build,.build-sep{display:none}
    .panel{padding:18px 16px 20px}
    .two{grid-template-columns:1fr}
    .slots{grid-template-columns:repeat(2,1fr)}
    .cmp{grid-template-columns:1fr}
    .cta{flex-direction:column}
    .cta .btn,.row button{width:100%}
    .bar{gap:10px}
    .dock{left:var(--gutter);right:var(--gutter);width:auto;bottom:10px}
  }