*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; transition: color var(--d-hover) var(--ease); }
a:hover { color: var(--c-tape-deep); }
:focus-visible { outline: var(--focus-width) solid var(--c-tape); outline-offset: var(--sp-1); }
.skip { position: absolute; left: var(--sp-3); top: -10rem; background: var(--c-white); padding: var(--sp-2) var(--sp-3); z-index: 10; }
.skip:focus { top: var(--sp-3); }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--sp-5); }
h1, h2, h3 { font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.02; margin: 0; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-5); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--track-mid); line-height: 1.2; margin-bottom: var(--sp-2); }
p { margin: 0 0 var(--sp-4); max-width: var(--prose-max); }
.lead { font-size: var(--fs-lead); line-height: 1.4; letter-spacing: var(--track-mid); }
.small { font-size: var(--fs-small); color: var(--c-mute); }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }

.site-head { background: var(--c-stage); color: var(--c-white); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding-top: var(--sp-3); padding-bottom: var(--sp-3); gap: var(--sp-4); }
.brand { font-weight: 700; letter-spacing: var(--track-mid); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand i { width: var(--sp-5); height: var(--sp-2); background: var(--c-tape); display: inline-block; }
.nav { display: flex; gap: var(--sp-5); font-size: var(--fs-small); }
.nav a { white-space: nowrap; text-decoration: none; color: var(--c-on-stage-mute); }
.nav a:hover, .nav a[aria-current] { color: var(--c-white); }

.stage { background: var(--c-stage); color: var(--c-white); }
.stage .small, .stage .muted { color: var(--c-on-stage-mute); }
.hero { padding: var(--sp-8) 0 var(--sp-8); }
.hero .wrap { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: center; }
.hero h1 { max-width: 12ch; margin-bottom: var(--sp-5); }
.hero .lead { color: var(--c-on-stage-mute); max-width: 30rem; margin-bottom: var(--sp-6); }
@media (min-width: 60em) { .hero .wrap { grid-template-columns: 1.15fr 0.85fr; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--sp-6); background: var(--c-tape); color: var(--c-ink); font: 600 var(--fs-body) var(--font-sans); border: 0; border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: background-color var(--d-hover) var(--ease), transform var(--d-hover) var(--ease); }
.btn:hover { background: var(--c-white); color: var(--c-ink); }
.btn:active { transform: scale(var(--press)); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* the receipt tape: the one memorable detail */
.tape { background: var(--c-white); color: var(--c-ink); width: 100%; max-width: var(--tape-width); font: 400 var(--fs-mono)/1.7 var(--font-mono); padding: var(--sp-5) var(--sp-5) var(--sp-6); position: relative; margin: 0; -webkit-mask: conic-gradient(from -45deg at bottom, transparent 0, black 0) bottom / var(--tooth) 51% repeat-x, linear-gradient(black 0 0) top / 100% calc(100% - var(--tooth)) no-repeat; mask: conic-gradient(from -45deg at bottom, transparent 0, black 0) bottom / var(--tooth) 51% repeat-x, linear-gradient(black 0 0) top / 100% calc(100% - var(--tooth)) no-repeat; }
.tape-label { color: var(--c-mute); border-bottom: var(--hairline) dashed var(--c-rule); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); display: flex; justify-content: space-between; gap: var(--sp-3); }
.tape dl { margin: 0; }
.tape .row { display: flex; align-items: baseline; gap: var(--sp-2); }
.tape .row dt { flex: 0 1 auto; }
.tape .row::after { content: ""; order: 1; flex: 1 1 var(--sp-4); border-bottom: var(--hairline) dotted var(--c-mute); transform: translateY(calc(var(--sp-1) * -1)); }
.tape .row dd { order: 2; margin: 0; font-weight: 500; }
.tape .total { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-tape); }
.tape .total .row::after { border-bottom-color: var(--c-ink); }
.tape .verdict { margin: var(--sp-3) 0 0; max-width: none; font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.45; }
.tape .bad { color: var(--c-bad); }
.tape .good { color: var(--c-ok); }

