/* 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;}
}

@media (min-width:769px) {
}

@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;}
}

/* Keep service hover shadows outside the fitted content; one clean metric surface. */
@media (min-width:769px) {
 html.layout-h #focus .portfolio-fit-stage {overflow:visible;}
}
#focus .focus-metric {backdrop-filter:none;-webkit-backdrop-filter:none;}
#focus .focus-metric::before {content:none;}

.price-details-static .price-heading {margin:0;text-align:center;padding:10px 16px;font-size:1rem;}
.price-details-static > .price-content {max-height:none;opacity:1;transform:none;transition:none;padding:15px 0 24px;margin-top:10px;border-top:1px solid var(--glass-border-strong);overflow:visible;}

.discord-invite-bubble {background:#f5cf58;color:#302600;}
.discord-invite-bubble::after {border-top-color:#f5cf58;}
.discord-profile-open:hover,.discord-profile-copy:hover {color:var(--text-highlight);}
.discord-id-note {font-size:0.7rem;line-height:1.6;opacity:0.7;margin:10px 0 0;text-align:center;max-width:340px;overflow-wrap:anywhere;}
@media (min-width:769px) {
 html.layout-h #graphic .portfolio-fit-stage {overflow:visible;}
 html.layout-h #graphic .portfolio-fit-content {padding:8px;box-sizing:border-box;}
 html.layout-h #graphic .video-grid {max-width:none;gap:16px;}
 html.layout-h #graphic .tab-content img {max-height:none;}
 html.layout-h #graphic .graphic-thumbnails-panel.active {height:100%;}
 html.layout-h #graphic .graphic-thumbnails-panel .video-grid {height:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));}
 html.layout-h #graphic .graphic-thumbnails-panel .video-grid a {min-height:0;height:100%;display:flex;align-items:center;}
 html.layout-h #graphic .graphic-thumbnails-panel .video-grid img {height:auto;max-height:100%;object-fit:contain;}
 html.layout-h #animation .portfolio-fit-content > .grid-2:has(.animation-template-panel.active,.animation-intro-panel.active) {height:100%;}
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel).active {display:flex !important;flex-direction:column;height:100%;gap:10px;}
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel) > .price-content {display:none;}
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel) > div:not(.price-content) {flex:1;min-height:0;margin:0 !important;display:flex;flex-direction:column;align-items:center;}
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel) .embed-container {flex:1;min-height:0;height:auto !important;width:100%;aspect-ratio:auto;padding:0 !important;margin:0 !important;}
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel) .drive-embed {height:100% !important;min-height:0;}
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel) .action-btn {flex-shrink:0;top:0 !important;margin:8px 0 0 !important;}
}

@media (min-width:769px) {
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel) .embed-container {display:block;}
 html.layout-h #animation :is(.animation-template-panel,.animation-intro-panel) iframe {position:absolute;inset:0;width:100%;height:100% !important;aspect-ratio:auto !important;}
}

