:root{
  --navy-900:#070617; --navy-850:#0a0a1f; --navy-800:#0f0e2a; --navy-700:#161436;
  --violet-500:#8b5cf6; --violet-400:#a78bfa; --violet-300:#c4b5fd;
  --indigo-500:#6366f1; --cyan-300:#67e8f9;
  --ink:#f4f3ff; --ink-dim:#b8b4d8; --ink-faint:#8e89b5;
  --line:rgba(167,139,250,.16); --line-strong:rgba(167,139,250,.32);
  --glass:rgba(22,20,54,.58);
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --pad:clamp(16px,4.6vw,30px);
  --shadow:0 18px 44px -22px rgba(0,0,0,.85);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy-900); color:var(--ink);
  font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  letter-spacing:-.011em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{letter-spacing:-.035em; line-height:1.04; margin:0; font-weight:650}
p{margin:0}
button{font:inherit; color:inherit}

/* ---------- ambient ---------- */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aurora span{position:absolute; border-radius:50%; filter:blur(66px); opacity:.5}
.aurora span:nth-child(1){width:70vw;height:70vw;max-width:460px;max-height:460px;top:-16vh;left:-14vw;
  background:radial-gradient(circle,var(--violet-500),transparent 68%); animation:drift 22s var(--ease) infinite alternate}
.aurora span:nth-child(2){width:62vw;height:62vw;max-width:400px;max-height:400px;top:26vh;right:-20vw;
  background:radial-gradient(circle,var(--indigo-500),transparent 68%); animation:drift 28s var(--ease) infinite alternate-reverse}
.aurora span:nth-child(3){width:52vw;height:52vw;max-width:340px;max-height:340px;bottom:-10vh;left:14vw;
  background:radial-gradient(circle,#4338ca,transparent 70%); opacity:.34; animation:drift 34s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,5vh,0) scale(1.18)}}

.wrap{width:100%; max-width:720px; margin-inline:auto; padding-inline:var(--pad)}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,12vh,86px) 0 clamp(26px,6vh,40px)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--violet-300);
  background:rgba(139,92,246,.12); border:1px solid var(--line); border-radius:999px; padding:6px 13px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan-300); box-shadow:0 0 0 0 rgba(103,232,249,.6); animation:pulse 2.6s infinite}
@keyframes pulse{70%,100%{box-shadow:0 0 0 9px rgba(103,232,249,0)}}
h1{font-size:clamp(42px,13.5vw,70px); margin:18px 0 0; font-weight:700}
h1 em{font-style:normal; background:linear-gradient(104deg,var(--violet-300),var(--cyan-300) 62%,var(--violet-400));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{margin-top:16px; font-size:clamp(16px,4.3vw,18.5px); color:var(--ink-dim); max-width:46ch}
.lede strong{color:var(--ink); font-weight:600}
.hero-actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}
.hero-hint{margin-top:12px; font-size:13.5px; color:var(--ink-faint); min-height:1.3em; transition:color .3s}
.hero-hint.ok{color:var(--cyan-300)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 20px; border-radius:var(--r-md); border:1px solid transparent;
  font-size:15.5px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, border-color .22s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn svg.ext{fill:none}
.btn-primary{background:linear-gradient(135deg,var(--violet-500),var(--indigo-500)); color:#fff;
  box-shadow:0 12px 30px -12px rgba(139,92,246,.85)}
.btn-ghost{background:rgba(167,139,250,.08); border-color:var(--line-strong); color:var(--violet-300)}
.btn-soft{background:var(--glass); border-color:var(--line); color:var(--ink); flex:1 1 180px}
.btn:active{transform:scale(.967)}
@media (hover:hover){
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(139,92,246,.95)}
  .btn-ghost:hover,.btn-soft:hover{background:rgba(167,139,250,.16); border-color:var(--line-strong)}
}
.btn.copied{background:linear-gradient(135deg,#10b981,#059669); color:#fff; border-color:transparent}
:focus-visible{outline:2px solid var(--cyan-300); outline-offset:3px; border-radius:6px}

/* ---------- sections ---------- */
.section{margin-top:clamp(38px,9vh,62px)}
.shead{display:flex; align-items:baseline; gap:11px; font-size:clamp(21px,5.6vw,27px); margin-bottom:16px}
.shead span{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--violet-400); opacity:.72;
  font-variant-numeric:tabular-nums}
.snote{font-size:14.5px; color:var(--ink-faint); margin-bottom:16px}
.snote b{color:var(--ink-dim); font-weight:600}

.steps{counter-reset:s; list-style:none; margin:0; padding:0; display:grid; gap:11px}
.steps li{counter-increment:s; position:relative; padding:15px 17px 15px 50px;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  font-size:15px; color:var(--ink-dim); backdrop-filter:blur(12px)}
.steps li b{color:var(--ink); font-weight:620}
.steps li::before{content:counter(s); position:absolute; left:15px; top:14px;
  width:23px;height:23px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,var(--violet-500),var(--indigo-500));
  font-size:12.5px; font-weight:700; color:#fff}

/* ---------- cards ---------- */
.cards{display:grid; gap:12px}
.card{background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg);
  backdrop-filter:blur(14px); box-shadow:var(--shadow); overflow:hidden;
  transition:border-color .25s, transform .25s var(--ease)}
.card.open{border-color:var(--line-strong)}
.card.master{background:linear-gradient(165deg,rgba(99,102,241,.2),rgba(22,20,54,.62));
  border-color:var(--line-strong)}
