:root { color-scheme: light; --ink:#201e1b; --muted:#6d6760; --paper:#f7f5f0; --surface:#fffefa; --line:#dcd7ce; --accent:#b84e2f; --accent-dark:#8f3820; --red:#96392e; --green:#386a52; --mono:"SFMono-Regular",Consolas,monospace; --serif:Georgia,"Times New Roman",serif; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 76% 8%,rgb(184 78 47 / 6%),transparent 32rem),var(--paper); }
[hidden] { display:none !important; }
button,input,select { font:inherit; }
a { color:inherit; text-underline-offset:3px; }
header,main { width:min(860px,calc(100% - 36px)); margin-inline:auto; }
header { display:flex; align-items:center; justify-content:space-between; min-height:68px; border-bottom:1px solid #e7e3dc; }
header a { color:var(--muted); font-size:.76rem; text-decoration:none; }
header .brand { color:var(--ink); font:600 1.18rem var(--serif); }
main { padding:clamp(42px,8vw,86px) 0; }
.intro { max-width:680px; margin-bottom:34px; }
.intro h1 { margin:0; font:400 clamp(3.2rem,9vw,6.4rem)/.95 var(--serif); letter-spacing:-.06em; }
.intro > p:last-child { max-width:610px; margin:24px 0 0; color:var(--muted); line-height:1.65; }
.panel-choice { display:grid; gap:9px; margin-bottom:24px; }
.panel-choice strong { font-size:.8rem; }
.panel-choice select { width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--surface); }
.panel-choice small { color:var(--muted); line-height:1.5; }
.eyebrow { margin:0 0 8px; color:var(--accent); font:750 .61rem var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.panel { padding:clamp(24px,5vw,42px); border:1px solid var(--line); border-radius:12px; background:rgb(255 254 250 / 94%); box-shadow:0 18px 48px rgb(49 39 31 / 7%); }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
h2 { margin:0; font:400 clamp(2rem,5vw,3.15rem) var(--serif); letter-spacing:-.045em; }
.package-state { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:#eeeae2; color:var(--muted); font-size:.63rem; font-weight:700; }
.package-state i { width:7px; height:7px; border-radius:50%; background:#a77a28; }
.package-state[data-state="ready"] { background:#e4eee8; color:var(--green); }
.package-state[data-state="ready"] i { background:var(--green); }
.package-state[data-state="error"] { background:#f8e7e3; color:var(--red); }
dl { display:grid; grid-template-columns:repeat(2,1fr); margin:30px 0; border-top:1px solid #ebe7df; }
dl div { display:grid; grid-template-columns:1fr auto; gap:15px; padding:13px 0; border-bottom:1px solid #ebe7df; }
dl div:nth-child(odd) { padding-right:18px; }
dl div:nth-child(even) { padding-left:18px; border-left:1px solid #ebe7df; }
dt { color:var(--muted); font-size:.68rem; }
dd { margin:0; font:.62rem var(--mono); text-align:right; }
.choice { display:flex; align-items:flex-start; gap:13px; margin-top:12px; padding:16px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.choice input { margin-top:3px; }
.choice span { display:grid; gap:5px; }
.choice strong { font-size:.78rem; }
.choice small { color:var(--muted); line-height:1.45; }
.choice.danger { border-color:#e6c2ba; }
button,.button-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin-top:22px; padding:0 18px; border:1px solid var(--accent-dark); border-radius:7px; background:var(--accent); color:white; font-size:.73rem; font-weight:760; text-decoration:none; cursor:pointer; }
button:hover,.button-link:hover { background:var(--accent-dark); }
button:disabled { cursor:wait; opacity:.45; }
progress { width:100%; height:12px; margin:30px 0 12px; accent-color:var(--accent); }
#progress-copy,#error-copy,#success-copy { color:var(--muted); line-height:1.6; }
pre { overflow:auto; max-height:260px; margin:24px 0 0; padding:16px; border-radius:7px; background:#24211e; color:#efe9dd; font:11px/1.5 var(--mono); white-space:pre-wrap; }
.result { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; }
.result > div { min-width:0; }
#error-log summary { cursor:pointer; color:var(--muted); font-size:.8rem; }
.mark { display:grid; width:42px; height:42px; border-radius:50%; background:#f8e7e3; color:var(--red); font:700 1.3rem var(--serif); place-items:center; }
.mark.success { background:#e4eee8; color:var(--green); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:600px) { dl { grid-template-columns:1fr; } dl div:nth-child(n) { padding-inline:0; border-left:0; } .panel-heading { display:grid; } .result { grid-template-columns:1fr; } }