@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600&display=swap');

:root {
  --ink: #183937;
  --paper: #eef1eb;
  --mint: #d8e9e6;
  --coral: #df8068;
  --logo-filter: brightness(0) saturate(100%) invert(18%) sepia(22%) saturate(1110%) hue-rotate(126deg) brightness(91%) contrast(91%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #23302f; color: var(--ink); }
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
.app { position: relative; width: 100%; max-width: 540px; height: 100%; margin: auto; overflow: hidden; background: var(--paper); }
.page { position: absolute; inset: 0; min-height: 100dvh; overflow: hidden; }

/* Welcome */
.intro {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 34px) 28px calc(env(safe-area-inset-bottom) + 38px);
  background: var(--paper) url('栖筑地合背景.png') center / cover;
  transition: opacity .34s ease, visibility .34s;
}
.intro::before { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(24,57,55,.13); pointer-events: none; }
.intro::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(239,242,236,.72); opacity: 0; }
.intro-meta, .intro-copy span, .eyebrow, .swipe-hint { font: 10px/1.45 'DM Mono', monospace; letter-spacing: .13em; }
.intro-meta { position: relative; z-index: 3; width: 100%; color: rgba(24,57,55,.66); }
.logo-trigger { position: absolute; z-index: 4; top: 40%; left: 50%; translate: -50% -50%; width: min(62vw,290px); aspect-ratio: 1.4; padding: 20px; background: transparent; overflow: visible; }
.symbol-logo, .logo-stroke { position: absolute; z-index: 3; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; filter: var(--logo-filter); }
.symbol-logo { opacity: 1; }
.logo-stroke { opacity: 0; clip-path: inset(0 0 0 0); }
.logo-rings { position: absolute; inset: -4px; border: 1px solid rgba(24,57,55,.16); border-radius: 50%; scale: .74; opacity: 0; transition: scale .3s, opacity .3s; }
.logo-trigger:active .logo-rings { scale: 1.08; opacity: 1; }
.portal-window { position: absolute; z-index: 2; width: 29%; height: 58%; left: 35.5%; top: 21%; overflow: hidden; border-radius: 50% 50% 8% 8% / 27% 27% 8% 8%; opacity: 0; scale: .04; box-shadow: 0 0 0 1px rgba(24,57,55,.24); }
.portal-window::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg,rgba(238,241,235,.5),transparent 45%,rgba(24,57,55,.2)); mix-blend-mode: screen; }
.portal-window img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: saturate(.68) contrast(.88); }
.intro-copy { position: relative; z-index: 3; text-align: center; transition: opacity .2s ease; }
.word-logo { width: 118px; opacity: .86; filter: var(--logo-filter); }
.intro-copy p { margin: 14px 0 22px; font: 500 23px/1 'Noto Serif SC', serif; letter-spacing: .12em; }
.intro-copy span { font-size: 8px; opacity: .55; }

