.glass {
  background: var(--glass-sheen), var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(11, 11, 11, .03), var(--glass-shadow);
  border-radius: var(--r-3);
}

.card, .callout, .rule-box, .call, .gallery-card, .panel {
  background: var(--flat, var(--surface-2)); border: 0; box-shadow: none;
}

.lightfield { }
@media print {
  .glass, .card, .callout, .rule-box, .call, .gallery-card {
    background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; border: 1px solid var(--line); }
}


.kit-scope, .kit-scope * { box-sizing: border-box; }
.kit-scope { font-family: var(--grotesk); color: var(--ink); }
.kit-scope button, .kit-scope input, .kit-scope select { font-family: var(--grotesk); }

.kit-scope a { text-decoration: none; }
.kit-scope a:not(.btn):not(.icon-btn):not(.nav-item):not(.logo):not(.chip) { color: inherit; }   



.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--s-4); margin-bottom: var(--s-6);
}
.masthead .wordmark { font-weight: var(--fw-black); font-size: var(--fs-h4); letter-spacing: var(--ls-head); }
.masthead .meta { font-family: var(--grotesk); font-size: var(--fs-meta); color: var(--ink-3); font-weight: var(--fw-medium); }




.hero { padding: var(--hero-pad-top, var(--s-7)) 0 var(--hero-pad-bottom, var(--s-6)); }
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono);
  color: var(--ink-3); margin-bottom: var(--s-3); text-transform: uppercase;
}
.hero-title { font-size: clamp(var(--fs-h1), 6vw, var(--fs-display)); font-weight: var(--fw-black);
  line-height: var(--lh-hero); letter-spacing: var(--ls-hero); max-width: 16ch; margin: 0; }
.hero-title .thin { color: transparent; -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke; }
.hero-sub { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2); max-width: 52ch;
  margin-top: var(--s-4); }
.hero-stats { display: flex; gap: var(--s-7); margin-top: var(--s-7); }
.hero-stats .stat { display: flex; flex-direction: column; gap: var(--s-1); }
.hero-stats .val { font-size: var(--fs-h4); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.hero-stats .lbl { font-size: var(--fs-meta); color: var(--ink-3); }



.sec-head { display: flex; align-items: center; gap: var(--s-4); margin: var(--sec-gap) 0 var(--s-5); }
.sec-head .idx { font-family: var(--mono); font-size: var(--fs-meta); color: var(--accent);
  letter-spacing: var(--ls-mono); flex: none; font-variant-numeric: tabular-nums; }
.sec-head .t { font-size: var(--fs-meta); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-label); flex: none; white-space: nowrap; }
.sec-head .line { flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--line); }
.sec-head .note { font-size: var(--fs-meta); color: var(--ink-3); flex: 0 1 auto; min-width: 0;
  white-space: normal; text-align: right; }

.card .sec-head .line, .glass .sec-head .line, .callout .sec-head .line { background: transparent; }
@media (max-width: 735px) {
  .sec-head { flex-wrap: wrap; }
  .sec-head .line { order: 3; flex-basis: 100%; }
  .sec-head .note { order: 4; flex-basis: 100%; text-align: left; margin-top: var(--s-1); }
}



.lede { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2); max-width: 52ch; }



.callout { border-radius: var(--r-2); padding: var(--s-5); font-size: inherit; line-height: var(--lh-body); color: var(--ink-2); }
.co-head, .rb-head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.co-head::before, .rb-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--dot, var(--ink)); }
.co-head .counter, .rb-head .counter { font-family: var(--mono); letter-spacing: var(--ls-mono); font-weight: var(--fw-medium); color: var(--ink-3); margin-left: auto; }
.co-body { margin-top: var(--s-2); }
.co-body > :first-child { margin-top: 0; } .co-body > :last-child { margin-bottom: 0; }
.callout.hot, .rule-box.hot { --dot: var(--accent); }
.callout.wait, .rule-box.wait { --dot: var(--gold); }
.callout.blue, .rule-box.blue { --dot: var(--blue); }



.rule-box { border-radius: var(--r-2); padding: var(--s-5); }
.rule-box .rb-lead { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink); margin-top: var(--s-2); }
.rule-box .rb-line { font-size: var(--fs-meta); color: var(--ink-2); line-height: var(--lh-body); margin-top: var(--s-1); }



table.kv { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
table.kv td { padding: var(--cell-pad); border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.kv td.k { font-weight: var(--fw-bold); color: var(--ink); width: 40%; }
table.kv td.v { color: var(--ink-2); }
table.kv td.num { font-variant-numeric: tabular-nums; text-align: right; }



table.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
table.ledger thead th { font-family: var(--grotesk); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--ls-micro); color: var(--ink-3); text-align: left; font-weight: var(--fw-medium);
  padding: var(--cell-pad); border-bottom: 2px solid var(--ink); }
table.ledger td { padding: var(--cell-pad); border-bottom: 1px solid var(--line); color: var(--ink-2); }
table.ledger td.k { font-weight: var(--fw-bold); color: var(--ink); }
table.ledger td.num { font-variant-numeric: tabular-nums; text-align: right; }
table.ledger tr.hot td { background: var(--accent-wash); }
table.ledger tr.dim td { color: var(--ink-3); }



.card { border-radius: var(--r-2); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.card .eyebrow { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-meta);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--ls-label); }
.card .title { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); }
.card .line { font-size: var(--fs-body); color: var(--ink-2); }
.card .meta { font-size: var(--fs-meta); color: var(--ink-3); margin-top: auto; }
.cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.cg-strip { display: flex; gap: 2px; margin-top: auto; }
.cg-strip i { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
.cg-strip i.done { background: var(--ink); }
.cg-strip i.active { background: var(--accent); }
.cg-strip i.held { background: var(--mark-waiting); box-shadow: inset 0 0 0 1.5px var(--mark-active); }   



.panel { border-radius: var(--r-3); padding: var(--s-6); }



div.sheet { background: var(--surface-1); border-radius: var(--r-4); padding: var(--s-7); box-shadow: var(--el-2); }



.room.canvas { border-radius: var(--r-4); padding: var(--s-7); background: var(--paper); color: var(--ink); }



.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-meta); font-weight: var(--fw-medium); }
.chip-hot { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-blue { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); }

:is([data-mode="dark"], .canvas) .chip-blue { color: var(--ink); }
@media screen and (prefers-color-scheme: dark) { :root[data-modes]:not([data-mode="light"]) .chip-blue { color: var(--ink); } }
.chip-gold { background: var(--gold-wash); border-color: var(--gold); color: var(--ink-2); }

.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-1); font-size: var(--fs-meta); color: var(--ink-2); }

.flag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-2);
  border-radius: var(--r-1); background: var(--accent); color: #fff; font-size: var(--fs-meta); font-weight: var(--fw-semibold); }



.mark { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; }
.mark-active { background: var(--mark-active); }
.mark-waiting, .mark-held { background: var(--mark-waiting); box-shadow: inset 0 0 0 1.5px var(--mark-active); }
.mark-parked { background: var(--mark-parked); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mark-needs-you { background: var(--mark-needs-you); }
.mark-shipped { border-radius: 2px; background: var(--mark-shipped); }




.ctl-group { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.ctl { font-family: var(--grotesk); font-size: var(--fs-meta); font-weight: var(--fw-medium);
  padding: var(--s-2) var(--s-4); border: none; border-right: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); cursor: pointer; min-height: var(--target);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ctl:last-child { border-right: none; }
.ctl:hover { background: var(--surface-2); }
.ctl.on { background: var(--ink); color: var(--paper); }   
.ctl.hot.on { background: var(--accent); color: #fff; }
.ctl:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }



.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding: 0 var(--s-5); border-radius: var(--r-pill); font-family: var(--grotesk);
  font-size: var(--fs-label); font-weight: var(--fw-semibold); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--press-dur) var(--ease), background var(--dur-fast) var(--ease),
  opacity var(--dur-fast) var(--ease); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { opacity: .92; }
.btn-secondary { background: var(--ink); color: var(--paper); }   
.btn-secondary:hover:not(:disabled) { opacity: .88; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn .icon { width: 20px; height: 20px; margin-left: -4px; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }



.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label { font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--ink-2); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--surface-1); color: var(--ink); font-family: var(--grotesk); font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease); }
.field textarea { height: auto; padding: var(--s-3); min-height: 96px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }

