:root { --red:#f53003; --dark-red:#c42705; --ink:#171717; --stone:#626262; --rule:#e5e5e5; --mono:ui-monospace,Menlo,Consolas,monospace }
* { box-sizing:border-box }
body { margin:0; background:white; color:var(--ink); font:16px/1.5 system-ui,sans-serif }
h1,h2,h3,p,figure { margin:0 }
h1,h2 { font-weight:400; line-height:1.05; letter-spacing:-.05em }
h1 { font-size:clamp(42px,5.4vw,72px) }
h2 { font-size:clamp(34px,4.4vw,60px) }
button,input,select { font:inherit; color:inherit }
button { cursor:pointer }
a { color:inherit; text-decoration:none }
nav a:hover,.brand:hover { text-decoration:underline; text-underline-offset:4px }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--dark-red); outline-offset:4px }
[hidden] { display:none!important }
.skip { position:fixed; top:-100px; left:20px; padding:12px; background:white; z-index:2 }
.skip:focus { top:12px }
.announce { display:flex; align-items:center; justify-content:center; gap:12px; min-height:44px; font-size:14px; color:var(--dark-red); background:linear-gradient(95deg,#fff2ee,white 86%); border-bottom:1px solid var(--rule) }
.announce span { color:var(--ink); font-size:12px; background:white; border:1px solid var(--rule); border-radius:4px; padding:2px 8px }
.sheet { max-width:1280px; margin:auto; border-inline:1px dashed var(--rule) }
header { min-height:64px; display:flex; align-items:center; gap:32px; padding:8px 40px }
.brand { color:var(--dark-red); display:inline-flex; align-items:center; gap:8px; font-size:17px; font-weight:600 }
.brand svg { width:31px; color:var(--red) }
nav { display:flex; align-items:center; gap:24px; font-size:15px }
header>button { margin-left:auto }
.section { position:relative; border-top:1px solid var(--rule) }
.section::before,.section::after { content:''; width:6px; height:6px; background:var(--red); position:absolute; top:-3px; z-index:1 }
.section::before { left:-3px }.section::after { right:-3px }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:510px; padding:56px 40px 52px; gap:38px }
.label { color:var(--dark-red); font:13px/1.55 var(--mono); text-transform:uppercase; margin-bottom:16px }
.lead { color:var(--stone); font-size:19px; line-height:1.48; max-width:480px; margin:24px 0 }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 19px; background:white; border:1px solid var(--rule); border-radius:8px; box-shadow:0 1px 2px #0000000f; white-space:nowrap; font-size:15px }
.button:hover { background:#f8f8f8 }
.button span,.strip button span { color:var(--dark-red) }
.button.primary { background:var(--dark-red); border-color:var(--dark-red); color:white }
.button.primary:hover { background:#aa2103 }
.button.primary span { color:white }
.button.compact { min-height:38px; padding:0 12px; font-size:14px }
.diagram { background:radial-gradient(ellipse 60% 63% at 60% 67%,#f530031e,transparent); padding-bottom:8px }
.diagram svg { display:block; width:100%; height:auto }
.diagram figcaption { color:var(--stone); text-align:center; font:11px/1.5 var(--mono); padding:0 8px }
.strip { display:grid; grid-template-columns:190px repeat(3,1fr); min-height:96px }
.strip>* { margin:0; display:flex; align-items:center; justify-content:center; padding:14px; text-align:center }
.strip button { border:0; border-left:1px solid var(--rule); background:transparent; gap:10px; font-size:15px }
.strip button:hover { background:#fff5f2 }
.example { display:grid; grid-template-columns:.8fr 1fr; gap:60px; padding:76px 40px; background:radial-gradient(ellipse 42% 83% at 76% 95%,#f5300315,transparent) }
.example-panel { min-width:0 }
.sample-tabs { display:flex; flex-wrap:wrap; gap:4px; border-radius:999px; padding:4px; background:#f5f5f5; width:fit-content; margin-bottom:12px }
.sample-tabs button { border:0; border-radius:999px; background:transparent; padding:6px 13px; font-size:14px }
.sample-tabs button[aria-pressed=true] { background:white; box-shadow:0 1px 2px #0002; color:var(--dark-red) }
.terminal { background:#ffeeee; border-radius:20px 8px 8px 8px; padding:8px }
.terminal-bar { padding:9px 12px; font:13px var(--mono); border-bottom:1px solid #efd6d1 }
.terminal-bar>span:first-child { color:var(--red); margin-right:6px }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.63 var(--mono); margin:0; padding:14px; min-height:155px }
.example-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
#copy-status,#save-status { min-height:18px; color:var(--stone); font-size:13px; margin-top:5px }
.catalogue { padding:76px 40px }
.filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:28px 0 12px }
.filters label { font-size:14px }
.filters label:first-child { flex:1; min-width:200px }
.filters input[type=search],.filters select { display:block; margin-top:5px; min-height:42px; width:100%; border:1px solid #d4d4d4; border-radius:6px; background:white; padding:8px 10px; font-size:16px }
.filters select { max-width:260px }
.saved-filter { display:flex; align-items:center; min-height:42px; gap:6px }
.saved-filter input { accent-color:var(--dark-red); width:17px; height:17px }
#status { color:var(--stone); font:12px/1.5 var(--mono); margin:0 0 16px }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.skill { padding:20px; border:1px solid var(--rule); border-radius:8px; display:flex; flex-direction:column; align-items:start }
.skill h3 { font-size:20px; font-weight:500; letter-spacing:-.03em; margin:6px 0 }
.skill p { color:var(--stone); font-size:14px; margin-bottom:12px }
.skill .category { font:11px/1.5 var(--mono); color:var(--dark-red) }
.skill button { margin-top:auto }
.more { margin:24px auto 0; display:flex }
#empty p { margin-bottom:10px }
footer { overflow:hidden }
.footer-links { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:40px }
.footer-links p { color:var(--dark-red); font-size:19px }
.footer-wordmark { text-align:center; white-space:nowrap; color:var(--red); font-size:min(14vw,180px); line-height:.83; letter-spacing:-.085em; transform:translateY(.105em); padding-right:.085em }
dialog { width:min(560px,calc(100% - 24px)); max-height:calc(100% - 24px); border:1px solid var(--rule); border-radius:8px; padding:24px; color:var(--ink) }
dialog::backdrop { background:#17171775 }
.dialog-head { display:flex; justify-content:space-between; align-items:start; gap:12px }
dialog h2 { font-size:34px; margin:12px 0 }
dialog h3 { font-size:16px; margin-top:16px; margin-bottom:4px; font-weight:500 }
dialog .actions { margin-top:20px }
.fine { font-size:12px; color:var(--stone); margin-top:10px }
@media(max-width:850px) { .hero { padding:40px 24px; gap:18px; min-height:0 } header,.catalogue,.example { padding-inline:24px }.example { gap:28px }.strip { grid-template-columns:145px repeat(3,1fr) }.cards { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:640px) { header { gap:12px; flex-wrap:wrap; padding:10px 16px } header nav { order:3; flex-basis:100% } .hero,.example { grid-template-columns:1fr; padding:38px 16px; gap:24px } h1 { font-size:46px } .lead { font-size:17px; margin:16px 0 } .diagram { max-width:460px } .strip { grid-template-columns:1fr 1fr; min-height:0 } .strip>* { min-height:56px; border-bottom:1px solid var(--rule) } .catalogue { padding:38px 16px } .filters { align-items:start } .filters label:first-child { flex-basis:100% } .filters select { max-width:100% } .cards { grid-template-columns:1fr } .footer-links { padding:24px 16px } .footer-links nav { gap:15px } }
@media(max-width:1280px) { .section::before { left:0 } .section::after { right:0 } }
.cabinet-link { margin-left:auto }
.demo-request { padding:14px 12px; font-size:14px }
.demo-data { margin:0 8px; overflow:auto; border:1px solid #efd6d1; border-radius:6px; background:#fff }
.demo-data table { border-collapse:collapse; width:100%; text-align:right; font-variant-numeric:tabular-nums; font-size:14px }
.demo-data caption { text-align:left; padding:9px 12px 0; color:var(--stone); font-size:12px }
.demo-data th,.demo-data td { padding:8px 12px; border-bottom:1px solid #eee }
.demo-data tbody tr:last-child>* { border-bottom:0 }
.demo-data tr>*:first-child { text-align:left }
.demo-data th { font-weight:500 }
.demo-data .over { color:var(--dark-red); font-weight:600 }
.demo-result { padding:12px; font-size:14px }
.demo-result p+p { margin-top:5px; color:var(--stone) }
.demo-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:12px 8px 4px }
.demo-controls span { font-size:11px; color:var(--stone) }
.collections,.cabinet { padding:76px 40px }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px }
.collection-card { padding:22px; border:1px solid var(--rule); border-radius:8px; display:flex; flex-direction:column; align-items:start }
.collection-card h3 { font-size:23px; font-weight:500; letter-spacing:-.035em; margin:7px 0 }
.collection-card .label { margin-bottom:0; font-size:11px }
.collection-card>p:not(.label) { color:var(--stone); font-size:14px }
.collection-card ol { padding-left:22px; margin:18px 0 }
.collection-card li { margin-bottom:9px; padding-left:3px }
.collection-card li::marker { color:var(--dark-red); font:13px var(--mono) }
.text-action { background:none; border:0; padding:0; color:var(--dark-red); text-align:left; text-decoration:underline; text-underline-offset:3px; min-height:32px }
.collection-card li span { display:block; color:var(--stone); font-size:12px }
.collection-card>.button { margin-top:auto }
.collection-note { margin-top:16px }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto }
.card-actions [aria-pressed=true] { color:var(--dark-red); background:#fff5f2 }
.cabinet-layout { display:grid; grid-template-columns:1fr 1.6fr; gap:16px }
.profile,.shelf { border:1px solid var(--rule); border-radius:8px; padding:22px }
.profile h3,.shelf h3 { font-size:19px; font-weight:500 }
.profile form { margin-top:14px }
.profile label { font-size:14px }
.profile-input { display:flex; gap:8px; margin-top:6px }
.profile-input input { border:1px solid #d4d4d4; border-radius:6px; padding:7px 9px; flex:1; min-width:0 }
#profile-status { font-size:13px; color:var(--dark-red); min-height:18px }
.shelf-top { display:flex; justify-content:space-between; align-items:center; gap:8px }
#shelf-count { color:var(--stone); font:13px var(--mono) }
#shelf-empty { color:var(--stone); font-size:14px; margin:12px 0 }
#shelf-list { list-style:none; padding:0; margin:6px 0 14px }
#shelf-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--rule); padding:8px 0 }
#shelf-list small { display:block; color:var(--stone) }
.toast { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; width:max-content; max-width:calc(100% - 24px); background:white; border:1px solid var(--rule); border-radius:8px; padding:8px 8px 8px 12px; z-index:5; box-shadow:0 2px 9px #0001; font-size:14px }
@media(max-width:850px) { .collections,.cabinet { padding-inline:24px } .collection-grid { grid-template-columns:1fr } .cabinet-layout { grid-template-columns:1fr } }
@media(max-width:640px) { .collections,.cabinet { padding:38px 16px } .collection-card,.profile,.shelf { padding:16px } .demo-data th,.demo-data td { padding:7px 8px } .demo-data table { font-size:12px } .cabinet-link { font-size:12px!important } .brand { font-size:15px } }
main { min-height: 51vh }
header [aria-current=page]:not(.brand) { color:var(--dark-red); text-decoration:underline; text-underline-offset:5px }
header .cabinet-link[aria-current=page] { text-decoration:none; border-color:#efc5ba; background:#fff5f2 }
.cabinet h1,.collections h1,.example h1,.catalogue h1 { font-size:clamp(34px,4.4vw,60px) }
.cabinet-link #saved-count:not(:empty) { min-width:23px; padding:1px 5px; text-align:center; background:#fff0ed; border-radius:4px }
.auth-status { color:var(--stone); font-size:14px; margin:0 0 12px }
.auth-status:empty { display:none }
.login-panel { max-width:520px }
.login-panel h2 { font-size:26px; margin-bottom:8px }
.login-panel>p { color:var(--stone); margin-bottom:16px }
.login-panel form { border-top:1px solid var(--rule); padding-top:16px }
#account-email { color:var(--stone); font-size:14px; overflow-wrap:anywhere }
#logout { margin-top:16px }
#import-guest { margin:0 4px 8px 0; white-space:normal }