.focus-preview {contain:size;grid-column:1 / -1;grid-row:4;display:block;position:relative;min-height:0;overflow:hidden;border-radius:12px;background:#131922;color:#fff;isolation:isolate;}
.focus-preview img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.focus-preview:hover img {transform:scale(1.035);}
.focus-preview-caption {position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:24px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:.75rem;}
#focus .focus-card-stat {grid-row:5;}
@media (min-width:769px) {
 html.layout-h #focus .focus-card {grid-template-rows:auto auto auto minmax(80px,1fr) auto;}
 html.layout-h #web .portfolio-fit-content {height:100%;}
 html.layout-h #web .tab-content.active {height:100%;display:flex !important;flex-direction:column;align-items:center;gap:8px;}
 html.layout-h #web .tab-content h3 {margin-bottom:4px !important;flex-shrink:0;}
 html.layout-h #web .site-embed {flex:1;width:100%;height:auto;min-height:0;margin:0;}
 html.layout-h #web .site-embed iframe {height:100%;}
 html.layout-h #web .tab-content > :is(p,a) {flex-shrink:0;margin-block:0 !important;}
}
@media (max-width:768px) {.focus-preview {height:150px;}}
html:not(.layout-h) .focus-preview {height:160px;}

#focus .focus-uiux-work {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;}
#focus .focus-uiux-work .focus-work-pill {min-width:0;max-width:100%;justify-self:start;}

#focus .focus-music-work {display:flex;flex-wrap:nowrap;gap:5px;}
#focus .focus-music-work .focus-work-pill {min-width:0;flex:0 1 auto;max-width:100%;}
@media (min-width:769px) {
 html.layout-h nav {left:50%;transform:translateX(-50%) translateZ(0);max-width:calc(100vw - 584px);}
 html.layout-h #animation .portfolio-fit-stage {overflow:visible;}
 html.layout-h #animation .portfolio-fit-content:has(.animation-intro-panel.active) {padding:8px 8px 18px;box-sizing:border-box;}
 html.layout-h #animation .animation-intro-panel.active {gap:16px;}
 html.layout-h #animation .animation-intro-panel > div.animation-stacked-previews {width:100%;align-self:stretch;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;}
 html.layout-h #animation .animation-intro-panel .animation-stacked-previews > .embed-container {height:100% !important;}
 html.layout-h #animation .animation-intro-panel > div.animation-actions {width:100%;align-self:stretch;flex:0 0 auto;display:flex;flex-direction:row;justify-content:center;flex-wrap:nowrap;gap:12px;padding:0 12px 12px;}
 html.layout-h #animation .animation-intro-panel .animation-actions .action-btn {margin:0 !important;width:auto;}
}
@media (max-width:768px) {
 .animation-stacked-previews > .embed-container {margin-bottom:18px;}
 .animation-stacked-previews .drive-embed {height:360px;}
 .animation-actions {display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:18px;}
 .animation-actions .action-btn {margin:0 !important;top:0 !important;}
 #focus .focus-music-work .focus-work-pill {font-size:.62rem;padding-inline:5px;gap:4px;}
 #focus .focus-music-work .focus-brand-icon {width:14px;height:14px;flex-shrink:0;}
}

/* Let fitted previews cast shadows into the panel gutter. */
@media (min-width:769px) {
 html.layout-h .portfolio-fit-stage {overflow:visible;}
}
html.layout-h .container > .tab-container {padding-bottom:36px !important;scroll-padding-block:28px;}
html.layout-h .action-btn {scroll-margin:28px 18px;}

/* Store links are outside the embedded media clipping boundary. */
#uiux .embed-container:has(> .valki-stores) {overflow:visible;}

/* Behance stays masked until its real frame load; avoid translated frame edges. */
iframe[data-behance-src] {opacity:0;transform:none !important;transition:opacity .25s ease !important;will-change:auto !important;}
iframe[data-behance-src].behance-iframe-loaded {opacity:1;}
:is(.iframely-responsive,.behance-square,.embed-container):has(> iframe[data-behance-src]) {position:relative;isolation:isolate;}
:is(.iframely-responsive,.behance-square,.embed-container).behance-loading::after {background:var(--bg-color,#20242c);transition:none;}
:is(.iframely-responsive,.behance-square,.embed-container).behance-loaded::after {transition:opacity .25s ease;}
:is(.iframely-responsive,.behance-square,.embed-container).behance-loaded::before {content:none;}

/* The normal page flow also needs a shared action row, without inline baselines. */
html:not(.layout-h) .animation-actions {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px;padding:16px 20px 28px;}
html:not(.layout-h) .animation-actions > .action-btn {margin:0 !important;top:0 !important;max-width:100%;box-sizing:border-box;}
@media (max-width:768px) {
 html:not(.layout-h) .animation-actions {flex-direction:column;}
}

/* Wrap complete work pills before wrapping their labels. */
#focus :is(.focus-uiux-work,.focus-music-work) {display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;}
#focus .focus-work-list .focus-work-pill {flex:0 0 auto;width:max-content;max-width:100%;box-sizing:border-box;word-break:normal;overflow-wrap:normal;}
#focus .focus-work-pill > span {word-break:normal;overflow-wrap:normal;}
#focus .focus-card p .text-phrase {display:inline;word-break:normal;overflow-wrap:normal;}

@media (min-width:769px) {
 html:not(.layout-h) #focus .focus-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Keep the Figma document stationary and masked throughout network loading. */
iframe[data-figma-src] {opacity:0;transform:none !important;transition:opacity .25s ease !important;will-change:auto !important;}
iframe[data-figma-src].figma-iframe-loaded {opacity:1;}
:is(.figma-embed,.embed-container):has(> iframe[data-figma-src]) {position:relative;isolation:isolate;}
:is(.figma-embed,.embed-container).figma-loading::after {content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:var(--bg-color,#20242c);pointer-events:none;}
:is(.figma-embed,.embed-container).figma-loading::before {content:attr(data-yt-loading-text);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.42);color:#fff;font-size:.95rem;white-space:nowrap;pointer-events:none;}

/* Vertical service cards: use the preview row, rather than leaving a gap above metrics. */
html:not(.layout-h) #focus .focus-preview {height:auto;min-height:160px;align-self:stretch;}
@media (min-width:769px) {
 html:not(.layout-h) #focus :is(.focus-uiux-work,.focus-web-work) {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);width:100%;align-items:start;gap:8px;}
}
.price-details-static > .price-content {border-top:0;margin-top:0;padding-top:0;}
.drive-open-btn {min-width:0 !important;width:auto !important;padding-inline:24px;}
html[data-theme="light"] .section-title::before {background:#ecdaa1;}

.entry-horizontal-guide {display:none;text-align:left;padding:12px 16px;border:1px solid var(--glass-border-strong);border-radius:16px;background:var(--glass-surface);font-size:.8rem;line-height:1.65;}
.entry-horizontal-guide ul {margin:6px 0 0;padding-left:20px;}
@media (min-width:769px) {html.layout-h .entry-horizontal-guide {display:block;}}

/* Real flexible rows: expanding one image pushes its neighbours aside. */
@media (min-width:769px) {
 #graphic .graphic-image-rows {display:flex;flex-direction:column;gap:18px;max-width:none;width:100%;}
 #graphic .graphic-image-row {display:flex;width:100%;align-items:center;gap:16px;min-height:0;height:clamp(220px,32vw,500px);}
 #graphic .graphic-image-item {display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;height:100%;transition:flex-grow .35s cubic-bezier(.22,1,.36,1);}
 #graphic .graphic-image-item img {display:block;width:100%;height:auto;max-height:100%;aspect-ratio:auto;object-fit:contain;transform:none !important;box-shadow:none !important;}
 html.layout-h #graphic .portfolio-fit-content {height:100%;padding:16px;box-sizing:border-box;}
 html.layout-h #graphic .tab-content.active {display:flex !important;flex-direction:column;justify-content:center;height:100%;min-height:0;}
 html.layout-h #graphic .graphic-image-rows {height:100%;justify-content:center;}
 html.layout-h #graphic .graphic-image-row {flex:1 1 0;height:auto;transition:flex-grow .35s cubic-bezier(.22,1,.36,1);}
 html.layout-h #graphic .graphic-image-item {grid-column:auto !important;grid-row:auto !important;}
 html.layout-h #graphic .tab-content.active:has(iframe[data-behance-src]) > .embed-container {display:block;width:100%;height:100%;margin:0;}
 html.layout-h #graphic .embed-container:has(iframe[data-behance-src]) > .iframely-embed {width:100%;max-width:100%;height:100%;}
 html.layout-h #graphic .iframely-responsive:has(> iframe[data-behance-src]) {height:100% !important;}
 .desktop-tools {position:fixed;top:20px;right:var(--fab-right);display:flex;align-items:center;gap:10px;z-index:1302;}
 html.layout-h .desktop-tools > :is(button,.contact-btn-floating-wrapper) {position:relative !important;inset:auto !important;flex-shrink:0;}
 html.layout-h .desktop-tools .contact-btn-floating-wrapper {display:flex;}
 html.layout-h:has(.desktop-tools:hover,.desktop-tools:focus-within) nav {max-width:max(160px,calc(100vw - 860px));}
}
@media (min-width:769px) and (hover:hover) and (pointer:fine) {
 #graphic .graphic-image-item:hover {flex-grow:1.65;}
 html.layout-h #graphic .graphic-image-row:hover {flex-grow:1.6;}
}
@media (max-width:768px) {
 #graphic .graphic-image-row {display:contents;}
}
html:not(.layout-h) #graphic .iframely-responsive:has(> iframe[data-behance-src]) {height:clamp(420px,72vh,900px) !important;}
@media (max-width:768px) {html.layout-h #graphic .iframely-responsive:has(> iframe[data-behance-src]) {height:72svh !important;min-height:420px;}}
html[data-theme] :is(.lang-toggle-floating:hover,.theme-toggle-floating:hover,.contact-btn-floating-wrapper:hover .contact-btn-floating) {background:#f5cf58;color:#302600;backdrop-filter:none;-webkit-backdrop-filter:none;}
html[data-theme] :is(.lang-toggle-floating:hover,.theme-toggle-floating:hover,.contact-btn-floating-wrapper:hover .contact-btn-floating) :is(i,span) {color:inherit;}
@media (prefers-reduced-motion:reduce) {#graphic :is(.graphic-image-row,.graphic-image-item) {transition:none;}}

html[data-theme="light"] .focus-metric-bar {background:#ecdaa1;}

@media (min-width:769px) {
 #graphic .graphic-image-item {position:relative;}
 #graphic .graphic-image-item img {position:absolute;inset:auto;left:50%;top:50%;width:auto;height:auto !important;max-width:100% !important;max-height:100% !important;object-fit:contain;transform:translate(-50%,-50%) !important;}
}

/* YouTube: a rotating loader and a stationary frame fade-in. */
iframe[data-youtube-src] {opacity:0;transform:none !important;transition:opacity .32s ease;}
iframe[data-youtube-src].yt-iframe-loaded {opacity:1;}
.embed-container:is(.yt-loading,.yt-loaded)::before {content:none;}
.embed-container.yt-loading::after {background:#171b23;}
.yt-loading-status {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;color:#f4f5f7;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.2);font-size:.9rem;white-space:nowrap;pointer-events:none;transition:opacity .32s ease;}
.yt-loading-ring {display:block;flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border:2px solid rgba(245,207,88,.22);border-top-color:#f5cf58;border-radius:50%;animation:ytLoaderSpin .85s linear infinite;}
.yt-loading-label {animation:ytLoaderBreathe 1.4s ease-in-out infinite;}
.yt-loaded .yt-loading-status {opacity:0;}
@keyframes ytLoaderSpin {to {transform:rotate(360deg);}}
@keyframes ytLoaderBreathe {50% {opacity:.6;}}
@media (prefers-reduced-motion:reduce) {
 .yt-loading-ring,.yt-loading-label {animation:none;}
 .yt-loading-status,iframe[data-youtube-src] {transition:none;}
}

.site-preview-note {margin:10px auto 0;max-width:64ch;width:100%;font-size:.78rem;line-height:1.6;opacity:.75;text-align:center;text-wrap:pretty;flex-shrink:0;}

/* Keep every loading layer mounted while it fades; only opacity changes. */
iframe:is([data-youtube-src],[data-behance-src],[data-figma-src]) {transition:opacity .7s cubic-bezier(.4,0,.2,1) !important;}
.embed-container:is(.yt-loading,.yt-loaded)::after {background:#171b23;transition:opacity .7s cubic-bezier(.4,0,.2,1);}
.yt-loading-status {transition:opacity .7s cubic-bezier(.4,0,.2,1);}
:is(.iframely-responsive,.behance-square,.embed-container):is(.behance-loading,.behance-loaded)::after,
:is(.figma-embed,.embed-container):is(.figma-loading,.figma-loaded)::after {content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:#20242c;pointer-events:none;opacity:1;transition:opacity .7s cubic-bezier(.4,0,.2,1);}
:is(.iframely-responsive,.behance-square,.embed-container):is(.behance-loading,.behance-loaded)::before,
:is(.figma-embed,.embed-container):is(.figma-loading,.figma-loaded)::before {content:attr(data-yt-loading-text);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.42);color:#fff;font-size:.95rem;white-space:nowrap;pointer-events:none;opacity:1;animation:none;transition:opacity .7s cubic-bezier(.4,0,.2,1);}
:is(.iframely-responsive,.behance-square,.embed-container).behance-loaded::after,
:is(.figma-embed,.embed-container).figma-loaded::after,
:is(.iframely-responsive,.behance-square,.embed-container).behance-loaded::before,
:is(.figma-embed,.embed-container).figma-loaded::before {opacity:0;}
@media (prefers-reduced-motion:reduce) {
 iframe:is([data-youtube-src],[data-behance-src],[data-figma-src]),.yt-loading-status,
 :is(.embed-container,.iframely-responsive,.behance-square,.figma-embed)::before,
 :is(.embed-container,.iframely-responsive,.behance-square,.figma-embed)::after {transition:opacity .18s linear !important;}
}

/* Desktop horizontal video editing: keep player, caption and link in one panel. */
@media (min-width:769px) {
 html.layout-h #video {display:flex;flex-direction:column;}
 html.layout-h #video > :is(.section-title,.tabs) {flex-shrink:0;}
 html.layout-h #video > .tabs {justify-content:safe center;}
 html.layout-h #video > .section-title {align-self:flex-start;}
 html.layout-h #video .tab-content.active:has(> .embed-container) {display:flex !important;flex-direction:column;gap:12px;height:100%;min-height:0;}
 html.layout-h #video .tab-content.active > .embed-container {display:grid;place-items:center;container-type:size;flex:1;min-height:0;width:100%;height:auto;margin:0;aspect-ratio:auto;}
 html.layout-h #video .embed-container > iframe[data-youtube-src] {position:relative;inset:auto;margin:auto;width:min(100cqw,calc(100cqh * 16 / 9));height:min(100cqh,calc(100cqw * 9 / 16)) !important;aspect-ratio:16 / 9 !important;max-width:100%;max-height:100%;}
 html.layout-h #video .tab-content.active:has(> .embed-container) > p {flex-shrink:0;margin:0 !important;line-height:1.5;}
 html.layout-h #video .tab-content.active:has(> .embed-container) > div:not(.embed-container) {flex-shrink:0;margin:0 !important;padding:0 16px 18px;}
 html.layout-h #video .action-btn {margin-block:0 !important;top:0 !important;}
}

/* Keep the guidelines CTA inside the fitted panel, with room for its glow. */
.guidelines-actions { display:flex; justify-content:center; padding:4px 24px 26px; }
.guidelines-actions .action-btn { width:auto; min-width:0; margin:0; }
/* Only position and size move during a layout change; media fades stay independent. */
html.layout-morphing .glass-card.reveal { opacity:1!important; transition:none!important; }


html.layout-controls-ready :is(nav,.contact-btn-floating-wrapper,.contact-btn-floating,.lang-toggle-floating,.theme-toggle-floating) { animation:none!important; opacity:1!important; }

html.layout-morphing, html.layout-morphing * { overflow-anchor:none; }


/* Entrance animations used to leave the language control 10px lower after reparenting. */
html.layout-controls-ready :is(.lang-toggle-floating,.theme-toggle-floating,.contact-btn-floating) { transform:none; }

/* Moving whole panels must not enlarge the mobile layout viewport. */
html.layout-morphing:not(.layout-h), html.layout-morphing:not(.layout-h) body { overflow-x:clip; }
html.layout-morphing:not(.layout-h) .container { overflow:clip; overflow-clip-margin:24px; }