/* Hallmark · macrostructure: Workbench · genre: atmospheric · theme: Lumen (night foundry) · nav: N5 (solid, no blur) · footer: Ft2 · tone: austere-literary */
:root{
  --color-paper:oklch(13% .014 265); --color-paper-2:oklch(17% .016 265); --color-paper-3:oklch(21% .016 265);
  --color-rule:oklch(96% .006 262 / .10); --color-rule-2:oklch(96% .006 262 / .18);
  --color-ink:oklch(96% .006 262); --color-ink-2:oklch(82% .008 265); --color-muted:oklch(64% .01 265);
  --color-accent:oklch(76% .17 50); --color-accent-2:oklch(68% .16 18); --color-accent-ink:oklch(18% .02 60);
  --color-focus:oklch(80% .15 50); --color-error:oklch(62% .2 25); --color-ok:oklch(74% .16 150);
  --rule-blueprint:oklch(96% .006 262 / .045);
  --font-display:"Instrument Serif","Tiempos Headline",ui-serif,Georgia,serif;
  --font-body:"Geist",ui-sans-serif,system-ui,sans-serif;
  --font-label:"JetBrains Mono",ui-monospace,monospace;
  --text-display:clamp(2rem,4vw + 1rem,3.25rem);
  --space-xs:.5rem; --space-sm:.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2.5rem; --space-2xl:4rem;
  --radius:.75rem;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0);
  --dur-short:220ms; --dur-long:420ms;
  --z-sticky:200; --z-toast:500;
}
html{overflow-x:clip}
body{
  overflow-x:clip; margin:0; background:var(--color-paper); color:var(--color-ink-2);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  text-transform:lowercase; font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:var(--font-display); font-weight:400; font-style:normal; color:var(--color-ink);
  letter-spacing:-.02em; line-height:1.1; overflow-wrap:anywhere; min-width:0; margin:0}
h1{font-size:var(--text-display)} h2{font-size:1.6rem} h3{font-size:1.2rem}
h1 em{font-style:normal; color:var(--color-accent-2); position:relative; white-space:nowrap}
h1 em::after{content:""; position:absolute; left:.05em; right:.05em; bottom:.04em; height:1px; background:var(--color-accent-2)}
.eyebrow{font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink); opacity:.55; margin:0 0 var(--space-sm)}
a{color:var(--color-accent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.wrap{max-width:72rem; margin-inline:auto; padding-inline:clamp(1rem,4vw,1.5rem)}
/* N5 pill — solid (tanpa blur, aturan lumen) */
.navpill{position:fixed; inset:var(--space-md) auto auto 50%; transform:translateX(-50%); z-index:var(--z-sticky);
  display:inline-flex; align-items:center; gap:var(--space-md); padding:.5rem .5rem .5rem 1rem;
  background:var(--color-paper-2); border:1px solid var(--color-rule-2); border-radius:999px; max-width:min(94vw,560px)}
.wordmark{font-family:var(--font-display); font-size:1.15rem; color:var(--color-ink); white-space:nowrap}
.navpill__tabs{display:flex; gap:.25rem}
.navpill__tabs button{font:inherit; text-transform:lowercase; white-space:nowrap; cursor:pointer; min-height:44px;
  border:1px solid transparent; background:transparent; color:var(--color-ink-2); border-radius:999px; padding:.4rem .9rem}
.navpill__tabs button[aria-selected="true"]{background:var(--color-accent); color:var(--color-accent-ink)}
/* hero kerja */
.hero{padding:calc(var(--space-2xl) + var(--space-xl)) 0 var(--space-xl);
  background:linear-gradient(var(--rule-blueprint) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,var(--rule-blueprint) 1px,transparent 1px) 0 0/48px 48px,var(--color-paper)}
.hero p.lede{max-width:56ch; margin:var(--space-md) 0 0}
.meter{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-lg); align-items:center;
  border-block:1px solid var(--color-rule); padding:.6rem 0; margin-top:var(--space-lg);
  font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted)}
.meter__bars{display:flex; gap:2px; align-items:end; height:26px; min-width:0}
.meter__bars>span{flex:1; min-width:1px; background:var(--color-accent); border-radius:.5px; opacity:.75}
/* kartu hairline */
.card{background:linear-gradient(var(--color-paper-2),var(--color-paper-2)) padding-box,
  radial-gradient(120% 90% at 50% 0%,oklch(76% .17 50 / .06),transparent 70%) border-box;
  border:1px solid var(--color-rule); border-radius:var(--radius); padding:var(--space-lg)}
