@font-face { font-family:"TAN PEARL"; src:url("assets/fonts/tan-pearl.otf") format("opentype"); font-style:normal; font-weight:400; font-display:swap; }

:root { color-scheme:light; --bg:#ddd8f2; --ink:#111; --muted:#111; --soft-ink:rgba(17,17,17,.76); --subtle-ink:rgba(17,17,17,.55); --line:rgba(17,17,17,.18); --accent:#111; --glass-mid:rgba(255,255,255,.42); --glass-soft:rgba(255,255,255,.18); --title-font:"TAN PEARL",Didot,"Bodoni 72","Bodoni MT",Bodoni,"Pretendard Variable",Pretendard,serif; --body-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#11101b; --ink:#fff; --muted:#fff; --soft-ink:#fff; --subtle-ink:#fff; --line:rgba(255,255,255,.22); --accent:#fff; --glass-mid:rgba(38,33,54,.68); --glass-soft:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
@view-transition { navigation:auto; }
::view-transition-group(studio-logo) { animation-duration:.85s; animation-timing-function:cubic-bezier(.22,.61,.36,1); }
::view-transition-group(root) { animation:none; }
::view-transition-old(root) { display:none; }
::view-transition-new(root) { animation:none; opacity:1; background:var(--bg); }
::view-transition-image-pair(studio-logo),::view-transition-old(studio-logo),::view-transition-new(studio-logo) { background:transparent; }
::view-transition-old(studio-logo),::view-transition-new(studio-logo) { animation:none; opacity:1; mix-blend-mode:normal; }
html { width:100%; height:100%; overflow:hidden; scroll-behavior:smooth; background:var(--bg); }
body { position:relative; z-index:0; isolation:isolate; width:100%; height:100%; margin:0; overflow:hidden; background:transparent; color:var(--ink); font-family:var(--body-font); }
.ambient-background { position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; background:var(--bg); }
.ambient-orb { position:absolute; top:0; left:0; width:58vmax; height:58vmax; border-radius:50%; filter:blur(68px); opacity:.72; transform:translate3d(0,0,0); transition-property:transform; transition-timing-function:cubic-bezier(.45,.05,.25,1); will-change:transform; }
.orb-pink { background:rgba(255,174,210,.78); }
.orb-lavender { background:rgba(189,174,255,.74); }
.orb-blue { background:rgba(151,215,255,.72); }
.shooting-star { position:absolute; z-index:1; top:var(--star-top); right:-12vw; width:clamp(130px,16vw,250px); height:2px; border-radius:999px; background:linear-gradient(90deg,#fff,rgba(255,255,255,.82) 32%,transparent); box-shadow:-8px 0 18px #fff,0 0 8px rgba(255,255,255,.95); opacity:1; transform-origin:left center; animation:shooting-star var(--star-duration,1.1s) cubic-bezier(.3,.05,.75,.42) forwards; }
@keyframes shooting-star { from{transform:rotate(-35deg) translateX(0);opacity:1} 82%{opacity:1} to{transform:rotate(-35deg) translateX(-155vw);opacity:0} }
a { color:inherit; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; z-index:10000; top:8px; left:8px; padding:10px 14px; border-radius:999px; color:#fff; background:#111; font-size:13px; text-decoration:none; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:2px solid #111; outline-offset:4px; }
img { display:block; max-width:100%; }
.site-header { position:fixed; z-index:40; top:0; left:0; width:100%; min-height:176px; padding:5vh 2vw; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto; align-items:start; pointer-events:none; }
.site-header a,.site-header nav { pointer-events:auto; }
.logo { grid-row:1 / -1; color:#111; background:transparent; font-family:var(--title-font); font-size:clamp(20px,2vw,30px); font-weight:400; line-height:1.18; text-decoration:none; mix-blend-mode:difference; }
.logo-track { display:block; }
.logo-primary { display:inline-block; view-transition-name:studio-logo; }
.logo-clone { display:none; }
.page-home .logo { position:fixed; top:50%; left:0; z-index:5; width:100vw; overflow:hidden; padding:.2em 0 .16em; font-size:clamp(42px,7vw,108px); line-height:1.18; transform:translate3d(var(--logo-x,0),calc(-50% + var(--logo-y,0)),0); pointer-events:none; }
.page-home .logo-track { display:flex; align-items:center; width:max-content; will-change:transform; }
.page-home .logo-primary,.page-home .logo-clone { display:block; flex:0 0 auto; margin-right:8vw; white-space:nowrap; pointer-events:none; }
.page-home:not(.marquee-positioned) .logo-primary { transform:translateX(calc(50vw - 50%)); }
.page-home .logo-clone { opacity:0; transition:opacity .8s ease .9s; }
.page-home.marquee-ready .logo-clone { opacity:1; }
.main-nav { position:absolute; right:2vw; min-width:150px; padding:10px; display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.46); border-radius:22px; color:#111; background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 8px 28px rgba(57,43,73,.08); opacity:0; visibility:hidden; transform:translateY(-8px); mix-blend-mode:normal; backdrop-filter:blur(16px) saturate(125%); -webkit-backdrop-filter:blur(16px) saturate(125%); transition:opacity .25s ease,transform .25s ease,visibility .25s; }
.main-nav.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.menu-toggle { position:relative; z-index:3; grid-row:1; grid-column:2; width:40px; height:40px; padding:0 10px; display:flex; flex-direction:column; justify-content:center; gap:6px; border:1px solid rgba(255,255,255,.46); border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.22)); box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 8px 28px rgba(57,43,73,.08); backdrop-filter:blur(16px) saturate(125%); -webkit-backdrop-filter:blur(16px) saturate(125%); pointer-events:auto; }
.menu-toggle span { width:100%; height:1px; display:block; background:#111; transition:transform .3s ease; }
.menu-toggle.is-open span:first-child { transform:translateY(3.5px) rotate(45deg); }
.menu-toggle.is-open span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.main-nav :is(a,span) { min-width:112px; padding:11px 16px; border-radius:999px; color:inherit; font-size:13px; line-height:1; text-align:center; text-decoration:none; opacity:.68; transition:opacity .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease; }
.main-nav a:hover { color:inherit; background:rgba(255,255,255,.18); opacity:1; }
.main-nav .active { color:#111; background:rgba(255,255,255,.72); box-shadow:0 3px 12px rgba(28,20,38,.08); opacity:1; }
.theme-toggle { position:relative; width:36px; min-width:36px; height:36px; margin:4px auto 0; padding:0; border:1px solid rgba(17,17,17,.24); border-radius:50%; color:inherit; background:rgba(255,255,255,.18); opacity:.76; transition:opacity .2s ease,background .2s ease,transform .3s ease; }
.theme-toggle::before { content:""; position:absolute; top:6px; left:15px; width:14px; height:14px; border:0; border-radius:50%; box-shadow:-4px 4px 0 0 currentColor; transition:transform .35s ease,box-shadow .35s ease; }
.theme-toggle[aria-pressed="true"]::before { top:9.5px; left:9.5px; width:12px; height:12px; border:1.5px solid currentColor; box-shadow:0 -8px 0 -5px currentColor,0 8px 0 -5px currentColor,8px 0 0 -5px currentColor,-8px 0 0 -5px currentColor,6px 6px 0 -5px currentColor,-6px -6px 0 -5px currentColor,6px -6px 0 -5px currentColor,-6px 6px 0 -5px currentColor; }
.theme-toggle:hover { background:rgba(255,255,255,.3); opacity:1; transform:rotate(8deg); }
.language-switcher { position:fixed; z-index:50; right:2vw; bottom:5vh; align-self:auto; justify-self:auto; margin:0; padding:6px; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.46); border-radius:999px; background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 8px 28px rgba(57,43,73,.08); backdrop-filter:blur(16px) saturate(125%); -webkit-backdrop-filter:blur(16px) saturate(125%); }
.language-switcher a { min-width:34px; padding:7px 9px; border-radius:999px; color:#111; font-size:11px; font-weight:600; line-height:1; text-align:center; text-decoration:none; transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
.language-switcher a:hover { background:rgba(255,255,255,.18); }
.language-switcher a.active { color:#111; background:rgba(255,255,255,.72); box-shadow:0 3px 12px rgba(28,20,38,.08); }
main { width:100%; height:100vh; padding:90px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(116,97,128,.28) transparent; }
.eyebrow { margin:0 0 15px; color:var(--accent); font-size:9px; font-weight:600; text-transform:uppercase; }
.home-hero { position:relative; min-height:calc(100vh - 180px); overflow:hidden; background:transparent; color:var(--ink); }
.home-role { position:fixed; z-index:6; top:calc(50% + clamp(42px,6vw,92px)); left:50%; margin:0; color:#111; font-family:var(--title-font); font-size:clamp(12px,1.35vw,20px); font-weight:400; line-height:1.2; text-align:center; transform:translateX(-50%); white-space:nowrap; pointer-events:none; }
.home-view-works { position:fixed; z-index:20; left:50%; bottom:12vh; padding:12px 18px; display:flex; align-items:center; gap:14px; border:1px solid rgba(255,255,255,.5); border-radius:999px; color:#111; background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 28px rgba(57,43,73,.08); font-size:11px; text-decoration:none; transform:translateX(-50%); backdrop-filter:blur(16px) saturate(125%); -webkit-backdrop-filter:blur(16px) saturate(125%); }
.scene { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; perspective:1200px; perspective-origin:50% 50%; opacity:1; }
.sphere { position:relative; width:0; height:0; transform:translateZ(1000px); transform-style:preserve-3d; }
.item { position:absolute; top:0; left:0; width:max-content; height:max-content; transform-style:preserve-3d; }
.item img { display:block; width:auto; max-width:180px; height:auto; max-height:220px; object-fit:contain; opacity:1; box-shadow:0 18px 45px rgba(85,69,96,.22); will-change:transform; }
.text-button { display:inline-flex; gap:36px; align-items:center; padding-bottom:8px; border-bottom:1px solid currentColor; font-size:14px; text-decoration:none; pointer-events:auto; }
.empty-message { padding:80px 0; color:var(--muted); }
.thumbnail-page { min-height:100%; overflow:auto; background:var(--bg); color:var(--ink); }
.thumbnail-page main { width:100%; height:auto; min-height:100vh; padding:0; overflow:visible; }
.thumbnail-header { position:fixed; z-index:10; top:0; left:0; width:100%; padding:5vh 3vw; }
.thumbnail-header a { color:var(--ink); font-family:var(--title-font); font-size:clamp(22px,2vw,30px); text-decoration:none; }
.thumbnail-download { width:min(1440px,94vw); min-height:100vh; margin:0 auto; padding:clamp(130px,16vh,190px) 0 8vh; display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:clamp(48px,7vw,120px); align-items:center; }
.thumbnail-copy h1 { margin:0; font-family:var(--title-font); font-size:clamp(54px,7vw,112px); font-weight:400; line-height:1; }
.thumbnail-copy > p:not(.eyebrow) { max-width:430px; margin:32px 0 0; font-size:14px; line-height:1.9; }
.thumbnail-download-button { width:min(360px,100%); margin-top:48px; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--ink); border-radius:999px; color:var(--ink); font-size:13px; text-decoration:none; transition:background .25s ease,color .25s ease; }
.thumbnail-download-button:hover { color:var(--bg); background:var(--ink); }
.thumbnail-preview { margin:0; overflow:hidden; border-radius:clamp(18px,2.5vw,38px); box-shadow:0 30px 80px rgba(57,43,73,.16); }
.thumbnail-preview img { width:100%; height:auto; }
.works-sphere-page main { padding:0; overflow:hidden; }
.works-sphere-view { position:relative; width:100%; height:100vh; overflow:hidden; }
.works-sphere-scene { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; perspective:1500px; perspective-origin:44% 48%; touch-action:pan-y; }
.works-sphere-ring { position:relative; width:0; height:0; transform-style:preserve-3d; }
.works-sphere-card { position:absolute; top:50%; left:44%; width:max-content; max-width:25vw; margin:0; opacity:1; transform-style:preserve-3d; will-change:transform,opacity; }
.works-sphere-card a { position:relative; display:block; color:#111; text-decoration:none; }
.works-sphere-card img { display:block; width:auto; max-width:25vw; height:auto; max-height:62vh; object-fit:contain; }
.works-sphere-card > a > span:not(.works-sphere-copy) { display:grid; place-items:center; width:24vw; height:48vh; color:#111; background:rgba(255,255,255,.2); font-size:56px; }
.works-sphere-copy { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-top:12px; text-align:left; }
.works-sphere-copy small { color:var(--soft-ink); font:500 9px/1.3 var(--body-font); letter-spacing:1.14px; text-transform:uppercase; }
.works-sphere-copy strong { font:500 clamp(12px,1.1vw,16px)/1.35 var(--body-font); }
.works-category-filter { position:absolute; z-index:12; left:2vw; bottom:6vh; display:flex; flex-wrap:wrap; gap:7px 16px; max-width:70vw; }
.works-category-filter button { padding:9px 12px; border:0; border-bottom:1px solid transparent; color:var(--soft-ink); background:transparent; font:500 10px/1.4 var(--body-font); letter-spacing:1.14px; }
.works-category-filter button.is-active { border-bottom-color:#111; color:#111; }
.about-detail-page main { padding:90px 0; overflow:hidden; }
.about-layout { width:96vw; height:100%; margin:0 auto; padding-top:28px; display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:clamp(34px,5vw,84px); overflow:hidden; }
.about-portrait { width:100%; height:100%; margin:0; overflow:hidden; }
.about-portrait img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.about-portrait-mobile { display:none; }
.about-scroll { height:100%; padding:45px 2vw 45px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(17,17,17,.2) transparent; }
.about-intro h1 { max-width:850px; margin:0; font-family:var(--title-font); font-size:clamp(44px,5vw,82px); font-weight:400; line-height:1.3; }
.about-intro h1 span { display:block; margin-bottom:18px; font-size:.52em; }
.about-catch-ja { margin:26px 0 0; font-size:clamp(14px,1.2vw,18px); }
.about-profile { max-width:720px; margin-top:70px; font-size:14px; line-height:2; }
.about-credentials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:70px; }
.about-credentials section { padding-top:18px; border-top:1px solid var(--line); }
.about-credentials ul { margin:0; padding:0; list-style:none; }
.about-credentials li { padding:8px 0; font-size:12px; line-height:1.6; }
.about-section { margin-top:130px; padding-top:24px; border-top:1px solid var(--line); }
.experience-list article { position:relative; display:grid; grid-template-columns:minmax(120px,.35fr) 1fr; gap:30px; padding:26px 0 34px; border-bottom:1px solid var(--line); }
.experience-list time { color:var(--subtle-ink); font-size:11px; }
.experience-list h2 { margin:0 0 10px; font-size:15px; font-weight:500; }
.experience-list p { margin:0; font-size:12px; line-height:1.9; }
.skill-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.skill-item { min-height:104px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); }
.skill-item span { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(17,17,17,.5); border-radius:11px; font-size:11px; font-weight:600; }
.skill-item small { font-size:9px; line-height:1.25; text-align:center; }
.process-list { margin:0; padding:0; list-style:none; counter-reset:process; }
.process-list li { counter-increment:process; position:relative; padding:20px 0 20px 48px; border-bottom:1px solid var(--line); font-family:var(--body-font); font-size:clamp(24px,3vw,42px); font-weight:400; }
.process-list li::before { position:absolute; left:0; top:24px; content:"0" counter(process); font:500 9px/1 var(--body-font); }
.about-cta { margin-top:150px; padding:70px 0 40px; border-top:1px solid var(--line); }
.about-cta h2 { max-width:800px; margin:0; font-family:var(--title-font); font-size:clamp(40px,5.5vw,86px); font-weight:400; line-height:1.2; }
.about-cta p { margin:30px 0 45px; font-size:13px; }
.about-contact-button { width:100%; padding:18px 20px; display:flex; justify-content:space-between; border:1px solid #111; border-radius:999px; font-size:12px; text-decoration:none; transition:color .25s ease,background .25s ease; }
.about-contact-button span { padding-top:2.5px; }
.about-contact-button:hover { color:#fff; background:#111; }
.about-motion .about-portrait img,.about-motion .about-portrait-mobile img { transform:scale(1.08); transition:transform 1.8s cubic-bezier(.22,.61,.36,1); }
.about-motion.is-ready .about-portrait img,.about-motion.is-ready .about-portrait-mobile img { transform:scale(1); }
.about-motion .about-intro h1,.about-motion .about-catch-ja,.about-motion .about-profile,.about-motion .about-credentials { opacity:0; transform:translateY(34px); transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1); }
.about-motion.is-ready .about-intro h1,.about-motion.is-ready .about-catch-ja,.about-motion.is-ready .about-profile,.about-motion.is-ready .about-credentials { opacity:1; transform:translateY(0); }
.about-motion.is-ready .about-catch-ja { transition-delay:.16s; }
.about-motion.is-ready .about-profile { transition-delay:.28s; }
.about-motion.is-ready .about-credentials { transition-delay:.4s; }
.about-motion .about-section,.about-motion .about-cta { opacity:0; transform:translateY(54px); transition:opacity .85s ease,transform .85s cubic-bezier(.22,.61,.36,1); }
.about-motion .about-section.is-revealed,.about-motion .about-cta.is-revealed { opacity:1; transform:translateY(0); }
.about-motion .experience-list article,.about-motion .skill-item,.about-motion .process-list li { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1),background .3s ease,border-color .3s ease; }
.about-motion .is-revealed .experience-list article,.about-motion .is-revealed .skill-item,.about-motion .is-revealed .process-list li { opacity:1; transform:translateY(0); transition-delay:calc(var(--reveal-index,0) * 65ms); }
.contact-form-page main { padding:90px 0; overflow:hidden; }
.contact-form-shell { width:min(960px,90vw); height:100%; margin:0 auto; padding:45px 3vw 120px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(17,17,17,.2) transparent; }
.contact-form-intro { text-align:center; }
.contact-form-intro h1 { margin:0; font-family:var(--title-font); font-size:clamp(38px,6vw,72px); font-weight:400; line-height:1; }
.contact-form-intro > p:last-child { margin:42px 0 80px; font-size:13px; line-height:1.9; }
.contact-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 28px; }
.contact-field { display:flex; flex-direction:column; gap:12px; font-size:12px; }
.contact-field > span small,.contact-consent small { margin-left:5px; color:#55515e; font-size:9px; }
.contact-field > span small.is-required,.contact-consent small.is-required { color:#9c2020; }
.contact-field input,.contact-field select,.contact-field textarea { width:100%; padding:12px 0; border:0; border-bottom:1px solid rgba(17,17,17,.35); border-radius:0; outline:0; color:#111; background:transparent; font:400 14px/1.5 var(--body-font); transition:border-color .2s ease; }
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus { border-bottom-color:#111; }

:root[data-theme="dark"] .ambient-background { background:#11101b; }
:root[data-theme="dark"] .orb-pink { background:rgba(128,32,91,.8); }
:root[data-theme="dark"] .orb-lavender { background:rgba(74,53,153,.82); }
:root[data-theme="dark"] .orb-blue { background:rgba(22,94,151,.78); }
:root[data-theme="dark"] :where(.logo,.site-footer) { mix-blend-mode:normal; }
:root[data-theme="dark"] :where(.main-nav,.language-switcher,.menu-toggle,.home-view-works) { border-color:rgba(255,255,255,.28); background:linear-gradient(135deg,var(--glass-mid),var(--glass-soft)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 34px rgba(0,0,0,.26); }
:root[data-theme="dark"] :where(.main-nav .active,.language-switcher a.active) { background:rgba(255,255,255,.16); }
:root[data-theme="dark"] .menu-toggle span { background:var(--ink); }
:root[data-theme="dark"] .works-category-filter button.is-active { border-bottom-color:var(--ink); }
:root[data-theme="dark"] .contact-field input,:root[data-theme="dark"] .contact-field select,:root[data-theme="dark"] .contact-field textarea { border-bottom-color:rgba(255,255,255,.42); }
:root[data-theme="dark"] :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline-color:#fff; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .page-home .logo-track { transform:translateX(2vw); }
  .logo-clone { display:none!important; }
  .shooting-star { display:none; }
}
.contact-field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%); background-position:calc(100% - 8px) 50%,calc(100% - 3px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.contact-field textarea { resize:vertical; min-height:150px; }
.contact-message,.contact-consent,.contact-submit { grid-column:1 / -1; }
.contact-consent { display:flex; align-items:flex-start; gap:10px; font-size:11px; line-height:1.7; }
.contact-consent input { width:15px; height:15px; flex:0 0 auto; margin:2px 0 0; accent-color:#111; }
.contact-consent a { text-underline-offset:3px; }
.contact-submit { width:100%; padding:18px 20px; display:flex; justify-content:space-between; border:1px solid #111; border-radius:999px; color:#111; background:transparent; font:500 12px/1 var(--body-font); transition:color .25s ease,background .25s ease; }
.contact-submit:hover { color:#fff; background:#111; }
.contact-submit i { padding-top:2.5px; font-style:normal; }
.contact-error { margin:0 0 36px; padding:12px 15px; border:1px solid rgba(151,48,48,.35); border-radius:12px; color:#8b2f2f; background:rgba(255,235,235,.35); font-size:12px; }
.contact-honeypot { position:absolute; left:-10000px; }
.contact-toast { position:fixed; z-index:1000; left:50%; bottom:7vh; width:min(520px,90vw); padding:22px 26px; display:flex; flex-direction:column; gap:8px; border:1px solid rgba(255,255,255,.55); border-radius:22px; background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.22)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 50px rgba(57,43,73,.14); opacity:0; transform:translate(-50%,20px); visibility:hidden; backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%); transition:opacity .55s ease,transform .55s ease,visibility .55s; }
.contact-toast.is-visible { opacity:1; transform:translate(-50%,0); visibility:visible; }
.contact-toast strong { font-family:var(--title-font); font-size:clamp(26px,4vw,42px); font-weight:400; }
.contact-toast span { font-size:11px; }
.privacy-page { width:min(900px,90vw); height:100%; margin:0 auto; padding:45px 0 120px; overflow-y:auto; }
.privacy-page h1 { margin:0 0 70px; font-family:var(--body-font); font-size:9px; font-weight:600; line-height:1.3; text-transform:uppercase; }
.privacy-page h2 { margin:55px 0 14px; font-size:15px; font-weight:500; }
.privacy-page p { margin:0; font-size:13px; line-height:2; }
.project-detail { width:96vw; margin:0 auto; }
.project-detail-layout { display:grid; grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr); gap:clamp(50px,7vw,120px); align-items:start; }
.project-detail-copy { position:sticky; top:0; height:calc(100vh - 180px); padding:28px 0; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none; }
.project-detail-copy::-webkit-scrollbar { display:none; }
.project-detail-copy h1 { max-width:650px; margin:0; font-family:var(--body-font); font-size:clamp(30px,3.4vw,54px); font-weight:400; line-height:1.08; }
.project-detail-copy .eyebrow { letter-spacing:1.14px; }
.project-summary { max-width:540px; margin:20px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.project-mobile-thumbnail { display:none; }
.project-information { margin-top:auto; padding-top:44px; }
.project-information dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; margin:0 0 28px; }
.project-information dl div { padding:11px 0; border-top:1px solid var(--line); }
.project-information dt { color:var(--muted); font-size:10px; text-transform:uppercase; }
.project-information dd { margin:5px 0 0; font-size:12px; }
.project-description { max-width:560px; margin:0 0 26px; color:#111; font-size:12px; line-height:1.75; }
.project-image-scroll { min-height:calc(100vh - 180px); padding:28px 0 120px; overflow:visible; }
.sphere-image-column { display:flex; flex-direction:column; align-items:center; gap:32px; padding:0; }
.sphere-image-column figure { position:relative; width:100%; margin:0; display:grid; place-items:center; overflow:hidden; background:transparent; }
.sphere-image-column img,.sphere-image-column video { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100vh - 236px); object-fit:contain; }
.sphere-image-column video { background:#111; }
.project-detail-page main { overflow:hidden; }
.project-detail-page .project-detail,.project-detail-page .project-detail-layout { height:100%; }
.project-detail-page .project-detail-layout { align-items:stretch; }
.project-detail-page .project-detail-copy { position:relative; top:auto; height:100%; overflow-y:auto; overscroll-behavior:contain; }
.project-detail-page .project-image-scroll { height:100%; min-height:0; padding:28px 0 90px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(17,17,17,.22) transparent; }
.project-image-empty { min-height:calc(100vh - 140px); display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); font-size:12px; }
.error-page main { padding:0; overflow:hidden; }
.error-hero { position:relative; width:100%; height:100vh; display:grid; place-items:center; overflow:hidden; padding:180px 2vw 110px; text-align:center; }
.error-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.error-code { margin:0; font:400 clamp(130px,27vw,420px)/.68 var(--title-font); opacity:.94; }
.error-content h1 { margin:clamp(45px,7vh,88px) 0 0; font:500 clamp(17px,2vw,28px)/1.4 var(--body-font); }
.error-message { max-width:520px; margin:18px 0 0; color:var(--muted); font-size:12px; line-height:1.8; }
.error-actions { margin-top:38px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.error-actions a { min-width:150px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:24px; border:1px solid var(--ink); border-radius:999px; font-size:11px; text-decoration:none; backdrop-filter:blur(16px) saturate(125%); -webkit-backdrop-filter:blur(16px) saturate(125%); }
.error-actions a:hover { color:var(--bg); background:var(--ink); }
.error-orbit { position:absolute; z-index:1; width:min(62vw,760px); aspect-ratio:1; border:1px solid rgba(255,255,255,.42); border-radius:50%; animation:error-orbit 22s linear infinite; }
.error-orbit::before,.error-orbit::after { content:""; position:absolute; inset:11%; border:1px solid rgba(255,255,255,.28); border-radius:50%; transform:rotate(58deg) scaleY(.42); }
.error-orbit::after { transform:rotate(-42deg) scaleY(.58); }
.error-orbit span { position:absolute; width:clamp(8px,1vw,14px); aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 0 9px #fff,0 0 24px rgba(255,255,255,.84); }
.error-orbit span:nth-child(1) { top:11%; left:21%; }
.error-orbit span:nth-child(2) { right:4%; top:52%; }
.error-orbit span:nth-child(3) { bottom:9%; left:33%; }
.global-orbit-wrap { position:absolute; z-index:0; inset:0; display:grid; place-items:center; opacity:.62; }
.global-orbit-wrap .error-orbit { position:relative; }
@keyframes error-orbit { to { transform:rotate(360deg); } }
.site-footer { position:fixed; z-index:45; left:50%; bottom:5vh; min-height:0; padding:0; display:block; border:0; color:#111; font-size:12px; text-align:center; transform:translateX(-50%); mix-blend-mode:difference; pointer-events:auto; white-space:nowrap; }
.site-footer p { margin:0; }
.page-home .site-footer { background:transparent; color:#111; }
.custom-cursor { display:none; }
@media (hover:hover) and (pointer:fine) {
  body,body a,body button,body input,body textarea,body select,body video { cursor:none; }
  .custom-cursor { position:fixed; z-index:9999; top:0; left:0; width:68px; height:68px; display:grid; place-items:center; border:1px solid #fff; border-radius:50%; color:#fff; opacity:0; transform:translate3d(-100px,-100px,0); pointer-events:none; box-shadow:0 0 7px rgba(255,255,255,.98),0 0 18px rgba(255,255,255,.72),0 0 38px rgba(210,225,255,.42),inset 0 0 10px rgba(255,255,255,.24); transition:width .4s ease,height .4s ease,opacity .25s ease,background .4s ease,box-shadow .4s ease,border-color .4s ease; will-change:transform; }
  .custom-cursor.is-visible { opacity:1; }
  .custom-cursor span { font:600 10px/1 var(--body-font); text-transform:lowercase; text-shadow:0 1px 5px rgba(17,17,17,.45); }
  .custom-cursor.is-scroll span { font-size:18px; font-weight:400; }
  .custom-cursor.is-glass { width:10px; height:10px; border-color:#fff; background:#fff; box-shadow:0 0 6px #fff,0 0 15px rgba(255,255,255,.95),0 0 30px rgba(202,220,255,.72); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .custom-cursor.is-glass span { opacity:0; }
}
@media (max-width:1100px) { .about-intro h1 span { font-size:clamp(14px,2.8vw,28px); white-space:nowrap; } }
@media (min-width:761px) {
  .project-information { margin-top:auto; }
  .site-header { min-height:132px; align-items:center; padding-top:2vh; padding-bottom:2vh; }
  .project-detail-copy { padding-top:45px; display:flex; flex-direction:column; }
  .project-detail-copy .project-information { align-self:stretch; margin-top:0; padding-top:270px; }
  .project-detail-page .project-image-scroll { padding-top:45px; }
  .main-nav { top:calc(2vh + 48px); }
  .main-nav :is(a,span) { color:#111; }
}
@media (max-width:760px) {
  .thumbnail-header { padding:28px 5vw; }
  .thumbnail-download { width:90vw; padding:120px 0 70px; grid-template-columns:1fr; gap:52px; }
  .thumbnail-copy h1 { font-size:clamp(52px,17vw,78px); }
  .thumbnail-download-button { margin-top:36px; }
  .site-header { min-height:127px; grid-template-columns:1fr auto; grid-template-rows:auto; align-items:center; padding:3vh 2vw; }
  .main-nav { top:calc(3vh + 48px); min-width:min(150px,72vw); }
  .main-nav :is(a,span) { color:#111; }
  .language-switcher { right:2vw; bottom:5vh; grid-column:auto; grid-row:auto; gap:3px; padding:4px; }
  .language-switcher a { min-width:29px; padding:6px; font-size:10px; }
  main { height:100vh; min-height:0; padding:90px 0; }
  .home-hero { min-height:calc(100vh - 180px); }
  .page-home .logo { font-size:clamp(34px,10vw,64px); }
  .works-sphere-scene { perspective:1100px; perspective-origin:42% 48%; }
  .works-sphere-card { left:42%; max-width:48vw; }
  .works-sphere-card img { max-width:48vw; max-height:58vh; }
  .main-nav .works-category-filter { position:static; width:100%; max-width:none; margin:2px 0; padding:2px 0; display:flex; flex-direction:column; align-items:center; gap:2px; border:0; }
  .main-nav .works-category-filter button { font-size:9px; }
  .about-detail-page main { padding:90px 0; overflow-y:auto; }
  .about-layout { height:auto; display:block; overflow:visible; }
  .about-portrait-desktop { display:none; }
  .about-portrait-mobile { width:100%; height:68vh; min-height:480px; margin:50px 0 0; display:block; overflow:hidden; }
  .about-portrait-mobile img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
  .about-scroll { height:auto; padding:55px 0 130px; overflow:visible; }
  .about-intro h1 { font-size:clamp(38px,12vw,64px); }
  .about-profile { margin-top:50px; font-size:13px; }
  .about-credentials { grid-template-columns:1fr; gap:30px; margin-top:55px; }
  .about-section { margin-top:90px; }
  .experience-list article { grid-template-columns:1fr; gap:10px; }
  .skill-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .skill-item { min-height:96px; border-radius:15px; }
  .about-cta { margin-top:100px; padding-top:50px; }
  .contact-form-page main { overflow-y:auto; }
  .contact-form-shell { width:96vw; height:auto; padding:45px 0 130px; overflow:visible; }
  .contact-form-intro > p:last-child { margin:34px 0 60px; }
  .contact-form { grid-template-columns:1fr; gap:34px; }
  .contact-message,.contact-consent,.contact-submit { grid-column:auto; }
  .contact-toast { bottom:6vh; }
  .privacy-page { height:auto; padding:45px 0 130px; overflow:visible; }
  .project-detail { width:96vw; }
  .project-detail-layout { grid-template-columns:1fr; gap:0; }
  .project-detail-copy { position:relative; height:auto; min-height:calc(100vh - 180px); padding:28px 0 70px; overflow:visible; }
  .project-mobile-thumbnail { width:100%; margin:40px 0 0; display:grid; place-items:center; }
  .project-mobile-thumbnail img { display:block; width:auto; max-width:100%; height:auto; max-height:62vh; object-fit:contain; }
  .project-information { margin-top:auto; padding-top:70px; padding-bottom:0; }
  .project-image-scroll { padding:28px 0 90px; }
  .sphere-image-column { gap:20px; padding:0; }
  .sphere-image-column figure { width:100%; }
  .has-mobile-thumbnail .project-image-scroll .sphere-image-column figure:first-child { display:none; }
  .project-detail-page main { overflow-y:auto; }
  .project-detail-page .project-detail,.project-detail-page .project-detail-layout,.project-detail-page .project-detail-copy,.project-detail-page .project-image-scroll { height:auto; }
  .project-detail-page .project-detail-copy,.project-detail-page .project-image-scroll { overflow:visible; }
  .site-footer { bottom:1.5vh; font-size:10px; }
}

/* Keep every textual element white in dark mode, including late mobile rules. */
:root[data-theme="dark"] body,:root[data-theme="dark"] body * { color:#fff; }
:root[data-theme="dark"] .main-nav :is(a,span),:root[data-theme="dark"] .works-category-filter button { color:#fff; }
:root[data-theme="dark"] .theme-toggle { color:#fff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.1); }
:root[data-theme="dark"] :where(.about-contact-button,.contact-submit) { border-color:#fff; }
:root[data-theme="dark"] :where(.about-contact-button,.contact-submit):hover { color:#fff; background:rgba(255,255,255,.14); }
:root[data-theme="dark"] .error-actions a:hover { color:#fff; background:rgba(255,255,255,.14); }
:root[data-theme="dark"] .contact-field select { background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%); }
:root[data-theme="dark"] .contact-consent input { accent-color:#fff; }

@media (max-width:760px) {
  .error-hero { width:100%; height:100svh; min-height:0; padding:180px 5vw 100px; grid-template-columns:minmax(0,1fr); overflow-x:hidden; overflow-y:auto; }
  .error-content { width:100%; min-width:0; max-width:100%; }
  .error-code { width:100%; min-width:0; max-width:100%; font-size:clamp(72px,21vw,96px); line-height:.78; white-space:nowrap; }
  .error-content h1 { max-width:100%; margin-top:42px; font-size:clamp(16px,4.8vw,21px); }
  .error-message { width:100%; max-width:360px; padding:0 2vw; font-size:11px; overflow-wrap:anywhere; }
  .error-orbit { width:96vw; }
  .error-actions { width:min(330px,90vw); max-width:100%; margin-top:32px; flex-direction:column; }
  .error-actions a { width:100%; }
}