:root {
  --olive-dark: #3F4A2C;
  --olive: #66734A;
  --olive-light: #909B72;
  --cream: #F4EBD8;
  --cream-light: #FFF9ED;
  --brown: #8B6847;

  --paper: #FFFFFF;
  --white: #FFFFFF;
  --sand-1: var(--cream);
  --sand-2: var(--olive-light);
  --sand-3: var(--brown);
  --ink: var(--olive-dark);
  --muted: var(--olive);
  --line: color-mix(in srgb, var(--olive-dark) 20%, transparent);
  --dark: var(--olive-dark);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[v-cloak] { display: none; }

.site-header { height: 82px; display: flex; align-items: center; padding: 0 5vw; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 210px; }
.brand-logo-crop{width:145px;height:34px;display:block;position:relative;overflow:hidden;flex:none}.brand-logo-crop img{width:240px;height:240px;max-width:none;position:absolute;left:-48px;top:-103px;object-fit:contain}.brand>small{padding-left:10px;border-left:1px solid var(--line);color:var(--muted);font:9px var(--mono);text-transform:uppercase;letter-spacing:2px}
.main-nav { display: flex; margin: auto; gap: 38px; font-size: 12px; font-weight: 600; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; height: 1px; width: 0; background: var(--ink); position: absolute; left: 0; bottom: -7px; transition: width .2s; }
.main-nav a:hover::after { width: 100%; }
.lab-status { min-width: 210px; text-align: right; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: 1px; }
.lab-status i { display: inline-block; width: 6px; height: 6px; background: #66734A; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 3px #F4EBD8; }

.hero { min-height: 600px; position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 7vw; padding: 80px 8vw 92px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before { content: ""; width: 420px; height: 420px; position: absolute; right: -150px; top: -165px; border: 1px solid var(--sand-2); border-radius: 50%; box-shadow: 0 0 0 70px rgba(144,155,114,.18), 0 0 0 140px rgba(144,155,114,.10); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; color: var(--muted); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 1.6px; }
.eyebrow span { display: grid; place-items: center; width: 29px; height: 22px; border: 1px solid var(--sand-3); border-radius: 20px; color: var(--ink); letter-spacing: 0; }
.hero h1 { font-size: clamp(64px, 7.2vw, 108px); line-height: .84; letter-spacing: -7px; margin: 0; font-weight: 700; }
.hero h1 em { font-family: Georgia, serif; font-weight: 400; color: #8B6847; }
.hero-text { max-width: 510px; font-size: 17px; line-height: 1.7; color: var(--muted); margin: 35px 0 0; }
.hero-search-area { position: relative; z-index: 1; }
.hero-search-area > label { display: block; margin-bottom: 13px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 1px; }
.search-box { height: 72px; display: flex; align-items: center; gap: 16px; padding: 0 18px 0 22px; background: var(--white); border: 1px solid var(--sand-2); box-shadow: 0 13px 36px rgba(139,104,71,.12); transition: border-color .2s, box-shadow .2s; }
.search-box.focused { border-color: #8B6847; box-shadow: 0 18px 50px rgba(139,104,71,.20); }
.search-box svg { width: 21px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.search-box input::placeholder { color: #66734A; }
.search-box kbd { width: 28px; height: 28px; display: grid; place-items: center; background: var(--sand-1); border: 1px solid var(--sand-2); border-radius: 4px; color: var(--muted); font: 11px var(--mono); }
.search-suggestions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.search-suggestions span { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; margin-right: 4px; }
.search-suggestions button { padding: 7px 11px; border: 1px solid var(--line); background: transparent; border-radius: 20px; cursor: pointer; color: var(--muted); font-size: 10px; transition: .2s; }
.search-suggestions button:hover { background: var(--sand-1); border-color: var(--sand-3); color: var(--ink); }
.hero-note { position: absolute; left: 8vw; bottom: 34px; display: flex; gap: 8px; align-items: center; }
.hero-note span { font: 9px var(--mono); padding: 6px 8px; border: 1px solid var(--line); color: var(--muted); }
.hero-note b { color: var(--sand-3); font-weight: 400; }

.section { padding: 105px 8vw; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 54px; }
.section-heading .eyebrow { margin-bottom: 17px; }
.section-heading h2 { font-size: clamp(40px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -3px; margin: 0; }
.section-heading > p { max-width: 400px; margin: 0 0 5px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.components-section { background: var(--white); }
.category-bar { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 38px; overflow-x: auto; }
.category-bar button { flex: 0 0 auto; padding: 14px 23px 15px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; color: var(--muted); font-size: 12px; }
.category-bar button:first-child { padding-left: 0; }
.category-bar button.active { color: var(--ink); border-color: var(--ink); font-weight: 700; }
.category-bar sup { color: #66734A; font: 8px var(--mono); margin-left: 3px; }
.component-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.component-card { min-width: 0; min-height: 340px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; cursor: pointer; transition: background .25s; }
.component-card:hover { background: #F4EBD8; }
.component-card:hover .card-open { opacity: 1; transform: translate(0); }
.card-index { color: #66734A; font: 9px var(--mono); }
.card-preview { height: 190px; display: grid; place-items: center; padding: 15px; pointer-events: none; overflow: hidden; }
.card-copy p { margin: 0 0 8px; color: #66734A; font: 8px var(--mono); text-transform: uppercase; letter-spacing: 1.2px; }
.card-copy h3 { margin: 0; font-size: 19px; letter-spacing: -.5px; }
.card-copy > span { color: var(--muted); font-size: 11px; }
.card-open { position: absolute; right: 23px; bottom: 24px; width: 34px; height: 34px; background: var(--ink); color: white; border: 0; border-radius: 50%; cursor: pointer; opacity: 0; transform: translate(-5px, 5px); transition: .2s; }
.empty-state { text-align: center; padding: 80px 20px; border: 1px solid var(--line); }
.empty-state > span { display: grid; place-items: center; width: 50px; height: 50px; margin: auto; border-radius: 50%; background: var(--sand-1); font: 22px Georgia, serif; }
.empty-state h3 { margin: 18px 0 7px; }.empty-state p { color: var(--muted); }.empty-state button { border: 0; border-bottom: 1px solid; background: none; cursor: pointer; }

/* Miniature component previews */
.p-button { border: 0; padding: 13px 18px; background: var(--ink); color: white; border-radius: 3px; font-size: 10px; box-shadow: 5px 5px 0 var(--sand-2); }.p-button span { margin-left: 20px; }
.p-input, .p-textarea { width: 80%; display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 8px; }.p-input input { border: 0; border-bottom: 1px solid var(--ink); padding: 8px 0; font-size: 10px; outline: none; }.p-textarea { border: 1px solid var(--line); padding: 12px; }.p-textarea i { display:block; height: 4px; background: var(--sand-2); }.p-textarea i:nth-child(3){ width: 85%; }.p-textarea i:nth-child(4){ width: 55%; }
.p-select, .p-date { width: 80%; display: flex; justify-content: space-between; padding: 12px; border: 1px solid var(--line); font-size: 9px; }.p-date b { color: #8B6847; }
.p-check { display:flex; align-items:center; gap:9px; font-size: 10px; }.p-check i { width:17px;height:17px;display:grid;place-items:center;background:var(--ink);color:#FFF9ED;font-style:normal;font-size:9px; }
.p-radio { display: grid; grid-template-columns: 17px 1fr 17px 1fr; gap: 8px; align-items: center; font-size: 9px; }.p-radio i { width:17px;height:17px;border:1px solid var(--ink);border-radius:50%; }.p-radio i:first-child{box-shadow:inset 0 0 0 4px white;background:var(--ink)}
.p-form { width: 72%; border:1px solid var(--line); padding:15px; display:grid; gap:9px; }.p-form i{height:18px;border-bottom:1px solid var(--line)}.p-form button{justify-self:end;border:0;background:var(--ink);color:#FFF9ED;font-size:8px;padding:7px 12px}
.p-table { width: 95%; display:grid; grid-template-columns: 1.3fr 1fr; font-size:8px; border-top:1px solid var(--line); border-left:1px solid var(--line); }.p-table>*{padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.p-table em{font-style:normal;color:#66734A}
.p-pages { display:flex; gap:4px; }.p-pages>*{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);font:8px var(--mono)}.p-pages b{background:var(--ink);color:var(--cream-light)}
.p-card{width:75%;border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;box-shadow:6px 6px 0 var(--sand-1)}.p-card i{width:100%;height:45px;background:var(--sand-1)}.p-card small{font:6px var(--mono);color:#8B6847}.p-card b{font-size:11px}.p-card span{font-size:7px;color:var(--muted)}
.p-nav{width:100%;height:39px;padding:0 10px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);font-size:7px}.p-nav b{font-size:9px;margin-right:auto}.p-nav button{border:0;background:var(--ink);color:var(--cream-light);font-size:6px;padding:5px 8px}
.p-sidebar{display:grid;grid-template-columns:42px 1fr;width:85%;height:120px;border:1px solid var(--line)}.p-sidebar aside{background:var(--ink);display:flex;flex-direction:column;align-items:center;padding:10px;gap:13px;color:var(--cream-light)}.p-sidebar aside i{width:15px;height:2px;background:#66734A}.p-sidebar main{padding:17px}.p-sidebar main span{height:7px;background:var(--sand-1);display:block;margin-bottom:10px}.p-sidebar main span:last-child{width:60%}
.p-tabs{width:90%}.p-tabs nav{display:flex;gap:16px;border-bottom:1px solid var(--line);font-size:7px;padding-bottom:8px}.p-tabs nav b{position:relative}.p-tabs nav b:after{content:"";position:absolute;height:2px;background:var(--ink);left:0;right:0;bottom:-9px}.p-tabs i{display:block;height:6px;background:var(--sand-1);margin-top:14px}.p-tabs i:last-child{width:60%;margin-top:7px}
.p-accordion{width:90%;font-size:8px}.p-accordion b{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}.p-accordion p{margin:0 0 9px;color:var(--muted)}
.p-modal{width:100%;height:140px;background:var(--sand-1);display:grid;place-items:center}.p-modal>div{width:75%;padding:12px;background:var(--cream-light);box-shadow:0 8px 25px #909B72;display:grid;grid-template-columns:1fr auto;font-size:8px}.p-modal p{grid-column:1/-1;color:var(--muted)}.p-modal button{justify-self:start;border:0;background:var(--ink);color:var(--cream-light);font-size:7px;padding:6px 9px}
.p-alert{width:90%;display:flex;gap:10px;align-items:center;padding:10px;border-left:3px solid #8B6847;background:var(--sand-1);font-size:8px}.p-alert>b{width:18px;height:18px;border:1px solid;border-radius:50%;display:grid;place-items:center}.p-alert span{display:flex;flex-direction:column}.p-alert i{margin-left:auto;font-style:normal}
.p-badges{display:flex;gap:7px}.p-badges span{padding:5px 8px;background:var(--sand-1);border-radius:20px;font:7px var(--mono)}.p-badges span:nth-child(2){background:var(--ink);color:var(--cream-light)}.p-badges span:last-child{border-radius:50%;padding:5px 7px}
.p-tooltip{position:relative;padding-top:30px}.p-tooltip span{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream-light);padding:6px 9px;font-size:7px;white-space:nowrap}.p-tooltip span:after{content:"";position:absolute;border:4px solid transparent;border-top-color:var(--ink);bottom:-8px;left:50%}.p-tooltip button{width:32px;height:32px;background:var(--cream-light);border:1px solid var(--line)}
.p-loader{display:flex;align-items:center;gap:12px;font-size:9px}.p-loader i{width:28px;height:28px;border:3px solid var(--sand-2);border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

.html-section { background: var(--dark); color: #FFF9ED; }
.section-heading.light > p, .html-section .eyebrow { color: #909B72; }.html-section .eyebrow span{color:#FFF9ED;border-color:#66734A}
.tag-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid #66734A; border-left: 1px solid #66734A; }
.tag-card { min-height: 175px; padding: 22px 18px 55px; border-right: 1px solid #66734A; border-bottom: 1px solid #66734A; position:relative; cursor:pointer; outline:none; transition: background .2s, transform .2s; }.tag-card:hover,.tag-card:focus-visible{background:color-mix(in srgb,var(--olive) 38%,var(--olive-dark));transform:translateY(-2px)}.tag-card:focus-visible{box-shadow:inset 0 0 0 2px var(--sand-3)}
.tag-card code { color: #8B6847; font: 12px var(--mono); }.tag-card p { min-height: 48px; color: #909B72; font-size: 10px; line-height: 1.6; }.tag-card span { color: #909B72; font: 8px var(--mono); word-break: break-all; }
.tag-card .tag-more{position:absolute;right:16px;bottom:15px;display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #66734A;border-radius:20px;color:#909B72;font:7px var(--mono);text-transform:uppercase;letter-spacing:.6px;word-break:normal;transition:color .2s,border-color .2s,background .2s}.tag-card .tag-more b{font-size:10px;font-weight:400;transition:transform .2s}.tag-card:hover .tag-more,.tag-card:focus-visible .tag-more{color:var(--cream-light);border-color:var(--sand-3);background:var(--sand-3)}.tag-card:hover .tag-more b,.tag-card:focus-visible .tag-more b{transform:translateX(2px)}
.libraries-section{background:var(--white)}.libraries-intro{display:grid;grid-template-columns:55px 1.25fr .75fr;gap:28px;margin:-10px 0 55px;padding:30px;border:1px solid var(--line);background:var(--paper)}.libraries-intro .intro-symbol{font-size:9px}.libraries-intro h3{margin:1px 0 11px;font-size:18px;letter-spacing:-.5px}.libraries-intro>div>p{margin:0 0 9px;color:var(--muted);font-size:11px;line-height:1.75}.library-levels{padding-left:27px;border-left:1px solid var(--line)}.library-levels p{display:grid;gap:4px;padding:0 0 10px;margin-bottom:10px!important;border-bottom:1px solid var(--line)}.library-levels p:last-child{padding-bottom:0;margin-bottom:0!important;border:0}.library-levels strong{color:var(--ink);font:8px var(--mono);text-transform:uppercase;letter-spacing:.6px}.library-levels span{font-size:9px;line-height:1.55}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.library-card{min-height:430px;display:flex;flex-direction:column;padding:27px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream-light);transition:background .2s,transform .2s}.library-card:hover{z-index:1;background:#F4EBD8;transform:translateY(-3px)}.library-card header{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:13px;margin-bottom:20px}.library-card header>span{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--sand-1);border:1px solid var(--sand-2);color:#8B6847;font:9px var(--mono)}.library-card header small{display:block;color:#8B6847;font:7px var(--mono);text-transform:uppercase;letter-spacing:.6px}.library-card h3{margin:3px 0 0;font-size:17px}.library-card header>b{align-self:start;font-weight:400}.library-card>p{min-height:105px;margin:0 0 10px;color:var(--muted);font-size:10px;line-height:1.75}.library-card>div{padding:15px 0;border-top:1px solid var(--line)}.library-card>div strong{display:block;margin-bottom:6px;font:8px var(--mono);text-transform:uppercase;letter-spacing:.7px}.library-card>div p{margin:0;color:var(--muted);font-size:9px;line-height:1.65}.library-card .library-attention{margin-top:auto}.library-attention strong::before{content:"△";margin-right:7px;color:#8B6847}
.ecosystem-section { background: color-mix(in srgb, var(--olive-light) 10%, #FFFFFF); }
.ecosystem-intro{display:grid;grid-template-columns:55px 1.25fr .75fr;gap:28px;margin:-10px 0 58px;padding:30px;border:1px solid var(--sand-3);background:rgba(255,255,255,.72)}.intro-symbol{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--cream-light);font:12px var(--mono)}.ecosystem-intro h3{margin:1px 0 11px;font-size:18px;letter-spacing:-.5px}.ecosystem-intro>div>p{margin:0 0 9px;color:var(--muted);font-size:11px;line-height:1.75}.concept-difference{padding-left:27px;border-left:1px solid var(--sand-3)}.concept-difference p{display:grid;gap:5px;padding:0 0 13px;margin-bottom:13px!important;border-bottom:1px solid var(--sand-2)}.concept-difference p:last-child{margin-bottom:0!important;padding-bottom:0;border:0}.concept-difference strong{color:var(--ink);font:9px var(--mono);text-transform:uppercase;letter-spacing:.8px}.concept-difference span{font-size:10px;line-height:1.6}
.tools-group > h3 { margin: 0 0 20px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--sand-3); border-left: 1px solid var(--sand-3); }
.tool-card { min-height: 600px; display: flex; flex-direction: column; padding: 30px; border-right: 1px solid var(--sand-3); border-bottom: 1px solid var(--sand-3); background: rgba(255,249,237,.35); transition: background .2s, transform .2s; }.tool-card:hover{background:var(--cream-light);transform:translateY(-3px)}
.tool-card-top{display:grid;grid-template-columns:55px 1fr auto;gap:15px;align-items:center;margin-bottom:22px}.tool-logo{width:52px;height:52px;display:grid;place-items:center;padding:7px;border:1px solid var(--sand-3);border-radius:12px;background:rgba(255,249,237,.7)}.tool-logo img{display:block;width:100%;height:100%;object-fit:contain}.tool-card-top>div>span{display:block;color:#8B6847;font:7px var(--mono);text-transform:uppercase;letter-spacing:.7px}.tool-card h4{margin:3px 0 0;font-size:21px}.tool-card-top>b{align-self:start;font-weight:400}.tool-card .tool-description{min-height:94px;margin:0;padding-bottom:22px;border-bottom:1px solid var(--sand-2);color:var(--muted);font-size:11px;line-height:1.75}.tool-context{display:flex;flex:1;flex-direction:column}.tool-fit{align-self:flex-start;margin:18px 0 6px;padding:6px 9px;border:1px solid var(--sand-3);border-radius:20px;color:#66734A;font:7px var(--mono);text-transform:uppercase;letter-spacing:.4px}.tool-context section{padding:16px 0;border-bottom:1px solid var(--sand-2)}.tool-context section:last-child{border-bottom:0}.tool-context section strong{display:block;margin-bottom:6px;font:8px var(--mono);text-transform:uppercase;letter-spacing:.8px}.tool-context section p{margin:0;color:var(--muted);font-size:10px;line-height:1.7}.tool-context .tool-tradeoff{margin-top:auto}.tool-context .tool-tradeoff strong::before{content:"△";margin-right:7px;color:#8B6847}
.tools-group.secondary { margin-top: 50px; }.mini-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mini-tool-grid a{display:grid;grid-template-columns:1fr auto;padding:18px;background:rgba(255,249,237,.5);border:1px solid var(--sand-2)}.mini-tool-grid strong{font-size:12px}.mini-tool-grid span{grid-row:2;color:var(--muted);font-size:9px;margin-top:4px}.mini-tool-grid b{grid-row:1/3;grid-column:2;font-weight:400;align-self:center}
footer { min-height: 150px; padding: 40px 5vw; display: flex; align-items: center; border-top: 1px solid #66734A; background: var(--dark); color:#FFF9ED }.footer-brand{min-width:210px}.footer-brand>small{color:#909B72;border-color:#66734A}footer>p{margin:auto;color:#909B72;font-size:11px}footer>a{font:9px var(--mono);text-transform:uppercase;border-bottom:1px solid #8B6847;padding-bottom:4px}

/* Detail panel and two-axis workbench */
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 25px; background: rgba(63,74,44,.82); backdrop-filter: blur(8px); animation:fadeIn .2s; }
@keyframes fadeIn{from{opacity:0}}
.detail-panel { width: min(1180px, 100%); max-height: calc(100vh - 50px); overflow: auto; position: relative; background: var(--paper); box-shadow: 0 30px 90px rgba(0,0,0,.28); animation:panelIn .3s ease-out; }
@keyframes panelIn{from{opacity:0;transform:translateY(18px)}}
.close-button { position: sticky; z-index: 3; float: right; top: 17px; margin: 17px 17px -60px 0; width: 39px; height: 39px; border: 1px solid var(--line); background: var(--paper); border-radius: 50%; font-size: 22px; cursor: pointer; }
.detail-header { padding: 48px 55px 35px; border-bottom: 1px solid var(--line); }
.detail-header > p:first-child { margin: 0 0 10px; color: #8B6847; font: 9px var(--mono); text-transform: uppercase; letter-spacing: 1.4px; }.detail-header h2{margin:0;font-size:clamp(36px,5vw,60px);letter-spacing:-3px}.detail-header h2 + p{max-width:620px;margin:14px 0 20px;color:var(--muted);font-size:13px;line-height:1.65}
.aliases{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.aliases>span{font:8px var(--mono);text-transform:uppercase;color:var(--muted);margin-right:4px}.aliases b{padding:5px 8px;border:1px solid var(--line);border-radius:20px;font-size:8px;font-weight:500}
.workbench { display: grid; grid-template-columns: 205px 1fr; min-height: 600px; }
.style-axis { padding: 28px 18px; border-right: 1px solid var(--line); background: #F4EBD8; }
.axis-label { display:block;margin:0 8px 19px;color:var(--muted);font:8px var(--mono);text-transform:uppercase;letter-spacing:1.3px}.axis-label b{display:inline-grid;place-items:center;width:17px;height:17px;background:var(--ink);color:#FFF9ED;border-radius:50%;font-size:8px;margin-left:4px}
.style-axis button { width: 100%; display:flex;align-items:center;gap:11px;padding:12px 10px;border:1px solid transparent;background:transparent;text-align:left;cursor:pointer;margin-bottom:5px }.style-axis button:hover{background:rgba(255,249,237,.5)}.style-axis button.active{border-color:var(--sand-3);background:var(--cream-light)}
.style-axis button i{width:28px;height:28px;flex:none}.swatch-classic{background:#FFF9ED;border:1px solid #8B6847;box-shadow:2px 2px 0 var(--sand-2)}.swatch-modern{background:var(--cream-light);border-radius:9px;box-shadow:0 5px 13px #909B72}.swatch-minimal{border-bottom:2px solid var(--ink)}
.style-axis button span{display:flex;flex-direction:column}.style-axis button strong{font-size:10px}.style-axis button small{font-size:7px;color:var(--muted);margin-top:3px}
.workbench-main{min-width:0;padding:28px 35px 38px}.preview-heading{display:flex;justify-content:space-between;margin-bottom:12px;font:8px var(--mono);text-transform:uppercase;color:var(--muted);letter-spacing:1px}.preview-heading b{color:#8B6847}
.live-preview{min-height:250px;display:grid;place-items:center;padding:38px;background:var(--cream-light);border:1px solid var(--line);overflow:auto}.live-preview>*{max-width:100%}
.code-area{margin-top:24px;background:#3F4A2C;color:#F4EBD8}.code-tabs{height:52px;display:flex;align-items:center;border-bottom:1px solid #66734A;padding:0 16px;gap:3px}.code-tabs .axis-label{margin:0 auto 0 0;color:#909B72}.code-tabs .axis-label b{background:#8B6847;color:#FFF9ED}.code-tabs>button{align-self:stretch;padding:0 15px;border:0;border-bottom:2px solid transparent;background:transparent;color:#909B72;font:9px var(--mono);cursor:pointer}.code-tabs>button.active{border-color:#8B6847;color:#FFF9ED}.code-tabs .copy-button{align-self:center;height:29px;margin-left:15px;padding:0 10px;border:1px solid #66734A;color:#909B72}.code-area pre{margin:0;min-height:230px;max-height:350px;overflow:auto;padding:25px}.code-area code{font:10px/1.8 var(--mono);color:#F4EBD8;white-space:pre-wrap}
.detail-footer{padding:28px 55px 35px;border-top:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:7px 20px}.detail-footer strong{font:9px var(--mono);text-transform:uppercase;letter-spacing:1px}.detail-footer p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.detail-footer span{grid-column:2;color:#66734A;font:8px var(--mono)}

/* Fundamental HTML element examples */
.element-detail-header h2{font-family:var(--mono);font-weight:500;color:#8B6847;letter-spacing:-4px}.element-live-preview{min-height:300px;background:#F4EBD8}.element-example{width:min(520px,100%);padding:24px}.element-example h1,.element-example h2,.element-example h3{margin:0 0 9px;letter-spacing:-1px}.element-example h1{font-size:25px}.element-example h2{font-size:20px}.element-example p{margin:5px 0;color:var(--muted);font-size:11px;line-height:1.65}.element-example a{color:inherit}.element-example .content-box,.element-example .content-section,.element-example .page-main,.element-example .content-article{padding:20px;border:1px solid var(--line)}.element-example .highlight{padding:3px 7px;background:var(--sand-2);border-radius:20px;color:var(--ink);font-size:10px}.element-example .page-header,.element-example .page-footer,.element-example .page-nav{display:flex;align-items:center;gap:18px;padding:16px 18px;background:var(--ink);color:var(--cream-light)}.element-example .page-header span{margin-left:auto;color:#909B72;font-size:9px}.element-example .page-footer{justify-content:space-between;font-size:9px}.element-example .page-footer a{border-bottom:1px solid}.element-example .page-nav{justify-content:center}.element-example .page-nav a{font-size:10px}.element-example .content-article small{font:8px var(--mono);text-transform:uppercase;color:#8B6847}.element-example .contact-form,.element-example .field-label{display:grid;gap:9px;font-size:10px;font-weight:600}.element-example .contact-form input,.element-example .field-label input,.element-example .text-input{width:100%;padding:11px;border:1px solid var(--line);background:var(--cream-light)}.element-example .contact-form button,.element-example .action-button{justify-self:start;padding:10px 16px;border:0;background:var(--ink);color:var(--cream-light)}.element-example .text-link{display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid;padding-bottom:5px;font-size:11px;font-weight:700}.element-example .sample-image{display:block;width:100%;max-height:210px;object-fit:cover}.element-example .feature-list,.element-example .step-list{margin:0;padding-left:25px}.element-example .feature-list li,.element-example .step-list li{padding:6px 4px;font-size:11px}.element-example .single-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}.element-example .single-list li{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line);font-size:10px}.element-example .single-list span{color:var(--muted)}.element-example .data-table{width:100%;border-collapse:collapse;font-size:10px}.element-example .data-table th,.element-example .data-table td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}
.element-demo-classic .element-example{font-family:Georgia,serif;color:#3F4A2C;background:#FFF9ED;border:1px solid #8B6847;border-radius:3px;box-shadow:4px 4px 0 var(--sand-2)}.element-demo-classic .element-example button,.element-demo-classic .element-example input{border-radius:2px}
.element-demo-modern .element-example{font-family:var(--sans);color:#3F4A2C;background:var(--cream-light);border:1px solid #909B72;border-radius:18px;box-shadow:0 18px 45px rgba(63,74,44,.14)}.element-demo-modern .element-example button,.element-demo-modern .element-example input,.element-demo-modern .element-example>*,.element-demo-modern .content-box,.element-demo-modern .content-section,.element-demo-modern .page-main,.element-demo-modern .content-article{border-radius:10px}
.element-demo-minimal .element-example{font-family:Arial,sans-serif;color:#3F4A2C;background:transparent;border-top:1px solid #3F4A2C;border-bottom:1px solid #3F4A2C;padding-left:0;padding-right:0}.element-demo-minimal .element-example .content-box,.element-demo-minimal .element-example .content-section,.element-demo-minimal .element-example .page-main,.element-demo-minimal .element-example .content-article{border-width:1px 0;padding-left:0;padding-right:0}.element-demo-minimal .element-example button,.element-demo-minimal .element-example input{border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink)}.element-detail-footer code{font-family:var(--mono);color:#8B6847}

/* Functional demo foundations and visual variations */
.live-preview button{cursor:pointer}.example-button{padding:13px 19px;display:flex;gap:30px;border:1px solid #8B6847;background:#F4EBD8}.example-field{width:min(380px,100%);display:flex;flex-direction:column;gap:8px}.example-field>span,.example-form label{font-size:10px;font-weight:600}.example-field input,.example-field select,.example-field textarea,.example-form input{width:100%;padding:12px;background:var(--cream-light);border:1px solid #8B6847}.example-field textarea{resize:vertical}.example-check{display:flex;align-items:center;gap:10px}.example-check input{accent-color:#3F4A2C}.example-options{display:flex;gap:20px;padding:20px}.example-options legend{font-size:10px;padding:0 5px}.example-options label{font-size:11px}.example-form{width:min(380px,100%);padding:24px;display:grid;gap:16px}.example-form label{display:grid;gap:6px}.example-form button{justify-self:start;padding:9px 18px;background:var(--ink);color:var(--cream-light);border:0}
.table-wrap{width:100%;overflow:auto}.example-table{width:100%;border-collapse:collapse;font-size:10px}.example-table th,.example-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}.example-table span{padding:4px 7px;border-radius:20px;background:#F4EBD8;color:#66734A;font-size:8px}.example-pagination{display:flex;gap:5px;padding:8px}.example-pagination button{width:35px;height:35px;border:1px solid var(--line);background:var(--cream-light)}.example-pagination .current{background:var(--ink);color:var(--cream-light)}.example-card{width:min(370px,100%);padding:27px}.example-card .card-tag{font:8px var(--mono);text-transform:uppercase;color:#8B6847}.example-card h3{font-size:23px;margin:14px 0 8px}.example-card p{font-size:11px;color:var(--muted);line-height:1.6}.example-card a{font-size:10px;font-weight:700}
.example-navbar{width:100%;padding:14px 18px;display:flex;align-items:center;gap:20px}.example-navbar .logo{font-size:13px;font-weight:800;margin-right:auto}.example-navbar div{display:flex;gap:16px}.example-navbar div a{font-size:9px}.example-navbar button{padding:7px 12px;border:0;background:var(--ink);color:var(--cream-light);font-size:8px}.example-sidebar{width:100%;height:220px;display:grid;grid-template-columns:150px 1fr}.example-sidebar aside{padding:20px;display:flex;flex-direction:column;gap:6px;background:#F4EBD8}.example-sidebar aside strong{font-size:11px;margin-bottom:12px}.example-sidebar aside a{padding:8px;font-size:9px}.example-sidebar aside a.active{background:var(--ink);color:var(--cream-light)}.example-sidebar main{padding:25px}.example-sidebar main h3{margin-top:0}.example-sidebar main p{font-size:10px;color:var(--muted)}
.example-tabs{width:100%;padding:20px}.example-tabs [role=tablist]{display:flex;border-bottom:1px solid var(--line)}.example-tabs [role=tab]{padding:10px 14px;border:0;border-bottom:2px solid transparent;background:transparent;font-size:9px}.example-tabs [role=tab].active{border-color:var(--ink);font-weight:700}.example-tabs [role=tabpanel]{padding:18px 5px}.example-tabs h3{font-size:15px}.example-tabs p{font-size:10px;color:var(--muted)}.example-accordion{width:100%;padding:15px}.example-accordion details{border-bottom:1px solid var(--line);padding:13px}.example-accordion summary{font-size:11px;font-weight:700;cursor:pointer}.example-accordion p{color:var(--muted);font-size:10px}
.example-dialog{position:relative;width:min(390px,100%);padding:28px}.example-dialog>span{font:8px var(--mono);text-transform:uppercase;color:#8B6847}.example-dialog h3{font-size:22px;margin:12px 0 8px}.example-dialog p{font-size:10px;color:var(--muted)}.example-dialog>div{display:flex;justify-content:flex-end;gap:7px;margin-top:20px}.example-dialog button{padding:8px 12px;border:1px solid var(--line);background:var(--cream-light);font-size:9px}.example-dialog>div button:last-child{background:var(--ink);color:var(--cream-light)}.example-dialog .dialog-close{position:absolute;right:14px;top:14px;border:0;padding:5px}.example-alert{width:min(500px,100%);padding:16px;display:flex;gap:13px;align-items:start}.example-alert>b{width:23px;height:23px;display:grid;place-items:center;border:1px solid;border-radius:50%;font-size:10px}.example-alert strong{font-size:11px}.example-alert p{font-size:9px;margin:4px 0 0;color:var(--muted)}.example-alert button{margin-left:auto;border:0;background:none}.example-badges{display:flex;align-items:center;gap:8px;padding:15px}.example-badges span{padding:6px 10px;border:1px solid var(--sand-3);border-radius:20px;font:8px var(--mono)}.example-badges .badge-progress{background:var(--sand-1)}.example-badges .badge-count{background:var(--ink);color:var(--cream-light);border-radius:50%;padding:6px 8px}
.example-tooltip{position:relative;padding:55px 30px 20px}.example-tooltip button{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:var(--cream-light)}.example-tooltip span{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:9px 12px;background:var(--ink);color:var(--cream-light);font-size:9px;white-space:nowrap}.example-tooltip span:after{content:"";position:absolute;bottom:-8px;left:50%;border:4px solid transparent;border-top-color:var(--ink)}.example-loader{display:flex;align-items:center;gap:14px;padding:18px}.example-loader>i{width:35px;height:35px;border:3px solid var(--sand-2);border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite}.example-loader>div{display:flex;flex-direction:column;gap:4px}.example-loader strong{font-size:11px}.example-loader span{font-size:8px;color:var(--muted)}

.demo-classic .example-button,.demo-classic .example-field,.demo-classic .example-check,.demo-classic .example-form,.demo-classic .example-card,.demo-classic .example-navbar,.demo-classic .example-options,.demo-classic .example-dialog,.demo-classic .example-alert,.demo-classic .example-table,.demo-classic .example-pagination,.demo-classic .example-tabs,.demo-classic .example-accordion,.demo-classic .example-badges,.demo-classic .example-tooltip,.demo-classic .example-loader{font-family:Georgia,serif;border:1px solid #8B6847;border-radius:3px;box-shadow:3px 3px 0 var(--sand-2);padding:20px}
.demo-modern .example-button,.demo-modern .example-field,.demo-modern .example-check,.demo-modern .example-form,.demo-modern .example-card,.demo-modern .example-navbar,.demo-modern .example-options,.demo-modern .example-dialog,.demo-modern .example-alert,.demo-modern .example-table,.demo-modern .example-pagination,.demo-modern .example-tabs,.demo-modern .example-accordion,.demo-modern .example-badges,.demo-modern .example-tooltip,.demo-modern .example-loader,.demo-modern .example-sidebar{border:1px solid #909B72;border-radius:16px;box-shadow:0 18px 45px rgba(63,74,44,.14);padding:20px}.demo-modern button,.demo-modern input,.demo-modern select,.demo-modern textarea{border-radius:9px}.demo-modern .example-button{background:var(--ink);color:var(--cream-light);transform:translateY(-2px)}
.demo-minimal .example-button,.demo-minimal .example-field,.demo-minimal .example-check,.demo-minimal .example-form,.demo-minimal .example-card,.demo-minimal .example-navbar,.demo-minimal .example-options,.demo-minimal .example-dialog,.demo-minimal .example-alert,.demo-minimal .example-table,.demo-minimal .example-pagination,.demo-minimal .example-tabs,.demo-minimal .example-accordion,.demo-minimal .example-badges,.demo-minimal .example-tooltip,.demo-minimal .example-loader,.demo-minimal .example-sidebar{border:0;border-radius:0;box-shadow:none;padding:20px}.demo-minimal input,.demo-minimal select,.demo-minimal textarea{border:0;border-bottom:1px solid var(--ink);border-radius:0}.demo-minimal .example-button{border:0;border-bottom:1px solid var(--ink);background:transparent;padding-left:0;padding-right:0}.demo-minimal .example-card{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}

@media (max-width: 1000px) {
  .component-grid{grid-template-columns:repeat(2,1fr)}.tag-grid{grid-template-columns:repeat(4,1fr)}.hero{padding-left:6vw;padding-right:6vw;gap:5vw}.hero h1{letter-spacing:-5px}.section{padding-left:6vw;padding-right:6vw}.main-nav{display:none}.lab-status{margin-left:auto}.libraries-intro,.ecosystem-intro{grid-template-columns:48px 1fr}.library-levels,.concept-difference{grid-column:2;padding:20px 0 0;border-left:0;border-top:1px solid var(--sand-3)}.library-grid{grid-template-columns:repeat(2,1fr)}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:auto;padding:28px}.tool-card .tool-description{min-height:auto}.mini-tool-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px) {
  .site-header{height:70px;padding:0 20px}.lab-status{min-width:auto;font-size:0}.lab-status i{margin:0}.hero{min-height:auto;display:block;padding:65px 24px 95px}.hero h1{font-size:66px;letter-spacing:-5px}.hero-text{font-size:14px}.hero-search-area{margin-top:50px}.search-box{height:62px}.search-suggestions button:nth-of-type(n+3){display:none}.hero-note{left:24px;bottom:28px}.section{padding:75px 24px}.section-heading{display:block}.section-heading>p{margin-top:20px}.section-heading h2{font-size:42px;letter-spacing:-2px}.component-grid{grid-template-columns:1fr}.component-card{min-height:310px}.card-open{opacity:1;transform:none}.tag-grid{grid-template-columns:repeat(2,1fr)}.tag-card{min-height:145px}.libraries-intro,.ecosystem-intro{display:block;padding:22px;margin-top:0}.intro-symbol{margin-bottom:18px}.library-levels,.concept-difference{margin-top:20px;padding-top:20px}.library-grid{grid-template-columns:1fr}.library-card{min-height:auto}.library-card>p{min-height:auto}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:145px}.mini-tool-grid{grid-template-columns:1fr}footer{display:grid;grid-template-columns:1fr auto;gap:25px;padding:35px 24px}footer>p{grid-row:2;grid-column:1/-1;margin:0}.footer-brand{min-width:auto}.modal-backdrop{padding:0}.detail-panel{max-height:100vh;height:100vh}.detail-header{padding:60px 24px 30px}.detail-header h2{font-size:40px;letter-spacing:-2px}.workbench{grid-template-columns:1fr}.style-axis{border-right:0;border-bottom:1px solid var(--line);padding:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.style-axis>.axis-label{grid-column:1/-1}.style-axis button{margin:0;padding:9px 6px}.style-axis button i{display:none}.style-axis button small{display:none}.workbench-main{padding:22px 18px 30px}.live-preview{min-height:220px;padding:25px 14px}.code-tabs{height:auto;min-height:52px;flex-wrap:wrap;padding:10px}.code-tabs .axis-label{width:100%;margin-bottom:6px}.code-tabs>button{height:35px;padding:0 9px}.code-tabs .copy-button{margin-left:auto}.detail-footer{padding:25px 24px;grid-template-columns:1fr}.detail-footer span{grid-column:1}.example-navbar div{display:none}.example-sidebar{grid-template-columns:110px 1fr}.example-dialog{width:100%}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }