/* Scoped to the 3D room. No changes to the retained photographed version. */
html[data-room="3d"] { --room-ink:#f4f1e8; --room-brass:#bda878; }
body.spatial3d {font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:var(--room-ink)}
body.spatial3d .identity {font-family:Bahnschrift,'Arial Narrow',sans-serif;font-size:32px;letter-spacing:-1px;min-width:265px}
body.spatial3d .identity>span {font-size:12px;letter-spacing:.12em;margin-top:10px}
body.spatial3d .identity-wordmark {min-width:250px;line-height:1.15}
body.spatial3d .identity-role {letter-spacing:-.5px}
body.spatial3d .identity:hover .identity-name,body.spatial3d .identity:focus-visible .identity-name {opacity:1;transform:none}
body.spatial3d .identity:hover .identity-role,body.spatial3d .identity:focus-visible .identity-role {opacity:0}
body.spatial3d .identity.identity-cycling .identity-name {opacity:0;transform:translateY(-.2em)}
body.spatial3d .identity.identity-cycling .identity-role {opacity:1;transform:none}
body.spatial3d .word-arrival {animation:room-word .23s ease-out}
@keyframes room-word {from{opacity:0;transform:translateY(.2em);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
body.spatial3d .site-header nav {gap:30px}
body.spatial3d .site-header nav button {font-size:15px;min-height:38px;opacity:.92}
body.spatial3d .hotspot {gap:17px;padding:16px 18px}
body.spatial3d .hotspot .zone-word {display:block;position:relative;font-size:29px;font-weight:500;letter-spacing:-1px;line-height:1.25}
body.spatial3d .zone-word em {display:inline-block;font-style:normal}
body.spatial3d .hotspot small {display:block;font-size:13px;letter-spacing:0;line-height:1.6;margin-top:9px;color:#f4f1e8}
body.spatial3d .hotspot i {width:9px;height:9px;background:#f4f1e8;box-shadow:0 0 0 5px #fff2}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 body.spatial3d .hot-sound:hover .zone-word em {animation:sound-letter .7s ease-in-out infinite;animation-delay:calc(var(--letter)*-.14s)}
 body.spatial3d .hot-sound .zone-word::after {content:'';position:absolute;bottom:-6px;left:0;right:0;height:7px;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 3px,#dedfc9 3px 5px,transparent 5px 8px);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
 body.spatial3d .hot-sound:hover .zone-word::after {opacity:.8;animation:sound-band .65s ease-in-out infinite alternate}
 body.spatial3d .hot-desk.is-typing .zone-word {width:max-content;white-space:nowrap;border-right:2px solid var(--room-brass);padding-right:4px}
 body.spatial3d .hot-visual:hover .zone-word em {animation:art-pixel .72s steps(1,end) infinite;animation-delay:calc(var(--letter)*-.17s)}
 body.spatial3d .hot-visual:hover .zone-word::after {content:attr(data-text);position:absolute;inset:0;color:#d6b89c;clip-path:polygon(0 22%,100% 22%,100% 36%,0 36%,0 65%,100% 65%,100% 77%,0 77%);animation:art-slices .72s steps(1,end) infinite}
}
@keyframes sound-letter {0%,100%{transform:translateY(0) scaleY(1)}35%{transform:translateY(-4px) scaleY(1.07)}70%{transform:translateY(3px) scaleY(.96)}}
@keyframes sound-band {from{transform:scaleY(.3)}to{transform:scaleY(1.1)}}
@keyframes desk-type {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes art-pixel {0%,35%,80%,100%{transform:none;filter:none}40%{transform:translate(2px,-2px);filter:drop-shadow(-3px 2px #acb8a2);mask-image:repeating-conic-gradient(#000 0 75%,transparent 0 100%);mask-size:5px 5px}52%{transform:translate(-2px,1px);mask-image:repeating-conic-gradient(#000 0 75%,transparent 0 100%);mask-size:3px 3px}62%{transform:none;filter:drop-shadow(3px 0 #caa98a)}}
@keyframes art-slices {0%,30%,75%,100%{opacity:0;transform:none}35%,55%{opacity:.8;transform:translateX(4px)}65%{transform:translateX(-3px)}}
body.spatial3d .text-button {font-size:15px;min-height:44px}
body.spatial3d .section-heading {top:137px}
body.spatial3d #selection-title {font-size:clamp(34px,3.4vw,50px);font-family:Georgia,'Malgun Gothic',serif;line-height:1.18}
body.spatial3d .selection-sub {font-size:15px;line-height:1.7}
body.spatial3d .selection-count,body.spatial3d #selection-year {font-size:12px}
body.spatial3d .choose-button {font-size:15px}
body.spatial3d .gesture-hint {font-size:12px}
body.spatial3d #collection-tabs button {font-size:13px;width:192px;min-height:53px}
body.spatial3d #collection-tabs button small {font-size:11px}
body.spatial3d .collection-order {font-size:13px}
body.spatial3d .detail-description {font-size:16px;line-height:1.9}
body.spatial3d #detail-role {font-size:15px;line-height:1.8}
body.spatial3d dl {font-size:13px}
body.spatial3d .detail-type {font-size:13px}
body.spatial3d #detail-actions button,body.spatial3d .source-link {font-size:14px}
body.spatial3d .detail-note {font-size:12px}
body.spatial3d #detail-note:empty {display:none}
body.spatial3d .reading-identity {font-family:Bahnschrift,'Arial Narrow',sans-serif;font-size:28px;letter-spacing:-.7px;min-height:48px;padding:0 14px 0 0}
body.spatial3d .reading-identity:hover {text-decoration:underline;text-underline-offset:7px}
body.spatial3d .reading-header nav button,body.spatial3d #close-reading {font-size:15px;min-height:44px}
body.spatial3d .reading-title {font-size:clamp(38px,4.4vw,64px);font-weight:500}
body.spatial3d .about-grid p,body.spatial3d .work-section p {font-size:16px;line-height:1.95}
body.spatial3d .history-row p,body.spatial3d .history-row span {font-size:14px;line-height:1.8}
body.spatial3d .history-row h3 {font-size:23px}
body.spatial3d .reading-kicker {font-size:13px}
body.spatial3d .desk-caption {top:108px;width:auto;left:50%;right:auto;text-align:center;transform:translateX(-50%)}
body.spatial3d .desk-caption h1 {font-size:36px;letter-spacing:-1.5px;font-weight:500}
body.spatial3d .desk-caption p {font-size:14px}
body.spatial3d .desk-item {width:210px;min-height:76px;padding:12px 5px;text-align:center}
body.spatial3d .object-label {font-size:26px;letter-spacing:-.7px;border:0;line-height:1.3;font-weight:500}
body.spatial3d .object-label small {font-size:14px;line-height:1.6;letter-spacing:0;opacity:.92;margin-top:7px;font-weight:400}
body.spatial3d .desk-item:hover .object-label {color:#f8e1b3}
/* Three physical ideas, animated only while the entrance is being prepared. */
html[data-room="3d"] .boot-name {font-family:Bahnschrift,'Arial Narrow',sans-serif;font-size:48px;letter-spacing:-1.6px}
html[data-room="3d"] .boot-subtitle {display:none}
.boot-objects {display:flex;justify-content:center;gap:54px;margin:50px auto 36px}
.boot-object {width:114px;margin:0;text-align:center}
.boot-object figcaption {font-family:Bahnschrift,sans-serif;font-size:16px;letter-spacing:.03em;margin-top:19px;color:#ded9c9}
.boot-disc {width:98px;height:98px;position:relative;border-radius:50%;margin:0 auto;background:conic-gradient(from 35deg,#575d56,#b8bcaf 12%,#646b60 20%,#30372f 45%,#c6bc99 51%,#768073 59%,#30372f 80%,#575d56);box-shadow:inset 0 0 0 1px #e1e2cd80;animation:boot-disc-turn 5s linear infinite}
.boot-disc::before {content:'';position:absolute;inset:15px;border-radius:50%;border:1px solid #fff2;box-shadow:0 0 0 6px #0001,inset 0 0 0 7px #0001}
.boot-disc::after {content:'';position:absolute;inset:40px;border-radius:50%;background:#292c28;box-shadow:0 0 0 4px #dedaca66}
.boot-film {position:relative;width:103px;height:99px;margin:auto;border:13px solid #ddd1b9;border-radius:3px;background:#454d43;box-shadow:2px 5px 0 #12181240;overflow:hidden;transform:rotate(-7deg)}
.boot-film svg {width:100%;height:100%;stroke:#cbd2bc;stroke-width:1.2;fill:none}
.boot-film::after {content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#f5dfab55 49%,transparent 68%);animation:boot-film-light 2.4s ease-in-out infinite}
.boot-circuit {height:99px;width:108px;stroke:#c4ba98;stroke-width:1;fill:none;animation:boot-circuit-tilt 3s ease-in-out infinite alternate}
.boot-circuit circle {fill:#c4ba98;stroke:none}
html[data-room="3d"] .boot-progress {width:260px;height:2px}
html[data-room="3d"] .boot-caption {font-size:14px;color:#c3c7b8;margin-top:20px}
@keyframes boot-disc-turn {to{transform:rotate(360deg)}}
@keyframes boot-film-light {0%,100%{transform:translateX(-100%)}55%{transform:translateX(100%)}}
@keyframes boot-circuit-tilt {from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
html:not(.room-booting) .boot-objects * {animation-play-state:paused}
@media(max-width:760px){
 body.spatial3d .identity {font-size:28px;min-width:230px}
 body.spatial3d .identity>span {font-size:10px;letter-spacing:.08em}
 body.spatial3d .site-header nav {padding:10px 5%;gap:0}
 body.spatial3d .site-header nav button {font-size:14px;min-height:42px}
 body.spatial3d .hotspot .zone-word {font-size:25px}
 body.spatial3d .hotspot small {display:none}
 body.spatial3d .room-viewpoints button {font-size:12px}
 body.spatial3d .room-viewpoints {bottom:96px!important}
 body.spatial3d .desk-caption {top:146px;left:7%;right:7%;text-align:center;transform:none}
 body.spatial3d .desk-caption h1 {font-size:27px;margin-bottom:5px}
 body.spatial3d .desk-caption p {font-size:12px}
 body.spatial3d #desk .section-heading {top:103px}
 body.spatial3d .desk-item {width:100px;min-height:72px;padding:9px 3px}
 body.spatial3d .object-label {font-size:19px;letter-spacing:-.6px}
 body.spatial3d .object-label small {font-size:11px;max-width:90px;margin:6px auto 0;word-break:keep-all}
 body.spatial3d #collection-tabs button {width:auto;min-height:38px;font-size:12px;padding:8px 12px}
 body.spatial3d #selection-title {font-size:29px}
 body.spatial3d .selection-sub {font-size:13px}
 body.spatial3d .gesture-hint {font-size:10px}
 body.spatial3d .section-heading {top:104px}
 body.spatial3d .text-button {font-size:13px}
 body.spatial3d .reading-identity {font-size:25px}
 body.spatial3d .reading-header {gap:8px;padding:16px 6%}
 body.spatial3d .reading-header nav {gap:26px}
 body.spatial3d .about-grid p {font-size:15px}
 body.spatial3d .detail-description {font-size:15px}
 body.spatial3d .history-row h3 {font-size:20px}
 body.spatial3d .history-row span {font-size:12px}
 html[data-room="3d"] .boot-name {font-size:38px}
 .boot-objects {gap:12px;margin-top:40px}.boot-object {width:90px}.boot-object figcaption {font-size:13px}
 .boot-disc {width:78px;height:78px}.boot-disc::after {inset:32px}
 .boot-film {width:82px;height:78px;border-width:10px}.boot-circuit {width:86px;height:78px}
}
@media(prefers-reduced-motion:reduce){html[data-room="3d"] .boot-objects *,body.spatial3d .word-arrival {animation:none!important}}

html[data-room="3d"] #notes-button,html[data-room="3d"] #notes {display:none!important}

@media(max-width:360px){body.spatial3d .desk-item{width:88px}body.spatial3d .object-label{font-size:18px}body.spatial3d .object-label small{font-size:10px}}

/* Short, staggered flap movement with a readable hold between complete words. */
body.spatial3d .identity-role {perspective:400px}
body.spatial3d .roll-character {display:inline-block;transform-origin:50% 50%;animation:letter-flap .10s steps(3,end) both;animation-delay:calc(var(--glyph)*8ms)}
@keyframes letter-flap {0%{transform:translateY(-.22em) rotateX(-80deg);opacity:.25}45%{transform:translateY(.12em) rotateX(38deg);opacity:.7}100%{transform:none;opacity:1}}
body.spatial3d .hot-desk .zone-word {min-width:2.2em}
html[lang="en"] body.spatial3d .hot-desk .zone-word {min-width:3.5em}
.language-switch {display:flex;gap:3px;position:absolute;right:4%;top:76px;pointer-events:auto}
.site-header .language-switch button {font:12px Bahnschrift,Arial,sans-serif;letter-spacing:.05em;min-height:32px;padding:4px 8px;opacity:.65}
.site-header .language-switch button[aria-pressed="true"] {opacity:1;text-decoration:underline;text-underline-offset:5px}
.site-header .language-switch button:focus-visible {outline:1px solid currentColor;outline-offset:2px}
html[lang="en"] body.spatial3d .hotspot .zone-word {font-family:Bahnschrift,'Arial Narrow',sans-serif;letter-spacing:0}
html[lang="en"] body.spatial3d .desk-caption {width:75%;max-width:580px}
html[lang="en"] body.spatial3d .selection-sub {max-width:530px;margin-inline:auto}
html[lang="en"] body.spatial3d .detail-description {max-width:66ch}
html[lang="en"] body.spatial3d .object-label {font-family:Bahnschrift,Arial,sans-serif;letter-spacing:0}
html[lang="en"] body.spatial3d .object-label small {font-family:Arial,sans-serif}
@media(max-width:760px){
 .site-header .language-switch,body.spatial3d .site-header .language-switch {position:absolute;top:16px;bottom:auto;right:6%;left:auto;width:auto;gap:0;padding:0;background:none;border:0}
 .site-header .language-switch button,body.spatial3d .site-header .language-switch button {font-size:11px;min-height:38px;padding:4px 6px}
 html[lang="en"] body.spatial3d .desk-caption {width:auto;max-width:none}
 html[lang="en"] body.spatial3d .identity {font-size:26px}
 html[lang="en"] body.spatial3d .desk-caption h1 {font-size:25px}
 html[lang="en"] body.spatial3d .object-label small {font-size:10px}
 html[lang="en"] body.spatial3d #selection-title {font-size:26px}
 html[lang="en"] body.spatial3d .reading-header nav {gap:20px}
}
@media(prefers-reduced-motion:reduce){body.spatial3d .roll-character {animation:none!important}}

body.spatial3d .identity .roll-character {font:inherit;letter-spacing:inherit;margin:0;opacity:1;display:inline-block}
.reading-header .reading-language {display:flex;gap:8px;width:auto;order:0}
.reading-header .reading-language button {font:12px Bahnschrift,Arial,sans-serif;padding:5px;min-height:38px}
.reading-language button[aria-pressed="true"] {text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){body.spatial3d .reading-header .reading-language{gap:2px;margin-left:auto;width:auto;order:0}body.spatial3d .reading-header .reading-language button{font-size:11px}}

body.spatial3d .site-header .language-switch {gap:6px}

body.spatial3d .site-header .language-switch button {color:var(--paper,#f0eee4)}

/* The first view is a photograph of this exact 3D room, not another design. */
#room-preview {display:none}
.boot-destinations {display:none}
html[data-delivery="progressive"] #room-preview {display:block;position:fixed;inset:0;z-index:99;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .65s,visibility .65s}
html[data-delivery="progressive"].room-booting #room-preview {opacity:1;visibility:visible}
#room-preview picture,#room-preview img {display:block;width:100%;height:100%;object-fit:cover}
html[data-delivery="progressive"] .room-loading {background:linear-gradient(transparent 35%,#172018c9 100%);place-items:end center;padding:25px 20px 30px;box-sizing:border-box;transition:opacity .65s,visibility .65s}
html[data-delivery="progressive"] .boot-content {text-align:center;width:min(460px,100%)}
html[data-delivery="progressive"] .boot-name {font-size:30px;letter-spacing:-.6px}
html[data-delivery="progressive"] .boot-subtitle {font-size:11px;margin:7px 0 12px}
html[data-delivery="progressive"] .boot-objects {margin:12px 0;gap:24px;justify-content:center}
html[data-delivery="progressive"] .boot-object {width:66px;margin:0}
html[data-delivery="progressive"] .boot-object figcaption {font-size:10px;margin-top:8px}
html[data-delivery="progressive"] .boot-disc {width:42px;height:42px;margin:auto}
html[data-delivery="progressive"] .boot-disc::after {inset:17px}
html[data-delivery="progressive"] .boot-film {width:42px;height:42px;border-width:6px;margin:auto}
html[data-delivery="progressive"] .boot-circuit {width:46px;height:42px}
html[data-delivery="progressive"] .boot-caption {font-size:12px;margin:12px 0}
html[data-delivery="progressive"] .boot-progress {margin:16px auto 0;width:160px}
html[data-delivery="progressive"] .boot-destinations {display:flex;justify-content:center;gap:8px;margin-top:14px}
.boot-destinations button {color:#f1eee5;border:1px solid #eee9d954;background:#17201870;padding:9px 18px;font:14px Bahnschrift,Arial,sans-serif;cursor:pointer;min-height:40px}
.boot-destinations button[aria-pressed="true"],.boot-destinations button:hover {background:#ede8d8;color:#263029}
.boot-destinations button:focus-visible {outline:2px solid #fff;outline-offset:3px}
@media(max-width:760px){html[data-delivery="progressive"] .room-loading{padding-bottom:26px}html[data-delivery="progressive"] .boot-name{font-size:27px}}
@media(prefers-reduced-motion:reduce){html[data-delivery="progressive"] #room-preview,html[data-delivery="progressive"] .room-loading{transition:none}}

/* Content can be explored before the room finishes downloading. */
html.room-booting.boot-browsing main,html.room-booting.boot-browsing .site-header{visibility:visible}
html[data-delivery="progressive"].boot-browsing #room-preview{z-index:1;filter:brightness(.48) blur(3px)}
html.boot-browsing .room-loading{inset:auto 12px 12px auto;width:auto;display:block;padding:10px 14px;background:#172018dc;pointer-events:none;border-radius:3px}
html.boot-browsing .boot-name,html.boot-browsing .boot-subtitle,html.boot-browsing .boot-objects,html.boot-browsing .boot-destinations{display:none!important}
html.boot-browsing .boot-progress{width:110px;margin:0 auto}
html.boot-browsing .boot-caption{margin:7px 0 0;font-size:11px}
#boot-work-cover{display:none;pointer-events:none}
html.room-booting.boot-browsing #boot-work-cover:not([hidden]){display:block;position:fixed;z-index:2;object-fit:cover;width:min(30vw,34vh);aspect-ratio:1;left:50%;top:42%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #0005}
html.room-booting.boot-browsing body[data-zone="sound"] #boot-work-cover{border-radius:50%;mask-image:radial-gradient(circle,transparent 0 5%,#000 5.5%)}
html.room-booting.boot-browsing body[data-mode="detail"] #boot-work-cover{left:30%;width:min(38vw,55vh)}
html.room-booting.boot-browsing body[data-zone="room"] #boot-work-cover,html.room-booting.boot-browsing body[data-zone="desk"] #boot-work-cover{display:none}
@media(max-width:760px){html.room-booting.boot-browsing #boot-work-cover:not([hidden]){width:38vw;top:36%}html.room-booting.boot-browsing body[data-mode="detail"] #boot-work-cover{left:50%;top:27%;width:32vw}}