.check, .radio { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); cursor: pointer; font-size: var(--fs-body); }
.check input, .radio input { width: var(--target); height: var(--target); margin: 0; accent-color: var(--accent); }
.check input { border-radius: 4px; }

.toggle { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; min-height: var(--target); }
.toggle input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.toggle .track { width: 44px; height: 24px; border-radius: var(--r-pill); background: var(--surface-3);
  position: relative; transition: background var(--dur-fast) var(--ease); }
.toggle .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: var(--r-pill); background: #fff; box-shadow: var(--el-1); transition: transform var(--dur-fast) var(--ease); }
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(20px); }
.toggle input:focus-visible + .track { box-shadow: var(--focus-ring); }



.tabbar { display: flex; border-bottom: 1px solid var(--line-strong); }
.tab { font-family: var(--grotesk); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  padding: var(--s-3) var(--s-4); border: none; background: transparent; color: var(--ink-3);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: var(--target);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tabpanel { padding: var(--s-4) 0; }
.tabpanel[hidden] { display: none; }



.popover { position: absolute; background: var(--surface-1);   
  border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--el-3);
  padding: var(--s-4); min-width: 220px; max-width: 380px; transform-origin: top left;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.popover[hidden] { display: none; }
.popover.is-closed { opacity: 0; transform: scale(.94); }
.popover.is-open { opacity: 1; transform: scale(1); }



.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 94vw); background: var(--surface-1);   
  border-left: 1px solid var(--line);
  box-shadow: var(--el-2); padding: var(--s-6); overflow-y: auto; transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease); z-index: 40; }
.drawer.is-open { transform: translateX(0); }
.drawer .drawer-close { position: absolute; top: var(--s-4); right: var(--s-4); }



.toast { display: inline-flex; align-items: center; gap: var(--s-3); background: var(--ink); color: var(--paper);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-size: var(--fs-meta); box-shadow: var(--el-2); }



.empty { font-size: var(--fs-body); color: var(--ink-3); padding: var(--s-6) 0; text-align: center; }



.folio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  font-family: var(--grotesk); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--ink-3); padding-top: var(--s-6); }
.folio .counter, .corners .counter { font-family: var(--mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-mono); }
.corners { position: relative; min-height: 160px; }
.corners .corner { position: absolute; font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro); line-height: 1.4;
  letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3); }
.corners .tl { top: 0; left: 0; }
.corners .tr { top: 0; right: 0; text-align: right; }
.corners .bl { bottom: 0; left: 0; }
.corners .br { bottom: 0; right: 0; text-align: right; }
.corners .br b { color: var(--accent); font-weight: var(--fw-bold); }



.call { position: relative; border-radius: var(--r-3); padding: var(--s-5) var(--s-5) var(--s-4); margin-top: var(--s-4); }
.call legend.ctag { float: left; width: 100%; padding: 0; }
.call legend.ctag + * { clear: both; }
.call .ctag { display: block; font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }
.call .ctag .counter { font-family: var(--mono); letter-spacing: var(--ls-mono); font-weight: var(--fw-medium); }
.call h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); line-height: 1.15; margin: 0 0 var(--s-2); overflow-wrap: anywhere; }

