/* V14 / Typography Laboratory. No fonts are redistributed.
   Only selected Google Fonts stylesheet loads at runtime. Native fallbacks always available. */
:root{--type-size:1;--type-track:0px;--type-weight:500;--type-ui:Inter,system-ui,sans-serif;--type-display:Inter,system-ui,sans-serif}
body[data-typo="inter"]{--type-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="manrope"]{--type-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="onest"]{--type-ui:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="golos"]{--type-ui:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="plex"]{--type-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="commissioner"]{--type-ui:"Commissioner",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Commissioner",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="rubik"]{--type-ui:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="fira"]{--type-ui:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="roboto"]{--type-ui:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-typo="pt"]{--type-ui:"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--type-display:"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* Remove serif headlines, giant tracking and 9px labels. This is the real typography rework. */
body[data-typo]{font-family:var(--type-ui)!important;font-size:calc(14px * var(--type-size));font-synthesis:weight;letter-spacing:var(--type-track);font-feature-settings:"kern" 1,"liga" 1;color:var(--ink)}
body[data-typo] :is(button,input,select,textarea){font-family:var(--type-ui)!important;letter-spacing:normal}
body[data-typo] :is(.brand-title,.scene-heading h1,.hero-line h1,.section-title h2,.surface-head h2,.studio-card h2,.hero-number,.metric-card strong,.stats-hero strong,.stats-hero>strong,.donut-center strong,.vip-studio-head strong,.lock-screen h2){font-family:var(--type-display)!important;font-style:normal!important;font-weight:600;letter-spacing:-.047em}
body[data-typo] .brand-title{font-size:clamp(27px,5vw,38px);line-height:1.12;font-weight:650}
body[data-typo] :is(.scene-heading h1,.hero-line h1){font-size:clamp(35px,6.7vw,59px);line-height:1.09;font-weight:640}
body[data-typo] .hero-number{font-size:clamp(61px,10vw,96px);font-weight:600;letter-spacing:-.065em;line-height:1}
body[data-typo] .metric-card strong{font-size:clamp(27px,4vw,36px);line-height:1.14;font-weight:600;letter-spacing:-.045em}
body[data-typo] .surface-head h2,body[data-typo] .section-title h2{font-size:clamp(22px,4.2vw,28px);font-weight:600;letter-spacing:-.04em}
body[data-typo] :is(.micro,.section-eyebrow,.section-label){font-family:var(--type-ui)!important;font-size:11px;letter-spacing:.075em;font-weight:600;text-transform:uppercase;line-height:1.55}
body[data-typo] .brand-caption{font-size:10px;letter-spacing:.105em;font-weight:550}
body[data-typo] :is(.metric-top,.metric-card small,.event-text small,.top-status,.archive-item-meta,.studio-label,.tiny-note){font-size:clamp(11px,calc(12px * var(--type-size)),14px);letter-spacing:0;line-height:1.45}
body[data-typo] :is(.period-button,.outline-action,.solid-action,.quiet-link,.bottom-nav button,.archive-selector button,.studio-header-link){font-weight:var(--type-weight);letter-spacing:-.012em}
body[data-typo] .bottom-nav button{font-size:clamp(11px,2.3vw,13px);line-height:1.25}
body[data-typo] .chart-labels{font-size:11px}
body[data-typo] :is(.hero-number,.metric-card strong,.stats-hero strong,.stats-hero>strong,.donut-center strong,.chart-tooltip strong,.detail-row strong){font-variant-numeric:tabular-nums lining-nums}
body[data-typo] :is(.vip-studio-head strong,.studio-sample strong){font-family:var(--type-display)!important;font-style:normal!important;letter-spacing:-.035em}
/* The laboratory is visually grouped, not another giant technical form. */
.type-lab{margin-top:20px;gap:16px}
.type-lab-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.type-lab-head .lab-mark{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--studio-accent)}
.type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.type-choice{appearance:none;display:flex;flex-direction:column;text-align:left;gap:7px;min-height:96px;padding:13px 14px!important;border:1px solid var(--line)!important;border-radius:15px!important;background:var(--control)!important;color:var(--control-ink)!important;transition:transform .2s,border-color .2s,background .2s}
.type-choice:hover{transform:translateY(-2px)}
.type-choice[aria-pressed="true"]{border-color:var(--studio-accent)!important;box-shadow:inset 0 0 0 1px var(--studio-accent),0 8px 20px rgba(0,0,0,.12)}
.type-choice strong{font-size:17px;line-height:1.13;letter-spacing:-.03em;font-weight:600}
.type-choice span{font-size:11px;line-height:1.4;opacity:.8}
.type-choice[data-family="inter"] strong{font-family:Inter,system-ui,sans-serif}
.type-choice[data-family="manrope"] strong{font-family:Manrope,system-ui,sans-serif}
.type-choice[data-family="onest"] strong{font-family:Onest,system-ui,sans-serif}
.type-choice[data-family="golos"] strong{font-family:'Golos Text',system-ui,sans-serif}
.type-choice[data-family="plex"] strong{font-family:'IBM Plex Sans',system-ui,sans-serif}
.type-choice[data-family="commissioner"] strong{font-family:Commissioner,system-ui,sans-serif}
.type-choice[data-family="rubik"] strong{font-family:Rubik,system-ui,sans-serif}
.type-choice[data-family="fira"] strong{font-family:'Fira Sans',system-ui,sans-serif}
.type-choice[data-family="roboto"] strong{font-family:Roboto,system-ui,sans-serif}
.type-choice[data-family="pt"] strong{font-family:'PT Sans',system-ui,sans-serif}
.type-control{display:flex;flex-direction:column;gap:10px;font-size:12px;font-weight:500}
.type-control .split{display:flex;align-items:center;justify-content:space-between}
.type-control output{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.type-control input[type="range"]{width:100%}
.type-preview{background:var(--layer);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.type-preview .type-example-heading{font-family:var(--type-display);font-weight:650;font-size:clamp(26px,6vw,36px);letter-spacing:-.055em;line-height:1.14}
.type-preview .type-example-body{font-family:var(--type-ui);color:var(--ink-soft);font-size:14px;line-height:1.55}
.type-preview .type-example-stats{display:flex;gap:12px;align-items:center;font-family:var(--type-ui);font-weight:600;font-size:27px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.type-preview .type-example-stats em{font-size:12px;font-style:normal;color:var(--positive);font-weight:600;letter-spacing:0}
.type-preview .type-example-button{background:var(--chosen);color:var(--chosen-ink);padding:10px 14px;border-radius:10px;align-self:flex-start;font-weight:600;font-size:12px}
.type-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type-actions button{min-height:44px}
.type-help{font-size:11px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:370px){.type-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.type-choice{transition:none}}


/* V15 Silk Garden visual overhaul */
/* SILENT RIBBON / V15 SILK GARDEN
   Visual-only patch. Shared tokens respect all seven existing themes.
   No images, no third-party animation libraries, no scripts required. */
:root{--v15-quiet:rgba(235,239,248,.11);--v15-tween:cubic-bezier(.2,.7,.17,1)}
body{
 overflow-x:hidden;
 background:radial-gradient(ellipse 95% 64% at 75% 4%,var(--stage-b),transparent 85%),
 linear-gradient(170deg,var(--stage-a) 0%,var(--stage-c) 70%,var(--stage-a) 100%)!important;
}
/* The decorative garden stays behind the app, uses no input or API. */
.garden-motion{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:clamp(.12,var(--fx-opacity,.8),1);color:var(--ink-soft)}
.garden-veil{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 9px var(--accent-glow))}
.garden-wave{transform-origin:50% 50%;will-change:transform,opacity}
.garden-wave-first{opacity:.64;animation:v15-wave-a 19s ease-in-out infinite alternate}
.garden-wave-second{opacity:.52;animation:v15-wave-b 24s ease-in-out infinite alternate}
.garden-botanical{opacity:.76;transform-origin:110px 470px;animation:v15-leaf 14s ease-in-out infinite alternate}
.garden-lily{opacity:.85;transform-origin:61px 30px;animation:v15-lily 11s ease-in-out infinite alternate}
.garden-grain{position:absolute;inset:0;opacity:.12;background:radial-gradient(circle at 8% 15%,var(--ink) .65px,transparent 1.4px);background-size:28px 28px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent)}
@keyframes v15-wave-a{0%{transform:translate(-5%,0) scale(1);opacity:.32}50%{opacity:.8}100%{transform:translate(5%,-5%) scale(1.12);opacity:.69}}
@keyframes v15-wave-b{0%{transform:translate(7%,5%) scale(1.04);opacity:.22}50%{opacity:.79}100%{transform:translate(-6%,-7%) scale(1.16);opacity:.58}}
@keyframes v15-leaf{0%,100%{transform:rotate(-3deg) translateY(4px)}50%{transform:rotate(4deg) translateY(-11px)}}
@keyframes v15-lily{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(4deg)}}
/* Existing wave animation stage now contributes soft lighting without obscuring data. */
body[data-studio-theme] .fx-stage{opacity:.5;pointer-events:none;filter:blur(1.5px)}
body[data-studio-fx="none"] .garden-motion,body[data-studio-motion="0"] .garden-motion{opacity:0}
body[data-studio-fx="waves"] .garden-botanical,body[data-studio-fx="waves"] .garden-lily{opacity:.18}
body[data-studio-fx="mesh"] .garden-botanical{opacity:.28}
body[data-studio-theme="porcelain"] .garden-motion,body[data-studio-theme="mist"] .garden-motion{color:#586a86;filter:none;opacity:.48}
/* A quiet top bar: not a tall faux-mobile header. */
body[data-typo] .app-shell{isolation:isolate;max-width:850px;padding-bottom:122px}
body[data-typo] .app-header{height:91px;border-bottom:1px solid var(--line);position:relative}
body[data-typo] .brand .fleur{font-size:18px;filter:none;color:var(--ink-soft)}
body[data-typo] .brand-title{font-size:clamp(23px,4vw,28px);font-weight:650;letter-spacing:-.055em;line-height:1.06}
body[data-typo] .brand-caption{margin-top:5px;font-size:9px;letter-spacing:.055em;color:var(--ink-faint)}
body[data-typo] .header-rule{display:none}
body[data-typo] .top-status{background:transparent;border-bottom:0;padding:0 2px;gap:9px;flex-wrap:nowrap;font-size:12px;min-height:48px;height:auto}
body[data-typo] .top-status-meta{white-space:nowrap;font-size:11px}
body[data-typo] .studio-header-link{border-radius:99px;padding:8px 11px;white-space:nowrap;letter-spacing:0!important;font-size:11px}
body[data-typo] .main{padding-top:18px}
body[data-typo] .section-eyebrow{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.11em;margin-top:8px;margin-bottom:10px}
.home-motif{font-size:17px;line-height:1;color:var(--ink-faint);animation:v15-motif 7s ease-in-out infinite alternate}
@keyframes v15-motif{from{opacity:.5;transform:rotate(-12deg)}to{opacity:.92;transform:rotate(22deg)}}
body[data-typo] .hero-line{margin:0 0 20px}
body[data-typo] .hero-line h1{font-size:clamp(31px,7vw,48px);font-weight:600;letter-spacing:-.065em;line-height:1.08;margin:0 0 8px}
body[data-typo] .hero-line h1 .title-period{color:var(--ink-faint)}
body[data-typo] .hero-line p{font-size:clamp(11px,2.7vw,13px);line-height:1.45;color:var(--ink-faint);margin:0}
/* SVG chart remains interactive, not a flat art background. */
body[data-typo] .graph-surface{border-radius:25px;padding:23px 24px 17px;position:relative;overflow:hidden;background:linear-gradient(155deg,var(--layer) 15%,var(--layer2) 80%);box-shadow:0 20px 48px rgba(0,0,0,.10),inset 0 1px rgba(255,255,255,.09)}
body[data-typo] .graph-surface:before{z-index:0;inset:0;background:radial-gradient(ellipse at 62% 100%,var(--accent-glow),transparent 70%);pointer-events:none}
body[data-typo] .graph-surface>*{position:relative;z-index:1}
body[data-typo] .surface-head h2{font-size:clamp(20px,4vw,25px);font-weight:620;margin:3px 0 0}
body[data-typo] .graph-surface .micro{font-size:10px;letter-spacing:.08em}
body[data-typo] .hero-summary{margin:20px 0 12px;gap:15px;align-items:center}
body[data-typo] .hero-number{font-size:clamp(60px,12vw,88px);font-weight:580;letter-spacing:-.075em}
body[data-typo] .hero-number-side{display:flex;flex-direction:column;gap:7px;min-width:0}
body[data-typo] .hero-number-side span{font-size:12px}
body[data-typo] .hero-number-side strong{font-size:13px}
body[data-typo] .period-button{border-radius:100px;min-height:40px;padding:9px 13px;background:var(--control);color:var(--control-ink);border-color:var(--line)}
body[data-typo] .graph-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:13px;padding-top:9px;border-top:1px solid var(--line);font-size:11px}
body[data-typo] .metric-switch{white-space:nowrap;border:0;background:transparent;color:var(--ink);font-size:12px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);padding:8px 0}
body[data-typo] .metric-switch:hover{text-decoration-color:currentColor}
/* Crucial mobile fix: two columns, two rows, one full-width summary. */
.metrics-gallery{position:relative;margin-top:28px}
.metrics-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 1px 12px;color:var(--ink-soft);font-weight:570;font-size:14px;letter-spacing:-.02em}
.metrics-flourish{font-size:20px;color:var(--ink-faint);animation:v15-motif 8s ease-in-out infinite alternate}
body[data-typo] .metrics{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:0!important;grid-auto-flow:row}
body[data-typo] .metric-card,body[data-studio-theme] .metric-card{
 position:relative;min-width:0;overflow:hidden;min-height:154px!important;max-height:none;
 display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
 padding:19px 12px!important;border:1px solid var(--line)!important;border-radius:22px!important;
 background:linear-gradient(152deg,var(--layer2),var(--layer) 76%)!important;
 color:var(--ink)!important;box-shadow:inset 0 1px rgba(255,255,255,.075),0 8px 25px rgba(0,0,0,.06)!important;
 transform:none!important;transition:box-shadow .35s,border-color .35s;
}
body[data-typo] .metric-card:before{content:"";position:absolute;width:105%;height:72px;left:-12%;bottom:-57px;border-radius:100%;background:var(--accent-glow);filter:blur(22px);opacity:.85;pointer-events:none}
body[data-typo] .metric-card:after{content:"";height:1px;position:absolute;left:20%;right:20%;top:12px;background:linear-gradient(90deg,transparent,var(--line),transparent);pointer-events:none}
body[data-typo] .metric-card .metric-top{display:block;order:2;font-size:clamp(12px,3vw,15px);font-weight:650;letter-spacing:.12em;color:var(--ink-soft)!important;line-height:1.3}
body[data-typo] .metric-card strong{display:block;order:1;margin:0 0 12px;line-height:1;min-height:48px;font-size:clamp(42px,11vw,60px)!important;letter-spacing:-.065em;font-family:var(--type-display)!important;font-weight:580;text-align:center;width:100%;color:var(--ink)!important;font-variant-numeric:tabular-nums}
body[data-typo] .metric-card small{display:block;order:3;white-space:normal;margin-top:7px;font-size:clamp(10px,2.7vw,12px);line-height:1.3;color:var(--ink-faint)!important}
body[data-typo] .metric-card.metric-wide{grid-column:1/-1!important;min-height:180px!important;padding:24px 24px 27px!important;border-radius:26px!important;isolation:isolate;background:linear-gradient(145deg,var(--layer2),var(--layer) 75%)!important}
body[data-typo] .metric-wide .metric-top{order:1;font-size:clamp(15px,3.5vw,19px);letter-spacing:-.02em;color:var(--ink)!important;font-weight:620}
body[data-typo] .metric-wide strong{order:2;margin:12px 0 5px;font-size:clamp(65px,15vw,86px)!important;min-height:68px}
body[data-typo] .metric-wide small{order:3;margin-top:5px}
body[data-typo] .metric-wide:before{width:75%;height:100px;left:-10%;bottom:-74px;filter:blur(28px)}
body[data-typo] .metric-wide:after{left:10%;right:10%;top:auto;bottom:19px;opacity:.7}
.total-lily{position:absolute;right:8%;bottom:4%;z-index:0;pointer-events:none;font-family:system-ui,sans-serif;font-size:clamp(74px,14vw,120px);font-weight:400;color:var(--ink-faint);opacity:.095;transform:rotate(-8deg);animation:v15-total-lily 12s ease-in-out infinite alternate}
@keyframes v15-total-lily{0%{transform:rotate(-13deg) translateY(8px);opacity:.065}100%{transform:rotate(0) translateY(-6px);opacity:.16}}
/* Eliminate the misaligned old arrow graphics and irrelevant navigation arrows. */
body[data-typo] .metric-top span,body[data-typo] .surface-chevron,body[data-typo] .summary-arrow{display:none!important}
body[data-typo] .quiet-link{border:none;background:transparent;box-shadow:none;white-space:nowrap}
body[data-typo] .events-preview .section-title{align-items:center;justify-content:flex-start}
body[data-typo] .diagnostics-panel{margin-top:26px;border-radius:22px;overflow:hidden}
body[data-typo] .diagnostics-panel summary{font-size:14px;font-weight:600;color:var(--ink);list-style:none;cursor:pointer;min-height:59px;display:flex;align-items:center}
body[data-typo] .diagnostics-panel summary::-webkit-details-marker{display:none}
body[data-typo] .diagnostics-panel summary:after{content:'+';margin-left:auto;font-family:var(--type-ui);font-size:20px;font-weight:400;color:var(--ink-soft);line-height:1}
body[data-typo] .diagnostics-panel[open] summary:after{content:'−'}
body[data-typo] .diagnostics-panel .summary-icon{font-family:var(--type-ui);font-size:18px;font-weight:400;line-height:1;color:var(--ink-faint)}
body[data-typo] .composition,body[data-typo] .events-preview{margin-top:25px}
body[data-typo] .events-preview .section-title{margin-bottom:13px}
body[data-typo] .events-preview .section-title h2{font-size:clamp(21px,5vw,26px)}
/* Typography and labels throughout Studio, no fake "new" badges. */
body[data-typo] .scene-heading h1{font-size:clamp(34px,7vw,49px);font-weight:630;line-height:1.08}
body[data-typo] .studio-sample{border-radius:25px;min-height:154px;padding:28px;background:linear-gradient(130deg,var(--layer),var(--layer2) 60%,var(--layer));box-shadow:inset 0 1px rgba(255,255,255,.08);border-color:var(--line)}
body[data-typo] .studio-sample>span{font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}
body[data-typo] .studio-sample strong{font-family:var(--type-display)!important;font-size:clamp(25px,6vw,38px);font-weight:620;letter-spacing:-.06em;color:var(--ink)!important}
body[data-typo] .studio-sample small{font-size:12px;color:var(--ink-faint)}
body[data-typo] .studio-card,body[data-typo] .sys-card,body[data-typo] .settings-card{border-radius:23px;padding:clamp(19px,4vw,27px);margin-top:16px;border:1px solid var(--line)}
body[data-typo] .studio-card h2,body[data-typo] .sys-card h2{font-family:var(--type-display)!important;font-size:clamp(20px,4.3vw,26px);font-weight:620;letter-spacing:-.045em}
body[data-typo] .studio-card .micro{font-size:10px;letter-spacing:.09em}
body[data-typo] .vip-studio-rule{background:linear-gradient(160deg,var(--layer2),var(--layer));border-radius:17px;border:1px solid var(--line);padding:18px;margin-top:20px}
body[data-typo] .vip-studio-head strong{color:var(--ink)!important;font-family:var(--type-ui)!important;font-size:18px;letter-spacing:-.025em;font-weight:680}
body[data-typo] .vip-studio-head .micro{color:var(--ink-faint)}
body[data-typo] .studio-label,body[data-typo] .studio-switch{font-size:13px;line-height:1.4;color:var(--ink-soft)}
body[data-typo] :is(.studio-card,.sys-card,.settings-card) input:not([type=checkbox]):not([type=range]),body[data-typo] :is(.studio-card,.sys-card,.settings-card) select{min-width:0;max-width:100%;border-radius:12px;background:var(--field);color:var(--ink);border:1px solid var(--field-line);padding:13px;box-sizing:border-box}
body[data-typo] .studio-design-extras{border-color:var(--line);border-radius:17px}
body[data-typo] .solid-action,body[data-typo] .outline-action{border-radius:13px;min-height:43px}
body[data-typo] .bottom-nav{border-radius:19px 19px 0 0;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-color:var(--line);box-shadow:0 -12px 40px rgba(0,0,0,.1);padding-top:12px}
body[data-typo] .bottom-nav button{border-radius:12px;transition:background .28s,color .28s,transform .28s}
body[data-typo] .bottom-nav button.active{box-shadow:none!important;background:var(--chosen)!important;color:var(--chosen-ink)!important}
body[data-typo] .bottom-nav button:active{transform:scale(.96)}
body[data-typo] .type-choice{border-radius:16px!important}
body[data-typo] .type-grid{gap:9px}
/* Keep the first row and chart usable on compact phones. */
@media(max-width:600px){
 body[data-typo] .app-shell{padding:0 16px 122px}
 body[data-typo] .app-header{height:82px}
 body[data-typo] .header-action{top:25px}
 body[data-typo] .top-status{min-height:51px;gap:6px}
 body[data-typo] .top-status #status-line{font-size:11px;line-height:1.25;min-width:0}
 body[data-typo] .studio-header-link{padding:7px 9px;font-size:10px}
 body[data-typo] .top-status-meta{font-size:10px}
 body[data-typo] .graph-surface{padding:19px 16px 16px;border-radius:20px}
 body[data-typo] .hero-summary{margin:20px 0 8px}
 body[data-typo] .hero-number{font-size:clamp(53px,13vw,70px)}
 body[data-typo] .chart{height:193px}
 body[data-typo] .metrics{gap:10px!important}
 body[data-typo] .metric-card{min-height:145px!important;padding:17px 9px!important;border-radius:19px!important}
 body[data-typo] .metric-card.metric-wide{min-height:171px!important}
 .garden-botanical{opacity:.7}
 .garden-lily{opacity:.68}
}
@media(max-width:360px){
 body[data-typo] .app-shell{padding:0 12px 116px}
 body[data-typo] .metric-card{min-height:133px!important;padding:13px 8px!important}
 body[data-typo] .metric-card strong{font-size:clamp(35px,10vw,42px)!important}
 body[data-typo] .metric-card .metric-top{font-size:11px}
 body[data-typo] .metric-card small{font-size:10px}
 body[data-typo] .brand-caption{font-size:8px}
 body[data-typo] .top-status-meta{display:none}
}
/* Animation can be disabled system-wide for accessibility and low-end phones. */
@media(prefers-reduced-motion:reduce){
 .garden-wave,.garden-botanical,.garden-lily,.total-lily,.home-motif{animation:none!important;will-change:auto!important}
 .garden-motion{opacity:.21!important}
 body[data-typo] .metric-card{transition:none!important}
}
/* Tune down the former oversized ribbon: thin light traces do not obscure headings. */
body[data-typo] .ribbon-space-top{opacity:.42;pointer-events:none;max-width:100%;overflow:hidden}
body[data-typo] .ribbon-space-top .ribbon-fill{opacity:.11}
body[data-typo] .ribbon-space-top .ribbon-line{stroke-opacity:.33}
body[data-studio-motion="off"] .garden-motion{opacity:.20}
body[data-fx-paused="yes"] .garden-wave,body[data-fx-paused="yes"] .garden-botanical,body[data-fx-paused="yes"] .garden-lily{animation-play-state:paused!important}
/* Prevent any decorative layer from affecting horizontal document size. */
body[data-typo] .scene,body[data-typo] .main{max-width:100%;min-width:0}
body[data-typo] .metrics-gallery{width:100%;min-width:0;overflow:hidden}

