/* Neutral furniture; each project's image-led art direction supplies its colors and fonts. */
:root { --paper:#fafafa; --ink:#303b36; --muted:#737e78; --line:#dce2de; --accent:#687e70; --focus:#53695c; --control:#eef2ef; }
.masthead { height:96px; }
.wordmark { gap:13px; }
.brand-emblem { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; border-radius:15px; color:#d6efff; background:linear-gradient(145deg,#294b68,#0d263e); box-shadow:0 5px 14px #15395818,inset 0 1px 0 #ffffff30; }
.brand-emblem svg { width:29px; height:29px; }
.brand-type { display:flex; flex-direction:column; gap:5px; }
.wordmark-cn { font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-size:21px; font-weight:650; letter-spacing:.18em; line-height:1.2; }
.brand-dot { display:none; }
.wordmark-en { font-size:9px; letter-spacing:.14em; max-width:none; line-height:1.2; color:#7a91a5; }
.collection-label { border:1px solid #dee7ee; border-radius:30px; background:#fff; padding:9px 16px; gap:12px; letter-spacing:.06em; }
.collection-label #edition { color:#2e678e; font-weight:600; }
.header-actions { gap:9px; }
.header-actions .icon-button { width:auto; min-width:42px; height:40px; padding:0 14px; border:1px solid #dce6ed; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:#46637c; font-size:11px; box-shadow:0 3px 10px #18395305; }
.header-actions .icon-button:hover:not(:disabled) { background:#edf5fa; border-color:#a8c9de; color:#1d557b; }
.header-actions .save-button { background:#183b58; border-color:#183b58; color:#eefaff; }
.header-actions .save-button:hover:not(:disabled) { background:#285676; color:#fff; }
.stage-note { color:#8b9dac; font-size:10px; letter-spacing:.13em; }
.stage-note > span:first-child::before { content:""; display:inline-block; width:5px; height:5px; margin:0 9px 1px 0; border-radius:50%; background:#75b7d7; }
.artwork-bar { margin-top:18px; padding:23px 26px; border:1px solid #e0e8ef; border-radius:20px; background:linear-gradient(120deg,#fff,#f7fafc); box-shadow:0 8px 30px #1d426108; grid-template-columns:minmax(0,1fr) auto auto; gap:28px; min-height:138px; }
.artwork-title { min-width:0; }
.artwork-kicker { display:flex; align-items:center; gap:8px; font-size:9px; font-weight:600; letter-spacing:.18em; color:#7097b3; margin-bottom:10px; }
.artwork-kicker::before { content:""; width:16px; height:1px; background:#77adc9; }
.title-line { gap:12px; flex-wrap:wrap; }
.title-line h1 { font:650 28px/1.2 "Microsoft YaHei","PingFang SC",sans-serif; letter-spacing:-.035em; color:#193b57; white-space:nowrap; }
.title-line > span { font:11px/1.5 "Microsoft YaHei",sans-serif; padding:4px 9px; border:1px solid #d9e8f1; border-radius:6px; color:#5080a0; background:#eef6fb; }
.artwork-title p { margin-top:9px; font-size:11px; line-height:1.7; color:#788d9e; }
.face-picker { padding:5px; gap:4px; border:1px solid #dce7ef; border-radius:13px; background:#eaf1f6; }
.face-picker button { min-width:68px; height:36px; border-radius:9px; font-size:12px; font-weight:500; color:#7e92a3; transition:background .18s,color .18s,box-shadow .18s; }
.face-picker button[aria-pressed="true"] { background:#fff; color:#235a80; box-shadow:0 2px 7px #2a56721a; }
.face-picker button:hover:not(:disabled) { color:#215c83; }
.finish-cluster { gap:17px; }
.depth-toggle { height:42px; padding:0 13px; border-radius:11px; border-color:#d4e3ed; background:#eaf3f9; color:#467c9e; font-size:11px; letter-spacing:0; white-space:nowrap; }
.depth-toggle[aria-expanded="true"] { background:#e5f1f9; color:#2a709c; border-color:#a9cde2; box-shadow:none; }
.depth-toggle:hover { background:#d9edf8; color:#225d81; }
.finish-control { width:252px; gap:12px; }
.finish-heading { gap:10px; font-size:10px; color:#6b879b; }
.finish-heading > span:last-child { display:none; }
.swatches { gap:12px; }
.swatch { width:25px; height:25px; margin-bottom:16px; box-shadow:inset 0 0 0 1px #1b4b7020,0 2px 4px #183d6510; }
.swatch::before { content:attr(aria-label); position:absolute; left:50%; transform:translateX(-50%); top:30px; width:34px; font-size:9px; color:#8b9dad; text-align:center; white-space:nowrap; }
.swatch[aria-pressed="true"]::after { inset:-4px; border:1.5px solid #6fa6c8; box-shadow:0 0 0 2px #dcecf650; }
.swatch[aria-pressed="true"]::before { color:#32769f; font-weight:600; }
.foil-row { font-size:10px; gap:12px; color:#6b879b; }
.foil-row output { color:#477996; font-size:10px; }
input[type="range"] { height:4px; border-radius:10px; background:#d5e3ed; accent-color:#5c9dc7; }
input[type="range"]::-webkit-slider-thumb { width:13px; height:13px; border:3px solid #fff; background:#568eaf; box-shadow:0 0 0 1px #8cb2cc,0 2px 5px #163b5720; }
input[type="range"]::-moz-range-thumb { width:9px; height:9px; border:2px solid #fff; background:#568eaf; }
.parameter-panel { right:54px; bottom:215px; width:274px; padding:22px 23px 24px; border-radius:19px; border:1px solid #658aa947; background:linear-gradient(135deg,#22465fed,#102b43f5); color:#e6f5ff; box-shadow:0 14px 35px #14334e20,inset 0 1px 0 #ffffff12; backdrop-filter:blur(18px); }
.panel-heading { margin-bottom:20px; font-size:13px; font-weight:600; letter-spacing:.05em; }
.panel-heading::after { content:"LAYER / 04"; font-size:8px; letter-spacing:.14em; color:#80a6bf; font-weight:400; }
.range-row { gap:12px; margin-top:18px; font-size:11px; color:#c2d9e9; align-items:center; }
.range-row output { min-width:39px; padding:3px 6px; border-radius:5px; text-align:center; font-size:10px; color:#a5d9f7; background:#ffffff0c; border:1px solid #accbe517; }
.parameter-panel input[type="range"] { background:#63819a65; }
.parameter-panel input[type="range"]::-webkit-slider-thumb { background:#a4dbf9; border-color:#20415a; box-shadow:0 0 0 1px #74a8ca,0 0 8px #71c7ed30; }
.footer { height:52px; font-size:10px; color:#91a4b2; letter-spacing:.07em; }
.footer span:last-child { font-size:9px; letter-spacing:.13em; }
dialog { border:1px solid #d7e5ef; border-radius:20px; background:linear-gradient(140deg,#fff,#f0f7fb); box-shadow:0 24px 90px #1738562b; }
dialog::backdrop { background:#15355045; backdrop-filter:blur(5px); }
.dialog-mark { font:600 17px "Microsoft YaHei",sans-serif; letter-spacing:.18em; color:#6086a2; margin-bottom:26px; }
dialog h2 { font:600 24px "Microsoft YaHei",sans-serif; color:#224863; }
dialog dl > div { gap:15px; font-size:11px; line-height:1.7; }
.notice { background:#1e4866; border-radius:12px; }
@media (min-width:1600px) { .parameter-panel { right:72px; } }
@media (max-width:1150px) and (min-width:761px) {
  .masthead { padding:0 32px; }
  .artwork-bar { margin-left:32px; margin-right:32px; gap:18px; padding:22px; }
  .finish-cluster { flex-direction:column; align-items:flex-start; gap:12px; }
  .parameter-panel { right:32px; bottom:250px; }
  .title-line h1 { font-size:25px; }
}
@media (max-width:960px) {
  .parameter-panel { position:static; width:calc(100% - 48px); margin:24px auto 0; }
}
@media (max-width:760px) {
  .masthead { height:82px; padding:0 24px; }
  .brand-emblem { width:38px; height:38px; border-radius:12px; }
  .wordmark { gap:9px; }
  .wordmark-cn { font-size:18px; }
  .wordmark-en { font-size:7px; letter-spacing:.1em; display:block; }
  .header-actions .icon-button { min-width:36px; width:36px; height:36px; padding:0; border-radius:11px; }
  .header-actions .action-label { display:none; }
  .artwork-bar { margin:16px 24px 0; padding:21px; gap:21px; grid-template-columns:1fr auto; }
  .artwork-title { grid-column:1/-1; }
  .title-line h1 { font-size:25px; }
  .title-line > span { font-size:10px; }
  .face-picker { justify-self:start; }
  .face-picker button { min-width:58px; height:32px; }
  .finish-cluster { grid-column:1/-1; width:100%; flex-wrap:wrap; justify-content:flex-start; gap:20px; }
  .finish-control { width:100%; flex-basis:100%; grid-template-columns:1fr; gap:15px; }
  .finish-heading { justify-content:space-between; }
  .swatches { gap:17px; }
  .foil-row { gap:13px; }
  .parameter-panel { border-radius:17px; }
  .footer { height:54px; margin:0 24px; font-size:9px; }
  .footer span:last-child { display:none; }
}

.hint-touch { display:none; }
.loading { z-index:3; gap:16px; background:#fafafaed; backdrop-filter:blur(8px); }
.loading-kicker { font-size:9px; letter-spacing:.25em; color:#648aa5; }
.loading-message { max-width:280px; line-height:1.8; font-size:13px; color:#335b76; }
.loading progress { appearance:none; width:160px; height:4px; border:0; border-radius:4px; overflow:hidden; }
.loading progress::-webkit-progress-bar { background:#dce8ef; }
.loading progress::-webkit-progress-value { background:#639dbf; }
.loading progress::-moz-progress-bar { background:#639dbf; }
.loading.error button { min-height:44px; padding:10px 24px; border:1px solid #b6cfdf; border-radius:12px; background:#fff; color:#325c77; }
@media (pointer:coarse) {
  .hint-desktop { display:none; }
  .hint-touch { display:inline; }
  .header-actions .icon-button, .face-picker button, .depth-toggle, .modal-close { min-width:44px; min-height:44px; }
  .swatches { gap:12px; }
  .swatch { width:44px; height:44px; border:9px solid transparent; background-clip:padding-box; box-shadow:none; }
  .swatch::before { top:36px; }
  .swatch[aria-pressed="true"]::after { inset:-4px; }
  input[type="range"], .parameter-panel input[type="range"] { height:28px; background:linear-gradient(#a4c1d4,#a4c1d4) center / 100% 3px no-repeat; }
  input[type="range"]::-webkit-slider-thumb { width:22px; height:22px; }
  input[type="range"]::-moz-range-thumb { width:18px; height:18px; }
}
@media (max-width:760px) {
  .stage-note { display:flex; padding:0 24px; font-size:9px; }
  .stage-note > span:first-child { display:block; letter-spacing:.04em; }
}

.settings-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid #ffffff20; }
.settings-actions button { min-height:44px; padding:8px; border:1px solid #ffffff26; border-radius:9px; background:#ffffff0d; color:inherit; font-size:11px; }
.settings-actions button:last-child { grid-column:1/-1; }
.settings-actions button:hover { background:#ffffff22; }
.settings-actions button:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.brand-emblem, .header-actions .save-button { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.wordmark-en, .stage-note, .artwork-title p, .footer, .swatch::before { color:var(--muted); }
.collection-label, .header-actions .icon-button, .artwork-bar, .face-picker, .depth-toggle, .title-line > span, dialog { border-color:var(--line); }
.collection-label #edition, .title-line h1, dialog h2 { color:var(--ink); }
.artwork-bar, dialog { background:linear-gradient(120deg,#fff,var(--paper)); }
.artwork-kicker, .dialog-mark, .foil-row output, .swatch[aria-pressed="true"]::before { color:var(--accent); }
.artwork-kicker::before, .stage-note > span:first-child::before { background:var(--accent); }
.title-line > span, .face-picker, .depth-toggle, .depth-toggle[aria-expanded="true"] { background:var(--control); color:var(--ink); }
.face-picker button[aria-pressed="true"], .finish-heading, .foil-row { color:var(--ink); }
.swatch[aria-pressed="true"]::after { border-color:var(--accent); }
input[type="range"] { accent-color:var(--accent); }
input[type="range"] { background:var(--line); }
.parameter-panel input[type="range"] { background:color-mix(in srgb,var(--accent),transparent 65%); }
.face-picker button { color:var(--muted); }
.parameter-panel { bottom:190px; color:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--ink),var(--accent) 25%),var(--ink)); border-color:var(--accent); }
.panel-heading::after, .range-row, .range-row output { color:inherit; }
.notice { background:var(--ink); color:#fff; }
.header-actions .icon-button:not(.save-button) { color:var(--ink); }
.header-actions .icon-button:hover:not(:disabled), .depth-toggle:hover { background:var(--control); border-color:var(--accent); color:var(--ink); }
.header-actions .save-button:hover:not(:disabled) { background:var(--accent); color:#fff; }
.depth-toggle[aria-expanded="true"] { border-color:var(--accent); }
input[type="range"]::-webkit-slider-thumb { background:var(--accent); box-shadow:0 0 0 1px var(--accent); }
input[type="range"]::-moz-range-thumb { background:var(--accent); }
.parameter-panel input[type="range"]::-webkit-slider-thumb { background:color-mix(in srgb,var(--accent),#fff 65%); border-color:var(--ink); box-shadow:0 0 0 1px var(--accent); }
.parameter-panel input[type="range"]::-moz-range-thumb { background:color-mix(in srgb,var(--accent),#fff 65%); border-color:var(--ink); }
:root { font-family:var(--body-font,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif); }
.wordmark-cn, .title-line h1, dialog h2 { font-family:var(--display-font,"Microsoft YaHei","PingFang SC",sans-serif); }
.title-line > span, .artwork-title p, .dialog-mark { font-family:var(--body-font,"Microsoft YaHei","PingFang SC",sans-serif); }
.loading { background:color-mix(in srgb,var(--paper),transparent 7%); }
.loading-kicker, .loading-message, .loading.error button { color:var(--ink); }
.loading progress::-webkit-progress-bar { background:var(--line); }
.loading progress::-webkit-progress-value, .loading progress::-moz-progress-bar { background:var(--accent); }
.loading.error button { border-color:var(--line); }
@media (pointer:coarse) { input[type="range"], .parameter-panel input[type="range"] { background:linear-gradient(var(--line),var(--line)) center / 100% 3px no-repeat; } }
@media (max-width:1150px) and (min-width:961px) { .parameter-panel { bottom:235px; } }
@media (max-height:820px) { .parameter-panel { position:static; width:calc(100% - 48px); max-width:600px; margin:24px auto 0; } }

/* Shared links are finished cards on phones, with only a sensor permission affordance. */
.mobile-guide { display:none; }
.mobile-view, .mobile-view body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
.mobile-view body { min-width:0; }
.mobile-view .masthead, .mobile-view .artwork-bar, .mobile-view .parameter-panel,
.mobile-view .footer, .mobile-view .stage-note, .mobile-view .tools { display:none !important; }
.mobile-view main { width:100%; max-width:none; margin:0; padding:0; }
.mobile-view .gallery { width:100%; height:100svh; height:100dvh; min-height:0; max-height:none; margin:0; }
.mobile-view .stage { inset:max(14px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(56px,calc(env(safe-area-inset-bottom) + 40px)) max(8px,env(safe-area-inset-left)); }
.mobile-view .mobile-guide { display:flex; position:fixed; z-index:5; left:16px; right:16px; bottom:max(12px,env(safe-area-inset-bottom)); align-items:center; justify-content:center; gap:10px; pointer-events:none; }
.mobile-view .mobile-guide[hidden] { display:none; }
.mobile-guide p { margin:0; font-size:11px; line-height:1.6; color:var(--muted); text-align:center; transition:opacity 1s; }
.mobile-guide p.quiet { opacity:0; }
.mobile-guide button { pointer-events:auto; flex-shrink:0; min-height:44px; padding:10px 18px; border-radius:24px; color:var(--paper); background:var(--ink); font-size:12px; box-shadow:0 3px 14px #153d3920; }
.mobile-guide button[hidden] { display:none; }
.mobile-view .notice { bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px)); max-width:calc(100vw - 40px); }
.mobile-view .fallback3d { padding:18px; }
.mobile-view .flipper3d { height:auto; width:min(calc(100vw - 60px),calc((100dvh - 130px) * 2 / 3)); max-height:100%; aspect-ratio:2 / 3; }
@media (max-height:450px) and (orientation:landscape) {
  .mobile-view .stage { top:8px; bottom:max(34px,env(safe-area-inset-bottom)); }
  .mobile-guide p { font-size:10px; }
}