.call .delta { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-meta);
  font-weight: var(--fw-semibold); line-height: 1.4; color: var(--ink); max-width: var(--measure-copy); }
.call .delta::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent); }
.call .ctx { font-size: var(--fs-body); color: var(--ink-2); margin: 0 0 var(--s-3); max-width: var(--measure-copy); overflow-wrap: anywhere; }

.call .opts { display: flex; flex-direction: column; gap: 2px; margin: var(--s-3) 0 0; padding: 0; border: 0; }
.call .opt { display: grid; grid-template-columns: var(--target) minmax(0, 1fr); column-gap: var(--s-3); align-items: start;
  padding: var(--s-2) var(--s-3); margin: 0 calc(-1 * var(--s-3)); border-radius: var(--r-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease); }
.call .opt:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }            
.call .opt:has(input:checked) { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.call .opt input[type="radio"] { -webkit-appearance: none; appearance: none; width: var(--target); height: var(--target); margin: 0;
  border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--surface-1); display: grid; place-content: center;
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.call .opt input[type="radio"]::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
.call .opt input[type="radio"]:checked { border-color: var(--accent); }
.call .opt input[type="radio"]:checked::before { transform: scale(1); }
.call .opt input[type="radio"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.call .opt .ot { font-size: var(--fs-body); color: var(--ink); line-height: 1.4; padding-top: 1px; }
.call .opt .ow { display: block; font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; line-height: var(--lh-body); max-width: var(--measure-copy); }
.call .rec { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-2); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.call .rec .why { font-size: var(--fs-meta); color: var(--ink-2); margin-top: var(--s-2); line-height: var(--lh-body); max-width: var(--measure-copy); }
.call input.note { margin-top: var(--s-4); }

.call .preview { display: block; position: relative; width: 100%; padding-bottom: 62.5%; overflow: hidden;
  margin: 0 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.call .preview iframe { position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 0;
  transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.ruling { background: var(--surface-2); border-radius: var(--r-2); padding: var(--s-4); margin-top: var(--s-3);
  font-size: var(--fs-meta); color: var(--ink-2); }
.ruling .applied { font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro); color: var(--ink-3); margin-top: var(--s-2);
  text-transform: uppercase; letter-spacing: var(--ls-micro); }

input.note { border-radius: var(--r-pill); border: 1px solid var(--line-strong); padding: var(--s-2) var(--s-4);
  font-family: var(--grotesk); font-size: var(--fs-meta); background: var(--surface-1); color: var(--ink); width: 100%; min-height: var(--control-h); }
input.note:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.btn-done { margin-top: var(--s-3); }
.canvas .call .opt:hover, .canvas .call .opt:has(input:checked), .canvas .call .rec { background: rgba(255, 255, 255, .06); }



.gallery-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-3); }
.gallery-card img, .gallery-card .ph { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-1);
  background: var(--surface-2); }
.gallery-card .cap { font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro); color: var(--ink-2);
  letter-spacing: var(--ls-micro); text-transform: uppercase; padding: 0 var(--s-2) var(--s-1); }



.plate-index { display: flex; flex-direction: column; }
.plate-index .pi-row { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line); }
.plate-index .idx { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); width: 32px; flex: none; }
.plate-index .t { flex: 1; font-size: var(--fs-body); color: var(--ink); }
.plate-index .p { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }



.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--tile-nav-h);
  display: flex; align-items: flex-start; pointer-events: none; isolation: isolate; }
.navbar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
          mask-image: linear-gradient(to bottom, #000 45%, transparent); }
.navbar-inner { width: 100%; padding: var(--s-4) var(--s-4) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: var(--control-h); align-items: center; column-gap: var(--s-4); }
.navbar a, .navbar button, .navbar .nav-pill, .navbar .nav-tools { pointer-events: auto; }
.navbar .logo { justify-self: start; position: relative; width: calc(var(--wordmark-nav) * 1011.8 / 189); height: var(--target);
  aspect-ratio: auto; color: var(--ink); background: none; -webkit-mask: none; mask: none; border-radius: var(--r-1); }
.navbar .logo::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--wordmark-nav); transform: translateY(-50%);
  background: currentColor; -webkit-mask: var(--wordmark-mask) no-repeat center / contain; mask: var(--wordmark-mask) no-repeat center / contain; }
