.showcase { position: relative; z-index: 2; isolation: isolate; width: var(--w-rail); max-width: calc(100% - var(--gutter) * 2); margin: 28px auto calc(var(--spill) * -1); text-align: left; }
.showcase::before { content: ""; position: absolute; z-index: -1; right: -5%; bottom: -16%; width: 48%; height: 66%; border-radius: var(--r-round); background: linear-gradient(150deg, var(--c-transparent) 8%, var(--c-cyan) 48%, var(--c-orange) 86%); filter: blur(58px); opacity: 0.5; transform: rotate(-9deg); }
.lightframe { margin: 0; padding: 18px; border-radius: var(--r-frame); background: linear-gradient(135deg, var(--c-field-deep) 0%, var(--c-field-deep) 18%, var(--c-cyan) 60%, var(--c-orange) 100%); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-on-line), var(--shadow-frame); perspective: 1800px; }
.appwin { overflow: hidden; border-radius: var(--r-card); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-window); transform: rotateX(3deg); transform-origin: 50% 100%; font-size: 13.5px; line-height: 1.5; }
.appwin-bar { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 14px; background: var(--c-paper-2); color: var(--c-ink-muted); border-bottom: 1px solid var(--c-rule); }
.appwin-dots { display: flex; gap: 6px; flex-shrink: 0; }
.appwin-dots i { width: 9px; height: 9px; border-radius: var(--r-round); background: var(--c-rule-strong); }
.appwin-name { font-size: 12.5px; letter-spacing: 0.01em; }
.appwin-tabs { display: flex; align-items: stretch; gap: 30px; height: 40px; padding: 0 24px; border-bottom: 1px solid var(--c-rule); overflow-x: auto; scrollbar-width: none; }
.appwin-tab { position: relative; display: flex; align-items: center; flex-shrink: 0; color: var(--c-ink-muted); font-size: 13px; }
.appwin-tab.is-on { color: var(--c-ink); }
.appwin-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-orange); }
.appwin-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 16px; }
.appwin-col { min-width: 0; padding: 0 24px; }
.appwin-col + .appwin-col { border-left: 1px solid var(--c-rule); }
.grp + .grp { margin-top: 10px; }
.grp-title { margin: 0 0 6px; color: var(--c-ink-muted); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 17px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; border-bottom: 1px solid var(--c-paper-2); }
.grp .opt:last-child { border-bottom: 0; }
.opt-name { color: var(--c-ink); }
.inp { display: inline-flex; align-items: center; flex-shrink: 0; height: 26px; min-width: 104px; padding: 0 10px; border: 1px solid var(--c-rule-strong); border-radius: var(--r-ctl); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-hair); font-family: var(--f-mono); font-size: 12.5px; }
.inp-pick { justify-content: space-between; gap: 14px; min-width: 176px; font-family: var(--f-body); }
.mono { font-family: var(--f-mono); }
.tick { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid var(--c-rule-strong); border-radius: var(--r-ctl); background: var(--c-paper); color: var(--c-ink); font-size: 12px; }
.tick.is-on { border-color: var(--c-link-hover); background: var(--c-field); color: var(--c-on); }
.flip { position: relative; flex-shrink: 0; width: 32px; height: 18px; border-radius: var(--r-round); background: var(--c-field); }
.flip::after { content: ""; position: absolute; top: 2px; left: 16px; width: 14px; height: 14px; border-radius: var(--r-round); background: var(--c-paper); box-shadow: var(--shadow-hair); }
.appwin-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; border-top: 1px solid var(--c-rule); background: var(--c-paper-2); color: var(--c-ink-muted); }
.appwin-path { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11.5px; }
.appwin-path::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--r-round); background: var(--c-cyan); }
.appwin-btns { display: flex; gap: 8px; }
.wbtn { display: inline-flex; align-items: center; height: 28px; padding: 0 18px; border-radius: var(--r-ctl); font-size: 12.5px; }
.wbtn-ok { background: var(--c-field); color: var(--c-on); }
.wbtn-no { border: 1px solid var(--c-rule-strong); background: var(--c-paper); color: var(--c-ink); }
.tabs { min-width: 0; }
.tablist, [role="tablist"] { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px; }
[role="tab"] { position: relative; flex-shrink: 0; min-height: 44px; padding: 10px 18px; border: 1px solid var(--c-rule); border-radius: var(--r-ctl); background: var(--c-paper); color: var(--c-ink-muted); font-size: 14px; text-align: left; }
[role="tab"][aria-selected="true"] { border-color: var(--c-link-hover); background: var(--c-field); color: var(--c-on); }
[role="tabpanel"] { min-width: 0; margin-top: 20px; }
.settings-tabs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.settings-tabs [role="tablist"] { flex-direction: column; overflow: visible; gap: 4px; padding: 0; }
.settings-tabs [role="tab"] { border: 0; border-radius: var(--r-ctl); background: var(--c-transparent); color: var(--c-ink-muted); font-family: var(--f-mono); font-size: 13px; }
.settings-tabs [role="tab"][aria-selected="true"] { background: var(--c-paper-2); color: var(--c-ink); }
.settings-tabs [role="tab"][aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--c-orange); }
.settings-tabs [role="tabpanel"] { margin-top: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border: 1px solid var(--c-rule); border-radius: var(--r-card); background: var(--c-paper); color: var(--c-ink); }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: var(--c-ink-muted); text-decoration: none; }
.toc a:hover { color: var(--c-link-hover); }
.toc.is-sticky { position: sticky; top: 16px; z-index: 5; }
.faq-item { border-bottom: 1px solid var(--c-rule); background: var(--c-paper); color: var(--c-ink); }
.faq-item summary { position: relative; min-height: 56px; padding: 16px 40px 16px 0; cursor: pointer; list-style: none; font-weight: var(--weight-medium); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 12px; top: 14px; font-family: var(--f-mono); font-size: 20px; color: var(--c-link-hover); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: 16px; color: var(--c-ink-muted); }
.faq-answer > :last-child { margin-bottom: 0; }
.term-card { border-top: 3px solid var(--c-field); }
.term-card dt { margin-bottom: 12px; font-size: 22px; }
.term-card dd { margin: 0; color: var(--c-ink-muted); }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; color: var(--c-ink-muted); font-family: var(--f-mono); font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border: 1px solid var(--c-rule); border-radius: var(--r-ctl); background: var(--c-paper-2); color: var(--c-ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.badge-primary { background: var(--c-field); color: var(--c-on); border-color: var(--c-link-hover); }
.badge-recommended { background: var(--c-paper); color: var(--c-link-hover); border-color: var(--c-link-hover); }
.badge-retired { background: var(--c-paper-2); color: var(--c-ink-muted); }
.status-dot { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; border-radius: var(--r-round); background: var(--c-cyan); }
.client-card { display: flex; flex-direction: column; gap: 20px; }
.client-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.client-head img { width: 56px; height: 56px; flex-shrink: 0; }
.client-head h3 { margin: 0; }
.client-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.article-card { display: flex; flex-direction: column; }
.article-card h3 a { color: var(--c-ink); text-decoration: none; }
.article-card h3 a:hover { color: var(--c-link-hover); }
.article-card p { color: var(--c-ink-muted); }
.article-card .read-link { margin-top: auto; }
.callout { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--c-rule); border-left: 3px solid var(--c-field); border-radius: var(--r-ctl); background: var(--c-paper-2); color: var(--c-ink); }
.callout > :last-child { margin-bottom: 0; }
.callout-warn { border-left-color: var(--c-warn); }
.callout-error { border-left-color: var(--c-error); }
.callout-success { border-left-color: var(--c-success); }
.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td, .prose table th, .prose table td, .article-body table th, .article-body table td { min-width: 7em; padding: 14px 16px; border: 1px solid var(--c-rule); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.data-table th, .prose table th, .article-body table th { background: var(--c-paper-2); color: var(--c-ink); font-weight: var(--weight-medium); }
.data-table td, .prose table td, .article-body table td { background: var(--c-paper); color: var(--c-ink); }
.prose table, .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; }
.download-guide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.download-guide h2 { margin-top: 0; font-size: 24px; }
.dl-fab { position: fixed; z-index: 15; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - var(--gutter) * 2); padding: 14px 18px; border: 1px solid var(--c-on-line); border-radius: var(--r-card); background: var(--c-field); color: var(--c-on); box-shadow: var(--shadow-hair); text-decoration: none; font-size: 14px; }
.dl-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.dl-fab:hover { background: var(--c-field-deep); color: var(--c-on); }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.swatch { margin: 0; padding: 8px; border: 1px solid var(--c-rule); border-radius: var(--r-ctl); background: var(--c-paper); color: var(--c-ink); }
.swatch i { display: block; height: 64px; border-radius: var(--r-ctl); border: 1px solid var(--c-rule); }
.swatch figcaption { margin-top: 8px; font-family: var(--f-mono); font-size: 11px; overflow-wrap: anywhere; }
.sw-field { background: var(--c-field); }
.sw-deep { background: var(--c-field-deep); }
.sw-deeper { background: var(--c-field-deeper); }
.sw-paper { background: var(--c-paper); }
.sw-paper2 { background: var(--c-paper-2); }
.sw-rule { background: var(--c-rule); }
.sw-strong { background: var(--c-rule-strong); }
.sw-orange { background: var(--c-orange); }
.sw-orange-deep { background: var(--c-orange-deep); }
.sw-cyan { background: var(--c-cyan); }
.sw-ink { background: var(--c-ink); }
.sw-muted { background: var(--c-ink-muted); }
.sw-success { background: var(--c-success); }
.sw-warn { background: var(--c-warn); }
.sw-error { background: var(--c-error); }
.sw-on { background: var(--c-on); }
.sw-on-muted { background: linear-gradient(var(--c-on-muted), var(--c-on-muted)), var(--c-field); }
.sw-on-soft { background: linear-gradient(var(--c-on-soft), var(--c-on-soft)), var(--c-field); }
.sw-on-line { background: linear-gradient(var(--c-on-line), var(--c-on-line)), var(--c-field); }
.sw-on-edge { background: linear-gradient(var(--c-on-edge), var(--c-on-edge)), var(--c-field); }
.sw-on-fill { background: linear-gradient(var(--c-on-fill), var(--c-on-fill)), var(--c-field); }
.sw-on-hover { background: linear-gradient(var(--c-on-fill-hover), var(--c-on-fill-hover)), var(--c-field); }
.sw-transparent { background: linear-gradient(var(--c-transparent), var(--c-transparent)), var(--c-field); }
.preview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-block: 24px; }
.preview-blue { padding: 24px; border-radius: var(--r-card); background: var(--c-field); color: var(--c-on); }
@media (max-width: 860px) {
  .lightframe { padding: 10px; }
  .appwin { transform: none; }
  .appwin-body { grid-template-columns: 1fr; }
  .appwin-col { padding: 0 16px; }
  .appwin-col + .appwin-col { border-left: 0; border-top: 1px solid var(--c-rule); margin-top: 10px; padding-top: 10px; }
  .appwin-foot { flex-wrap: wrap; padding: 10px 16px; }
  .inp-pick { min-width: 0; }
  .settings-tabs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .settings-tabs [role="tablist"] { flex-direction: row; overflow-x: auto; padding: 4px; }
  .settings-tabs [role="tab"] { border-radius: var(--r-round); border: 1px solid var(--c-rule); }
  .settings-tabs [role="tab"][aria-selected="true"]::before { left: 8px; top: 13px; bottom: 13px; }
}
@media (max-width: 640px) {
  .showcase::before { right: 0; transform: none; }
  .appwin-tabs { gap: 20px; padding-inline: 16px; }
  .opt { gap: 8px; }
  .opt-name { font-size: 12px; }
  .inp { min-width: 72px; }
  .inp-pick { min-width: 96px; }
  .toc.is-sticky { position: static; }
  .dl-fab { padding: 12px 16px; }
}