/* Yellow accent compatibility for legacy components. */

		:root  {--text-highlight: #896400;--hover-glow-shadow: 0 5px 15px rgba(208, 164, 35, 0.3),
				0 12px 28px rgba(208, 164, 35, 0.45),
				0 18px 45px rgba(208, 164, 35, 0.35);}


		nav a:hover, nav a.active  {box-shadow: 0 5px 15px rgba(208, 164, 35, 0.3);}


		.focus-metric::before  {background:
				radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
				radial-gradient(70% 70% at 80% 80%, rgba(208, 164, 35, 0.25), rgba(208, 164, 35, 0) 60%);}


		.focus-metric-value  {background: linear-gradient(45deg, rgba(208, 164, 35, 1), rgba(255, 225, 132, 1));}


		.focus-metric-bar  {background: linear-gradient(90deg, rgba(208, 164, 35, 0.85), rgba(255, 225, 132, 0.85), rgba(208, 164, 35, 0.85));}


		a.focus-work-pill:hover,
		a.focus-work-pill:focus-visible  {box-shadow: 0 8px 18px rgba(208, 164, 35, 0.18);}


		.hero-highlight::before  {background:
				radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
				radial-gradient(70% 70% at 80% 80%, rgba(208, 164, 35, 0.25), rgba(208, 164, 35, 0) 60%);}


		.hero-highlight-value  {background: linear-gradient(45deg, rgba(208, 164, 35, 1), rgba(255, 225, 132, 1));}


		.hero-highlight-bar  {background: linear-gradient(90deg, rgba(208, 164, 35, 0.85), rgba(255, 225, 132, 0.85), rgba(208, 164, 35, 0.85));}


		.hero-cta-outside .action-btn:hover  {box-shadow:
				0 12px 34px rgba(0,0,0,0.12),
				0 18px 46px rgba(208, 164, 35, 0.24);}


		.about-list li::before  {background: rgba(208, 164, 35, 0.65);}

		.vinyl-core  {box-shadow: 0 2px 8px rgba(208, 164, 35, 0.4);}

		.bgm-track.is-playing  {box-shadow: 0 4px 20px rgba(208, 164, 35, 0.14);}

		.bgm-controls .bgm-play  {box-shadow: 0 4px 14px rgba(208, 164, 35, 0.23);}

		.bgm-controls input[type="range"]::-webkit-slider-thumb  {box-shadow: 0 1px 5px rgba(208, 164, 35, 0.25);}

		.tab-btn.active  {box-shadow: 0 4px 12px rgba(208, 164, 35, 0.2);}


			.tab-container > .tabs  {box-shadow:
					inset 38px 0 34px -34px rgba(208,164,35,0.52),
					inset -38px 0 34px -34px rgba(208,164,35,0.52);}


		/* --- 按鈕樣式 --- */
		.action-btn  {background: linear-gradient(45deg, #896400, #ff9a8b);box-shadow: 0 4px 15px rgba(208, 164, 35, 0.4);}

		.action-btn:hover  {box-shadow: 0 8px 25px rgba(208, 164, 35, 0.6);}


		.contact-btn-floating-wrapper:hover .contact-btn-floating,
		.contact-btn-floating-wrapper:focus-within .contact-btn-floating,
		.contact-btn-floating:hover  {background:
				linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05)),
				rgba(208,164,35,0.95);}


		.lang-toggle-floating:focus-visible  {outline: 3px solid rgba(208, 164, 35, 0.65);}


		.scroll-top-btn:hover  {background:
				linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05)),
				rgba(208,164,35,0.95);}


		.scroll-top-btn:focus-visible  {outline: 3px solid rgba(208, 164, 35, 0.65);}


		.commission-select:hover,
		.commission-select:focus,
		.commission-select-wrap.is-open .commission-select  {border-color: rgba(208,164,35,0.55);box-shadow: 0 0 0 3px rgba(208,164,35,0.12), inset 0 1px 0 rgba(255,255,255,0.75);}


		.commission-select-wrap.is-invalid .commission-select  {border-color: rgba(208,164,35,0.75);box-shadow: 0 0 0 3px rgba(208,164,35,0.16), inset 0 1px 0 rgba(255,255,255,0.75);}


		.commission-option:hover,
		.commission-option:focus,
		.commission-option.is-hovered,
		.commission-options li:hover .commission-option  {background: rgba(208,164,35,0.12);}


		.commission-option.is-selected  {background: rgba(208,164,35,0.16);}


		.commission-field input:focus,
		.commission-field textarea:focus  {border-color: rgba(208,164,35,0.55);box-shadow: 0 0 0 3px rgba(208,164,35,0.12), inset 0 1px 0 rgba(255,255,255,0.75);}

		.social-icons.hero-socials a:hover  {box-shadow:
				0 4px 12px rgba(208, 164, 35, 0.22),
				0 10px 22px rgba(208, 164, 35, 0.22);}


		.custom-tooltip  {box-shadow: 0 5px 15px rgba(208, 164, 35, 0.35);}


		.social-icons a:focus-visible  {outline: 3px solid rgba(208, 164, 35, 0.55);}

				.contact-btn-floating-wrapper .contact-btn-floating.is-commission-active,
				.contact-btn-floating-wrapper:hover .contact-btn-floating.is-commission-active,
				.contact-btn-floating-wrapper .contact-btn-floating.is-commission-active:hover  {box-shadow:
						0 5px 15px rgba(208, 164, 35, 0.3),
						inset 0 1px 0 rgba(255,255,255,0.82),
					inset 0 -1px 0 rgba(255,255,255,0.26);}


		.theme-toggle-floating:focus-visible  {outline: 3px solid rgba(208, 164, 35, 0.65);}


		.entry-gate-seg button[aria-pressed="true"]  {box-shadow: 0 4px 12px rgba(208, 164, 35, 0.35);}


		.entry-gate-seg button:focus-visible,
		.entry-gate-tile:focus-visible,
		.entry-gate-enter:focus-visible  {outline: 3px solid rgba(208, 164, 35, 0.65);}


		.entry-gate-tile:hover,
		.entry-gate-tile:focus-visible  {box-shadow: 0 8px 20px rgba(208, 164, 35, 0.35);}


		html[data-theme="dark"] .focus-metric::before  {background:
				radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,0.1), rgba(255,255,255,0) 55%),
				radial-gradient(70% 70% at 80% 80%, rgba(208, 164, 35, 0.22), rgba(208, 164, 35, 0) 60%);}


		html[data-theme="dark"] .tab-btn.active  {color: #896400;box-shadow: 0 4px 14px rgba(208, 164, 35, 0.3);}


		html[data-theme="dark"] .commission-select:hover,
		html[data-theme="dark"] .commission-select:focus,
		html[data-theme="dark"] .commission-select-wrap.is-open .commission-select,
		html[data-theme="dark"] .commission-field input:focus,
		html[data-theme="dark"] .commission-field textarea:focus  {border-color: rgba(208,164,35,0.6);box-shadow: 0 0 0 3px rgba(208,164,35,0.18), inset 0 1px 0 rgba(255,255,255,0.06);}


		html[data-theme="dark"] .commission-select-wrap.is-invalid .commission-select  {border-color: rgba(208,164,35,0.8);box-shadow: 0 0 0 3px rgba(208,164,35,0.22), inset 0 1px 0 rgba(255,255,255,0.06);}


		html[data-theme="dark"] .commission-option:hover,
		html[data-theme="dark"] .commission-option:focus,
		html[data-theme="dark"] .commission-option.is-hovered,
		html[data-theme="dark"] .commission-options li:hover .commission-option  {background: rgba(208,164,35,0.18);}


		html[data-theme="dark"] .commission-option.is-selected  {background: rgba(208,164,35,0.24);}


		html[data-theme="dark"] .social-icons.hero-socials a:hover  {box-shadow:
				0 4px 12px rgba(208, 164, 35, 0.22),
				0 10px 22px rgba(208, 164, 35, 0.22);}


		html[data-theme="dark"] .entry-gate-tile:hover,
		html[data-theme="dark"] .entry-gate-tile:focus-visible  {box-shadow: 0 8px 20px rgba(208, 164, 35, 0.35);}


		/* 關於我清單裡的作品名稱直接連到網站／Behance */
		.about-list a.about-link  {text-decoration-color: rgba(208, 164, 35, 0.45);}

		html.layout-h .container  {scrollbar-color: rgba(208, 164, 35, 0.55) transparent;}

		html.layout-h .container > .glass-card  {scrollbar-color: rgba(208, 164, 35, 0.5) transparent;}

			0%  {box-shadow: 0 0 0 0 rgba(208, 164, 35, 0), 0 12px 40px rgba(0,0,0,0.14);}

			25%  {box-shadow: 0 0 0 3px rgba(208, 164, 35, 0.85), 0 12px 40px rgba(0,0,0,0.14);}

			100%  {box-shadow: 0 0 0 3px rgba(208, 164, 35, 0), 0 12px 40px rgba(0,0,0,0.14);}

			html.layout-h .container > .h-target-flash  {box-shadow: 0 0 0 3px rgba(208, 164, 35, 0.85);}
/* Dark palette: neutral surfaces, rose accents, explicit shades to avoid muddy blends. */
html[data-theme="dark"] {
  --night-950: #14161c;
  --night-900: #1b1e26;
  --night-850: #222630;
  --night-800: #2b303c;
  --night-700: #3b4252;
  --night-600: #596273;
  --night-400: #9da6b7;
  --night-300: #bdc5d3;
  --night-100: #e1e5ed;
  --night-50: #f4f5f9;
  --rose-950: #39321b;
  --rose-900: #51451f;
  --rose-700: #927522;
  --rose-500: #e4b936;
  --rose-400: #f5cf58;
  --rose-300: #ffe184;
  --rose-100: #fff2bc;
  --glass-bg: var(--night-900);
  --glass-surface: var(--night-850);
  --glass-surface-strong: var(--night-800);
  --glass-border: var(--night-700);
  --glass-border-strong: var(--night-700);
  --text-main: var(--night-100);
  --text-muted: var(--night-300);
  --text-highlight: var(--rose-400);
  --content-panel-bg: var(--night-900);
  --dark-backdrop: linear-gradient(145deg, #191e2b, #14161c 55%, #251c2b);
  --hover-glow-shadow: 0 8px 24px #101218;
  background-color: var(--night-950);
}
html[data-theme="dark"] .glass-card:not(.hero),
html[data-theme="dark"] footer,
html[data-theme="dark"] .hero {
  --text-main: var(--night-100);
  --text-muted: var(--night-300);
  --text-highlight: var(--rose-400);
  --glass-surface: var(--night-850);
  --glass-surface-strong: var(--night-800);
  --glass-border-strong: var(--night-700);
  background: rgba(27,30,38,.68);
  border-color: var(--night-700);
}
html[data-theme="dark"] :is(.glass-card, .focus-card, .focus-metric, .social-icons a)::before {
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 55%);
}
html[data-theme="dark"] .glass-card:not(.hero)::before { background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 55%); }
html[data-theme="dark"] nav a:is(:hover, .active) {
  background: var(--rose-300);
  color: var(--night-950);
}
html[data-theme="dark"] nav a:is(:hover, .active) > span { color: var(--night-950); }
html[data-theme="dark"] .focus-metric-value {
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 55%);
  color: var(--rose-300);
  -webkit-text-fill-color: currentColor;
}
html[data-theme="dark"] :is(.focus-card, .about-card, .focus-metric, .price-details, .sideproj-divider, .entry-gate-tile, .tab-btn) {
  background: rgba(43,48,60,.55);
  border-color: var(--night-700);
}
html[data-theme="dark"] :is(.focus-work-pill, .focus-metric-kicker, .tool-badge) {
  background: var(--night-800);
  color: var(--night-100);
  border-color: var(--night-700);
}
html[data-theme="dark"] :is(.commission-select, .commission-field input, .commission-field textarea, .commission-options, .contact-dropdown, .entry-gate-card) {
  background: rgba(43,48,60,.55);
  color: var(--night-100);
  border-color: var(--night-700);
}
html[data-theme="dark"] :is(.commission-field input, .commission-field textarea)::placeholder {
  color: var(--night-400);
}
html[data-theme="dark"] :is(.commission-option:hover, .commission-option:focus, .commission-option.is-hovered, .commission-option.is-selected),
html[data-theme="dark"] .commission-options li:hover .commission-option {
  background: var(--rose-950);
  color: var(--rose-100);
}
html[data-theme="dark"] :is(nav, .mobile-tools, .lang-toggle-floating, .contact-btn-floating, .scroll-top-btn, .theme-toggle-floating, .layout-toggle-floating) {
  background: rgba(43,48,60,.55);
  color: var(--night-100);
  border-color: var(--night-700);
}
html[data-theme="dark"] :is(.lang-toggle-floating, .contact-btn-floating, .scroll-top-btn, .theme-toggle-floating)::before,
html[data-theme="dark"] :is(.lang-toggle-floating, .contact-btn-floating, .scroll-top-btn, .theme-toggle-floating)::after {
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 55%);
}
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .entry-gate-seg button[aria-pressed="true"] {
  background: var(--rose-300);
  color: var(--night-950);
  box-shadow: none;
}
html[data-theme="dark"] :is(.email-btn:hover, .entry-gate-tile:hover, .entry-gate-tile:focus-visible, .lang-toggle-floating:hover, .scroll-top-btn:hover, .theme-toggle-floating:hover),
html[data-theme="dark"] .contact-btn-floating-wrapper:is(:hover, :focus-within) .contact-btn-floating {
  background: var(--rose-300);
  color: var(--night-950);
}
html[data-theme="dark"] .entry-gate { background: var(--night-950); }
html[data-theme="dark"] .entry-gate-seg { background: rgba(27,30,38,.68); }
html[data-theme="dark"].lang-switching body::after { background: var(--night-950); }
@media (max-width: 768px) {
  html[data-theme="dark"] body::after { background: var(--night-950); }
}