.navbar .logo:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-pill { display: flex; align-items: center; gap: calc(var(--s-1) / 2); padding: calc(var(--s-1) / 2);
  border-radius: var(--r-pill); background: var(--glass-sheen), var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(11, 11, 11, .03), var(--glass-shadow); }
.nav-item { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: var(--control-h); padding: 0 calc(var(--s-4) + var(--s-1)); border-radius: var(--r-pill);
  font-family: var(--grotesk); font-size: var(--fs-nav); font-weight: var(--fw-medium); line-height: 1.2;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--press-dur) var(--ease); }
.nav-item .icon { display: none; }
.nav-item:hover { color: var(--ink); }
.nav-item:active { transform: scale(var(--press-scale)); }
.nav-item[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-tools { justify-self: end; display: flex; align-items: center; gap: var(--s-2); }
body:has(> .navbar) { padding-top: var(--tile-nav-h); }

@media (min-width: 736px) { body:has(.popout) .navbar .logo { margin-left: calc(var(--control-h) + var(--s-2)); } }
@media (max-width: 899px) { .nav-item { padding: 0 var(--s-2); } }
@media (max-width: 735px) {
  .navbar { position: relative; margin-top: var(--s-3); pointer-events: auto; align-items: center; }
  .navbar::before { display: none; }
  .navbar-inner { padding: 0 var(--tile-gutter); grid-template-rows: auto; }
  .navbar .logo { grid-column: 2; justify-self: center; }   
  .navbar .nav-tools { grid-column: 3; grid-row: 1; }
  .navbar .nav-tools .float-btn { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-pill { position: fixed; z-index: 40; left: var(--tile-gutter); right: var(--tile-gutter);
    bottom: max(var(--tile-gutter), env(safe-area-inset-bottom)); height: var(--tile-tabbar-h); padding: var(--s-1); gap: 0; }
  .nav-item { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; }
  .nav-item .icon { display: block; width: var(--icon-tab); height: var(--icon-tab); }
  .nav-item > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }   
  body:has(> .navbar) { padding-top: 0; padding-bottom: calc(var(--tile-tabbar-h) + var(--tile-gutter) + var(--s-6)); }
}



.row-list { display: flex; flex-direction: column; }
.lrow { display: grid; grid-template-columns: 32px 56px 1fr auto auto 20px; align-items: center; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); border-radius: var(--r-1);
  transition: background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease); }