.intro.portal-open .symbol-logo { opacity: 0; }
.intro.portal-open .logo-stroke { opacity: 1; animation: logo-retract .3s cubic-bezier(.7,0,.85,.2) forwards; }
.intro.portal-open .logo-rings { opacity: 0; }
.intro.portal-open .portal-window { opacity: 0; }
.intro.portal-open .intro-meta, .intro.portal-open .intro-copy, .intro.portal-open::before { opacity: 0; transition: opacity .22s ease .16s; }
.intro.portal-open::after { opacity: 0; }
.intro.hide { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes logo-retract {
  0% { clip-path: inset(0 0 0 0); scale: 1; }
  60% { clip-path: inset(6% 34% 6% 34%); scale: .98; }
  100% { clip-path: inset(12% 50% 12% 50%); scale: .94; opacity: 0; }
}
@keyframes portal-through {
  0% { opacity: 0; scale: .04; border-radius: 50% 50% 8% 8% / 27% 27% 8% 8%; }
  15% { opacity: .72; }
  70% { opacity: .96; scale: 12; border-radius: 49%; }
  100% { opacity: 0; scale: 15; border-radius: 50%; }
}
@keyframes threshold-wash { 0% { opacity: 0; } 48% { opacity: .72; } 100% { opacity: 0; } }

/* Project scene */
.showcase { --front-angle: 16deg; z-index: 1; padding: calc(env(safe-area-inset-top) + 24px) 25px calc(env(safe-area-inset-bottom) + 24px); background: var(--paper) url('栖筑地合背景.png') center / cover; opacity: 0; visibility: hidden; transition: opacity .48s ease, visibility .48s; }
.showcase.show { opacity: 1; visibility: visible; }
.showcase::before { content: ''; position: absolute; z-index: 2; top: 67%; left: 7%; width: 108%; height: 1px; background: var(--ink); opacity: 0; transform: rotate(var(--front-angle)) scaleX(0); transform-origin: left center; pointer-events: none; }
.showcase::after { content: ''; position: absolute; z-index: 0; width: 124%; height: 28%; left: -12%; bottom: -17%; border-radius: 50% 50% 0 0 / 18% 18% 0 0; background: rgba(220,235,230,.34); }
.grain { position: absolute; inset: 0; z-index: 0; opacity: .12; pointer-events: none; background-image: radial-gradient(#173937 .65px,transparent .65px); background-size: 7px 7px; mask-image: linear-gradient(transparent 8%,#000 42%,transparent 92%); }
.topbar { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; }
.brand-signature { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.mini-logo { width: 43px; height: 34px; object-fit: contain; filter: var(--logo-filter); }
.brand-signature span { font: 9px/1 'Noto Serif SC',serif; letter-spacing: .08em; white-space: nowrap; opacity: .78; }
.topbar-title { display: none; }
.topbar-title span { font: 9px 'DM Mono',monospace; opacity: .55; }
.close-button { display: grid; place-content: center; gap: 3px; width: 42px; height: 42px; border-radius: 50%; background: rgba(244,247,241,.92); box-shadow: 0 7px 18px rgba(31,64,61,.13); }
.close-button i { display: block; width: 13px; height: 1.5px; border-radius: 99px; background: var(--ink); }
.close-button i:nth-child(2) { width: 9px; }

.previous-board { position: absolute; z-index: 3; top: 25%; left: 5%; width: 27%; height: auto; aspect-ratio: .57; padding: 0; background: transparent; transition: scale .28s ease,opacity .28s ease; }
.previous-board:active { scale: .96; }
.previous-board::before, .previous-board::after { content: ''; position: absolute; z-index: 1; display: block; pointer-events: none; }
.previous-board::before { left: 100%; top: 0; width: 8%; height: 116.3%; background: linear-gradient(90deg,#6f9997,#d5e2dc); clip-path: polygon(0 14%,100% 11.4%,100% 97.4%,0 100%); }
.previous-board::after { left: 0; top: -3%; width: 108%; height: 24%; background: linear-gradient(155deg,#f8faf5,#b7ceca); clip-path: polygon(0 12.5%,7.4% 0,100% 67.9%,92.6% 80.4%); }
.previous-frame { position: absolute; z-index: 2; inset: 0; overflow: hidden; border: 3px solid rgba(48,126,141,.72); background: rgba(220,235,232,.35); box-shadow: 8px 13px 18px rgba(30,67,63,.1); transform: skewY(var(--front-angle)); transform-origin: left top; }
.previous-frame img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.previous-frame img.hidden { opacity: 0; }
.previous-placeholder { display: none; position: absolute; inset: 0; background: linear-gradient(145deg,#b7d0cb,#244844); }
.previous-placeholder.show { display: block; }
.previous-placeholder span { position: absolute; display: block; border: 1px solid rgba(239,244,238,.72); }
.previous-placeholder span:first-child { inset: 18% -8% 42% 16%; }
.previous-placeholder span:last-child { inset: 44% 20% 12% -10%; }
.previous-board > span { position: absolute; left: 2px; bottom: -34px; color: #47706b; font: 7px 'DM Mono',monospace; letter-spacing: .08em; transform: rotate(var(--front-angle)); transform-origin: left center; }

.project-board { position: absolute; z-index: 4; top: 21%; left: 41%; width: 57%; height: auto; aspect-ratio: .9; padding: 0; background: transparent; transition: scale .32s cubic-bezier(.2,.8,.2,1); }
.project-board:active { scale: .975; }
.project-board::before, .project-board::after { content: ''; position: absolute; z-index: 1; display: block; pointer-events: none; }
.project-board::before { left: 100%; top: 0; width: 14%; height: 125.8%; background: linear-gradient(90deg,#6d8f89 0%,#bed0ca 52%,#eef2eb 100%); clip-path: polygon(0 20.5%,100% 14.9%,100% 94.4%,0 100%); }
.project-board::after { top: -7%; left: 0; width: 114%; height: 55%; background: linear-gradient(160deg,#fffef8 5%,#e2eae4 56%,#b8cec7 100%); clip-path: polygon(0 12.7%,12.3% 0,100% 52.1%,87.7% 59.4%); }
.board-shadow { position: absolute; z-index: 0; left: 9%; top: 7%; width: 108%; height: 101%; background: rgba(79,119,112,.24); box-shadow: 13px 18px 24px rgba(27,58,54,.08); transform: skewY(var(--front-angle)); transform-origin: left top; }
.board-frame { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border: 9px solid #f7f5ed; background: #254944; box-shadow: 11px 15px 0 rgba(24,57,55,.11), 18px 24px 30px rgba(30,67,63,.11); transform: skewY(var(--front-angle)); transform-origin: left top; }
.board-frame::before { content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 15px; background: linear-gradient(90deg,rgba(31,54,50,.23),transparent); pointer-events: none; }
.board-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg,rgba(255,255,255,.33),transparent 25%,transparent 67%,rgba(16,42,41,.2)); mix-blend-mode: overlay; }
.board-frame img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; transition: opacity .25s,scale .4s; }
.board-frame img.hidden { opacity: 0; scale: 1.06; }
.placeholder-art { display: none; position: absolute; inset: 0; background: linear-gradient(135deg,#1c3d3a,#b8d5ce); }
.placeholder-art.show { display: block; }
.placeholder-art span { position: absolute; display: block; border: 1px solid #eaf0e8; }
.placeholder-art span:nth-child(1) { width: 90%; height: 48%; left: 10%; top: 16%; }
.placeholder-art span:nth-child(2) { width: 55%; height: 72%; left: 24%; top: 34%; }
.placeholder-art span:nth-child(3) { width: 115%; height: 25%; left: -9%; top: 63%; }
.board-label { position: absolute; z-index: 3; top: 111%; left: 46%; width: 43%; min-height: 42px; padding: 8px 10px; border: 1px solid rgba(24,57,55,.42); background: rgba(249,249,243,.96); box-shadow: 6px 8px 0 rgba(112,145,137,.16), 11px 14px 17px rgba(30,67,63,.08); font: 8px/1.4 'DM Mono',monospace; text-align: left; letter-spacing: .05em; transform: matrix(1,.2867,-.59,.66,0,0); transform-origin: left top; }

.case-spine { display: none; }
.case-spine::after { content: ''; position: absolute; left: 8%; right: -8%; top: 5px; height: 1px; background: rgba(24,57,55,.36); }
.line-sculpture { position: absolute; z-index: 3; top: 56%; left: -5%; width: 110%; aspect-ratio: 1855 / 848; opacity: .58; pointer-events: none; }
.line-sculpture img { position: relative; z-index: 2; display: block; width: 100%; opacity: 0; clip-path: inset(0 100% 0 0); }
.line-sculpture::after { display: none; }
.arm-edge { position: absolute; z-index: 1; left: 34%; width: 75%; height: 1px; background: var(--ink); transform: rotate(var(--front-angle)); transform-origin: left center; }
.arm-edge-top { top: 53%; }
.arm-edge-bottom { top: 72%; }
.showcase.show .line-sculpture img { animation: hand-reveal .9s cubic-bezier(.25,.8,.25,1) .18s forwards; }
@keyframes hand-reveal { to { opacity: 1; clip-path: inset(0 71% 0 0); } }

/* Entrance: the logo becomes the spatial construction, then the project is lit. */
.showcase.entering::before { animation: datum-draw .64s cubic-bezier(.18,.8,.28,1) .12s both; }
.showcase.entering .project-board { pointer-events: none; animation: main-frame-assemble .72s cubic-bezier(.2,.82,.24,1) .18s both; }
.showcase.entering .previous-board { pointer-events: none; animation: previous-frame-assemble .58s cubic-bezier(.2,.82,.24,1) .32s both; }
.showcase.entering .board-shadow { animation: shadow-settle .6s ease-out .28s both; }
.showcase.entering .board-frame img:not(.hidden) { opacity: 0; filter: brightness(1.34) saturate(.58); animation: image-lightup .62s cubic-bezier(.25,.72,.2,1) .72s both; }
.showcase.entering .previous-frame img:not(.hidden) { opacity: 0; filter: brightness(1.25) saturate(.6); animation: image-lightup .48s cubic-bezier(.25,.72,.2,1) .8s both; }
.showcase.entering .project-copy { animation: plaque-rise .58s cubic-bezier(.2,.82,.25,1) 1.02s both; }
.showcase.entering .line-sculpture img { animation: hand-reveal .66s cubic-bezier(.25,.8,.25,1) 1.16s both; }
.showcase.entering .topbar, .showcase.entering .scene-controls, .showcase.entering .swipe-hint { animation: interface-fade .42s ease-out 1.18s both; }
@keyframes datum-draw { from { opacity: 0; transform: rotate(var(--front-angle)) scaleX(0); } to { opacity: .48; transform: rotate(var(--front-angle)) scaleX(1); } }
@keyframes main-frame-assemble { from { opacity: 0; scale: .88; translate: -20px 14px; filter: brightness(1.25); } 58% { opacity: 1; } to { opacity: 1; scale: 1; translate: 0 0; filter: none; } }
@keyframes previous-frame-assemble { from { opacity: 0; scale: .86; translate: -14px 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes shadow-settle { from { opacity: 0; translate: -14px -9px; } to { opacity: 1; translate: 0 0; } }
@keyframes image-lightup { 0% { opacity: 0; filter: brightness(1.42) saturate(.42); clip-path: inset(0 100% 0 0); } 34% { opacity: .92; } 100% { opacity: 1; filter: none; clip-path: inset(0 0 0 0); } }
@keyframes plaque-rise { from { opacity: 0; translate: -28px 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes interface-fade { from { opacity: 0; translate: 0 -7px; } to { opacity: 1; translate: 0 0; } }

.project-copy { position: absolute; z-index: 5; top: 71%; left: 43%; width: 57%; height: 20%; min-height: 0; padding: 14px 18px; border: 1px solid rgba(24,57,55,.43); background: rgba(249,249,243,.94); box-shadow: 7px 9px 0 rgba(112,145,137,.18), 13px 17px 20px rgba(30,67,63,.08); backdrop-filter: blur(4px); transform: matrix(1,.2867,-.59,.66,0,0); transform-origin: left top; transition: opacity .2s,translate .3s; }
.project-copy::before { display: none; }
.project-copy::after { display: none; }
.project-copy > * { position: relative; z-index: 1; }
.project-copy.changing { opacity: 0; translate: 0 10px; }
.eyebrow,.project-tag,.explore { display: none !important; }
.project-copy h1 { margin: 0; color: var(--ink); text-align: left; font: 600 clamp(22px,6.4vw,32px)/1.06 'Noto Serif SC',serif; letter-spacing: .05em; }
.project-copy h1 em { display: block; margin-top: 4px; font-size: .62em; font-style: normal; letter-spacing: .12em; }
.project-description { display: block !important; width: 84%; margin: 8px 0 0; color: rgba(24,57,55,.82); font: 13px/1.42 'Noto Serif SC',serif; letter-spacing: .035em; text-align: left; }
.explore span { margin-left: 8px; color: #a8d0c9; }

.scene-controls { position: absolute; z-index: 7; left: 25px; bottom: calc(env(safe-area-inset-bottom) + 27px); display: flex; align-items: center; gap: 12px; width: calc(100% - 50px); }
.round-control { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 50%; background: rgba(244,247,241,.94); box-shadow: 0 6px 16px rgba(31,64,61,.12); }
.round-control svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-control svg path { fill: none; }
.progress { flex: 1; height: 1px; overflow: hidden; background: rgba(59,101,96,.17); }
.progress span { display: block; width: 14.286%; height: 100%; background: var(--ink); transition: width .38s ease; }
.swipe-hint { position: absolute; z-index: 5; bottom: calc(env(safe-area-inset-bottom) + 8px); left: 0; width: 100%; text-align: center; font-size: 7px; opacity: .45; }

.showcase.cycling[data-direction="next"] .board-frame img:not(.hidden),
.showcase.cycling[data-direction="next"] .previous-frame img:not(.hidden),
.showcase.cycling[data-direction="next"] .project-copy > * { animation: slot-to-right .46s cubic-bezier(.4,0,.2,1); }
.showcase.cycling[data-direction="previous"] .board-frame img:not(.hidden),
.showcase.cycling[data-direction="previous"] .previous-frame img:not(.hidden),
.showcase.cycling[data-direction="previous"] .project-copy > * { animation: slot-to-left .46s cubic-bezier(.4,0,.2,1); }
.frame-transfer-ghost { position: fixed; z-index: 6; display: block; object-fit: cover; pointer-events: none; transform-origin: left top; clip-path: inset(0); box-shadow: 8px 12px 20px rgba(24,57,55,.16); filter: saturate(.9) contrast(.96); transition: transform .54s cubic-bezier(.2,.8,.18,1), opacity .54s ease, filter .54s ease; }
.frame-transfer-ghost.is-flying { opacity: .08; filter: saturate(.78) brightness(1.18); transform: translate(var(--transfer-x),var(--transfer-y)) scale(var(--transfer-scale-x),var(--transfer-scale-y)); }
@keyframes slot-to-left {
  0% { opacity: 1; translate: 0 0; }
  36% { opacity: 0; translate: -112% 0; }
  37% { opacity: 0; translate: 112% 0; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes slot-to-right {
  0% { opacity: 1; translate: 0 0; }
  36% { opacity: 0; translate: 112% 0; }
  37% { opacity: 0; translate: -112% 0; }
  100% { opacity: 1; translate: 0 0; }
}

/* Gallery */
.gallery { position: absolute; inset: 0; z-index: 10; color: var(--paper); background: #112d2b; translate: 100% 0; transform: rotate(0deg); transform-origin: center; transition: translate .5s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1), width .42s cubic-bezier(.2,.8,.2,1), height .42s cubic-bezier(.2,.8,.2,1); }
.gallery.show { translate: 0; }
.gallery.is-rotated-landscape { inset: auto; top: 50%; left: 50%; width: 100dvh; height: 100dvw; translate: -50% -50%; transform: rotate(90deg); }
.gallery.is-rotated-landscape.show { translate: -50% -50%; }
.gallery-header { position: relative; z-index: 2; display: flex; align-items: center; gap: 15px; height: calc(env(safe-area-inset-top) + 66px); padding: calc(env(safe-area-inset-top) + 16px) 20px 14px; }
.back-button { width: 33px; height: 33px; border: 1px solid rgba(221,236,230,.19); border-radius: 50%; background: transparent; color: var(--paper); font-size: 19px; }
.gallery-header p { flex: 1; margin: 0; font: 14px 'Noto Serif SC',serif; letter-spacing: .1em; }
.gallery-header span { font: 9px 'DM Mono',monospace; opacity: .6; }
.orientation-indicator { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 72px); right: 18px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(221,236,230,.26); border-radius: 99px; color: rgba(221,236,230,.82); background: rgba(17,45,43,.5); backdrop-filter: blur(8px); font: 8px 'DM Mono',monospace; letter-spacing: .06em; }
.orientation-indicator svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: rotate .35s ease; }
.orientation-indicator.is-landscape svg { rotate: 90deg; }
.orientation-indicator.is-active::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #a8d0c9; box-shadow: 0 0 7px #a8d0c9; }
.gallery-track { position: absolute; inset: calc(env(safe-area-inset-top) + 66px) 0 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { position: relative; display: flex; align-items: center; justify-content: center; min-width: 100%; height: 100%; padding: 16px 16px 54px; scroll-snap-align: start; }
.gallery-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gallery-slide img.is-landscape { width: 100%; height: auto; }
.gallery-slide img.is-portrait { width: auto; height: 100%; }
.gallery.is-landscape .gallery-slide { padding: 10px 64px 18px; }
.gallery.is-landscape .gallery-slide img.is-landscape { width: auto; height: 100%; }
.gallery.is-landscape .gallery-slide img.is-portrait { width: auto; height: 100%; max-width: 68%; }
.gallery.is-landscape .gallery-header { height: calc(env(safe-area-inset-top) + 52px); padding: calc(env(safe-area-inset-top) + 10px) 20px 8px; }
.gallery.is-landscape .gallery-track { inset: calc(env(safe-area-inset-top) + 52px) 0 0; }
.gallery.is-landscape .orientation-indicator { top: calc(env(safe-area-inset-top) + 58px); right: 20px; }
.gallery-slide p { position: absolute; left: 21px; bottom: 7%; margin: 0; color: #d7e7e4; font: 9px 'DM Mono',monospace; letter-spacing: .1em; }
.gallery-empty { display: none; position: absolute; inset: 25% 0 0; text-align: center; }
.gallery-empty.show { display: block; }
.gallery-empty span { color: #d7e7e4; font: 500 44px/.86 'DM Mono',monospace; }
.gallery-empty p { font: 14px 'Noto Serif SC',serif; letter-spacing: .13em; }

.goodbye { display: none; position: absolute; inset: 0; z-index: 20; place-items: center; align-content: center; gap: 21px; color: var(--paper); background: var(--ink); }
.goodbye.show { display: grid; }
.goodbye p { margin: 0; font: 24px 'Noto Serif SC',serif; letter-spacing: .22em; }
.goodbye button { padding: 10px 17px; border: 1px solid rgba(185,216,210,.4); border-radius: 99px; color: #b9d8d2; background: transparent; font: 11px 'Noto Serif SC',serif; }
.music-button { position: absolute; z-index: 16; top: calc(env(safe-area-inset-top) + 22px); right: 78px; display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 50%; color: rgba(24,57,55,.56); background: rgba(244,247,241,.78); box-shadow: 0 5px 14px rgba(31,64,61,.08); }
.music-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.music-button.is-playing { color: var(--coral); border-color: rgba(223,128,104,.35); background: rgba(255,252,246,.98); box-shadow: 0 5px 16px rgba(223,128,104,.18); }
.music-button.is-playing svg { animation: music-spin 6s linear infinite; }
.music-button.is-muted { opacity: .48; }
@keyframes music-spin { to { transform: rotate(360deg); } }

@media (max-height: 720px) {
  .project-board { top: 19%; }
  .previous-board { top: 23%; }
  .line-sculpture { top: 53%; }
  .project-copy { top: 70%; height: 20%; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .app { max-width: none; }
  .gallery-header { height: calc(env(safe-area-inset-top) + 52px); padding: calc(env(safe-area-inset-top) + 10px) 20px 8px; }
  .gallery-track { inset: calc(env(safe-area-inset-top) + 52px) 0 0; }
  .gallery-slide { padding: 10px 64px 18px; }
  .gallery-slide p { left: 24px; bottom: 14px; }
  .orientation-indicator { top: calc(env(safe-area-inset-top) + 58px); right: 20px; }
  .music-button { top: calc(env(safe-area-inset-top) + 11px); right: 76px; }
}
@media (min-width: 541px) { body { background: linear-gradient(135deg,#d1dad5,#829491); } .app { box-shadow: 0 0 60px rgba(28,55,54,.25); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; } }