/* Shared yellow identity. Dark gold text stays readable on light glass. */
:root {
 --text-highlight: #896400;
 --page-backdrop: radial-gradient(ellipse at 12% 10%, #fff4b0, transparent 55%), linear-gradient(145deg, #f8d75c, #f4e8b9 60%, #e8c77b);
 --hover-glow-shadow: 0 8px 28px rgba(208,164,35,.25);
}
html[data-theme="dark"] {
 --dark-backdrop: radial-gradient(ellipse at 12% 15%, #414538, transparent 55%), radial-gradient(ellipse at 90% 80%, #45402b, transparent 55%), linear-gradient(145deg,#202b35,#141922);
}
html[data-theme] .glass-card,
html[data-theme] footer {
 backdrop-filter: blur(26px) saturate(115%);
 -webkit-backdrop-filter: blur(26px) saturate(115%);
 box-shadow: 0 16px 40px #00000020, inset 0 1px 0 #ffffff38;
}
html[data-theme="dark"] .glass-card:not(.hero)::before {
 background: linear-gradient(135deg,#ffffff16,transparent 60%);
}
html[data-theme="dark"] :is(.commission-options,.contact-dropdown,.entry-gate-card) {background: #252a31;}
html[data-theme] :is(nav a.active, .tab-btn.active, .entry-gate-seg button[aria-pressed="true"], .bgm-play) {background: #f5cf58; color:#302600;}
html[data-theme] nav a.active > span {color:#302600;}
html[data-theme] :is(.focus-metric-value,.hero-highlight-value) {
 background: none; color:var(--text-highlight); -webkit-text-fill-color:currentColor;
}
html[data-theme] .focus-metric::after {background:linear-gradient(90deg,#c89c25,#ffe184);}
html[data-theme] .about-list a.about-link {text-decoration-color:#c89c25;}
@media(max-width:768px) {html[data-theme="light"] body::after {background:#eee1ae;}}
/* Light theme: white glass first, restrained champagne accents. */
html[data-theme="light"] {
 --page-backdrop: radial-gradient(ellipse at 8% 12%, #f4ecd2, transparent 52%), linear-gradient(145deg,#f1f2f4,#e6e9ef 65%,#eee9dd);
 --text-highlight: #756132;
 --glass-bg: rgba(255,255,255,.62);
 --glass-surface: rgba(255,255,255,.64);
 --glass-surface-strong: rgba(255,255,255,.82);
 --hover-glow-shadow: 0 8px 26px rgba(97,88,64,.16);
}
html[data-theme="light"] .focus-card {
 background: rgba(246,247,249,.60);
 border: 1px solid rgba(255,255,255,.92);
}
html[data-theme="light"] :is(.focus-work-pill,.focus-metric-kicker,.tool-badge) {
 background: #fff;
 color: #53565d;
 border: 1px solid #e0e2e7;
 box-shadow: 0 2px 5px #2029380a;
}
html[data-theme="light"] .focus-metric {
 background: rgba(255,255,255,.88);
 border-color: #fff;
}
html[data-theme="light"] :is(nav a.active,.tab-btn.active,.entry-gate-seg button[aria-pressed="true"],.bgm-play) {
 background:#ecdaa1;
 color:#453b24;
}
html[data-theme="light"] .focus-metric::after {background:linear-gradient(90deg,#c5ad70,#e9dba9);}
@media(max-width:768px) {html[data-theme="light"] body::after {background:#e9eaf0;}}
/* Consistent clear glass throughout the light theme. */
html[data-theme="light"] {
 --page-backdrop: radial-gradient(ellipse at 0% 0%,#f7edcf,transparent 48%),linear-gradient(135deg,#f4f3ef,#eeeff1);
 --glass-surface: rgba(255,255,255,.46);
 --glass-surface-strong: rgba(255,255,255,.78);
 --glass-border-strong: #d8d8d3;
}
html[data-theme="light"] .glass-card,
html[data-theme="light"] #focus,
html[data-theme="light"] footer {
 background: rgba(255,255,255,.42);
 border:1px solid #ffffffd9;
 box-shadow:0 8px 24px #302c2010,inset 0 1px 0 #fff;
}
html[data-theme="light"] :is(.focus-card,.about-card,.sideproj-divider,.price-details) {
 background: rgba(243,242,237,.62);
 border:1px solid #d5d5ce;
 box-shadow:0 3px 10px #302c2008,inset 0 1px 0 #ffffff;
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
}
html[data-theme="light"] :is(.focus-card,.about-card)::before {background:none;}
html[data-theme="light"] :is(.focus-work-pill,.focus-metric-kicker,.tool-badge) {
 background:#fff;
 color:#454741;
 border:1px solid #c8cbc3;
 box-shadow:0 1px 2px #302c200c;
}
html[data-theme="light"] .focus-metric {
 background:rgba(255,255,255,.95);
 border:1px solid #d5d5ce;
 box-shadow:0 2px 6px #302c2008;
}
html[data-theme="light"] .focus-metric::before {background:none;}
html[data-theme="light"] :is(.commission-select,.commission-field input,.commission-field textarea) {
 background:#ffffffd9;
 border-color:#c8cbc3;
 box-shadow:inset 0 1px 2px #302c2008;
}
@media(max-width:768px) {html[data-theme="light"] body::after {background:#eeefeb;}}
/* Scroll-edge hints belong to the mobile tab strip only. */
@media (min-width:769px) {
 .tab-container > .tabs {box-shadow:none;}
}
.about-card {
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
@media (hover:hover) and (pointer:fine) {
 html[data-theme="light"] .about-card:hover {
  transform:translateY(-4px);
  border-color:#c7ad68;
  box-shadow:0 10px 24px #59491e18,inset 0 1px 0 #fff;
 }
 html[data-theme="dark"] .about-card:hover {
  transform:translateY(-4px);
  border-color:#bda354;
  box-shadow:0 10px 24px #00000038,inset 0 1px 0 #ffffff20;
 }
}
html[data-theme] .about-card:focus-within {border-color:#bda354;}
@media (prefers-reduced-motion:reduce) {
 .about-card {transition:none;}
 html[data-theme] .about-card:hover {transform:none;}
}
/* Rounded title markers retain the original 5px width and 20px text offset. */
.section-title {
 position:relative;
 border-left:0;
 padding-left:20px;
}
.section-title::before {
 content:"";
 position:absolute;
 left:0;
 top:0;
 bottom:0;
 width:5px;
 border-radius:999px;
 background:var(--text-highlight);
}
/* Size the metric fill directly so short bars keep fully rounded ends. */
.focus-metric-bar {
 right:auto;
 width:calc((100% - 20px) * var(--bar-scale,1));
 transform:none;
 border-radius:999px;
}
/* Link names and their nested strong labels share one interaction color. */
html[data-theme] .about-list a.about-link {
 text-decoration:none;
}
html[data-theme] .about-list a.about-link:is(:hover,:focus-visible) {
 color:var(--text-highlight);
 text-decoration:underline;
 text-decoration-color:currentColor;
}
html[data-theme] .about-list a.about-link:is(:hover,:focus-visible) :is(strong,span,i) {
 color:inherit;
}
/* Desktop horizontal view: four tools share one row to the right of navigation. */
@media (min-width:769px) {
 html.layout-h .contact-btn-floating-wrapper {top:20px;right:calc(var(--fab-right) + 186px);bottom:auto;}
 html.layout-h .lang-toggle-floating {top:20px;right:calc(var(--fab-right) + 124px);bottom:auto;}
 html.layout-h .theme-toggle-floating {top:20px;right:calc(var(--fab-right) + 62px);bottom:auto;}
 html.layout-h .layout-toggle-floating {top:20px;right:var(--fab-right);bottom:auto;}
 html.layout-h nav {
  left:18px;
  transform:translateZ(0);
  max-width:calc(100vw - 294px);
  overflow-x:auto;
  scrollbar-width:none;
 }
 html.layout-h nav::-webkit-scrollbar {display:none;}
}
/* Center every horizontal card, including the narrower first and last cards. */
html.layout-h .container {
 padding-left: var(--h-pad);
 padding-right: max(var(--h-pad), calc((100vw - var(--h-hero-col)) / 2));
 scroll-padding-inline: 0;
}
html.layout-h .container > .glass-card {scroll-snap-align:center;}

html.layout-h .container > #hero {scroll-snap-align:start;scroll-margin-left:var(--h-pad);}
/* Mobile remains a native two-axis touch surface with smooth snapping. */
@media (max-width:768px) {
 html.layout-h .container {scroll-behavior:smooth;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch;}
 html.layout-h .container > .glass-card {touch-action:pan-x pan-y pinch-zoom;scroll-snap-stop:always;-webkit-overflow-scrolling:touch;}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce) {
 html.layout-h .container {scroll-behavior:auto;}
}
/* Four tall desktop service cards use the available vertical space. */
@media (min-width:769px) {
 html.layout-h #focus {display:flex;flex-direction:column;}
 html.layout-h #focus .section-title {align-self:flex-start;flex-shrink:0;}
 html.layout-h #focus .focus-grid {grid-template-columns:repeat(2,minmax(0,1fr));flex:0 0 auto;align-items:stretch;}
 html.layout-h #focus .focus-card {min-height:0;padding:18px 12px;}
 html.layout-h #focus .focus-metric {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:8px;padding:12px 10px 22px;}
 html.layout-h #focus .focus-metric-value {grid-column:1;grid-row:1;}
 html.layout-h #focus .focus-metric-label {grid-column:1;grid-row:2;}
 html.layout-h #focus .focus-metric-kicker {grid-column:1;grid-row:3;justify-self:start;}
}

/* Desktop horizontal portfolio previews fit inside one panel. */
@media (min-width:769px) {
 html.layout-h :is(#web,#animation,#graphic,#vfx) {display:flex;flex-direction:column;}
 html.layout-h :is(#web,#animation,#graphic,#vfx) > :is(.section-title,.tabs) {flex-shrink:0;}
 html.layout-h .portfolio-fit-stage {flex:1;min-height:0;overflow:hidden;}
 html.layout-h .portfolio-fit-content {margin-inline:auto;}
 html.layout-h #animation .portfolio-fit-content > .grid-2 {display:block;margin:0 !important;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:not(:has(.tab-content.active)) {display:none;}
 html.layout-h #graphic .tab-content img {max-height:150px;object-fit:contain;}
}

@media (min-width:769px) {
 html.layout-h #animation .portfolio-fit-content > .grid-2:last-child > .tab-content.active {display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:last-child > .tab-content > div:first-child {grid-column:1;grid-row:1;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:last-child > .tab-content > .price-content {grid-column:1;grid-row:2;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:last-child > .tab-content > div:last-child {grid-column:2;grid-row:1 / 3;margin-top:0 !important;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:last-child .embed-container {margin-top:0 !important;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:last-child .drive-embed {height:clamp(180px,38vh,360px) !important;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:last-child .action-btn {top:0 !important;margin-bottom:8px !important;}
}

@media (min-width:769px) {
 html.layout-h #focus .focus-metric {grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;}
 html.layout-h #focus .focus-metric-kicker {grid-column:2;grid-row:1 / 3;align-self:center;}
}

/* Fill the focus panel with two equal rows instead of leaving an empty lower half. */
@media (min-width:769px) {
 html.layout-h #focus .portfolio-fit-content {height:100%;}
 html.layout-h #focus .focus-grid {height:100%;grid-template-rows:repeat(2,minmax(0,1fr));}
 html.layout-h #focus .focus-card {min-height:0;}
}