@font-face { font-family: 'LXGW WenKai TC'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lxgw-wenkai-tc-400-261eb5f97240.woff2') format('woff2'); }
@font-face { font-family: 'LXGW WenKai TC'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lxgw-wenkai-tc-700-9a1319230dab.woff2') format('woff2'); }
/* Shared font and existing V12 heading scale. Page layouts remain local. */
:root { --studio-font: 'LXGW WenKai TC', 'DFKai-SB', 'BiauKai', serif; --support-xs: 20px; --text-body: 20px; --support-sm: 20px; --support-md: 20px; --text-subtitle: 22px; }
html { font-family: var(--studio-font); font-size: var(--text-body); }
body { font-size: var(--text-body); line-height: 1.7; }
body, body *, body *::before, body *::after { font-family: inherit; }
body h1, body h2, body h3, body h4, body h5, body h6, body .hero-title, body .title, body .display, body .headline { font-weight: 400 !important; }
body h1, body .hero h1, body .hero-title { font-size: clamp(36px, 4.25vw, 62px) !important; line-height: 1.42 !important; letter-spacing: -0.045em !important; }
body h2 { font-size: clamp(26px, 3.1vw, 44px) !important; line-height: 1.48 !important; }
body h3 { font-size: clamp(24px, 2.15vw, 30px) !important; line-height: 1.5 !important; }
body p, body li, body label, body .description, body .desc { line-height: 1.85; }
body .mail-button, body .btn, body a[class*="button"], body button[class*="button"] { border-radius: 999px !important; }
@media (max-width: 700px) {
body h1, body .hero h1, body .hero-title { font-size: clamp(31px, 8.2vw, 43px) !important; }
body h2 { font-size: clamp(24px, 6.5vw, 32px) !important; }
body h3 { font-size: clamp(24px, 5.2vw, 25px) !important; }
}

/* Shared links and navigation. */
a:focus-visible, button:focus-visible, [role="link"]:focus-visible { outline: 2px solid #718e80; outline-offset: 4px; }
body a.studio-pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; min-height: 46px; text-decoration: none; white-space: nowrap; }
.site-nav { box-sizing: border-box; height: 80px; padding: 0 clamp(22px,5vw,80px); display: flex; align-items: center; justify-content: space-between; gap: 22px; background: transparent; color: #344e45; border-bottom: 1px solid #cbd1c7; position: relative; z-index: 30; }
.site-nav a, .site-nav .project-toggle { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; font-size: var(--text-body); font-weight: 400; line-height: 1.35; white-space: nowrap; position: relative; }
.site-brand { margin-right: auto; gap: 8px; }
.site-brand span:not(.mark) { font-size: inherit; }
.site-brand .mark { color: #718e80; font-size: 21px; }
.site-links { display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
.site-nav .glass-button { width: auto; min-width: 0; height: auto; padding: 10px 16px; min-height: 48px; }
.site-nav .studio-pill::after { display: none; }
.site-decoration:empty { display: none; }
@media (max-width: 1100px) {
 .site-nav { height: auto; min-height: 120px; padding: 12px 16px; flex-direction: column; justify-content: center; gap: 12px; }
 .site-brand { margin-right: 0; }
 .site-nav a { font-size: var(--text-body); }
 .site-nav .site-brand { font-size: var(--text-body); }
 .site-links { gap: 28px; justify-content: center; }
 .site-nav .glass-button { width: auto; min-width: 0; height: auto; min-height: 46px; padding: 8px 10px; }
 .site-decoration { display: none; }
}

/* Auxiliary copy can wrap naturally after its size increases. */
footer { line-height: 1.7; flex-wrap: wrap; }

/* Shared ice-blue glass buttons; the existing background stays opt-in. */
:root {
 --pearl: #faf9f7;
 --iris-pink: #f3edf9;
 --iris-blue: #edf4fc;
 --iris-lavender: #eeeaf8;
 --iris-mint: #f0f8f5;
 --glass-blue: #93c5fd; --glass-blue-light: #bfdbfe; --glass-lavender: #c4b5fd; --glass-pink: #e9d5ff;
 --glass-edge: linear-gradient(115deg, #93c5fddd, #eaf5ff 30%, #bfdbfe 65%, #c4b5fdbb 88%, #93c5fddd);
 --glass-shadow: 0 6px 18px #5182b526;
 --glass-focus: #9074b2;
 --panel-surface: radial-gradient(ellipse at 12% 0%, #ffffffd9, transparent 58%), linear-gradient(125deg, #edf4fcbf, #bfdbfe52 65%, #e9d5ff66);
 --panel-radius: clamp(28px, 4vw, 56px);
 --panel-shadow: inset 0 1px 0 #ffffffed, inset 0 0 0 1px #dce9fac9, inset 0 -1px 0 #c4b5fd66, 0 12px 36px #5182b512;
}
.iridescent-theme {
 background-color: var(--pearl);
 background-image: radial-gradient(ellipse 68% 650px at 8% 120px, #eeeaf88c, transparent 80%), radial-gradient(ellipse 60% 740px at 95% 400px, #edf4fca6, transparent 80%), radial-gradient(ellipse 70% 800px at 12% 62%, #f0f8f5b3, transparent 80%), radial-gradient(ellipse 60% 700px at 95% 87%, #f3edf999, transparent 80%);
}
.iridescent-theme .site-nav { background: transparent; border-bottom-color: #aab5bb40; }
body :is(.glass-button, .glass-tag) {
 position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
 max-width: 100%; min-height: 48px; padding: 12px 26px; border: 1px solid transparent; border-radius: 999px;
 background: linear-gradient(125deg, #edf6ffdb, #bfdbfe8c 75%, #e9d5ff42) padding-box, var(--glass-edge) border-box;
 box-shadow: inset 0 1px 0 #ffffffed, inset 0 -3px 8px #c6b5da20, var(--glass-shadow);
 color: var(--ink, var(--pine, #344e45)); text-decoration: none; cursor: pointer;
 transition: transform .18s ease, box-shadow .18s ease;
}
body .glass-button::before {
 content: ''; position: absolute; z-index: -1; inset: 2px 4px 50%; border-radius: inherit;
 background: linear-gradient(#ffffffb8, #ffffff00); pointer-events: none;
}
body .glass-primary { background: linear-gradient(120deg, #eaf5fff0, #93c5fd85 65%, #c4b5fd59) padding-box, var(--glass-edge) border-box; }
body .glass-secondary { background: linear-gradient(125deg, #edf6ffad, #bfdbfe66 75%, #e9d5ff33) padding-box, var(--glass-edge) border-box; box-shadow: inset 0 1px 0 #ffffffcc, 0 4px 12px #5182b514; }
body .glass-button:hover { color: var(--ink, var(--pine, #344e45)); transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px #c6b5da30, 0 9px 22px #5182b533; }
body .glass-button:active { transform: translateY(1px) scale(.985); }
body .glass-button:focus-visible { outline: 2px solid var(--glass-focus); outline-offset: 5px; }
body .glass-arrow { width: 41px; height: 41px; min-height: 0; padding: 0; border-radius: 50%; }
.jelly-stage { position: relative; display: grid; place-items: center; width: min(1280px, 100%); min-height: 460px; padding: 72px 76px; margin: 28px auto 115px; isolation: isolate; }
.jelly-frame { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jelly-bubbles { position: absolute; left: calc(50% - 240px); bottom: -95px; width: 200px; height: 140px; pointer-events: none; }
.jelly-bubbles i { position: absolute; display: block; border-radius: 50%; border: 1px solid #ffffffd9; background: radial-gradient(ellipse at 28% 20%, #fffffff5, #ffffff00 28%), radial-gradient(ellipse at 76% 80%, #effff3e6, #ffffff00 48%), radial-gradient(ellipse at 28% 60%, #c2a8eeaa, #ffffff00 66%), linear-gradient(135deg, #f8ecff8c, #c2def5a6 65%, #f9fff1b3); box-shadow: inset 3px 3px 7px #ffffffeb, inset -4px -4px 9px #aca9dd75, 0 7px 18px #69738917; }
.jelly-bubbles i::after { content: ''; position: absolute; inset: 3px; border: 1px solid #ffffff9c; border-radius: inherit; }
.jelly-bubbles i:nth-child(1) { width: 82px; height: 82px; left: 0; top: 0; }
.jelly-bubbles i:nth-child(2) { width: 54px; height: 54px; left: 94px; top: 56px; }
.jelly-bubbles i:nth-child(3) { width: 34px; height: 34px; left: 164px; top: 106px; }
.hero-sparkle { display: flex; justify-content: center; align-items: center; gap: 12px; color: #ad91d5; height: 40px; margin: 22px auto 20px; }
.hero-sparkle svg { width: 40px; height: 40px; fill: currentColor; }
.hero-sparkle::before, .hero-sparkle::after { content: ''; width: 96px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.hero-sparkle::after { transform: rotate(180deg); }
@media (max-width: 700px) {
 .jelly-stage { min-height: 350px; padding: 34px 36px; margin: 20px auto 90px; }
 .jelly-bubbles { left: calc(50% - 100px); bottom: -64px; width: 122px; height: 88px; }
 .jelly-bubbles i:nth-child(1) { width: 52px; height: 52px; }
 .jelly-bubbles i:nth-child(2) { width: 34px; height: 34px; left: 60px; top: 36px; }
 .jelly-bubbles i:nth-child(3) { width: 22px; height: 22px; left: 100px; top: 66px; }
 .hero-sparkle { height: 32px; margin-top: 18px; }
 .hero-sparkle svg { width: 32px; height: 32px; }
 .hero-sparkle::before, .hero-sparkle::after { width: 62px; }
}
@media (prefers-reduced-motion: reduce) {
 body .glass-button { transition: none; }
 body .glass-button:hover, body .glass-button:active { transform: none; }
}

.site-links > .glass-button[aria-current] { background: linear-gradient(125deg, #dceeffed, #bfdbfe99 75%, #e9d5ff66) padding-box, linear-gradient(115deg, #ffffffcc, #d9e8fa88) border-box; box-shadow: inset 0 1px 0 #fff, 0 4px 14px #5182b52b; }

/* Large surfaces share the homepage palette without changing content geometry. */
.glass-panel { background: var(--panel-surface); color: var(--ink, var(--pine, #344e45)); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
footer.glass-footer { margin-top: 32px; background: var(--panel-surface); color: var(--ink, var(--pine, #344e45)); }

/* Project navigation keeps its trigger and dropdown in one pointer/focus region. */
.project-menu { position: relative; width: max-content; }
.site-nav .project-toggle { font: inherit; font-size: var(--text-body); line-height: 1.35; }
.project-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: max-content; min-width: 100%; max-width: calc(100vw - 32px); padding: 12px; border-radius: 24px; background: linear-gradient(130deg, #f5fafffa, #e4effcf5 70%, #eee6faf5); box-shadow: var(--panel-shadow), 0 10px 28px #5182b526; }
.project-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.project-dropdown a + a { margin-top: 12px; }
.project-dropdown[hidden] { display: none; }
.site-nav .project-dropdown a { display: flex; justify-content: flex-start; padding: 10px 14px; border-radius: 16px; }
.project-dropdown a:hover, .project-dropdown a[aria-current] { background: #bfdbfe66; }
body .glass-tag { cursor: default; }
.case-info { padding: 24px 18px; align-self: start; text-align: center; }
.case-info .item + .item::before { left: 50%; transform: translateX(-50%); }
.meta-content { max-width: 1120px; margin: 64px auto 0; padding: 15px 35px 95px; display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 64px; }
.meta-content article h2 { margin-bottom: 36px; }
@media (max-width: 720px) {
 .meta-content { display: block; margin-top: 36px; padding: 10px 24px 70px; }
 .meta-content article h2 { margin-bottom: 28px; }
}
@media (max-width: 700px) {
 .site-links { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
 .project-menu { grid-column: 2; grid-row: 1; justify-self: center; }
 .project-dropdown { z-index: 1; }
}