.lrow:hover { background: var(--surface-2); padding-left: var(--s-3); padding-right: var(--s-3); }
.lrow .idx { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.lrow .thumb { width: 56px; height: 56px; border-radius: var(--r-1); background: var(--surface-2); object-fit: cover; }
.lrow .main .t { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.lrow .main .s { font-size: var(--fs-meta); color: var(--ink-2); }
.lrow .tags { display: flex; gap: var(--s-1); }
.lrow .date { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
.lrow .arrow { color: var(--ink-3); transition: transform var(--dur-fast) var(--ease); justify-self: end; }
.lrow:hover .arrow { transform: translateX(2px); color: var(--ink); }
@media (max-width: 735px) {
  .lrow { grid-template-columns: 24px 1fr 20px; column-gap: var(--s-2); }
  .lrow .thumb, .lrow .tags, .lrow .date { display: none; }
}



.acc { border-top: 1px solid var(--line); }
.acc:last-child { border-bottom: 1px solid var(--line); }
.acc-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; cursor: pointer;
  list-style: none; min-height: var(--target); }
.acc-head::-webkit-details-marker { display: none; }

.acc-head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.acc-head .t { font-weight: var(--fw-bold); font-size: var(--fs-body); }
.acc-head .meta { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-3); }
.acc-head::after { content: '+'; margin-left: var(--s-2); color: var(--ink-3); }
.acc[open] .acc-head::after { content: '\2212'; color: var(--ink-2); }
.acc-body { padding: 0 0 var(--s-3); font-size: var(--fs-meta); color: var(--ink-2); }



.need { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.need .n { font-family: var(--mono); font-size: var(--fs-meta); color: var(--accent); flex: none; width: 24px; }
.need .txt { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.need .why { font-size: var(--fs-meta); color: var(--ink-2); margin-top: var(--s-1); }



.icon { width: var(--icon); height: var(--icon); flex: none; stroke-width: var(--icon-stroke); vertical-align: middle; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h);
  border-radius: var(--r-pill); background: transparent; border: none; cursor: pointer; color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease), transform var(--press-dur) var(--ease); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:active { transform: scale(var(--press-scale)); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn svg { width: var(--icon); height: var(--icon); stroke-width: var(--icon-stroke); }



.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js-ready .reveal { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .kit-scope * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}




.scroll-region { flex: 1; min-height: 0; overflow-y: auto; padding-right: var(--s-2);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.scroll-region::-webkit-scrollbar { width: 6px; }
.scroll-region::-webkit-scrollbar-track { background: transparent; }
.scroll-region::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
.scroll-region:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.scroll-region.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); }

.row-list.no-thumb .lrow { grid-template-columns: 32px 1fr auto auto 20px; }
@media (max-width: 735px) { .row-list.no-thumb .lrow { grid-template-columns: 24px 1fr 20px; } }

.src-ref { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px;
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--ink-2);
  text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.src-ref:hover { color: var(--ink); background: var(--surface-2); }
.src-ref:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pull-quote { margin: var(--s-6) 0 0; max-width: var(--measure-copy); }
.pull-quote p { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-head); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.pull-quote cite { display: block; margin-top: var(--s-3); font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3); font-style: normal; }

.pri-list { display: flex; flex-direction: column; }
.pri { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.pri:first-child { border-top: none; padding-top: 0; }
.pri .mark { margin-top: 6px; }
.pri .n { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); width: 20px; flex: none; }
.pri .t { font-size: var(--fs-body); color: var(--ink-2); }
.pri.is-focus .t { font-weight: var(--fw-bold); color: var(--ink); }
.pri.is-done .t { color: var(--ink-3); }

.wr-list { display: flex; flex-direction: column; }
.wr { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.wr:first-child { border-top: none; padding-top: 0; }
.wr .mark { margin-top: 6px; }
.wr .who { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.wr .why { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }

.table-scroll { max-width: 100%; overflow-x: auto; }


dialog.lightbox { border: none; border-radius: var(--r-3); padding: 0; max-width: min(92vw, 1320px); max-height: 90vh;
  background: var(--surface-1); color: var(--ink); box-shadow: var(--el-3); overflow: hidden; }
dialog.lightbox:not([open]) { display: none; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .78); }
dialog.lightbox img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: var(--surface-2); }
dialog.lightbox .lb-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); font-size: var(--fs-meta); color: var(--ink-2); }
@media print { dialog.lightbox { display: none; } }


@media (max-width: 900px) { .corners .c-bl, .corners .c-br { display: none; } }





