/* Shared portfolio-skin rules; theme-variants.css adds the blue and blossom palettes.
   The original practice skin remains available for direct comparison. */
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) {
  --ink: #17382f;
  --muted: #6c706a;
  --navy: #151d1b;
  --line: #e4ddd0;
  --mint: #a9e5d2;
  --lilac: #c8a778;
  --orange: #e97050;
  --paper: #fcfaf6;
  --surface: #ffffff;
  --forest: #155b46;
  --sage: #b8e8d6;
  --brass: #c8a778;
  --gold-metal: linear-gradient(115deg, #b18f66, #e6d0aa 45%, #c19c6b);
  --blue: #a5daf2;
  --clay: #e97050;
  color-scheme: light;
  scrollbar-color: #6a7c64 #e5e1d5;
}

html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) body { background: var(--paper); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) ::selection { background: #c5d0b8; color: #20382c; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :focus-visible { outline-color: #94723f; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .skip { background: var(--surface); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .button-black { background: #173b31; color: #fff; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .button-black:hover { background: #0c7354; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .button-soft { background: #f0eee8; color: var(--forest); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .button-soft:hover { background: #d9f0e9; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .nav-shell { filter: drop-shadow(0 14px 25px rgba(39, 53, 37, .065)); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.nav-main,.nav-actions) { background: rgba(255, 255, 255, .96); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .menu-button span { background: var(--forest); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .nav-dropdown { background: var(--surface); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .nav-dropdown a:hover { color: #8c693a; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .nav-dropdown .nav-detail { background: #def2ec; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .nav-detail p { color: #66705e; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .nav-overlay { background: rgba(35, 52, 39, .17); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.mobile-nav-list button,.mobile-nav-list>a) { border-color: var(--line); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .wordmark img { display: none; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .wordmark { display: block; font-size: 20px; letter-spacing: .08em; font-weight: 500; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .wordmark small { display: block; margin-top: 6px; font: 400 8px/1 var(--mono); letter-spacing: .24em; color: #7d806f; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-symbol { display: none; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-top>a::after { content: 'DESIGN / PORTFOLIO'; font: 500 12px var(--mono); letter-spacing: .1em; color: var(--forest); }

html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero { height: 770px; background: radial-gradient(ellipse at 74% 42%, #fff, #fcfaf6 80%); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-inner { height: 665px; grid-template-columns: .86fr 1.14fr; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero h1 { white-space: normal; font-size: clamp(42px, 4.3vw, 66px); line-height: 1.2; letter-spacing: -.045em; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero h1 span { display: block; color: #213d2f; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-copy::before { content: 'DESIGN PORTFOLIO'; display: block; margin-bottom: 24px; font: 500 11px var(--mono); letter-spacing: .25em; color: #a88162; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-copy>p { color: #77796f; font-size: 21px; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-actions .button { border-radius: 28px; min-height: 48px; padding: 13px 25px; font-size: 13px; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-actions .button-black { background: #173b31; color: #fff; box-shadow: 0 8px 18px #173b311b; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-actions .button-black:hover { background: #0c7354; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-actions .button-soft { background: transparent; border: 1px solid #d9ceba; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-art { max-width: 660px; width: 88%; margin-left: auto; margin-right: 0; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.hero-art img,.closing-background) { filter: none; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-art img { object-fit: contain; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .logo-track .tool-logo { color: #344331; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .logo-window { mask-image: none; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .marquee-pause { color: #67735e; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-blue { background: #92d9f8; color: #124663; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-pink { background: #086e53; color: #fff; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-peach { background: #ffb99e; color: #703829; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .tag { background: rgba(52, 66, 42, .05); border-color: rgba(52, 66, 42, .09); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-card>p { color: #5d6857; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-blue>p { color: #285f7d; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-pink>p { color: #e2e8d4; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-pink .tag { background: #ffffff12; border-color: #f5e5b52e; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-peach>p { color: #804936; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-blue::after { background: #f06f4e; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .stat-pink::after { background: #6ec9ef; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card::after { background: #e8f4ee; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.stat-card:first-child::before,.stat-card:last-child::after) { background: var(--paper); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .section-rule i { background: #dfdfd1; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud { background: linear-gradient(#fcfaf6, #f8f8f3 30%, #dff2ee); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud-tabs button { background: var(--surface); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud-tabs button[aria-selected="true"] { background: #14694f; color: #fff; box-shadow: inset 0 -3px #c2a475; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud-tabs button:not([aria-selected="true"]):hover { background: #dae2ce; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud-panel { background: var(--surface); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .feature-trigger { color: #69715f; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .feature-trigger[aria-expanded="true"] { color: #263a2d; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .feature-icon { background: #eae8dd; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .feature-trigger[aria-expanded="true"] .feature-icon { background: #a9e5d2; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud:has([data-tab="compute"][aria-selected="true"]) .feature-trigger[aria-expanded="true"] .feature-icon { background: #ffd4bd; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud:has([data-tab="shaping"][aria-selected="true"]) .feature-trigger[aria-expanded="true"] .feature-icon { background: #b9e7f7; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .feature-icon img { filter: none; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .feature-description p { color: #697061; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.feature-visual,.feature-visual>#feature-video) { background: #e3f2ee; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .feature-visual>img[src*="/feature-"] { filter: none; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .sandbox-code { background: #203429; color: #edeedf; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .sandbox-code>div { border-color: #50624e; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .sandbox-code button { background: #3a513d; color: #f5f3e7; }

html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research { color: #f6f2e7; background: linear-gradient(#0b1f1bb8,#0b1f1bc9),url('assets/portfolio-ink-marble.png') center / cover no-repeat; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-heading p { color: #c0c9b5; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .arrow-controls button { background: #324b38; color: #d3ddc6; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .arrow-controls button:hover { background: #506649; color: #fff8e7; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card { background: #08523f; border-top: 3px solid #90ddc6; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card:nth-child(3n + 2) { background: #164f75; border-top-color: #72c7ee; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card:nth-child(3n) { background: #864939; border-top-color: #f09a79; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card:hover { background: #425b41; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card::before { background: linear-gradient(140deg, #bd843826, transparent); filter: none; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card .tag { background: #4a5c40; color: #f0e9d5; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-card .authors { color: #c2ceb5; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-logos img+img { border-color: #5b7055; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-logos img { filter: sepia(.65) hue-rotate(20deg); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .story-card { background: #26382b; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .story-card::after { background: linear-gradient(transparent, rgba(17, 37, 25, .8)); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .play-story { background: rgba(31, 57, 39, .6); color: #faf4e7; border-color: #ded6bf; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .news-small { border-color: #dbd9cc; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.news-feature p,.news-small p) { color: #697061; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .closing { background: linear-gradient(#fcfaf6, #eff4ef); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .closing-background { width: 78%; height: auto; min-height: 0; top: 120px; right: -14%; left: auto; bottom: auto; object-fit: contain; opacity: .95; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-card { background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .68); border-top: 2px solid #24644d; backdrop-filter: blur(22px) saturate(1.12); box-shadow: 0 24px 72px rgba(12, 39, 28, .12); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-column { border-color: #deddd0; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.footer-column h3,.footer-bottom p) { color: #6c715e; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-bottom>div { color: #58674f; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-wordmark { color: #254c3c; opacity: .85; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-wordmark { font-size: clamp(84px, 12vw, 200px); line-height: 1.12; margin-left: 22%; margin-bottom: 64px; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-bottom { padding-top: 18px; border-top: 1px solid rgba(31, 65, 50, .15); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .social-links img { filter: sepia(.6) hue-rotate(45deg); }

html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) dialog::backdrop { background: rgba(24, 41, 30, .73); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .video-dialog { background: #20382c; color: #f5f0e5; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .video-dialog p { color: #c4cfb9; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cookie-dialog { background: var(--surface); color: var(--ink); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cookie-dialog p { color: #697061; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cookie-dialog label { border-color: var(--line); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) input { accent-color: var(--forest); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-dialog { background: var(--surface); color: var(--ink); border-color: #cecdbd; box-shadow: 0 30px 100px rgba(20, 40, 26, .3); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-header { background: #fff; border-bottom: 2px solid #d3b283; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-eyebrow { color: #63705a; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-close { color: var(--forest); background: #ececdf; border-color: #d7d9c6; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-close:hover { background: #d7dfc9; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.portfolio-close,.portfolio-scroll,.portfolio-scroll-track):focus-visible { outline-color: #927143; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-scroll { background: #fff; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-scroll-track { background: #e5f1ed; border-color: #c8ded5; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-scroll-thumb { background: #188363; border: 1px solid #0c6047; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.portfolio-scroll-track:hover,.portfolio-scroll-track:focus-visible,.portfolio-scroll-track.dragging) .portfolio-scroll-thumb { background: #0d5a45; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.portfolio-loading,.portfolio-markdown p,.portfolio-markdown li) { color: #626c59; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-markdown strong { color: var(--ink); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-markdown a { color: #995136; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-markdown blockquote { background: #e3f3fa; border-color: #df9874; color: #345361; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-markdown hr { border-color: #dedfce; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.portfolio-markdown figure img,.portfolio-markdown figure video) { background: #e4e8d9; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .portfolio-markdown figcaption { color: #65715a; }

/* Floating skin selector inherits the active page palette. */
.skin-switcher { position: fixed; right: 22px; bottom: 22px; z-index: 60; font: 400 13px/1.4 var(--sans); color: var(--ink); }
.skin-toggle { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 16px; margin-left: auto; background: #fff; border: 1px solid #dedeee; border-radius: 24px; box-shadow: 0 5px 24px rgba(25, 30, 50, .15); }
.skin-toggle-label { font-size: 11px; color: #686876; }
.skin-toggle strong { font-weight: 500; }
.skin-swatches { display: flex; align-items: center; padding-right: 2px; }
.skin-swatches i { display: block; width: 14px; height: 14px; margin-right: -4px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; }
.skin-swatches i:nth-child(1) { background: #f2efe7; }
.skin-swatches i:nth-child(2) { background: #293f30; }
.skin-swatches i:nth-child(3) { background: #b49a70; }
.skin-options { width: 242px; padding: 18px; margin-bottom: 10px; border-radius: 12px; border: 1px solid #e1e1ea; background: #fff; box-shadow: 0 12px 42px rgba(25, 30, 50, .15); }
.skin-options p { font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.skin-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px; border: 1px solid #e0e0e9; border-radius: 6px; text-align: left; background: #fafafa; }
.skin-option+.skin-option { margin-top: 8px; }
.skin-option[aria-pressed="true"] { border-color: #6a628a; background: #efedf6; box-shadow: inset 0 0 0 1px #6a628a; }
.skin-option[aria-pressed="true"]::after { content: '已选'; margin-left: auto; font-size: 10px; }
.skin-chip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.skin-chip-forest { background: conic-gradient(#254d3d 0 35%, #e5b869 35% 68%, #d1e7f6 68% 100%); }
.skin-chip-original { background: linear-gradient(135deg, #dff0ff 50%, #bdbbff 50%); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) :is(.skin-toggle,.skin-options) { background: #f8f5ed; border-color: #cfd3c0; box-shadow: 0 8px 32px rgba(31, 51, 32, .17); }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .skin-toggle-label { color: #69715f; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .skin-option { background: #efeee3; border-color: #d9d9c9; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .skin-option[aria-pressed="true"] { background: #e8f5f1; border-color: #2b9c78; box-shadow: inset 0 0 0 1px #2b9c78; }
@media(min-width:1700px) { html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero { height: 830px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-inner { height: 725px; } }
@media(max-width:991px) and (min-width:768px) { html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero { height: 680px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-inner { height: 570px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero h1 { font-size: 40px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-copy>p { font-size: 16px; } }
@media(max-width:767px) { html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero { height: 100dvh; min-height: 0; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-inner { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); height: calc(100% - 88px); padding-top: 105px; gap: 0; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-copy::before { margin-bottom: 15px; font-size: 9px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero h1 { font-size: clamp(30px, 8.2vw, 43px); } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-copy>p { font-size: 15px; margin-top: 12px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-actions { margin-top: 18px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-art { width: min(92%, 400px); height: 100%; min-height: 0; max-width: none; margin: 0 auto; display: flex; align-items: end; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-art img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .trust-strip { height: 88px; margin: 0 20px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .wordmark { font-size: 18px; } html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .closing-background { width: 120%; top: 210px; right: -38%; } }
@media(max-width:767px) { .skin-switcher { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .skin-toggle { min-height: 44px; padding: 9px 13px; } .skin-options { width: min(242px, calc(100vw - 24px)); } }
@media(max-width:767px) { html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero-art { padding-bottom: 16px; } }
@media(max-width:767px) { html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-wordmark { font-size: clamp(44px, 14vw, 75px); margin: 52px 0 36px; } }