.card-head{display:flex; align-items:center; gap:13px; width:100%; padding:17px var(--card-pad,18px);
  background:none; border:0; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent}
.card-emoji{font-size:22px; line-height:1; flex:none; width:40px; height:40px; display:grid; place-items:center;
  background:rgba(139,92,246,.14); border:1px solid var(--line); border-radius:12px}
.card-text{flex:1; min-width:0}
.card-title{display:block; font-size:16.5px; font-weight:650; letter-spacing:-.02em}
.card-tag{display:block; font-size:13.5px; color:var(--ink-faint); margin-top:3px}
.chev{flex:none; width:20px; height:20px; fill:none; stroke:var(--violet-400); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .32s var(--ease)}
.card.open .chev{transform:rotate(180deg)}
.card-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--ease)}
.card.open .card-body{grid-template-rows:1fr}
.card-body>div{overflow:hidden; min-height:0}
.card-inner{padding:0 var(--card-pad,18px) 18px}
pre{margin:0 0 13px; padding:15px; background:rgba(4,4,16,.6); border:1px solid var(--line);
  border-radius:var(--r-sm); font:400 13px/1.62 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#ddd9ff; white-space:pre-wrap; word-break:break-word; max-height:360px; overflow:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.card-actions{display:flex; gap:9px; flex-wrap:wrap}
.card-actions .btn{min-height:46px; font-size:14.2px; padding:0 14px; flex:1 1 128px; white-space:nowrap}

/* ---------- rules ---------- */
.panel{background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--card-pad,18px); backdrop-filter:blur(14px); box-shadow:var(--shadow)}
.role-grid{display:grid; gap:9px; grid-template-columns:1fr}
@media (min-width:520px){.role-grid{grid-template-columns:1fr 1fr}}
.role{display:flex; gap:11px; align-items:flex-start; padding:12px 13px;
  background:rgba(139,92,246,.07); border:1px solid var(--line); border-radius:var(--r-sm)}
.role-n{flex:none; width:26px;height:26px; display:grid;place-items:center; border-radius:8px;
  background:linear-gradient(135deg,var(--violet-500),var(--indigo-500)); font-size:13px;font-weight:700;color:#fff}
.role-name{display:block; font-size:14.8px; font-weight:620}
.role-note{display:block; font-size:12.8px; color:var(--ink-faint); margin-top:2px}
.shift-grid{display:grid; gap:9px; margin-top:13px}
@media (min-width:520px){.shift-grid{grid-template-columns:1fr 1fr}}
.shift{padding:13px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.07))}
.shift-label{display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-300); font-weight:650}
.shift-time{font-size:17px; font-weight:650; margin-top:4px; font-variant-numeric:tabular-nums}
.shift-note{font-size:12.8px; color:var(--ink-faint); margin-top:3px}
.rule-list{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px}
.rule-list li{display:flex; gap:10px; font-size:14.6px; color:var(--ink-dim); line-height:1.55}
.rule-list svg{flex:none; width:17px;height:17px; margin-top:3px; fill:none; stroke:var(--cyan-300);
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- sample table ---------- */
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(4,4,16,.42)}
table{border-collapse:collapse; width:100%; min-width:430px; font-size:13.6px}
th,td{padding:11px 12px; text-align:left; border-bottom:1px solid rgba(167,139,250,.1); white-space:nowrap}
thead th{background:rgba(139,92,246,.14); font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--violet-300); font-weight:650; position:sticky; top:0}
tbody th{font-weight:550; color:var(--ink-dim); font-size:13px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:last-child td{color:var(--cyan-300); font-variant-numeric:tabular-nums}
.cap{font-size:12.8px; color:var(--ink-faint); margin-top:11px; font-style:italic}

/* ---------- help + footer ---------- */
.help-row{display:flex; gap:11px; flex-wrap:wrap}
.foot{margin:clamp(44px,10vh,72px) 0 34px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13.6px; color:var(--ink-faint); display:grid; gap:9px}
.foot-fine{font-size:12.4px; opacity:.74}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute; inset:0; background:rgba(4,3,16,.74); backdrop-filter:blur(7px);
  animation:fade .25s var(--ease) both}
.modal-card{position:relative; width:100%; max-width:360px; text-align:center;
  padding:30px 24px 24px; border-radius:26px; border:1px solid var(--line-strong);
  background:linear-gradient(170deg,rgba(40,30,96,.96),rgba(12,11,34,.97));
  box-shadow:0 34px 76px -26px rgba(0,0,0,.92); animation:pop .42s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(22px) scale(.9)}to{opacity:1; transform:none}}
.modal-emoji{font-size:58px; line-height:1; animation:bob 2.3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(5deg)}}
#modal-title{font-size:25px; margin-top:14px; font-weight:700}
.modal-sub{margin-top:9px; font-size:15px; color:var(--violet-300)}
.modal-kicker{margin-top:13px; font-size:13.4px; color:var(--ink-faint)}
.modal-ok{width:100%; margin-top:22px}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); z-index:70;
  transform:translate(-50%,22px); opacity:0; pointer-events:none;
  padding:11px 20px; border-radius:999px; font-size:14.4px; font-weight:600;
  background:rgba(14,13,38,.94); border:1px solid var(--line-strong); color:var(--ink);
  box-shadow:0 16px 36px -16px rgba(0,0,0,.9); backdrop-filter:blur(12px);
  transition:opacity .25s var(--ease), transform .3s var(--ease); max-width:86vw; text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}