.logo { --wordmark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1011.8 189' fill='currentColor' role='img' aria-label='J.GROUP'%3E %3Cpath d='M0,129.7v-13.9h38.3v12.9c0,18,7.8,24.9,21.5,24.9s20.2-8.3,20.2-22.9V3.2h41.7v128.5c0,15.1-3.7,27.3-11.5,36.6-9.8,12.2-26.1,19.8-48,19.8-41.5,0-62.2-22.4-62.2-58.3Z'/%3E %3Cpath d='M130,144.6h40.5v40h-40.5v-40Z'/%3E %3Cpath d='M308.7,160.2h-.7c-10.7,20-30,28.5-52.2,28.5s-46.8-9.5-61.7-25.4c-15.9-17.1-24.1-41-24.1-68.8s11.2-58,31.5-75.1C216.1,7.1,234.8,0,258.7,0c45.8,0,72.7,24.4,79.3,59h-41.5c-4.4-13.4-15.9-24.6-36.6-24.6-32.2,0-47.8,26.1-47.8,60.2s18.5,60.2,48.3,60.2,41-17.3,41.2-35.6v-.7h-36.6v-31h75.8v97.1h-28.8l-3.4-24.4Z'/%3E %3Cpath d='M356,3.2h86.3c35.4,0,61.9,18.8,61.9,51.9s-10.5,36.6-33.7,44.1v.7c18,5.6,26.1,15.6,28.5,35.1,3.4,24.6,2,45.1,7.8,47.6v2h-41c-4.9-2.7-4.4-21.9-6.6-41.9-2.2-18-11.2-27.3-31.2-27.3h-30.7v69.3h-41.5V3.2ZM397.5,84.6h36.8c18.5,0,28.5-9.5,28.5-23.9s-9-24.6-27.3-24.6h-38v48.5Z'/%3E %3Cpath d='M510.7,94.6c0-54.4,34.6-94.6,89.7-94.6s89.5,40.2,89.5,94.6-34.6,94.4-89.5,94.4-89.7-40.2-89.7-94.4ZM647.5,94.6c0-34.4-15.6-61-46.8-61s-47.6,26.6-47.6,61,16.1,60.2,47.6,60.2,46.8-26.1,46.8-60.2Z'/%3E %3Cpath d='M698.9,121.4V3.2h41.5v119.3c0,19.8,10.5,31.9,33.9,31.9s32.9-12.9,32.9-32.7V3.2h41.7v118.3c0,42.2-26.1,66.6-74.6,66.6s-75.4-23.9-75.4-66.6Z'/%3E %3Cpath d='M865.2,3.2h80.7c21.5,0,37.6,5.9,48.5,16.8,11,11,17.3,25.6,17.3,43.4,0,34.4-23.4,58.3-61,58.3h-43.4v62.9h-42.2V3.2ZM907.4,88.8h35.4c17.6,0,27.1-10,27.1-25.4s-9.8-24.9-26.8-24.9h-35.6v50.2Z'/%3E %3C/svg%3E");
  display: inline-block; height: 28px; aspect-ratio: 1011.8 / 189; background: currentColor;
  -webkit-mask: var(--wordmark-mask) no-repeat center / contain; mask: var(--wordmark-mask) no-repeat center / contain; }



.pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--s-4); }
.pal-cell { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.pal-chip { height: 72px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line); }
.pal-name { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono);
  font-weight: var(--fw-medium); color: var(--ink); }
.pal-hex { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono); color: var(--ink-3); }
.pal-role { font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.35; }
.pal-lane { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
.pal-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); }

.pal-ramp { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; }
.pal-ramp .pal-chip { height: 56px; border-radius: 0; }
.pal-ramp .pal-cell:first-child .pal-chip { border-radius: var(--r-1) 0 0 var(--r-1); }
.pal-ramp .pal-cell:last-child .pal-chip { border-radius: 0 var(--r-1) var(--r-1) 0; }

.canvas .pal-chip, .demo-dark .pal-chip { box-shadow: inset 0 0 0 1px var(--canvas-line); }
.canvas .pal-name, .demo-dark .pal-name { color: var(--canvas-ink); }
.canvas .pal-hex, .demo-dark .pal-hex, .canvas .pal-role, .demo-dark .pal-role { color: var(--canvas-ink-3); }
@media (max-width: 735px) { .pal-ramp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 0; } }