/* TinyBook section/base layer. Shared system recipes and components have explicit precedence. */
@layer website-base {
/* Selected keycap chapter. Shared dimensions live in website-tokens.json. */
.personalisation-chapter .chapter-intro .eyebrow { display:none; }
#personalise > .chapter-intro .heading-group { display:flex; flex-direction:column; align-items:center; text-align:center; margin-inline:auto; }
#personalise > .chapter-intro .heading-group > * { flex:none; }
#personalise > .chapter-intro .section-heading { max-width:16ch; margin-inline:auto; text-align:center; }
#personalise > .chapter-intro .heading-description { max-width:42ch; margin:0 auto; text-align:center; }
#appearance { padding-block:var(--skin-section-top) 64px; }
#appearance .appearance-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:start; column-gap:var(--skin-column-gap); min-height:max(750px,calc(100svh - 130px)); }
#appearance .appearance-preview { grid-column:2; grid-row:1; align-self:start; position:sticky; top:88px; }
#appearance .appearance-controls { grid-column:1; grid-row:1; gap:var(--skin-group-gap); }
#appearance .appearance-3d-stage { aspect-ratio:1.12; min-height:0; cursor:default; user-select:none; }
#appearance .appearance-3d-stage[data-dragging] { cursor:grabbing; }
#appearance .appearance-3d-stage::after { content:""; position:absolute; z-index:-1; left:15%; right:15%; bottom:5%; height:5%; background:#1d1d1f18; border-radius:50%; filter:blur(14px); pointer-events:none; }
#appearance .appearance-caption { display:grid; gap:5px; text-align:center; margin:4px 0 0; }
#appearance .appearance-caption strong { font:600 23px/1.2 var(--font); letter-spacing:-.025em; }
#appearance .appearance-caption span { font:400 14px/1.4 var(--font); color:var(--secondary); }
#appearance .appearance-toolbar { margin-top:18px; }
#appearance .appearance-toolbar .segmented-control { background:#eaeaec!important; border-radius:999px; padding:3px; }
#appearance .appearance-toolbar .segment { min-width:84px; }
#appearance .appearance-toolbar input:checked+.segment { background:#fff; }
#appearance .appearance-tilt-hint { text-align:center; margin:12px 0 0; color:var(--secondary); font:400 12px/1.4 var(--font); }
#appearance .appearance-styles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,1vw,14px); }
#appearance .keycap-art { max-width:80px; }
#appearance .appearance-controls legend { font:600 18px/1.3 var(--font); margin-bottom:20px; }
#appearance .appearance-style { display:block; min-width:0; position:relative; }
#appearance .appearance-finishes { border-top:1px solid var(--line); padding-top:24px; --finish-label-gap:16px; }
#appearance .appearance-finishes legend { float:left; width:100%; margin-bottom:var(--finish-label-gap); }
#appearance #appearance-finish-name { font-weight:400; color:var(--secondary); }
#appearance .appearance-swatches { clear:both; display:flex; flex-wrap:wrap; gap:14px 10px; }
#appearance .appearance-finish { display:grid; justify-items:center; align-content:start; gap:8px; width:var(--skin-swatch-target); height:auto; min-height:0; border-radius:0; box-shadow:none; }
#appearance .appearance-finish[hidden] { display:none; }
#appearance .appearance-swatch { width:var(--skin-swatch-size); height:var(--skin-swatch-size); border:3px solid #f5f5f7; box-shadow:0 2px 6px #1d1d1f15,inset 0 0 0 1px #00000018; }
#appearance .appearance-finish:has(input:checked) .appearance-swatch { outline:2px solid var(--blue); outline-offset:3px; }
#appearance .appearance-finish:has(input:focus-visible) { outline:none; }
#appearance .appearance-finish:has(input:focus-visible) .appearance-swatch { outline:3px solid var(--blue); outline-offset:6px; }
#appearance .appearance-colour-name { font:400 12px/1.3 var(--font); color:var(--secondary); text-align:center; }
#appearance .appearance-finish:has(input:checked) .appearance-colour-name { color:var(--ink); font-weight:400; }
.appearance-noscript { text-align:center; padding-block:20px; color:var(--secondary); }
@media(max-width:899px) {
 .personalisation-chapter .chapter-intro .section-heading { margin-inline:auto; }
 #appearance .appearance-layout { grid-template-columns:minmax(0,1fr); gap:36px; max-width:650px; min-height:0; }
 #appearance .appearance-preview,#appearance .appearance-controls { grid-column:1; grid-row:auto; }
 #appearance .appearance-preview { position:static; }
 #appearance .appearance-controls { width:100%; max-width:460px; margin-inline:auto; }
 #appearance .appearance-3d-stage { aspect-ratio:1.16; }
 #appearance .appearance-styles { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
 #appearance .appearance-styles label:nth-of-type(7):last-of-type { grid-column:auto; }
 #appearance .appearance-finishes { padding-top:24px; }
 #appearance .appearance-swatches { justify-content:space-between; column-gap:4px; }
 #appearance .appearance-tilt-hint { margin-top:10px; }
 #personalise > .chapter-intro .heading-description { margin:0 auto; }
}
@media(prefers-reduced-motion:reduce) { #appearance .keycap-art { transition:none;transform:none!important; } }
@media(forced-colors:active) {
 #appearance .keycap-art,#appearance .appearance-swatch { forced-color-adjust:none; }
 #appearance .appearance-style input:checked+.keycap-choice,#appearance .appearance-finish:has(input:checked) .appearance-swatch { outline:2px solid Highlight; }
 #appearance .appearance-style input:focus-visible+.keycap-choice { outline:3px dashed Highlight; }
}

#appearance .appearance-3d-stage.product-stage-ready { cursor:grab; }
#appearance .appearance-preview:has([data-stage-status="fallback"]) .appearance-tilt-hint { visibility:hidden; }

}