/* paper.css — the shared "desk" look: paper cards, tape, clips, pins, stamps, folders.
   Pages add their own layout on top of this. */

:root{
  --paper:#f3eee3; --card:#fffdf7; --manila:#efe0b8; --manila-2:#e7d6a6;
  --ink:#1f1c17; --ink-2:#6b6457; --ink-3:#a39b8b; --soft:#ddd5c4;
  --accent:#ff5b29; --marker:#ffe066; --marker-2:#f4cf3a;
  --green:#2e7d4f; --mint:#e3f1e7; --amber:#e7a10b; --cream:#fff4d1; --red:#d23a2c; --pink:#ffe1dc;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Cascadia Code",Consolas,ui-monospace,Menlo,monospace;
  --stamp:"Arial Black","Segoe UI Black",Impact,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; font-family:var(--sans); color:var(--ink); background:var(--paper);
  background-image:radial-gradient(rgba(31,28,23,.075) 1px, transparent 1px); background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
}
/* faint paper grain over everything */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

@keyframes in{from{opacity:0; transform:translateY(14px) rotate(-.5deg)}to{opacity:1; transform:none}}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:.25}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

.logo{font-family:var(--serif); font-style:italic; font-size:22px; display:flex; align-items:baseline; gap:2px}
.logo b{color:var(--accent); font-style:normal}
.logo span{font-family:var(--sans); font-style:normal; font-size:12.5px; color:var(--ink-2); margin-left:8px; padding:2px 9px; border:1.5px solid var(--ink-2); border-radius:999px}
.hl{background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%); padding:0 4px}
svg.i{width:15px; height:15px; vertical-align:-2.5px; flex:none}

