@font-face{font-family:'Source Sans 3';src:url('../fonts/SourceSans3.ttf') format('truetype');font-weight:200 900;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono.ttf') format('truetype');font-weight:400;font-display:swap}:root{--texture:url('../images/brand-texture.jpg')}
:root{--mineral:#A59E94;--on-accent:#24211F;--ink:#24211F;--canvas:#F5F4EF;--surface:#FDFCF9;--subtle:#E6E8E1;--text:#24211F;--muted:#5D605A;--border:#D3D5CE;--control-border:#777C72;--accent:#FF9A52;--accent-hover:#F58B40;--accent-active:#E77D34;--link:#8A431F;--focus:#8A431F;--danger:#a52b32;--danger-bg:#fff0f0;--success:#23653a;--success-bg:#eaf5ed;--warning:#755000;--warning-bg:#fff5d8;--info:#335a74;--info-bg:#edf4f8;--font:'Source Sans 3',sans-serif;--mono:'IBM Plex Mono',monospace;--r-sm:4px;--r-md:8px;--r-lg:12px;--shadow:0 12px 40px #24211F1a;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;--motion:160ms;--ease:cubic-bezier(.2,.8,.2,1);--layer-sticky:20;--layer-popover:40;--layer-dialog:60;--layer-toast:80;--bg-strength:.16;--accent-tint:#FCEBD9;--accent-tint-line:#EBCDB6}
/* Wide gamut (v1.3.1): the same apricot roles, rendered in Display P3 where supported. */
@media (color-gamut:p3){:root{--accent:color(display-p3 1 .70 .44);--accent-hover:color(display-p3 1 .63 .36);--accent-active:color(display-p3 .97 .57 .30);--accent-tint:color(display-p3 1 .91 .80);--accent-tint-line:color(display-p3 .96 .80 .66)}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--canvas);color:var(--text);font:18px/1.55 var(--font)}h1,h2,h3,h4,p{margin:0 0 16px}h1,h2,h3,h4{font-weight:400;line-height:1.08;letter-spacing:-.025em}h1{font-size:clamp(48px,6vw,88px)}h2{font-size:clamp(36px,4vw,54px)}h3{font-size:28px}h4{font-size:22px}p{max-width:70ch}a{color:var(--link);text-underline-offset:4px}a:hover{text-decoration-thickness:2px}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button{transition:background var(--motion) var(--ease)}svg{width:24px;height:24px;flex-shrink:0}code,pre,.mono{font-family:var(--mono);font-size:13px}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ink);color:#F5F4EF;padding:24px;border-radius:8px;line-height:1.8}pre .hint{color:#B8BBB3}pre b{color:var(--accent);font-weight:400}.logo{display:inline-flex;gap:12px;align-items:center;font-size:32px;line-height:1;font-weight:400;letter-spacing:-.035em;color:inherit}.logo svg{width:32px;height:28px}.logo.big{font-size:64px}.logo.big svg{width:56px;height:48px}.eyebrow{font:11px/1.5 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}.muted,.hint{color:var(--muted)}.hint{font-size:15px}.lead{font-size:21px;color:var(--muted);max-width:60ch;margin-bottom:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 20px;border:1px solid transparent;border-radius:6px;background:var(--accent);color:var(--ink);font-weight:600;text-decoration:none;font-size:16px}.btn:hover{background:var(--accent-hover)}.btn:active{background:var(--accent-active)}.btn.secondary{background:transparent;border-color:var(--control-border);color:inherit}.btn.secondary:hover{background:var(--subtle);color:var(--ink)}.btn.ghost{background:transparent;color:inherit}.btn.ghost:hover{background:var(--subtle);color:var(--ink)}.btn.danger{background:#A52B32;color:#FDFCF9}.btn:disabled{background:var(--subtle);color:var(--muted);border-color:var(--border);opacity:.7}.btn.small{font-size:14px;padding:6px 12px;min-height:44px}.iconbtn{padding:10px;min-width:44px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.stack{display:grid;gap:16px}.grid>*{min-width:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{padding:28px;border:1px solid var(--border);border-radius:8px;background:var(--surface);min-width:0}.card.mable-dark,.mable-dark{background:var(--ink);color:var(--canvas);--muted:#B8BBB3;--border:#586052;--focus:#FF9A52;--link:#FF9A52}.mable-dark{--surface:#2C2F2A;--text:#F5F4EF;--control-border:#AFB6A7;--danger:#FFB4B8;--danger-bg:#42252A;--success:#9DD5AC;--success-bg:#203B29;--warning:#F0CF79;--warning-bg:#3F3419;--info:#A8CEE6;--info-bg:#233744}.mable-dark .btn.secondary{border-color:#AFB6A7}.swatch{height:100px;border-radius:6px;margin-bottom:12px;border:1px solid #24211F20}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:4px;background:var(--subtle);padding:3px 9px;font-size:14px;font-weight:600}.pill.ok{color:var(--success);background:var(--success-bg)}.pill.warn{color:var(--warning);background:var(--warning-bg)}.pill.bad{color:var(--danger);background:var(--danger-bg)}.tablewrap{overflow:auto;margin:20px 0}table{border-collapse:collapse;width:100%;font-size:16px;text-align:left}th{font-weight:600;color:var(--muted)}td,th{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top}th:first-child,td:first-child{padding-left:0}label{display:block;font-size:16px;font-weight:600;margin-bottom:6px}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{width:100%;padding:10px 12px;border:1px solid var(--control-border);border-radius:4px;background:var(--surface);color:var(--text);min-height:44px}textarea{min-height:100px;resize:vertical}input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--link);vertical-align:middle;margin-right:8px}label.choice{display:flex;align-items:center;min-height:44px;font-weight:400}input[aria-invalid=true]{border-color:var(--danger)!important}.error{color:var(--danger);font-size:15px}.alert{border-left:3px solid var(--info);padding:16px 20px;background:var(--info-bg);color:var(--info);border-radius:4px;font-size:16px}.alert.ok{background:var(--success-bg);color:var(--success);border-color:var(--success)}.alert.warn{background:var(--warning-bg);color:var(--warning);border-color:var(--warning)}.alert.bad{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}.layout{display:grid;grid-template-columns:230px minmax(0,1fr)}aside{position:sticky;top:0;height:100vh;overflow:auto;padding:32px 24px;border-right:1px solid var(--border)}aside .logo{margin-bottom:32px}aside a{display:block;padding:6px 0;color:var(--muted);font-size:15px;text-decoration:none}aside a:hover{color:var(--text)}main{min-width:0;padding:0 5vw 80px;max-width:1450px}section{padding:64px 0;border-bottom:1px solid var(--border)}section.cover{padding:80px 0 64px}.cover p{max-width:48ch}.version{display:inline-block;border:1px solid var(--border);padding:5px 10px;font:12px var(--mono);margin-bottom:32px}.skip{position:fixed;left:16px;top:-80px;background:var(--accent);padding:12px;z-index:100}.skip:focus{top:10px}.brand-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:var(--bg-strength);mask-image:linear-gradient(90deg,transparent 26%,#000 75%)}.texture{position:absolute;inset:0;background-image:var(--texture);background-size:cover;filter:grayscale(1) contrast(.65);opacity:.75}.screen{position:absolute;inset:0;background:radial-gradient(var(--ink) .65px,transparent .8px);background-size:4px 4px;mix-blend-mode:multiply;opacity:.5}.brand-bg>svg{position:absolute;inset:0;width:100%;height:100%}.curve{fill:none;stroke:var(--canvas);stroke-width:46}.rail{fill:none;stroke:var(--ink);stroke-width:2;opacity:.55}.brand-surface{position:relative;isolation:isolate;overflow:hidden;background:var(--canvas);color:var(--ink)}.brand-surface>.content{position:relative;z-index:1;padding:64px 40px}.brand-surface.mable-dark{background:var(--ink);color:var(--canvas);--bg-strength:.2}.brand-surface.mable-dark .texture{filter:grayscale(1) invert(1) contrast(.7)}.brand-surface.mable-dark .curve{stroke:var(--ink)}.brand-surface.mable-dark .rail{stroke:var(--canvas)}.mock{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}.mock-nav{padding:20px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);gap:24px}.mock-nav .logo{font-size:27px}.mock-nav .logo svg{width:27px}.mock .hero h3{font-size:clamp(36px,4.5vw,64px);max-width:19ch}.mock .hero p{font-size:20px;max-width:37ch}.mock-section{padding:36px 40px;border-top:1px solid var(--border)}.mock .content{padding:56px 40px}.mock .brand-surface .content{max-width:100%}.mobile{width:360px;max-width:100%;margin:auto}.mobile .mock-nav{padding:18px}.mobile .content,.mobile .mock-section{padding:32px 24px}.mobile .hero h3{font-size:40px}.mobile .brand-bg{mask-image:linear-gradient(180deg,transparent 0%,#000 100%);--bg-strength:.1}.tabs{display:flex;border-bottom:1px solid var(--border);gap:20px}.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 0;color:var(--muted)}.tabs button[aria-selected=true]{border-color:var(--link);color:var(--text)}.tab-panel{padding:24px 0}details{border-bottom:1px solid var(--border);padding:16px 0}summary{cursor:pointer;font-weight:600;min-height:32px}details p{margin-top:16px}.switch{width:48px;height:28px;border-radius:20px;border:1px solid var(--control-border);background:var(--subtle);padding:3px;display:inline-flex}.switch:before{content:'';width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform var(--motion)}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]:before{transform:translateX(19px)}.skeleton{height:16px;background:var(--subtle);border-radius:4px;margin:12px 0}.empty{text-align:center;padding:40px 20px}.empty svg{width:32px;height:32px}.spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tooltipwrap{position:relative;display:inline-block}.tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:0;min-width:180px;background:var(--ink);color:#FDFCF9;font-size:14px;padding:8px 12px;border-radius:4px;z-index:40}.tooltipwrap:hover .tooltip,.tooltipwrap:focus-within .tooltip{display:block}dialog{border:1px solid var(--border);border-radius:12px;padding:32px;max-width:460px;width:calc(100% - 32px);color:var(--ink);background:var(--surface);box-shadow:var(--shadow)}dialog::backdrop{background:#24211F66}#toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#FDFCF9;padding:16px 24px;border-radius:8px;z-index:80;max-width:calc(100% - 48px)}#toast[hidden]{display:none}.progress{width:100%;accent-color:var(--link);height:12px}.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.icon-grid>div{text-align:center;padding:20px 6px;border:1px solid var(--border);border-radius:6px}.icon-grid span{display:block;font:11px var(--mono);margin-top:10px}.spacebar{height:12px;background:var(--ink);display:inline-block}.archive img{width:100%;height:auto;border:1px solid var(--border);border-radius:8px}.controls{margin-bottom:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.controls label{margin:0}.controls input{accent-color:var(--link)}.download{margin-top:20px}.preview-note{font-size:14px;color:var(--muted);margin:12px 0}.breadcrumb{font-size:14px}.breadcrumb span{margin:0 8px;color:var(--muted)}.separator{border:0;border-top:1px solid var(--border);margin:24px 0}
@media(max-width:1023px){.layout{grid-template-columns:180px minmax(0,1fr)}aside{padding:24px 16px}.grid.three{grid-template-columns:minmax(0,1fr)}.mock .grid{grid-template-columns:minmax(0,1fr)}.mock-nav .navlinks{display:none}.icon-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:639px){.layout{display:block}aside{position:relative;height:auto;padding:20px;border-right:0;border-bottom:1px solid var(--border)}aside .logo{margin:0 0 16px}aside nav{display:flex;overflow:auto;gap:20px}aside nav a{white-space:nowrap}main{padding:0 20px 40px}section{padding:40px 0}.grid{grid-template-columns:minmax(0,1fr)}.card{padding:20px}.mock .content,.mock-section{padding:32px 24px}.mock-nav{padding:16px}.mock-nav .btn{padding:8px 12px}.brand-bg{mask-image:linear-gradient(90deg,transparent 10%,#000 100%);opacity:.1}h1{font-size:48px}.icon-grid{grid-template-columns:repeat(3,1fr)}td,th{padding:10px 12px;min-width:90px}.logo.big{font-size:48px}.logo.big svg{width:42px}.brand-surface>.content{padding:32px 24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.spinner{border-right-color:currentColor}}
@media(forced-colors:active){.brand-bg{display:none}.btn,.card,input,select,textarea{border:1px solid ButtonText}.btn:focus-visible{outline:3px solid Highlight}.skeleton{border:1px solid CanvasText}}
@media print{aside,.controls,.download,.skip{display:none}.layout{display:block}main{padding:0}section{break-inside:avoid;padding:28px 0}.mock{break-inside:avoid}body{font-size:12px}h1{font-size:48px}h2{font-size:32px}}

/* Readability fixes / v1.3 */
:root{color-scheme:light}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-text-fill-color:currentColor}
.skip{color:#24211F!important;-webkit-text-fill-color:#24211F}
button:disabled,.btn:disabled{opacity:1;color:#555B51!important;-webkit-text-fill-color:#555B51;background:#E6E8E1!important;border-color:#777C72!important}
.mable-dark button:disabled,.mable-dark .btn:disabled{color:#D5D9CF!important;-webkit-text-fill-color:#D5D9CF;background:#363E31!important;border-color:#9AA68F!important}
code,pre,.mono{font-size:14px}pre{line-height:1.75;max-height:480px;overflow:auto;tab-size:2}
pre,pre code{color:#FDFCF9;-webkit-text-fill-color:#FDFCF9;background:#24211F}
pre b{color:#FF9A52;-webkit-text-fill-color:#FF9A52}pre .hint{color:#C4C8BD;-webkit-text-fill-color:#C4C8BD}
.hint,.preview-note,.breadcrumb{font-size:16px;line-height:1.5}
.eyebrow{font-size:12px;letter-spacing:.10em;line-height:1.6}
.btn{font-size:16px;line-height:1.4}.btn.small{font-size:15px}
.mable-dark .hint,.mable-dark .muted,.mable-dark .eyebrow{color:#C4C8BD}
.btn.secondary:hover,.btn.ghost:hover{color:#24211F;background:#E6E8E1}
.mable-dark .btn.secondary:hover,.mable-dark .btn.ghost:hover{color:#24211F;background:#E6E8E1}
#cssSource{font-size:14px;line-height:1.75;max-height:480px;white-space:pre-wrap}
@media(max-width:639px){code,pre,.mono{font-size:14px}.hint,.preview-note{font-size:16px}td,th{font-size:16px;line-height:1.5}}

.skip{top:8px;left:8px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;padding:12px;top:8px}

/* Apricot roles (v1.3.1): accent = action and the live or flexing part; tint = selected or open. */
::selection{background:var(--accent-tint);color:var(--ink)}
.is-selected{background:var(--accent-tint);border-color:var(--accent-tint-line)}
.tag-open{color:var(--link);background:var(--accent-tint);border:1px solid var(--accent-tint-line)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent)}
.mable-dark .accent-route{stroke:var(--accent)}