/* THRYL visual brand book. All specimens are isolated from the app previews. */
.bg-root{--bg-accent:var(--book-accent,#4458ff);--bg-light:var(--book-light,#b8c1ff);--bg-canvas:var(--book-base,#11162a);--bg-surface:var(--book-surface,#1b223b);--bg-ink:var(--book-ink,#f4f5ff);--bg-muted:var(--book-muted,#a8b0cb);--bg-on:var(--book-on,#fff);--bg-line:var(--book-line,#303b59);font-family:'DM Sans',Arial,sans-serif;color:var(--bg-ink);margin:36px 0 0;padding:0 0 20px;min-width:0}
.bg-root *{box-sizing:border-box}.bg-root h2,.bg-root h3,.bg-root h4,.bg-root p{margin:0}.bg-root button,.bg-root input{font:inherit}.bg-root button{cursor:pointer}.bg-root button:focus-visible,.bg-root input:focus-visible{outline:2px solid var(--bg-light);outline-offset:4px}.bg-root svg{flex:none}.bg-root code{font-family:'DM Sans',Arial,sans-serif;font-variant-numeric:tabular-nums}.bg-root [hidden]{display:none!important}
.bg-header{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;padding:15px 0 32px;border-bottom:1px solid var(--bg-line)}.bg-title-wrap{min-width:0;max-width:720px}.bg-kicker{display:block;font-size:10px;line-height:1.5;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--bg-muted);margin-bottom:13px}.bg-title{font-family:Outfit,Arial,sans-serif;font-size:clamp(28px,3.4vw,46px);font-weight:500;line-height:1.1;letter-spacing:-1.4px;color:var(--bg-ink)}.bg-title strong,.bg-title em{font-style:normal;color:var(--bg-light);font-weight:inherit}.bg-intro{font-size:13px;line-height:1.65;color:var(--bg-muted);max-width:400px}.bg-header>.bg-intro{flex:0 1 370px;text-wrap:pretty}.bg-section{padding:31px 0 34px;border-bottom:1px solid var(--bg-line)}.bg-section-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:21px}.bg-index{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--bg-line);border-radius:8px;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bg-muted);margin-top:1px}.bg-section-head>div{min-width:0}.bg-section-head h3{font-family:Outfit,Arial,sans-serif;font-weight:500;letter-spacing:-.5px;font-size:23px;line-height:1.25}.bg-section-head p{font-size:12px;line-height:1.6;color:var(--bg-muted);margin-top:7px;max-width:760px}.bg-section-head>.bg-index+h3{align-self:center}.bg-sample-label,.bg-component-label{display:block;font-size:10px;line-height:1.5;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--bg-muted)}
/* 01 / Identity: a real wordmark specimen, character set and brand voice. */
.bg-dna{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1.06fr) minmax(0,1fr);gap:16px}.bg-logo,.bg-alphabet,.bg-dna-copy{min-width:0;position:relative;border:1px solid var(--bg-line);border-radius:18px;padding:25px;overflow:hidden;min-height:225px}.bg-logo{background:var(--bg-accent);color:var(--bg-on);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;border-color:transparent}.bg-logo>svg{width:100%;height:auto;max-height:95px;color:inherit}.bg-logo>img{width:100%;max-width:285px;height:auto;display:block}.bg-logo .bg-type-word,.bg-logo>strong{font-family:Outfit,Arial,sans-serif;font-size:clamp(46px,5.6vw,79px);font-weight:400;line-height:1;letter-spacing:-2px;white-space:nowrap}.bg-logo .bg-sample-label{color:inherit;opacity:.8}.bg-logo>small,.bg-logo>p{font-size:11px;line-height:1.5;letter-spacing:1px;opacity:.82}.bg-alphabet{background:var(--bg-surface);display:flex;flex-direction:column;justify-content:center;gap:17px}.bg-alphabet>strong,.bg-alphabet>.bg-type-word{font-family:Outfit,Arial,sans-serif;font-weight:400;font-size:31px;line-height:1.35;letter-spacing:.8px;overflow-wrap:anywhere}.bg-alphabet>p{font-family:Outfit,Arial,sans-serif;font-size:28px;line-height:1.5;letter-spacing:2px;overflow-wrap:anywhere}.bg-alphabet>small{font-size:11px;line-height:1.55;color:var(--bg-muted)}.bg-dna-copy{display:flex;flex-direction:column;justify-content:center;gap:14px;background:color-mix(in srgb,var(--bg-surface) 65%,var(--bg-canvas))}.bg-dna-copy>h4,.bg-dna-copy>strong{font-family:Outfit,Arial,sans-serif;font-size:25px;line-height:1.2;letter-spacing:-.7px;font-weight:500}.bg-dna-copy>p{font-size:13px;line-height:1.65;color:var(--bg-muted)}.bg-tag{display:inline-flex;align-items:center;align-self:flex-start;max-width:100%;border:1px solid color-mix(in srgb,var(--bg-accent) 40%,var(--bg-line));border-radius:30px;padding:7px 11px;font-size:10px;line-height:1.4;font-weight:600;color:var(--bg-light);background:color-mix(in srgb,var(--bg-accent) 8%,var(--bg-canvas))}.bg-dna-copy .bg-tag+.bg-tag{margin-left:5px}
/* 02 / Colour: large swatches and practical token information. */
.bg-color-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.bg-swatch{overflow:hidden;border:1px solid var(--bg-line);border-radius:15px;background:var(--bg-surface);min-width:0}.bg-swatch-color{position:relative;min-height:115px;padding:13px;display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:1px solid #ffffff0a}.bg-swatch-aa{font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.2px;padding:4px 6px;border-radius:5px;background:#00000012;color:inherit}.bg-swatch-meta{padding:15px 14px 17px}.bg-swatch-meta strong{display:block;font-family:Outfit,Arial,sans-serif;font-size:15px;line-height:1.3;font-weight:500;letter-spacing:-.2px}.bg-swatch-meta code{display:block;font-size:12px;line-height:1.5;color:var(--bg-ink);margin-top:7px;letter-spacing:.4px}.bg-swatch-meta p{font-size:11px;line-height:1.6;color:var(--bg-muted);margin-top:7px;min-height:34px}.bg-swatch-meta>small{display:block;font-size:10px;color:var(--bg-muted);line-height:1.5;margin-top:6px}
/* 03 / Type: display lettering and readable interface typography. */
.bg-type-showcase{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:16px;margin-bottom:17px}.bg-type-brand,.bg-type-ui{border:1px solid var(--bg-line);border-radius:18px;background:var(--bg-surface);padding:26px 28px;min-height:230px;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.bg-type-brand{background:color-mix(in srgb,var(--bg-accent) 11%,var(--bg-surface));gap:19px}.bg-type-brand .bg-type-word{font-family:Outfit,Arial,sans-serif;font-weight:400;font-size:clamp(48px,6.2vw,84px);line-height:1;letter-spacing:-1.4px;white-space:nowrap;color:var(--bg-ink)}.bg-type-sentence{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(24px,2.8vw,37px);font-weight:500;line-height:1.23;letter-spacing:-1px;margin:18px 0 16px!important;text-wrap:pretty;max-width:480px}.bg-type-caption{font-size:12px;line-height:1.65;color:var(--bg-muted);max-width:470px}.bg-type-brand .bg-type-caption{margin-top:2px}.bg-scale-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border:1px solid var(--bg-line);border-radius:15px;overflow:hidden;background:var(--bg-surface)}.bg-scale-table thead th{padding:13px 20px;text-align:left;font-size:10px;line-height:1.5;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--bg-muted);border-bottom:1px solid var(--bg-line);background:color-mix(in srgb,var(--bg-canvas) 40%,var(--bg-surface))}.bg-scale-table th:first-child{width:24%}.bg-scale-table th:last-child{width:24%}.bg-scale-table td{padding:16px 20px;border-bottom:1px solid var(--bg-line);vertical-align:middle;font-size:12px;line-height:1.55;overflow-wrap:anywhere}.bg-scale-table tr:last-child td{border-bottom:0}.bg-scale-table td:first-child{color:var(--bg-muted);font-size:12px}.bg-scale-table td:last-child{color:var(--bg-muted);font-size:11px}.bg-scale-sample{display:block;line-height:1.2;color:var(--bg-ink)}.bg-scale-value{font-family:'DM Sans',Arial,sans-serif;font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--bg-muted)}
/* 04 / Components: actual interactive specimens, independent from the phones. */
.bg-component-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.bg-component{min-width:0;padding:21px 19px 18px;background:var(--bg-surface);border:1px solid var(--bg-line);border-radius:17px;display:flex;flex-direction:column;min-height:244px;overflow:hidden}.bg-component-stage{min-height:137px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:19px 0 16px}.bg-component-meta{font-size:11px;line-height:1.65;color:var(--bg-muted);border-top:1px solid var(--bg-line);padding-top:13px;margin-top:auto}.bg-component-meta strong{font-weight:600;color:var(--bg-ink)}.bg-component-meta code{font-size:11px}.bg-button{border:0;display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:11px 16px;border-radius:12px;background:var(--bg-accent);color:var(--bg-on);font-size:12px!important;line-height:1.5;font-weight:600!important;transition:filter .15s,transform .15s}.bg-button:hover{filter:brightness(1.08)}.bg-button:active{transform:translateY(1px)}.bg-button .icon,.bg-button svg{width:17px;height:17px}.bg-button.bg-secondary,.bg-button.secondary,.bg-button[data-variant=secondary]{background:transparent;color:var(--bg-ink);border:1px solid var(--bg-line)}.bg-phone{display:flex;align-items:center;gap:10px;min-height:47px;border:1px solid var(--bg-line);border-radius:12px;padding:10px 11px;background:color-mix(in srgb,var(--bg-canvas) 55%,var(--bg-surface));color:var(--bg-muted);font-size:11px;white-space:nowrap}.bg-country{flex:none;border-right:1px solid var(--bg-line);padding-right:10px;color:var(--bg-ink);font-size:12px;font-weight:600}.bg-phone>span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}.bg-nav{display:flex;align-items:center;justify-content:space-around;gap:4px;border:1px solid var(--bg-line);border-radius:14px;padding:7px 5px;background:color-mix(in srgb,var(--bg-canvas) 55%,var(--bg-surface));width:100%;color:var(--bg-muted)}.bg-nav-item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:7px 3px;border-radius:9px;font-size:10px;line-height:1.3;text-align:center;color:var(--bg-muted);background:transparent}.bg-nav-item .icon,.bg-nav-item svg{width:18px;height:18px}.bg-nav-item.bg-active{color:var(--bg-on);background:var(--bg-accent)}.bg-nav-item>span{font-size:10px;letter-spacing:-.1px;white-space:nowrap}.bg-shape{display:flex;align-items:center;justify-content:center;gap:14px;min-height:95px}.bg-shape-box{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;max-width:100px;height:75px;background:color-mix(in srgb,var(--bg-accent) 12%,var(--bg-canvas));border:1px solid color-mix(in srgb,var(--bg-accent) 40%,var(--bg-line));color:var(--bg-light);font-size:12px;font-variant-numeric:tabular-nums;border-radius:17px}.bg-shape-box small{font-size:10px;color:var(--bg-muted)}
/* 05 / Application: hierarchy skeleton, spacing scale and character-safe crop. */
.bg-method-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px}.bg-flow,.bg-spacing,.bg-crop{position:relative;min-width:0;overflow:hidden;padding:22px;border-radius:18px;border:1px solid var(--bg-line);background:var(--bg-surface)}.bg-flow>h4,.bg-spacing>h4,.bg-crop>h4{font-family:Outfit,Arial,sans-serif;font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.3px;margin:0 0 8px}.bg-flow>p,.bg-spacing>p,.bg-crop>p{font-size:12px;line-height:1.6;color:var(--bg-muted);margin:0 0 17px}.bg-flow .bg-component-label,.bg-spacing .bg-component-label,.bg-crop .bg-component-label{margin-bottom:18px}.bg-flow-block{position:relative;display:flex;align-items:center;gap:10px;min-height:43px;margin-top:8px;padding:10px 12px;border:1px solid var(--bg-line);border-radius:9px;background:color-mix(in srgb,var(--bg-canvas) 50%,var(--bg-surface));font-size:11px;line-height:1.45}.bg-flow-block>small{flex:none;display:grid;place-items:center;font-size:10px;color:var(--bg-muted);min-width:17px;font-variant-numeric:tabular-nums}.bg-flow-block>b{font-size:12px;font-weight:500;color:var(--bg-ink)}.bg-flow-block>label,.bg-flow-block>span{font-size:10px;color:var(--bg-muted);margin-left:auto;text-align:right}.bg-flow-header{min-height:40px}.bg-flow-rewards{border-color:color-mix(in srgb,var(--bg-accent) 40%,var(--bg-line));background:color-mix(in srgb,var(--bg-accent) 12%,var(--bg-canvas));min-height:53px}.bg-flow-games{min-height:61px}.bg-flow-tournament{min-height:62px}.bg-flow-nav{min-height:34px;border-radius:8px;background:color-mix(in srgb,var(--bg-accent) 7%,var(--bg-surface))}.bg-spacing{display:flex;flex-direction:column}.bg-spacing-row{display:grid;grid-template-columns:40px minmax(0,1fr) 42px;align-items:center;gap:12px;min-height:42px;border-bottom:1px solid var(--bg-line);padding:9px 0;font-size:11px}.bg-spacing-row:last-child{border-bottom:0}.bg-spacing-row>span{font-size:11px;color:var(--bg-muted);font-variant-numeric:tabular-nums}.bg-spacing-row>i{display:block;height:7px;min-width:4px;max-width:100%;background:var(--bg-accent);border-radius:2px}.bg-spacing-row>b{font-size:11px;line-height:1.4;color:var(--bg-ink);text-align:right;font-weight:500;font-variant-numeric:tabular-nums}.bg-crop-stage{position:relative;isolation:isolate;overflow:hidden;height:250px;max-width:100%;border-radius:13px;background:color-mix(in srgb,var(--bg-accent) 8%,var(--bg-canvas));margin:15px 0 14px;border:1px solid var(--bg-line)}.bg-crop-safe{position:absolute;z-index:2;inset:15px;border:1px dashed color-mix(in srgb,var(--bg-light) 55%,transparent);border-radius:5px;pointer-events:none}.bg-crop-safe>span,.bg-crop-safe>small{position:absolute;left:6px;top:5px;font-size:10px;line-height:1.4;color:var(--bg-muted);background:var(--bg-surface);padding:3px 5px;border-radius:3px}.bg-crop-stage>img{position:absolute;display:block;top:22px;left:50%;transform:translateX(-50%);width:205px;height:auto;max-width:calc(100% - 22px);filter:none;mask-image:linear-gradient(#000 0 70%,transparent 95%)}.bg-crop-notes{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;line-height:1.5;color:var(--bg-muted)}.bg-crop-notes>span{border:1px solid var(--bg-line);border-radius:6px;padding:5px 7px;font-size:10px;line-height:1.4}.bg-crop-notes>p{font-size:11px;line-height:1.65}.bg-root [data-spec]{font-variant-numeric:tabular-nums}
@media(max-width:1180px){.bg-dna{grid-template-columns:1fr 1fr}.bg-dna-copy{grid-column:1/-1;min-height:0;padding:22px 25px}.bg-dna-copy>p{max-width:850px}.bg-color-grid{gap:11px}.bg-swatch-meta{padding:14px 12px}.bg-component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-component{min-height:230px}.bg-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-crop{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:27px;align-items:start}.bg-crop-stage{grid-column:2;grid-row:1/5;margin:0;min-height:240px}.bg-crop-notes{align-self:start}.bg-header{gap:25px}.bg-intro{max-width:330px}}
@media(max-width:780px){.bg-root{margin-top:26px}.bg-header{display:block;padding-top:8px;padding-bottom:25px}.bg-header>.bg-intro{margin-top:15px;max-width:600px;font-size:12px}.bg-title{font-size:34px}.bg-section{padding:26px 0 29px}.bg-section-head h3{font-size:21px}.bg-color-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bg-swatch-color{min-height:104px}.bg-type-showcase{grid-template-columns:1fr}.bg-type-brand,.bg-type-ui{min-height:210px;padding:25px}.bg-type-brand .bg-type-word{font-size:72px}.bg-type-sentence{font-size:31px}.bg-scale-table thead th{padding:12px 14px}.bg-scale-table td{padding:14px}.bg-scale-table th:first-child{width:24%}.bg-scale-table th:last-child{width:26%}.bg-dna{gap:12px}.bg-logo,.bg-alphabet{padding:21px;min-height:210px}.bg-logo .bg-type-word,.bg-logo>strong{font-size:61px}.bg-alphabet>strong,.bg-alphabet>.bg-type-word{font-size:26px}.bg-method-grid{gap:12px}.bg-flow,.bg-spacing,.bg-crop{padding:19px}.bg-crop{grid-template-columns:minmax(0,1fr) 250px;gap:20px}.bg-crop-stage{min-height:230px}}
@media(max-width:560px){.bg-title{font-size:29px;letter-spacing:-.8px}.bg-kicker{font-size:10px;letter-spacing:1.4px}.bg-section-head{gap:10px}.bg-section-head h3{font-size:20px}.bg-section-head p{font-size:12px}.bg-dna{grid-template-columns:1fr}.bg-logo,.bg-alphabet{min-height:204px}.bg-logo .bg-type-word,.bg-logo>strong{font-size:78px}.bg-alphabet>strong,.bg-alphabet>.bg-type-word{font-size:29px}.bg-dna-copy{grid-column:auto;padding:22px}.bg-dna-copy>h4,.bg-dna-copy>strong{font-size:23px}.bg-color-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.bg-swatch-color{min-height:106px}.bg-swatch-meta strong{font-size:14px}.bg-swatch-meta p{font-size:11px}.bg-type-brand,.bg-type-ui{padding:22px;min-height:200px}.bg-type-brand .bg-type-word{font-size:65px}.bg-type-sentence{font-size:27px}.bg-component-grid,.bg-method-grid{grid-template-columns:1fr}.bg-component{padding:21px;min-height:223px}.bg-component-stage{min-height:132px}.bg-component-grid .bg-component-stage>.bg-button{max-width:none}.bg-crop{display:block;grid-column:auto;padding:21px}.bg-crop-stage{margin:17px 0 14px;min-height:252px}.bg-crop-stage>img{width:225px}.bg-flow,.bg-spacing{padding:21px}.bg-scale-table{table-layout:auto}.bg-scale-table thead th{padding:11px 10px;font-size:10px;letter-spacing:.3px}.bg-scale-table th:first-child{width:23%}.bg-scale-table th:last-child{width:24%}.bg-scale-table td{padding:13px 10px;font-size:11px}.bg-scale-table td:first-child,.bg-scale-table td:last-child,.bg-scale-value{font-size:10px}.bg-scale-sample{max-width:100%;overflow-wrap:anywhere}.bg-flow-block>b{font-size:12px}}
/* Whole-showroom identity. This changes the review canvas, never phone geometry. */
body{background:var(--book-base,#11162a);color:var(--book-ink,#f4f5ff);font-family:'DM Sans',Arial,sans-serif;transition:background-color .22s,color .22s}
.workspace{background:transparent;color:var(--book-ink,#f4f5ff)}
.sidebar{background:var(--book-surface,#1b223b);color:var(--book-ink,#f4f5ff);border-bottom:1px solid var(--book-line,#303b59);height:82px;padding-top:14px;padding-bottom:14px}
.studio-brand{color:var(--book-ink,#f4f5ff)}.brand-logo{color:inherit}.logo-star{color:var(--book-accent,#4458ff)}.studio-tag{font-size:10px!important;line-height:1.3;letter-spacing:1.4px;color:var(--book-muted,#a8b0cb)}
.theme-choice{color:var(--book-muted,#a8b0cb);border-color:transparent;border-radius:10px;padding-top:9px;padding-bottom:9px}.theme-choice:hover{background:color-mix(in srgb,var(--book-ink,#fff) 5%,var(--book-surface,#1b223b))}.theme-choice.active{background:color-mix(in srgb,var(--book-accent,#4458ff) 12%,var(--book-surface,#1b223b));border-color:color-mix(in srgb,var(--book-accent,#4458ff) 45%,var(--book-line,#303b59));color:var(--book-ink,#f4f5ff)}.theme-choice-text b{font-size:13px;line-height:1.25;font-weight:600}.theme-choice-text small{font-size:10px!important;line-height:1.4;color:var(--book-muted,#a8b0cb)}.theme-choice-end{color:var(--book-muted,#a8b0cb)}
.sidebar>.notes-button,.notes-button{font-size:11px!important;line-height:1.4;background:transparent;border-color:var(--book-line,#303b59);color:var(--book-ink,#f4f5ff);padding:10px 13px}.sidebar>.notes-button:hover,.notes-button:hover{background:color-mix(in srgb,var(--book-ink,#fff) 6%,var(--book-surface,#1b223b))}
.direction-heading{color:var(--book-ink,#f4f5ff);padding-top:23px;padding-bottom:23px}.direction-heading h2{font-size:37px;line-height:1.12;letter-spacing:-1.2px;color:var(--book-ink,#f4f5ff)}.direction-heading h2>span{color:var(--book-light,#b8c1ff)}.direction-heading p{font-size:12px!important;line-height:1.65;color:var(--book-muted,#a8b0cb)}.direction-kicker{font-size:10px!important;line-height:1.5;letter-spacing:1.1px;color:var(--book-muted,#a8b0cb)}.heading-line{background:var(--book-line,#303b59)}.identity-chip{color:var(--book-ink,#f4f5ff)}.identity-chip b{font-size:13px;line-height:1.3}.identity-chip small{font-size:11px;line-height:1.4;color:var(--book-muted,#a8b0cb)}
.preview-stage{background:var(--book-surface,#1b223b);background-image:none;border-color:var(--book-line,#303b59);box-shadow:0 16px 42px #0000000a}.preview-caption{color:var(--book-ink,#f4f5ff)}.preview-caption h3{font-size:13px!important;line-height:1.35;font-weight:500}.screen-number{font-size:10px!important;color:var(--book-muted,#a8b0cb);border-color:var(--book-line,#303b59)}.screen-kind{font-size:10px!important;line-height:1.3;letter-spacing:.55px;color:var(--book-muted,#a8b0cb)}.screen-note{font-size:12px!important;line-height:1.6;color:var(--book-muted,#a8b0cb)}.screen-note>span{color:var(--book-ink,#f4f5ff)}
.palette-footer{border-color:var(--book-line,#303b59);color:var(--book-ink,#f4f5ff);padding-top:23px;padding-bottom:23px}.palette-footer .eyebrow{font-size:10px;line-height:1.4;letter-spacing:1.3px;color:var(--book-muted,#a8b0cb)}.palette-footer p{font-size:12px!important;line-height:1.65;color:var(--book-muted,#a8b0cb)}.swatch{color:var(--book-muted,#a8b0cb)}.swatch>i{border-color:var(--book-line,#303b59)}.swatch>span{font-size:10px;letter-spacing:.35px}.swatch b{font-size:11px;font-weight:500;color:var(--book-ink,#f4f5ff)}.workspace-footnote{font-size:10px!important;line-height:1.5;letter-spacing:.65px;color:var(--book-muted,#a8b0cb);border-color:var(--book-line,#303b59)}
.mobile-view-toggle{background:var(--book-surface,#1b223b);border:1px solid var(--book-line,#303b59)}.mobile-view-toggle button{font-size:12px!important;color:var(--book-muted,#a8b0cb);line-height:1.4}.mobile-view-toggle button.active{background:var(--book-accent,#4458ff);color:var(--book-on,#fff);box-shadow:none}
#notes-dialog{color:var(--book-ink,#f4f5ff);background:var(--book-surface,#1b223b);border-color:var(--book-line,#303b59)}#notes-dialog p,#notes-dialog .notes-small{color:var(--book-muted,#a8b0cb)}#notes-dialog .eyebrow{color:var(--book-muted,#a8b0cb);font-size:10px}.dialog-close{color:var(--book-ink,#f4f5ff);background:color-mix(in srgb,var(--book-ink,#fff) 7%,var(--book-surface,#1b223b))}.toast{background:var(--book-ink,#f4f5ff);color:var(--book-base,#11162a);border:1px solid var(--book-line,#303b59);font-size:12px}
@media(max-width:1180px){.screen-kind{display:none!important}.sidebar{gap:16px}.theme-choice-text b{font-size:12px}.theme-choice{min-width:0}.sidebar>.notes-button{padding:9px 11px}.palette-swatches{gap:12px}.direction-heading h2{font-size:34px}}
@media(max-width:940px){.sidebar{height:auto;min-height:112px;padding-top:15px;padding-bottom:14px;gap:13px}.theme-choice-text b{font-size:12px}.theme-choice{padding:9px 11px;gap:7px}.theme-choice-text small{display:block!important}.theme-symbol{width:26px;height:26px}.screen-kind{display:block!important}.direction-heading{padding-top:21px;padding-bottom:21px}.palette-footer{max-width:none}.workspace-footnote{max-width:none}.screen-note{margin-top:14px}.palette-swatches{gap:11px}.palette-footer p{max-width:340px}.studio-tag{font-size:10px!important}.bg-root{margin-top:24px}}
@media(max-width:620px){.direction-heading h2{font-size:32px}.direction-heading p{max-width:340px}.direction-kicker{letter-spacing:.7px;flex-wrap:wrap;gap:7px}.direction-kicker .heading-line{width:15px}.sidebar>.notes-button{font-size:10px!important}.theme-choice-text small{display:none!important}.theme-choice-text b{font-size:12px}.theme-choice{padding:9px 10px}.sidebar{min-height:106px}.screen-kind{display:none!important}.palette-footer{flex-wrap:wrap;gap:17px}.palette-footer p{max-width:none}.palette-swatches{width:100%;justify-content:space-between;gap:8px}.swatch>span{display:flex!important;font-size:10px}.swatch{flex-direction:column;align-items:flex-start;gap:6px}.swatch>i{width:45px;height:30px}.swatch b{font-size:10px}.workspace-footnote{flex-wrap:wrap;gap:7px}.mobile-view-toggle button{padding-left:7px;padding-right:7px}.screen-note{font-size:12px!important}.bg-root .bg-header{margin-top:3px}}
@media(prefers-reduced-motion:reduce){body,.bg-button{transition:none}}

/* Final markup alignment and the reference-matched heavy lettering direction. */
.bg-title,.bg-section-head h3{font-weight:700}
.bg-root{font-weight:500}
.bg-dna{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.bg-logo{font-family:Outfit,Arial,sans-serif;font-size:clamp(65px,7.3vw,100px);font-weight:900;line-height:.95;letter-spacing:-4px;min-height:252px;gap:28px;padding:28px}
.bg-logo .bg-alphabet{display:block;position:static;min-height:0;border:0;border-radius:0;background:transparent;padding:0;color:inherit;font-family:Outfit,Arial,sans-serif;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:1.7px;text-align:center;opacity:.82;overflow-wrap:anywhere}
.bg-dna-copy{min-height:252px;gap:19px}
.bg-dna-copy>p{font-size:23px;line-height:1.35;font-weight:500;letter-spacing:-.45px;color:var(--bg-ink)}
.bg-dna-copy>small{font-size:12px;line-height:1.65;color:var(--bg-muted);font-weight:400}
.bg-dna-copy>div{display:flex;flex-wrap:wrap;gap:7px}
.bg-dna-copy .bg-tag+.bg-tag{margin-left:0}
.bg-color-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.bg-swatch-color{justify-content:space-between;align-items:flex-start;min-height:123px}
.bg-swatch-color>span{font-size:10px;line-height:1.5;font-weight:600;opacity:.8}
.bg-swatch-color>strong{font-family:Outfit,Arial,sans-serif;font-size:37px;line-height:1;font-weight:600;letter-spacing:-1.5px;align-self:flex-end}
.bg-type-brand .bg-type-word{font-family:Outfit,Arial,sans-serif;font-weight:900;letter-spacing:-3.5px}
.bg-type-sentence{font-weight:500}
.bg-table-wrap{width:100%;max-width:100%;overflow:auto;border-radius:15px;scrollbar-color:var(--bg-line) var(--bg-canvas);scrollbar-width:thin}
.bg-scale-table{min-width:960px}
.bg-scale-table th:first-child{width:34%}.bg-scale-table th:nth-child(2){width:16%}.bg-scale-table th:nth-child(3){width:26%}.bg-scale-table th:last-child{width:24%}
.bg-scale-role{display:block;font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--bg-muted);margin-bottom:12px}
.bg-scale-table td:first-child{padding-top:18px;padding-bottom:18px}
.bg-scale-sample{display:block;white-space:nowrap;overflow-wrap:normal;line-height:1.2}
.bg-scale-value>b{display:block;font-size:12px;line-height:1.5;color:var(--bg-ink);font-weight:600}.bg-scale-value>small{display:block;font-size:10px;line-height:1.6;margin-top:5px;color:var(--bg-muted)}
.bg-icon{width:18px;height:18px;display:block;flex:none}
.bg-component-stage>.bg-shape-box{flex:none;width:118px;max-width:118px;height:80px;min-height:80px;align-self:center}
.bg-component-nav .bg-component-stage{margin-left:-9px;margin-right:-9px}
.bg-nav-item:nth-child(2){flex:1.3}.bg-nav-item:nth-child(4){flex:1.25}.bg-nav-item{padding-left:0;padding-right:0}.bg-nav-item>span{font-size:10px;letter-spacing:-.2px}
.bg-spacing-row{grid-template-columns:35px 80px minmax(0,1fr);gap:10px;min-height:49px}
.bg-spacing-row>b{font-size:10px;line-height:1.45;text-align:left;font-weight:500}
.bg-spacing-spec{border-top:1px solid var(--bg-line);margin-top:15px;padding-top:13px}
.bg-spacing-spec>p{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:7px 0;font-size:11px;line-height:1.5;color:var(--bg-muted)}
.bg-spacing-spec>p>b{font-size:11px;font-weight:600;color:var(--bg-ink);text-align:right;font-variant-numeric:tabular-nums}
.bg-flow>.bg-component-meta,.bg-spacing>.bg-component-meta{margin-top:17px;padding-top:13px;font-size:11px;line-height:1.65}
.bg-crop>.bg-component-meta{margin-top:16px}
.bg-crop-notes{display:grid;grid-template-columns:1fr;gap:5px}.bg-crop-notes>span{border:0;padding:0;font-size:11px;line-height:1.6}
.bg-crop-notes>span:before{content:'\00b7';margin-right:7px;color:var(--bg-light)}
.bg-footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0 8px;font-size:10px;line-height:1.5;letter-spacing:.7px;color:var(--bg-muted)}.bg-footer>span:last-child{letter-spacing:0;text-align:right}
@media(max-width:1180px){.bg-dna{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bg-dna-copy{grid-column:auto;min-height:252px}.bg-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bg-crop>.bg-component-meta{grid-column:1}.bg-logo{font-size:87px}.bg-component-nav .bg-component-stage{margin:0}.bg-crop .bg-component-label{grid-column:1}}
@media(max-width:780px){.bg-dna-copy>p{font-size:20px}.bg-logo{font-size:72px;padding:23px;min-height:235px}.bg-dna-copy{min-height:235px;padding:23px}.bg-logo .bg-alphabet{font-size:12px;letter-spacing:1.2px}.bg-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bg-spacing-row{grid-template-columns:31px 65px minmax(0,1fr);gap:8px}.bg-footer{flex-direction:column;gap:7px}.bg-footer>span:last-child{text-align:left}}
@media(max-width:560px){.bg-dna{grid-template-columns:1fr}.bg-logo{font-size:85px;min-height:230px}.bg-dna-copy{min-height:0;padding:24px;grid-column:auto}.bg-dna-copy>p{font-size:22px}.bg-logo .bg-alphabet{font-size:13px;max-width:265px}.bg-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-table-wrap{margin-right:0}.bg-scale-table{min-width:920px}.bg-scale-table th:first-child{width:34%}.bg-scale-table th:last-child{width:24%}.bg-scale-table td{padding:15px}.bg-component-nav .bg-component-stage{margin:0}.bg-spacing-row{grid-template-columns:35px 80px minmax(0,1fr);gap:10px}.bg-crop-stage>img{max-width:calc(100% - 28px)}}

/* V5 specimens: readable in both appearances, with an unchanged primary. */
.bg-title strong,.bg-title em,.bg-tag{color:var(--bg-ink)}
.bg-crop-notes>span:before{color:var(--bg-muted)}
.bg-shape-box{background:var(--bg-accent);color:var(--bg-on);border-color:var(--bg-accent);box-shadow:inset 0 1px 0 #ffffff55,0 3px 0 var(--bg-line)}
.bg-mode-system{margin-top:27px;padding-top:25px;border-top:1px solid var(--bg-line)}
.bg-mode-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;margin-bottom:18px}
.bg-mode-heading h4{font:700 23px/1.18 Outfit,Arial,sans-serif;letter-spacing:-.5px;color:var(--bg-ink);max-width:330px}
.bg-mode-heading p{font-size:12px;line-height:1.65;color:var(--bg-muted);max-width:580px}
.bg-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.bg-mode-card{min-width:0;overflow:hidden;border:1px solid var(--pair-line);border-radius:17px;background:var(--pair-canvas);color:var(--pair-ink)}
.bg-mode-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid var(--pair-line)}
.bg-mode-card h4{font:700 20px/1 Outfit,Arial,sans-serif;letter-spacing:-.4px}
.bg-mode-card>header>span{font-size:9px;line-height:1.4;letter-spacing:.8px;color:var(--pair-muted);font-weight:700}
.bg-mode-preview{padding:20px;display:grid;gap:11px}
.bg-mode-label{font-size:9px;line-height:1.5;letter-spacing:1px;color:var(--pair-muted);font-weight:700}
.bg-mode-event{display:flex;flex-direction:column;gap:9px;background:var(--bg-accent);color:var(--bg-on);border-radius:12px;padding:17px 18px;box-shadow:inset 0 1px 0 #ffffff50,0 3px 0 var(--pair-line)}
.bg-mode-event>span{display:flex;align-items:center;gap:7px}
.bg-mode-event b{font:800 25px/1 Outfit,Arial,sans-serif;letter-spacing:-.6px}
.bg-mode-event small{font-size:11px;line-height:1.4;font-weight:600}
.bg-mode-neutral{padding:14px 16px;border:1px solid var(--pair-line);border-radius:12px;background:var(--pair-surface);display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 0 var(--pair-line);margin-bottom:5px}
.bg-mode-neutral b{font:700 15px/1.2 Outfit,Arial,sans-serif}
.bg-mode-neutral>span{color:var(--pair-muted);font-size:11px;line-height:1.5}
.bg-mode-field{padding:14px 16px;background:var(--pair-surface);border:1px solid var(--pair-line);border-radius:10px;color:var(--pair-ink);font-size:12px;line-height:1.5;font-weight:600}
.bg-mode-field span{border-left:1px solid var(--pair-line);padding-left:12px;margin-left:12px;color:var(--pair-muted);font-weight:500}
.bg-mode-button{display:flex;align-items:center;justify-content:center;min-height:43px;background:var(--bg-accent);color:var(--bg-on);border-radius:10px;font-size:12px;font-weight:700;box-shadow:inset 0 1px 0 #ffffff45,0 3px 0 var(--pair-line)}
.bg-mode-card>p{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;border-top:1px solid var(--pair-line);color:var(--pair-muted);font-size:10px;line-height:1.5}
.bg-mode-card>p>span{display:flex;flex-wrap:wrap;gap:4px 7px}.bg-mode-card>p b{font-weight:600;color:var(--pair-ink)}
.bg-mode-splash{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding:23px 26px;border-radius:15px;background:var(--bg-accent);color:var(--bg-on)}
.bg-mode-splash>strong{font:900 43px/1 Outfit,Arial,sans-serif;letter-spacing:-2px}
.bg-mode-splash>div{display:flex;flex-direction:column;gap:6px;text-align:right}.bg-mode-splash b{font-size:10px;line-height:1.5;letter-spacing:1px}.bg-mode-splash span{font-size:11px;line-height:1.5}
.bg-flow-shortcuts{padding:12px 0 5px}.bg-flow-shortcuts>small{display:block;color:var(--bg-muted);font-size:9px;line-height:1.5;font-weight:600;letter-spacing:.6px;margin-bottom:8px}.bg-flow-shortcuts>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.bg-flow-shortcuts span{padding:8px 7px;border:1px solid var(--bg-line);border-radius:7px;background:var(--bg-surface);color:var(--bg-ink);font-size:10px;line-height:1.4;text-align:center}
.bg-flow-earn,.bg-flow-vouchers{min-height:43px}
@media(max-width:780px){.bg-mode-heading{display:block}.bg-mode-heading p{margin-top:10px}.bg-mode-grid{gap:12px}.bg-mode-preview{padding:15px}.bg-mode-card>header,.bg-mode-card>p{padding-left:15px;padding-right:15px}.bg-mode-card>header{align-items:flex-start}.bg-mode-card>header>span{max-width:80px;text-align:right;font-size:8px}.bg-mode-event{padding:16px 13px}.bg-mode-event b{font-size:22px}.bg-mode-card>p{flex-direction:column;gap:5px}}
@media(max-width:560px){.bg-mode-grid{grid-template-columns:1fr}.bg-mode-preview{padding:20px}.bg-mode-card>header,.bg-mode-card>p{padding-left:20px;padding-right:20px}.bg-mode-card>p{flex-direction:row}.bg-mode-splash{padding:22px 20px;align-items:flex-start;flex-direction:column;gap:13px}.bg-mode-splash>div{text-align:left}.bg-mode-splash>strong{font-size:42px}.bg-logo{font-size:clamp(67px,22vw,85px)}}
.bg-nav-item.bg-active{flex-direction:row;gap:5px;padding:10px 5px;border-radius:12px}
.bg-nav-item.bg-active>span{font-size:10px;font-weight:700}
.bg-logo .bg-alphabet,.bg-swatch-color>span{opacity:1}