.total-lily{width:130px;height:130px;right:6%;bottom:-5%;opacity:.20;pointer-events:none}
/* V15 accessibility / final polish */
html{overflow-x:clip}
body[data-typo] .ribbon-space .ribbon-fill{opacity:.12}
body[data-typo] .ribbon-space .ribbon-line{stroke-opacity:.22}
body[data-studio-theme="porcelain"] .chart-line-path,
body[data-studio-theme="mist"] .chart-line-path{stroke:#465b78!important;filter:drop-shadow(0 1px 3px rgba(69,92,132,.20))}
body[data-studio-theme="porcelain"] .chart-grid line,
body[data-studio-theme="mist"] .chart-grid line{stroke:#5e708d;stroke-opacity:.20}
body[data-studio-theme="porcelain"] .chart-cursor,
body[data-studio-theme="mist"] .chart-cursor{stroke:#445870}
body[data-studio-theme="porcelain"] .chart-labels,
body[data-studio-theme="mist"] .chart-labels{color:var(--ink-soft)}


/* SILENT RIBBON V16 / LILY FILAMENTS
 * Each panel has TWO fixed intersecting tracings on EACH side.
 * Only a highlight moves along the immobile outlines.
 * Studio accent is the source of colour; never overlays controls with hit targets.
 */
:is(.surface,.metric-card,.studio-sample,.archive-item,.events-list,.vip-studio-rule,.type-preview,.sheet) {
  position: relative;
  isolation: isolate;
}
.window-filigree {
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none!important;
  user-select:none;
  -webkit-user-select:none;
  z-index:0;
  color:var(--studio-accent,#c6cbd4);
  contain:paint;
}
.window-filigree .filigree-side {
  position:absolute;
  top:0;
  height:100%;
  width:clamp(29px,11%,62px);
  max-width:62px;
  fill:none;
  overflow:visible;
  /* Cut the ends softly, so no decorative stroke touches the panel border. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 83%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 83%,transparent 100%);
}
.window-filigree .filigree-side--left {left:2px}
.window-filigree .filigree-side--right {right:2px;transform:scaleX(-1)}
.window-filigree .filigree-trace {
  stroke:color-mix(in srgb,var(--studio-accent,#c6cbd4) 56%,var(--ink-soft,#d1d5de) 44%);
  stroke-width:1.1;
  opacity:.31;
  vector-effect:non-scaling-stroke;
}
.window-filigree .filigree-current {
  stroke:color-mix(in srgb,var(--studio-accent,#c6cbd4) 78%,var(--ink,#fff) 22%);
  stroke-width:1.9;
  opacity:.92;
  stroke-linecap:round;
  stroke-dasharray:12 88;
  stroke-dashoffset:100;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px var(--studio-accent,#c6cbd4)) drop-shadow(0 0 6px var(--studio-accent,#c6cbd4));
  animation:filigree-impulse 10s linear infinite;
}
.window-filigree .filigree-current--two {animation-duration:12.5s;animation-delay:-5.3s;opacity:.72}
.window-filigree .filigree-side--right .filigree-current {animation-duration:11.4s;animation-delay:-6.2s}
.window-filigree .filigree-side--right .filigree-current--two {animation-duration:14.2s;animation-delay:-2.8s}
@keyframes filigree-impulse {from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* Always keep panel content and interactive controls above the filigree. */
:is(.surface,.metric-card,.studio-sample,.archive-item,.events-list,.vip-studio-rule,.type-preview,.sheet)
  > :not(.window-filigree):not(.total-lily) {position:relative;z-index:1}
/* Aim for fine engraved linework, not bright neon, on compact tiles. */
.metric-card .window-filigree .filigree-side {width:clamp(27px,14%,41px)}
.metric-card .window-filigree .filigree-trace {opacity:.26}
.graph-surface .window-filigree .filigree-trace {opacity:.24}
.graph-surface .window-filigree .filigree-current {opacity:.59}
.studio-card .window-filigree .filigree-current,
.sys-card .window-filigree .filigree-current {opacity:.64}
.sheet .window-filigree .filigree-current {opacity:.48}
/* Studio theme and accent change the stroke colours live through CSS vars. */
body[data-studio-theme="porcelain"] .window-filigree .filigree-trace,
body[data-studio-theme="mist"] .window-filigree .filigree-trace {stroke:color-mix(in srgb,var(--studio-accent,#778399) 55%,#35445a 45%);opacity:.38}
body[data-studio-theme="porcelain"] .window-filigree .filigree-current,
body[data-studio-theme="mist"] .window-filigree .filigree-current {stroke:color-mix(in srgb,var(--studio-accent,#778399) 54%,#182739 46%);filter:drop-shadow(0 0 2px var(--studio-accent,#778399))}
/* Honour Studio motion controls and the device's reduced-motion setting. */
body[data-studio-motion="off"] .filigree-current,
body[data-fx-paused="yes"] .filigree-current {animation-play-state:paused!important;stroke-dashoffset:48}
@media(prefers-reduced-motion:reduce) {
  .window-filigree .filigree-current{animation:none!important;stroke-dashoffset:48;opacity:.36!important;filter:none!important}
}
@media(max-width:370px) {
  .metric-card .window-filigree .filigree-side{width:26px}
  .metric-card .window-filigree .filigree-current{stroke-width:1.3}
}

/* V15 graph-surface > * rule must not turn overlay into an in-flow element. */
body[data-typo] .graph-surface > .window-filigree {position:absolute!important;inset:0!important;z-index:0!important}


/* SILENT RIBBON V17 / SIGNATURE FLOW
   Stronger signature curve on ALL screens; organic, intentionally asymmetric edge tracings.
   All effects are presentation-only; never intercept input or obscure functional content. */
:root{
 --signature-tone: color-mix(in srgb,var(--studio-accent,#c6cbd4) 54%,var(--ink,#f3f4fa) 46%);
 --signature-ghost: color-mix(in srgb,var(--studio-accent,#c6cbd4) 42%,transparent 58%);
}
/* The original, recognizable luminous curve is the lead motif, not another faint mesh stroke. */
.scene{position:relative;isolation:isolate}
.scene > .signature-wave{
 position:absolute!important;inset:-7px -9px auto -9px!important;
 display:block;box-sizing:border-box;width:calc(100% + 18px);height:clamp(168px,38vw,270px);
 overflow:hidden;pointer-events:none!important;user-select:none;z-index:0!important;
 color:var(--signature-tone);opacity:1;
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 75%,transparent 100%);
 mask-image:linear-gradient(180deg,#000 0%,#000 75%,transparent 100%);
}
.scene > .signature-wave svg{width:100%;height:100%;display:block;overflow:visible}
.signature-wave .signature-underlay{
 fill:none;stroke:var(--signature-tone);stroke-width:11;opacity:.16;
 vector-effect:non-scaling-stroke;filter:blur(12px)
}
.signature-wave .signature-soft{
 fill:none;stroke:var(--signature-tone);stroke-width:5.6;opacity:.23;
 vector-effect:non-scaling-stroke;filter:blur(4px)
}
.signature-wave .signature-core{
 fill:none;stroke:var(--signature-tone);stroke-width:2.3;opacity:.92;
 vector-effect:non-scaling-stroke;stroke-linecap:round;
 filter:drop-shadow(0 0 5px var(--studio-accent,#c6cbd4));
}
.signature-wave .signature-runner{
 fill:none;stroke:var(--signature-tone);stroke-width:4.6;opacity:.94;
 stroke-linecap:round;stroke-dasharray:13 87;stroke-dashoffset:0;
 vector-effect:non-scaling-stroke;
 filter:drop-shadow(0 0 8px var(--studio-accent,#c6cbd4)) drop-shadow(0 0 3px var(--ink,#fff));
 animation:v17-signature-flow var(--signature-speed,11s) linear infinite;
}
@keyframes v17-signature-flow{to{stroke-dashoffset:-100}}
/* Give every screen a quiet but deliberate stage; panels maintain text contrast. */
.scene > :is(.scene-heading,.hero-line,.section-eyebrow,.studio-sample){position:relative;z-index:1}
.scene > .scene-heading, .scene > .hero-line{isolation:isolate}
.scene > .scene-heading :is(h1,p),.scene > .hero-line :is(h1,p){text-shadow:0 1px 14px var(--stage-a,#0b0d12)}
body[data-studio-theme="porcelain"] .scene > .scene-heading :is(h1,p),
body[data-studio-theme="mist"] .scene > .scene-heading :is(h1,p),
body[data-studio-theme="porcelain"] .scene > .hero-line :is(h1,p),
body[data-studio-theme="mist"] .scene > .hero-line :is(h1,p){text-shadow:none}
/* Keep legacy lines quieter so the original signature is unmistakably dominant. */
.garden-motion .garden-wave{opacity:.24!important;filter:none!important}
body[data-typo] .ribbon-space-top{opacity:.22!important}
body[data-typo] .ribbon-space .ribbon-line{stroke-opacity:.17!important}
body[data-studio-theme="porcelain"] .signature-wave .signature-core,
body[data-studio-theme="mist"] .signature-wave .signature-core{opacity:.86;stroke-width:2.6}
body[data-studio-theme="porcelain"] .signature-wave .signature-underlay,
body[data-studio-theme="mist"] .signature-wave .signature-underlay{opacity:.11}
/* Organic filaments: no mirror transform, sides choose independent stable shapes. */
.window-filigree .filigree-side,
.metric-card .window-filigree .filigree-side{
 width:var(--filament-width,clamp(62px,23%,105px))!important;
 max-width:none!important;
 height:var(--filament-height,104%)!important;
 top:var(--filament-top,-2%)!important;
 transform:none!important;
 overflow:visible;
 opacity:var(--filament-opacity,.74);
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);
 mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);
}
.window-filigree .filigree-side--left{left:var(--filament-edge,-11px)!important;right:auto!important}
.window-filigree .filigree-side--right{right:var(--filament-edge,-11px)!important;left:auto!important}
.window-filigree .filigree-trace{
 stroke:color-mix(in srgb,var(--studio-accent,#c6cbd4) 47%,var(--ink-soft,#d1d5de) 53%);
 stroke-width:.95;opacity:.42;stroke-linecap:round;
}
.window-filigree .filigree-current{
 stroke-width:1.75;opacity:.80;stroke-dasharray:9 91;
 filter:drop-shadow(0 0 2.5px var(--studio-accent,#c6cbd4));
 animation-duration:var(--filament-speed,14s);
}
.window-filigree .filigree-current--two{animation-duration:calc(var(--filament-speed,14s) * 1.32);opacity:.64}
.window-filigree .filigree-side--right .filigree-current{animation-duration:calc(var(--filament-speed,14s) * 1.18)}
.window-filigree .filigree-side--right .filigree-current--two{animation-duration:calc(var(--filament-speed,14s) * 1.47)}
.metric-card .window-filigree .filigree-trace{opacity:.26}
.metric-card .window-filigree .filigree-current{opacity:.54}
/* On small cards and panels, use shorter soft tracings rather than a wall of lines. */
@media(max-width:430px){
 .metric-card .window-filigree .filigree-side{width:var(--filament-mobile-width,45px)!important}
 .metric-card .window-filigree .filigree-current{stroke-width:1.25}
 .scene>.signature-wave{height:218px}
}
body[data-studio-fx="none"] .signature-wave{opacity:.45}
body[data-studio-motion="off"] .signature-runner,
body[data-fx-paused="yes"] .signature-runner{animation-play-state:paused!important}
body[data-studio-motion="off"] .signature-wave .signature-runner{opacity:.16}
@media(prefers-reduced-motion:reduce){
 .signature-wave .signature-runner,.window-filigree .filigree-current{animation:none!important;filter:none!important}
 .signature-wave .signature-runner{opacity:.2}
}


/* SILENT RIBBON V18 / VELVET CURRENT — precise typography, restrained colour, real ribbon depth */
:root{--v18-tone-a:#aeb8c3;--v18-tone-b:#6c7383}
/* Palette controls harmonise background, panels, text accents and real SVG curves. */
body[data-typo]{
 background:
  radial-gradient(ellipse 86% 52% at 83% 0%,color-mix(in srgb,var(--v18-tone-a) 19%,transparent),transparent 85%),
  radial-gradient(ellipse 88% 66% at 5% 77%,color-mix(in srgb,var(--v18-tone-b) 14%,transparent),transparent 82%),
  linear-gradient(165deg,var(--stage-a) 0%,var(--stage-b) 58%,var(--stage-a) 100%)!important;
}
body[data-studio-theme="porcelain"],body[data-studio-theme="mist"]{--v18-cloud-strength:13%}
body[data-typo] :is(.surface,.metric-card,.vip-studio-rule,.type-preview){
 background-image:linear-gradient(143deg,color-mix(in srgb,var(--v18-tone-a) 10%,var(--layer2) 90%) 0%,var(--layer) 76%)!important;
}
body[data-studio-theme="porcelain"] :is(.surface,.metric-card,.vip-studio-rule),
body[data-studio-theme="mist"] :is(.surface,.metric-card,.vip-studio-rule){
 background-image:linear-gradient(140deg,color-mix(in srgb,var(--v18-tone-a) 8%,var(--layer2) 92%),var(--layer))!important;
}
/* Natural, contained filaments. No tall loops or phallic floral outlines. */
.window-filigree .filigree-side,
.metric-card .window-filigree .filigree-side{
 width:clamp(30px,10%,52px)!important;
 opacity:var(--filament-opacity,.38)!important;
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 87%,transparent)!important;
 mask-image:linear-gradient(180deg,transparent,#000 9%,#000 87%,transparent)!important;
}
.window-filigree .filigree-trace{stroke-width:.75!important;opacity:.33!important}
.window-filigree .filigree-current{stroke-width:1.1!important;opacity:.42!important;filter:drop-shadow(0 0 1.5px var(--studio-accent))!important}
.metric-card .window-filigree .filigree-side{width:clamp(22px,8%,38px)!important}
.garden-lily,.total-lily{display:none!important}
/* Dim old overlapping scribbles, but leave organic kinetic ambient texture. */
.garden-motion .garden-botanical{opacity:.24!important}
.garden-motion .garden-wave{opacity:.12!important;filter:none!important}
/* Real volumetric silk: body between offset curved edges, multiple lighting layers. */
.scene>.signature-wave.v18-silk-wave{
 inset:-4px -7px auto -7px!important;height:clamp(170px,39vw,260px)!important;
 width:calc(100% + 14px)!important;color:var(--studio-accent)!important;opacity:.93!important;
 pointer-events:none!important;z-index:0!important;
}
.v18-ribbon-svg{width:100%;height:100%;display:block;overflow:visible}
.v18-ribbon-halo{fill:none;stroke:var(--studio-accent);stroke-width:13;opacity:.17;filter:blur(9px)}
.v18-ribbon-body{opacity:.75;filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--studio-accent) 22%,transparent))}
.v18-ribbon-edge{fill:none;stroke-width:1.3;stroke-linecap:round;opacity:.87;filter:drop-shadow(0 0 2px var(--studio-accent))}
.v18-ribbon-bottom{fill:none;stroke:var(--studio-accent);stroke-width:.7;stroke-opacity:.21}
.v18-ribbon-sheen{fill:none;stroke:var(--ink);stroke-width:1.12;opacity:.55;
 stroke-dasharray:14 86;stroke-dashoffset:0;stroke-linecap:round;
 filter:drop-shadow(0 0 3px var(--studio-accent));animation:v18-silk-reflection 20s linear infinite}
@keyframes v18-silk-reflection{to{stroke-dashoffset:-100}}
body[data-studio-motion="off"] .v18-ribbon-sheen,body[data-fx-paused="yes"] .v18-ribbon-sheen{animation:none!important}
@media(prefers-reduced-motion:reduce){.v18-ribbon-sheen{animation:none!important;filter:none!important}}
/* Inline period control: no modal, dialog, overlay or changing vertical size. */
.v18-period-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;
 padding:4px;margin:15px 0 4px;background:color-mix(in srgb,var(--layer) 76%,transparent);
 border:1px solid var(--line);border-radius:15px;position:relative;z-index:2}
.v18-period-strip button{appearance:none;border:1px solid transparent;background:transparent;color:var(--ink-soft);font:inherit;
 font-size:clamp(10px,2.6vw,12px);font-weight:610;white-space:nowrap;min-width:0;min-height:38px;
 border-radius:11px;cursor:pointer;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.v18-period-strip button.active,.v18-period-strip button[aria-pressed="true"]{
 background:color-mix(in srgb,var(--studio-accent) 15%,var(--layer2) 85%);color:var(--ink);
 border-color:color-mix(in srgb,var(--studio-accent) 29%,var(--line) 71%);box-shadow:inset 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.v18-period-strip button:focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}
/* Delivery distribution: slim segmented bar and well-aligned quiet ledger. */
body[data-typo] .v18-deliveries{padding:22px 20px 18px;border-radius:24px;overflow:hidden}
.v18-deliveries .surface-head{align-items:center;gap:10px}
.v18-deliveries .surface-head h2{font-size:clamp(19px,4vw,24px)}
.v18-route-total{font-size:11px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.v18-route-stack{display:flex;align-items:stretch;width:100%;height:9px;gap:0;margin:21px 0 11px;
 border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--ink) 11%,transparent)}
.v18-route-stack i{display:block;height:100%;flex-shrink:0;min-width:0;width:0%;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.v18-stack-norm{background:color-mix(in srgb,var(--studio-accent) 74%,var(--ink) 26%)}
.v18-stack-kall{background:color-mix(in srgb,var(--v18-tone-b) 68%,var(--ink-soft) 32%)}
.v18-stack-vip{background:color-mix(in srgb,var(--v18-tone-a) 58%,var(--ink) 42%)}
.v18-route-stack.is-empty{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.v18-route-rows{display:grid;grid-template-columns:1fr;gap:0}
.v18-route-row{display:flex;align-items:center;justify-content:space-between;min-height:57px;gap:10px;border-bottom:1px solid var(--line);padding:8px 2px}
.v18-route-label{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.v18-route-label strong{font-size:12px;font-weight:720;letter-spacing:.025em;color:var(--ink)}
.v18-route-label>span:last-child{font-size:11px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis}
.v18-route-dot{width:7px;height:18px;border-radius:6px;background:var(--studio-accent);flex:0 0 7px}
.v18-route-kall .v18-route-dot{background:color-mix(in srgb,var(--v18-tone-b) 70%,var(--ink-soft) 30%)}
.v18-route-vip .v18-route-dot{background:color-mix(in srgb,var(--v18-tone-a) 56%,var(--ink) 44%)}
.v18-route-value{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;flex:0 0 auto;min-width:64px;font-variant-numeric:tabular-nums}
.v18-route-value strong{font-size:18px;line-height:1;font-weight:620;letter-spacing:-.04em;color:var(--ink)}
.v18-route-value small{font-size:10px;color:var(--ink-faint);min-width:27px;text-align:right}
.v18-empty-route{padding:10px 0;color:var(--ink-faint);font-size:11px}
.v18-review-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding:13px 12px;
 background:color-mix(in srgb,var(--studio-accent) 5%,var(--layer) 95%);border-radius:13px;border:1px solid var(--line)}
.v18-review-line>div{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.v18-review-line strong{font-size:12px;color:var(--ink);font-weight:630;font-variant-numeric:tabular-nums}
.v18-review-line span:last-child{font-size:10px;color:var(--ink-faint)}
.v18-review-glyph{display:block;width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-faint);flex:0 0 8px}
/* Studio palettes: warm, muted, tactile. Accessible text retains theme foreground. */
.v18-palette-studio{padding:14px 0 18px;margin:3px 0 16px;border-bottom:1px solid var(--line)}
.v18-palette-head{display:flex;justify-content:space-between;gap:9px;align-items:center;margin-bottom:11px}
.v18-palette-head strong{font-size:14px;color:var(--ink);font-weight:620}
.v18-palette-head span{color:var(--ink-faint);font-size:10px}
.v18-palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.v18-palette-grid button{min-width:0;min-height:59px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
 padding:8px 5px;border-radius:13px;border:1px solid var(--line);background:var(--layer);color:var(--ink-soft);
 font:inherit;font-size:10px;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.v18-palette-grid button[aria-pressed="true"]{border-color:var(--studio-accent);color:var(--ink);background:color-mix(in srgb,var(--studio-accent) 11%,var(--layer) 89%)}
.v18-swatch{width:34px;height:17px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
 background:linear-gradient(110deg,var(--swatch-a),var(--swatch-b));box-shadow:inset 0 1px #fff3}
body[data-typo] :is(.surface-head h2,.v18-route-label strong,.v18-palette-head strong){text-shadow:none!important}
@media(max-width:370px){.v18-route-label{gap:6px}.v18-route-label>span:last-child{font-size:10px}.v18-route-value{min-width:53px;gap:5px}.v18-period-strip{gap:0;padding:3px}}


/* SILENT RIBBON V19 / LIVING SILK */
/* Telegram WebView fix: painted SVG chips are real colors, not CSS var-based gradients. */
.v18-palette-grid button{min-height:79px;padding:11px 5px;gap:9px;border-radius:15px;touch-action:manipulation}
.v18-palette-grid button[aria-pressed="true"]{outline:1px solid var(--studio-accent);outline-offset:-3px}
.v18-palette-grid .v19-swatch{
 display:block;flex:none;width:60px;height:28px;position:relative;overflow:hidden;
 background-image:none!important;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
 border-radius:11px;box-shadow:inset 0 1px #fff2,0 2px 9px #0002;
}
.v19-swatch svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transform:translateZ(0)}
.v18-palette-grid button:active .v19-swatch{transform:scale(.96)}
/* V19's spatial ribbon changes geometry in JS; CSS handles gentle shading, not fake motion. */
.scene>.signature-wave.v18-silk-wave{will-change:auto;contain:layout style;overflow:hidden!important}
.v18-ribbon-body{opacity:.85}
.v18-ribbon-edge{stroke-width:1.6;opacity:.87}
.v18-ribbon-bottom{stroke-opacity:.26}
.v18-ribbon-halo{opacity:.21}
/* Keep the shimmer as an additional reflection; the cloth itself now moves. */
.v18-ribbon-sheen{opacity:.68}
@media(prefers-reduced-motion:reduce){
 .v18-ribbon-sheen{animation:none!important}
}