/* ---------- paper sheets ---------- */
.card{
  position:relative; background:var(--card); border:2px solid var(--ink); border-radius:14px;
  box-shadow:7px 7px 0 var(--ink), 10px 14px 24px -10px rgba(31,28,23,.35);
}
.lift{transition:transform .15s, box-shadow .15s}
.lift:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--ink), 14px 20px 28px -12px rgba(31,28,23,.4)}
/* a couple of sheets peeking out from under */
.stack{position:relative; z-index:0}
.stack::before,.stack::after{content:""; position:absolute; inset:0; z-index:-1; background:#fff; border:2px solid var(--ink); border-radius:inherit}
/* --tilt (set by paper.js) shrinks the angle on tall cards, so the corners never swing out more than ~8px */
.stack::before{transform:rotate(calc(-1.7deg * var(--tilt,1))) translate(-4px,6px); background:#f8f3e8}
.stack::after{transform:rotate(calc(1.2deg * var(--tilt,1))) translate(6px,2px)}

/* manila folder with a tab */
.folder{position:relative; margin-top:36px; padding:20px 18px 18px; background:var(--manila); border:2px solid var(--ink);
  border-radius:0 14px 14px 14px; box-shadow:6px 6px 0 var(--ink), 8px 14px 24px -12px rgba(31,28,23,.35)}
.folder>.tab{position:absolute; left:-2px; top:-34px; height:36px; padding:0 18px; display:inline-flex; align-items:center; gap:9px;
  background:var(--manila); border:2px solid var(--ink); border-bottom:0; border-radius:12px 12px 0 0; font-size:13px; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.folder>.tab::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:4px; background:var(--manila)}
.folder.gray{background:#e4ddd0} .folder.gray>.tab{background:#e4ddd0} .folder.gray>.tab::after{background:#e4ddd0}
.folder .cnt{font-size:11.5px; padding:1px 7px; border-radius:999px; background:#fff; border:1.5px solid var(--ink)}

/* ruled index card (3x5) */
.index{
  position:relative; background:#fff; border:2px solid var(--ink); border-radius:8px; box-shadow:4px 4px 0 var(--ink);
  background-image:linear-gradient(#e9a9a1,#e9a9a1), repeating-linear-gradient(180deg, transparent 0 22px, #dbe7f6 22px 24px);
  background-size:100% 2px, 100% 24px; background-position:0 34px, 0 40px; background-repeat:no-repeat, repeat-y;
}

/* yellow sticky note (no outline — real ones don't have one) */
.sticky{
  position:relative; background:linear-gradient(160deg, #fff0a0 0%, var(--marker) 45%, #f7d94e 100%);
  padding:22px 18px 16px; border-radius:3px;
  box-shadow:0 14px 22px -12px rgba(31,28,23,.55), 0 2px 3px rgba(31,28,23,.12);
}
.sticky.curl::after{
  content:""; position:absolute; right:0; bottom:0; width:38px; height:38px; border-radius:0 0 3px 0;
  background:linear-gradient(225deg, var(--behind,var(--card)) 0 48%, #e7cb47 50%, #c6a92b 72%, #b59a24 100%);
  box-shadow:-4px -4px 7px -2px rgba(31,28,23,.28);
}

/* a strip of translucent tape with torn ends */
.tape{position:absolute; width:116px; height:30px; pointer-events:none; z-index:3; filter:drop-shadow(0 1px 1px rgba(31,28,23,.28))}
.tape::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, rgba(255,255,255,0) 2px 6px),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.42) 48%, rgba(255,255,255,.58));
  background-color:rgba(250,238,196,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  clip-path:polygon(2% 0%, 0% 9%, 3% 19%, 1% 31%, 3.5% 43%, 0% 55%, 2.5% 67%, .5% 79%, 3% 90%, 1% 100%,
                    98% 100%, 100% 91%, 97% 80%, 99.5% 68%, 97% 56%, 100% 44%, 97.5% 32%, 100% 20%, 97% 9%, 99% 0%);
}
.tape.top{left:50%; top:-15px; transform:translateX(-50%) rotate(-2.5deg)}
.tape.tl{left:-32px; top:14px; transform:rotate(-45deg)}
.tape.tr{right:-32px; top:14px; transform:rotate(45deg)}
.tape.sm{width:84px; height:24px}

/* a paperclip over the top edge */
.clip{
  position:absolute; width:30px; height:62px; pointer-events:none; z-index:3;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 96'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23f6f7f9'/><stop offset='.42' stop-color='%23c3c9d0'/><stop offset='.58' stop-color='%23858d96'/><stop offset='1' stop-color='%23e6eaee'/></linearGradient></defs><path d='M15 87 V22 a10 10 0 0 1 20 0 v52 a6 6 0 0 1 -12 0 V30 a3 3 0 0 1 6 0 v38' fill='none' stroke='rgba(0,0,0,.25)' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/><path d='M14 86 V22 a10 10 0 0 1 20 0 v52 a6 6 0 0 1 -12 0 V30 a3 3 0 0 1 6 0 v38' fill='none' stroke='url(%23g)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  filter:drop-shadow(1px 2px 1.5px rgba(31,28,23,.35));
}
.clip.tl{left:24px; top:-17px; transform:rotate(-7deg)}
.clip.tr{right:24px; top:-17px; transform:rotate(7deg)}

/* a push pin */
.pin{
  position:absolute; width:22px; height:32px; pointer-events:none; z-index:3;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'><defs><radialGradient id='h' cx='.35' cy='.3' r='.85'><stop offset='0' stop-color='%23ff9a7e'/><stop offset='.5' stop-color='%23e8432f'/><stop offset='1' stop-color='%238f170c'/></radialGradient></defs><path d='M12 20v12' stroke='%23666' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='12' r='9.5' fill='url(%23h)'/><ellipse cx='9' cy='8.3' rx='3.2' ry='2.1' fill='rgba(255,255,255,.5)'/></svg>") no-repeat center/contain;
  filter:drop-shadow(2px 4px 3px rgba(31,28,23,.4));
}
.pin.top{left:50%; top:-13px; transform:translateX(-50%) rotate(-8deg)}
.pin.green{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'><defs><radialGradient id='h' cx='.35' cy='.3' r='.85'><stop offset='0' stop-color='%23a6f0c0'/><stop offset='.5' stop-color='%232e9a5e'/><stop offset='1' stop-color='%23145a33'/></radialGradient></defs><path d='M12 20v12' stroke='%23666' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='12' r='9.5' fill='url(%23h)'/><ellipse cx='9' cy='8.3' rx='3.2' ry='2.1' fill='rgba(255,255,255,.5)'/></svg>")}
.pin.blue{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'><defs><radialGradient id='h' cx='.35' cy='.3' r='.85'><stop offset='0' stop-color='%23b7d3ff'/><stop offset='.5' stop-color='%233b6fd6'/><stop offset='1' stop-color='%23183a80'/></radialGradient></defs><path d='M12 20v12' stroke='%23666' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='12' r='9.5' fill='url(%23h)'/><ellipse cx='9' cy='8.3' rx='3.2' ry='2.1' fill='rgba(255,255,255,.5)'/></svg>")}

/* a rubber stamp, slightly worn */
.stamp{
  position:absolute; display:inline-block; padding:3px 11px; border:3px solid currentColor; border-radius:7px; color:var(--red);
  font-family:var(--stamp); font-weight:900; font-size:19px; letter-spacing:.1em; text-transform:uppercase; line-height:1.15; white-space:nowrap;
  transform:rotate(-11deg); opacity:.8; mix-blend-mode:multiply; pointer-events:none; z-index:2;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='7'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .25 1 1 1'/></feComponentTransfer></filter><rect width='260' height='120' fill='black' filter='url(%23f)'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='7'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .25 1 1 1'/></feComponentTransfer></filter><rect width='260' height='120' fill='black' filter='url(%23f)'/></svg>");
  -webkit-mask-size:cover; mask-size:cover;
}
.stamp.ink{color:var(--ink)} .stamp.amber{color:#b57a00} .stamp.green{color:var(--green)}
.stamp.big{font-size:30px; border-width:4px; border-radius:10px; padding:4px 16px}
.stamp.sm{font-size:12px; border-width:2px; letter-spacing:.14em; padding:1px 7px; border-radius:5px}

/* a till receipt with a torn bottom */
.receipt{
  position:relative; background:#fff; color:var(--ink); font-family:var(--mono); font-size:12.5px; line-height:1.5;
  padding:14px 16px 16px; box-shadow:0 10px 18px -10px rgba(31,28,23,.5), 0 1px 1px rgba(31,28,23,.08);
}
.receipt::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px;
  background:linear-gradient(45deg, transparent 50%, #fff 50%) 0 0/8px 8px repeat-x, linear-gradient(-45deg, transparent 50%, #fff 50%) 0 0/8px 8px repeat-x;
}
.receipt .rh{text-align:center; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:11px; border-bottom:1.5px dashed #cfc8b8; padding-bottom:8px; margin-bottom:6px}
.receipt .r{display:flex; justify-content:space-between; gap:12px; padding:3px 0; border-bottom:1px dashed #e4ddcf}
.receipt .r:last-of-type{border-bottom:0}
.receipt .r b{font-weight:700}
.receipt .r.total{border-top:1.5px dashed #cfc8b8; margin-top:4px; padding-top:7px; font-size:14px}
.receipt .barcode{height:26px; margin:12px 0 2px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px)}
.receipt .rf{text-align:center; font-size:10.5px; color:var(--ink-3); letter-spacing:.08em}

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; border:2px solid var(--ink); border-radius:9px; cursor:pointer;
  color:var(--ink); font-size:14px; font-weight:700; padding:8px 14px; background:#fff; font-family:var(--sans); white-space:nowrap;
  box-shadow:3px 3px 0 var(--ink), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .08s, box-shadow .08s, background .15s;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink), inset 0 1px 0 rgba(255,255,255,.5)}
.btn:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--ink), inset 0 1px 0 rgba(255,255,255,.5)}
.btn:disabled{opacity:.6; cursor:wait}
.btn.main{background:var(--accent); color:#fff}
.btn.stop{background:var(--red); color:#fff}
.btn.go{background:var(--green); color:#fff}
.btn.yel{background:var(--marker)}
.btn.on{background:var(--ink); color:#fff}
.btn.big{width:100%; padding:13px; font-size:16px; box-shadow:4px 4px 0 var(--ink), inset 0 1px 0 rgba(255,255,255,.4)}
.btn.sm{padding:6px 11px; font-size:13px; box-shadow:2px 2px 0 var(--ink), inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ok{background:var(--green); color:#fff}
.btn .cnt{font-size:11.5px; padding:1px 7px; border-radius:999px; background:var(--paper); border:1.5px solid var(--ink); color:var(--ink)}
.btn.on .cnt{background:#fff}
.link{background:none; border:0; padding:3px 4px; font:inherit; font-size:13.5px; color:var(--ink-2); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.link:hover{color:var(--ink)}
.link.red:hover{color:var(--red)}

input,textarea{width:100%; padding:12px 14px; border-radius:9px; border:2px solid var(--ink); background:#fff; color:var(--ink);
  font-size:16px; font-family:var(--sans); outline:none; transition:box-shadow .15s, transform .15s}
input:focus,textarea:focus{box-shadow:3px 3px 0 var(--accent); transform:translate(-1px,-1px)}
input::placeholder{color:var(--ink-3)}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:2px 10px; border:2px solid var(--ink); border-radius:999px; white-space:nowrap; background:#fff}
.badge .d{width:7px; height:7px; border-radius:50%; background:currentColor}
.badge.on{color:var(--green); background:var(--mint)} .badge.on .d{animation:blink 1.6s infinite}
.badge.pause{color:#8a5a00; background:var(--cream)}
.badge.off{color:var(--red); background:var(--pink)}
.badge.ban{color:#fff; background:var(--ink)}

.switch{display:inline-flex; align-items:center; gap:9px; padding:6px 13px 6px 6px; border:2px solid var(--ink); border-radius:999px;
  background:#fff; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink); box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; white-space:nowrap}
.switch:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--ink)}
.switch .track{width:38px; height:22px; border:2px solid var(--ink); border-radius:999px; background:var(--soft); position:relative; transition:background .2s; flex:none}
.switch .track::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--ink); transition:left .2s cubic-bezier(.3,1.5,.5,1)}
.switch.open .track{background:var(--green)}
.switch.open .track::after{left:18px; background:#fff}

.tank{position:relative; height:20px; border:2px solid var(--ink); border-radius:7px; background:#fff; overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(31,28,23,.12)}
.tank .fill{position:absolute; inset:0 auto 0 0; width:0; border-right:2px solid var(--ink);
  background-image:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%, rgba(0,0,0,.08));
  transition:width .9s cubic-bezier(.3,1.2,.5,1), background-color .4s}
.tank .ticks{position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(31,28,23,.28) calc(25% - 1px) 25%)}

.panel{display:none; margin-top:16px; padding:14px 16px; border:2px solid var(--ink); border-radius:10px; background:var(--cream); box-shadow:3px 3px 0 var(--ink)}
.panel.show{display:block; animation:in .25s both}
.panel.danger{background:var(--pink)}
.panel.topup{background:var(--mint)}
.panel .ph{font-weight:700; margin-bottom:4px; font-size:15px}
.panel p{margin:0 0 11px; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.panel input{font-size:14px; padding:8px 12px; margin-bottom:11px}
.panel .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.panel .row input{margin:0; width:140px}

.spin{display:inline-block; width:14px; height:14px; border:2px solid rgba(31,28,23,.25); border-top-color:var(--ink); border-radius:50%; animation:rot .7s linear infinite; vertical-align:-2px; margin-right:6px}

/* paper-slip notifications */
.toasts{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:8000; pointer-events:none}
.toast{position:relative; background:#fff; border:2px solid var(--ink); border-radius:4px; padding:10px 14px 10px 32px; font-size:13.5px; font-weight:600;
  box-shadow:4px 4px 0 var(--ink); transform:rotate(-1.2deg); animation:toastin .3s cubic-bezier(.3,1.4,.5,1) both; max-width:320px}
.toast .pin{left:7px; top:-8px; width:18px; height:26px}
.toast.out{animation:toastout .25s both}
@keyframes toastin{from{opacity:0; transform:translateY(14px) rotate(-1.2deg)}}
@keyframes toastout{to{opacity:0; transform:translateY(8px) rotate(-1.2deg)}}

/* ---------- the VS Code setup wizard (setup.js) ---------- */
.copy{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:6px 13px; font-size:13px; font-weight:700; border:2px solid var(--ink); border-radius:8px;
  background:#fff; color:var(--ink); cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:transform .08s, box-shadow .08s, background .15s; font-family:var(--sans)}
.copy:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink)}
.copy:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink)}
.copy.ok{background:var(--green); color:#fff}
code.inl{font-family:var(--mono); font-size:12.5px; background:#efe9dc; padding:1px 6px; border-radius:4px; word-break:break-all; color:var(--ink)}
.codebox{margin-top:8px; background:var(--ink); color:#f3eee3; border-radius:10px; padding:12px 14px; font-family:var(--mono);
  font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-all; border:2px solid var(--ink); box-shadow:inset 0 2px 8px rgba(0,0,0,.4)}
.codebox .k{color:#ffb4a2} .codebox .s{color:#b8e0c8}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
kbd{display:inline-block; min-width:1.6em; padding:0 6px; border:1.5px solid var(--ink); border-bottom-width:3px; border-radius:6px; background:#fff;
  font:600 12px/1.55 var(--mono); text-align:center; color:var(--ink); white-space:nowrap; vertical-align:1px}

.wiz{font-size:14.5px; line-height:1.55; color:var(--ink)}
.wiz-head h3{font-family:var(--serif); font-size:25px; margin:0 0 2px}
.wiz-head p{margin:0 0 6px; color:var(--ink-2); font-size:14.5px}
.wiz-step{position:relative; display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; padding:16px 0 4px}
.wiz-step[data-step="1"]::before,.wiz-step[data-step="2"]::before{content:""; position:absolute; left:20px; top:62px; bottom:-14px; border-left:2px dashed var(--ink-3)}
.wiz-n{position:relative; z-index:1; width:42px; height:42px; border-radius:50%; border:2px solid var(--ink); display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:20px; background:var(--cream); box-shadow:2px 2px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.6); transition:background .2s}
.wiz-step[data-step="2"] .wiz-n{background:#bcd4ff}
.wiz-step[data-step="3"] .wiz-n{background:#b8e0c8}
.wiz-step.done .wiz-n{background:var(--green); color:#fff; font-size:0}
.wiz-step.done .wiz-n::after{content:"✓"; font-size:21px; font-family:var(--sans)}
.wiz-body h4{margin:8px 0 4px; font-size:17px}
.wiz-body>p{margin:0 0 10px; color:var(--ink-2); font-size:14px}
.wiz ol.mini{margin:6px 0 4px; padding-left:20px; display:grid; gap:6px; font-size:14px}
.wiz ol.mini li::marker{font-weight:700; color:var(--ink-2)}
.wiz .spark{color:var(--accent); font-size:16px}
.wiz-tabs{display:inline-flex; margin:2px 0 8px; border:2px solid var(--ink); border-radius:999px; overflow:hidden; box-shadow:2px 2px 0 var(--ink)}
.wiz-tabs button{border:0; background:#fff; padding:5px 14px; font:700 13px var(--sans); color:var(--ink); cursor:pointer}
.wiz-tabs button+button{border-left:2px solid var(--ink)}
.wiz-tabs button.on{background:var(--ink); color:#fff}
.wiz .codebox.ps{position:relative; max-height:5.1em; overflow:hidden; font-size:11px; line-height:1.55; color:#cfc6b4; user-select:all}
.wiz .codebox.ps::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2.4em; background:linear-gradient(transparent, var(--ink))}
.wiz .copy.big-copy{background:var(--accent); color:#fff; padding:10px 18px; font-size:15px; box-shadow:3px 3px 0 var(--ink)}
.wiz .copy.big-copy.ok{background:var(--green)}
.wiz details{margin-top:10px; border:0; padding:0}
.wiz details summary{cursor:pointer; font-weight:700; font-size:13.5px; color:var(--ink-2); list-style:none; display:inline-flex; gap:6px; align-items:center}
.wiz details summary::-webkit-details-marker{display:none}
.wiz details summary::before{content:"▸"; transition:transform .15s; display:inline-block}
.wiz details[open] summary::before{transform:rotate(90deg)}
.wiz details summary:hover{color:var(--ink)}
.wiz details p,.wiz details li{font-size:13.5px; color:var(--ink-2)}
.wiz details ul{margin:6px 0; padding-left:18px}
.wiz-more{margin-top:14px !important; padding-top:12px !important; border-top:1.5px dashed var(--soft) !important}
.wiz-more dl{margin:10px 0 0}
.wiz-more dt{font-weight:700; font-size:13.5px; margin-top:8px}
.wiz-more dd{margin:2px 0 0; font-size:13.5px; color:var(--ink-2)}
.wiz-live{display:flex; align-items:center; gap:12px; margin-top:14px; padding:11px 14px; border:2px dashed var(--ink-3); border-radius:10px; font-size:14px; color:var(--ink-2); background:rgba(255,255,255,.6)}
.wiz-live .spin{flex:none; margin:0}
.wiz-live.ok{border:2px solid var(--green); background:var(--mint); color:var(--ink); box-shadow:3px 3px 0 var(--green)}
.wiz-live.bad{border:2px solid var(--red); background:var(--pink); color:var(--ink)}
.wiz-live .stamp{position:static; flex:none; transform:rotate(-7deg); opacity:.9}
.wiz-note{margin-top:12px; padding:10px 13px; border:1.5px solid var(--ink); border-left-width:5px; border-radius:8px; background:var(--cream); font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.wiz-note b{color:var(--ink)}

/* ---------- phones ---------- */
/* safety net: decorations that poke past the screen edge never cause sideways scrolling */
html,body{overflow-x:clip}
/* only shown on touch phones: the VS Code steps have to happen on a computer */
.wiz-phone{display:none; margin:12px 0 2px; padding:11px 13px; border:2px solid var(--ink); border-radius:10px; background:#e8f0ff; font-size:14px; line-height:1.5; box-shadow:2px 2px 0 var(--ink)}
.wiz-phone b{color:var(--ink)}
@media (hover:none) and (pointer:coarse){
  .wiz-phone{display:block}
  /* iPhone zooms into any field under 16px when you tap it */
  input,textarea{font-size:16px !important}
  .copy,.btn{min-height:40px}
}
@media (max-width:560px){
  .wiz-head h3{font-size:22px}
  /* number next to the step title, the step's content uses the full width below it */
  .wiz-step{grid-template-columns:34px minmax(0,1fr); column-gap:10px; row-gap:8px; padding:18px 0 2px}
  .wiz-step[data-step]::before{display:none}
  .wiz-n{width:34px; height:34px; font-size:17px}
  .wiz-step.done .wiz-n::after{font-size:18px}
  .wiz-body{display:contents}
  .wiz-body>h4{grid-column:2; align-self:center; margin:0; font-size:16.5px; line-height:1.25}
  .wiz-body>:not(h4){grid-column:1 / -1}
  .wiz-body>.wiz-tabs{justify-self:start}
  .wiz ol.mini{padding-left:20px; font-size:14.5px}
  .wiz-tabs button{padding:6px 14px; white-space:nowrap}
  .wiz .copy.big-copy{width:100%; justify-content:center}
  .wiz-note{font-size:13.5px}
  .wiz-more{margin-top:12px !important}
}