section.block { padding: var(--section-gap) 0 0; }
section.block:last-of-type { padding-bottom: var(--section-gap); }
.calc { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60em) { .calc { grid-template-columns: 1fr var(--tape-width); } }
form.fields { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; max-width: 40rem; }
form.fields .wide { grid-column: 1 / -1; }
label { display: grid; gap: var(--sp-1); font-weight: 600; font-size: var(--fs-small); }
label small { font-weight: 400; color: var(--c-mute); }
input, select, textarea { font: 400 var(--fs-body) var(--font-sans); min-height: var(--tap); padding: 0 var(--sp-3); border: var(--hairline) solid var(--c-mute); border-radius: var(--radius); background: var(--c-white); color: var(--c-ink); width: 100%; }
textarea { padding: var(--sp-3); font: 400 var(--fs-mono)/1.6 var(--font-mono); min-height: 18rem; }
fieldset { border: var(--hairline) solid var(--c-rule); border-radius: var(--radius); padding: var(--sp-4); margin: 0; grid-column: 1 / -1; display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
legend { font-weight: 600; font-size: var(--fs-small); padding: 0 var(--sp-2); }
.err { color: var(--c-bad); font-weight: 600; min-height: 1.5em; }
.actions { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.next { margin: var(--sp-5) 0 0; padding: 0 0 0 var(--sp-5); max-width: var(--prose-max); }
.draft[hidden] { display: none; }
.draft { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.tablewrap { overflow-x: auto; }
caption { text-align: left; color: var(--c-mute); padding-bottom: var(--sp-3); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: var(--hairline) solid var(--c-rule); vertical-align: top; }
th { font-weight: 600; white-space: nowrap; }
td.num, th.num { font-family: var(--font-mono); font-size: var(--fs-mono); text-align: right; white-space: nowrap; padding-right: var(--sp-4); }
.down { color: var(--c-ok); }
.flat { color: var(--c-bad); }
.stage table th, .stage td { border-color: var(--c-stage-hi); }

.copybox { display: flex; align-items: center; gap: var(--sp-3); background: var(--c-stage-hi); color: var(--c-white); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font: 400 var(--fs-mono)/1.5 var(--font-mono); overflow-x: auto; margin: 0 0 var(--sp-4); max-width: 48rem; }
.copybox code { flex: 1; white-space: pre; }
.copybox button { flex: none; background: none; border: 0; color: var(--c-tape); font: 600 var(--fs-small) var(--font-sans); cursor: pointer; min-height: var(--tap); padding: 0 var(--sp-2); }
.paper .copybox, .copybox.on-paper { background: var(--c-ink); }

details { border-bottom: var(--hairline) solid var(--c-rule); padding: var(--sp-4) 0; max-width: var(--prose-max); }
summary { font-weight: 600; cursor: pointer; min-height: var(--sp-6); }
details p { margin: var(--sp-3) 0 0; }
.prose h2 { font-size: var(--fs-h3); letter-spacing: var(--track-mid); margin: var(--sp-6) 0 var(--sp-3); }
.prose ul { max-width: var(--prose-max); padding-left: var(--sp-5); }
.prose { padding: var(--sp-7) 0 var(--section-gap); }
.prose.flush { padding: 0; }
.band { padding: var(--sp-8) 0; }
.prose h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-5); }

.notice { border: var(--hairline) solid var(--c-rule); border-radius: var(--radius); padding: var(--sp-4); max-width: var(--prose-max); background: var(--c-white); font-size: var(--fs-small); }
.site-foot { background: var(--c-stage); color: var(--c-on-stage-mute); padding: var(--sp-7) 0; font-size: var(--fs-small); }
.site-foot nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.site-foot a { color: var(--c-white); }
.site-foot p { max-width: var(--prose-max); }

@media (max-width: 40em) { .nav a:nth-child(2) { display: none; } .tape .row { flex-wrap: wrap; } .tape .row::after { display: none; } .tape .row dd { margin-left: auto; } .tape-label { flex-wrap: wrap; } form.fields, fieldset { grid-template-columns: 1fr; } .nav { gap: var(--sp-4); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }