:root{color-scheme:dark;font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#10111a;color:#fff;font-synthesis:none;--accent:#edb5d7}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;touch-action:manipulation}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button,img{-webkit-user-select:none;user-select:none}p,h1,h2{margin:0}button,dialog{overscroll-behavior:contain}
#desk-app{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:360px;overflow:clip;background:#10111a}
.ambient{position:absolute;inset:0;background:#161720;z-index:-2}
.artboard{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.artboard.is-panning,.artboard.is-panning *{cursor:grabbing!important}
.scene-frame{position:absolute;left:50%;top:50%;width:100vw;height:62.5vw;transform:translate(-50%,-50%);transform-origin:0 0;will-change:transform}
.scene-layer{position:absolute;inset:0;pointer-events:none}
.scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.approved-window-view{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;mask-image:url('./assets/desk-universes/approved-window-mask.png');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
.spider-switch{position:absolute;left:var(--prop-x,50.53%);top:var(--prop-y,26.15%);width:var(--prop-width,4.7%);height:var(--prop-height,8.6%);min-width:44px;min-height:48px;transform:translate(-50%,-50%);padding:0;background:transparent;z-index:3;border-radius:42% 42% 26% 26%;cursor:pointer}
.spider-switch:focus-visible{outline:1px dashed #fff;outline-offset:3px}
.masthead{position:absolute;top:0;left:0;right:0;padding:22px 32px 45px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(#08090b78,transparent);pointer-events:none;z-index:4}
.masthead button{pointer-events:auto}.wordmark{font-family:Georgia,serif;font-size:29px;font-style:italic;font-weight:700;letter-spacing:-.06em;text-shadow:0 2px 10px #0008}.wordmark span{color:var(--accent);font-size:23px;margin-left:2px}.view-tools{display:flex;align-items:center;gap:8px}
.quiet-button{padding:9px 14px;background:#11131e55;border:1px solid #ffffff45;backdrop-filter:blur(12px);border-radius:22px;font-size:11px;letter-spacing:.04em}.quiet-button:hover{background:#ffffff28}.help-button{width:34px;height:34px;padding:0;font-size:15px}
.controls{position:absolute;bottom:0;left:0;right:0;padding:43px 32px max(18px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#090b1480);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;pointer-events:none;z-index:4}.controls>*{pointer-events:auto}
.style-caption{display:flex;gap:11px;align-items:baseline;white-space:nowrap;text-shadow:0 1px 9px #000b;align-self:center}.style-count{font-family:Georgia,serif;font-size:23px;font-variant-numeric:tabular-nums}.style-count i{font-style:normal;font-size:11px;color:#ffffffa8}.style-caption h1{font-size:12px;font-weight:500;letter-spacing:.06em}
.style-nav{display:flex;gap:1px;align-items:center;justify-content:center;align-self:center}
.style-tab{position:relative;display:grid;place-items:center;width:29px;height:32px;padding:0;border:0;background:transparent;border-radius:50%}.tab-swatch{display:block;width:9px;height:9px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #ffffff52,0 2px 6px #0005;transition:transform .2s,box-shadow .2s}.style-tab:hover .tab-swatch{transform:scale(1.3)}.style-tab[aria-pressed="true"] .tab-swatch{box-shadow:0 0 0 3px #16151b99,0 0 0 4px #ffffffe0;transform:scale(1.12)}
.style-tab::after{content:attr(data-name);position:absolute;bottom:38px;left:50%;transform:translateX(-50%);padding:5px 8px;white-space:nowrap;background:#13131fd9;border:1px solid #ffffff30;border-radius:5px;font-size:10px;opacity:0;pointer-events:none;transition:opacity .15s}.style-tab:hover::after,.style-tab:focus-visible::after{opacity:1}
.switch-hint{text-align:right;justify-self:end;font-size:10px;line-height:1.7;letter-spacing:.035em;text-shadow:0 1px 8px #000b;color:#ffffffec}.switch-hint span{display:block;font-size:9px;color:#ffffffa1}
.object-tip{position:absolute;z-index:5;margin:0;padding:6px 10px;border-radius:5px;font-size:11px;white-space:nowrap;background:#16131ee8;color:#fff;border:1px solid #ffffff60;pointer-events:none;transform:translate(-50%,-100%);box-shadow:0 3px 10px #0004}
.load-status{position:absolute;top:85px;left:50%;transform:translateX(-50%);padding:8px 15px;background:#0e0e16c9;backdrop-filter:blur(12px);border:1px solid #ffffff25;border-radius:25px;font-size:11px;z-index:10}.load-status[hidden],.object-tip[hidden]{display:none}
.help-panel{width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 40px);margin:auto;padding:24px;background:#15161fea;color:#fff;border:1px solid #ffffff30;border-radius:14px;backdrop-filter:blur(24px);box-shadow:0 25px 100px #0008}.help-panel::backdrop{background:#08091188;backdrop-filter:blur(5px)}.help-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.help-heading h2{font-size:18px;letter-spacing:.08em;font-weight:500}.help-heading button{padding:0;width:32px;height:32px;font-size:22px}.help-panel dl{margin:20px 0 0}.help-panel dl div{padding:11px 0;border-top:1px solid #ffffff15}.help-panel dt{font-size:12px}.help-panel dd{margin:5px 0 0;color:#ffffff9c;font-size:11px;line-height:1.6}
.noscript{position:absolute;top:45%;left:20%;right:20%;padding:20px;background:#111;color:white;z-index:15}
@media(max-width:1000px){.controls{grid-template-columns:1fr 1fr;gap:4px 15px;padding:35px 24px 14px}.style-nav{grid-row:2;grid-column:1/-1}.switch-hint{grid-row:1;grid-column:2}.style-caption{grid-row:1}.switch-hint span{display:none}}
@media(max-width:600px){.masthead{padding:calc(env(safe-area-inset-top) + 18px) 19px 38px}.wordmark{font-size:26px}.quiet-button{font-size:10px;padding:8px 12px}.help-button{width:31px;height:31px;padding:0}.controls{padding:35px 19px max(15px,env(safe-area-inset-bottom));gap:4px 10px}.style-count{font-size:22px}.style-caption h1{font-size:11px}.style-caption{gap:8px}.switch-hint{font-size:9px;max-width:150px}.style-tab{width:29px;height:36px}.load-status{top:77px;max-width:88vw;font-size:10px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


.desk-news-mount{position:absolute;left:0;top:0;width:300px;height:540px;transform-origin:0 0;z-index:2;isolation:isolate;overflow:hidden;cursor:default}
.camera-gallery{position:absolute;left:10.2%;top:72.5987%;width:6.45258%;height:9.31812%;background:transparent;border:0;padding:0;border-radius:22%;z-index:3;cursor:pointer}
.camera-gallery:focus-visible{outline:1px dashed white;outline-offset:3px}
#desk-app[data-style="future"] .dn-screen{--dn-paper:#e8dce9;--dn-ink:#251c38;--dn-muted:#766286;--dn-accent:#89547f;box-shadow:inset 8px 0 24px #48cbea33,inset -6px 0 20px #fd679f25}
#desk-app[data-style="watercolor"] .dn-screen{--dn-paper:#f6e9ee;--dn-ink:#4e3755;--dn-accent:#93758e}
#desk-app[data-style="punk"] .dn-screen{--dn-paper:#e8dfce;--dn-ink:#291c38;--dn-accent:#b53981}
#desk-app[data-style="mandala"] .dn-screen{--dn-paper:#f8edc9;--dn-ink:#394c3e;--dn-accent:#887d25}
#desk-app[data-style="pop"] .dn-screen{--dn-paper:#f6efc6;--dn-ink:#182c68;--dn-accent:#b94642}
#desk-app[data-style="renaissance"] .dn-screen{--dn-paper:#e6d1a8;--dn-ink:#4d341e;--dn-muted:#856b49;--dn-accent:#70522d}
#desk-app[data-style="ink"] .dn-screen{--dn-paper:#efefed;--dn-ink:#181818;--dn-muted:#6d6d6d;--dn-accent:#444;box-shadow:inset 0 0 23px #bdbdbd80}
#desk-app[data-style="graffiti"] .dn-screen{--dn-paper:#e2dee9;--dn-ink:#2c2450;--dn-accent:#456e86}
#desk-app[data-style="offset"] .dn-screen{--dn-paper:#f8dfb6;--dn-ink:#253b44;--dn-accent:#a56643}
@media(max-width:600px){.view-tools{gap:4px}.view-tools .quiet-button{padding:8px 9px}.view-tools .help-button{padding:0}.masthead{gap:8px}}
@media(max-width:600px){#reset-view{font-size:0}#reset-view::after{content:'全景';font-size:10px}.view-tools{gap:3px}.view-tools .quiet-button{padding-inline:7px}}