.card+.card{margin-top:var(--space-lg)}
.grid2{display:grid; gap:var(--space-lg)}
@media(min-width:60rem){.grid2{grid-template-columns:1fr 1fr}.grid2--wide{grid-template-columns:1.15fr .85fr}}
/* form */
label{display:block; font-weight:500; margin:0 0 .35rem; color:var(--color-ink)}
input,select,textarea{width:100%; box-sizing:border-box; font:inherit; text-transform:none; color:var(--color-ink);
  background:var(--color-paper); border:1px solid var(--color-rule-2); border-radius:.5rem; min-height:44px; padding:.6rem .75rem;
  outline:2px solid transparent; outline-offset:1px}
textarea{min-height:12rem; resize:vertical; line-height:1.6}
@media(max-width:40rem){input,select,textarea{font-size:16px}}
input:hover,select:hover,textarea:hover{background:var(--color-paper-2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-focus)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--color-error)}
.hint{font-size:.85rem; color:var(--color-muted); min-height:1lh; margin:.3rem 0 0}
.hint--error{color:var(--color-error)}
select{accent-color:var(--color-accent)}
.field{margin:0 0 var(--space-md)}
.fieldrow{display:grid; gap:var(--space-md)}
@media(min-width:40rem){.fieldrow{grid-template-columns:1fr 1fr}}
/* tombol */
.btn{font:inherit; text-transform:lowercase; white-space:nowrap; cursor:pointer; min-height:44px;
  border-radius:999px; padding:.6rem 1.4rem; border:1px solid var(--color-accent); background:transparent; color:var(--color-accent);
  transition:background-color var(--dur-short) var(--ease-out),transform 100ms var(--ease-out)}
.btn--fill{background:var(--color-accent); color:var(--color-accent-ink)}
@media(hover:hover){.btn:hover{transform:translateY(-1.5px)} .btn--fill:hover{background:var(--color-focus)}}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn .spin{display:inline-block; width:1em; height:1em; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:rot 1s linear infinite; vertical-align:-.15em; margin-right:.5em}
@keyframes rot{to{transform:rotate(360deg)}}
/* hasil */
.score{font-family:var(--font-display); font-size:clamp(2.5rem,4vw + 1rem,4rem); color:var(--color-ink); line-height:1}
.pill{display:inline-block; font-family:var(--font-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--color-rule-2); border-radius:999px; padding:.2rem .7rem; color:var(--color-ink-2); white-space:nowrap}
.pill--warn{border-color:var(--color-accent-2); color:var(--color-accent-2)}
.pill--bad{border-color:var(--color-error); color:var(--color-error)}
.pill--ok{border-color:var(--color-ok); color:var(--color-ok)}
table{width:100%; border-collapse:collapse; font-size:.92rem}
th{font-family:var(--font-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); text-align:left}
th,td{padding:.55rem .6rem; border-bottom:1px solid var(--color-rule); vertical-align:top}
@media(max-width:40rem){table thead{display:none} table tr{display:block; border:1px solid var(--color-rule); border-radius:.5rem; margin-bottom:.6rem; padding:.4rem}
  table td{display:block; border:0; padding:.3rem .6rem} table td::before{content:attr(data-l); display:block; font-family:var(--font-label); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted)}}
canvas.chart{max-width:100%}
ul.rec{margin:.5rem 0 0; padding-left:1.1rem} ul.rec li{margin-bottom:.4rem}
.diag{display:grid; gap:var(--space-md)}
@media(min-width:60rem){.diag{grid-template-columns:1fr 1fr}}
.story-out{white-space:pre-wrap; text-transform:none}
/* wizard */
.steps{display:flex; gap:.4rem; margin:0 0 var(--space-lg)}
.steps span{flex:1; height:3px; background:var(--color-rule); border-radius:2px}
.steps span.on{background:var(--color-accent)}
.wizardnav{display:flex; gap:var(--space-sm); margin-top:var(--space-lg)}
/* toast + footer */
.toast{position:fixed; right:1rem; bottom:1rem; z-index:var(--z-toast); background:var(--color-paper-3); color:var(--color-ink);
  border:1px solid var(--color-rule-2); border-radius:.6rem; padding:.7rem 1rem; max-width:min(92vw,24rem)}
.foot{border-top:1px solid var(--color-rule); margin-top:var(--space-2xl); padding:var(--space-lg) 0 var(--space-xl);
  font-size:.85rem; color:var(--color-muted)}
.foot p{margin:0}
/* entrance tunggal */
.reveal{opacity:0; transform:translateY(8px); animation:rev var(--dur-long) var(--ease-out) forwards; animation-delay:calc(var(--i,0)*60ms)}
@keyframes rev{to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:150ms!important; transition-duration:150ms!important} .reveal{animation:rev 150ms linear forwards}}