:root { --site-header-ink:#10211c; --site-header-muted:#64736c; --site-header-teal:#176f62; --site-safe-top:env(safe-area-inset-top,0px); --site-header-height:calc(78px + var(--site-safe-top)); }
button,a,summary,[role="button"] { -webkit-tap-highlight-color:rgba(0,0,0,0); }
.has-site-topbar { padding-top:var(--site-header-height); }
.site-topbar { box-sizing:border-box;position:fixed;z-index:1000;inset:0 0 auto;height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(18,34,29,.13);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif;color:var(--site-header-ink); }
.site-topbar .site-brand { display:inline-flex;align-items:center;gap:11px;color:var(--site-header-ink);text-decoration:none;white-space:nowrap; }
.site-home-mark { width:35px;height:35px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #dce8df;border-radius:50%;color:var(--site-header-teal);background:#f7faf8; }
.site-home-mark svg { display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.site-topbar .site-brand strong { display:block;color:inherit;font-size:15px;font-weight:750;letter-spacing:.02em; }
.site-nav { display:flex;gap:32px;margin-left:55px; }
.site-nav a { position:relative;color:#68736c;text-decoration:none;font-size:13px;font-weight:750; }
.site-nav a:hover,.site-nav a.is-current { color:var(--site-header-ink); }
.site-nav a.is-current::after { content:"";position:absolute;left:1px;right:1px;bottom:-12px;height:2px;background:var(--site-header-teal); }
.site-actions { position:relative;display:flex;align-items:center;gap:18px; }
.site-topbar .site-settings-button { position:relative;display:grid;place-items:center;box-sizing:border-box;flex:0 0 auto;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:1px solid #dce8df;border-radius:50%;color:var(--site-header-teal);background:#f7faf8;font-size:12px;cursor:pointer; }
.site-topbar .site-settings-button>span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.site-topbar .site-settings-button:hover,.site-topbar .site-settings-button[aria-expanded="true"] { color:#fff;background:var(--site-header-teal); }
.site-topbar .site-settings-button:focus-visible { outline:2px solid var(--site-header-teal);outline-offset:3px; }
.site-topbar .site-settings-button svg { display:block;width:19px;height:19px;color:inherit;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round; }
.site-settings-panel { position:absolute;top:49px;right:44px;width:210px;padding:15px;border:1px solid rgba(18,34,29,.12);border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 16px 42px rgba(18,34,29,.15); }
.site-settings-panel[hidden],.site-notification-panel[hidden],.site-notification-badge[hidden],.site-announcement-panel[hidden] { display:none; }
.site-settings-panel p { margin:0 0 10px;color:var(--site-header-muted);font-size:10px;font-weight:700;letter-spacing:.08em; }
.site-theme-options { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.site-topbar .site-theme-option { padding:10px 7px;border:1px solid #dde4df;border-radius:10px;color:#53615b;background:#fff;font-size:11px;cursor:pointer; }
.site-topbar .site-theme-option span { display:block;margin-bottom:4px;font-size:16px; }
.site-topbar .site-theme-option.is-active { border-color:var(--site-header-teal);color:var(--site-header-teal);background:#f0f7f4; }
/* Keep settings controls independent of page-wide form/button rules. */
.site-topbar .site-settings-panel .site-xianggui-visibility-option { display:flex;flex-direction:row;align-items:center;gap:7px;margin:10px 0 0;color:var(--ink,var(--site-header-ink));font-size:10px;font-weight:400;line-height:normal;cursor:pointer; }
.site-topbar .site-settings-panel .site-xianggui-visibility-option input[type="checkbox"] { appearance:auto;box-sizing:border-box;flex:0 0 13px;width:13px;height:13px;min-width:13px;max-width:13px;min-height:13px;margin:3px 3px 3px 4px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;accent-color:var(--teal,var(--site-header-teal)); }
.site-topbar .site-settings-panel .tutorial-replay-entry { display:block;box-sizing:border-box;width:100%;min-width:0;min-height:0;margin:12px 0 0;padding:12px 18px;border:0;border-radius:12px;color:#176f62;background:#edf3ed;font:400 13px/normal Inter,"Noto Sans SC","Microsoft YaHei",sans-serif;letter-spacing:normal;text-align:center;box-shadow:none;cursor:pointer; }
.site-topbar .site-settings-panel .tutorial-replay-entry:focus-visible { outline:2px solid var(--site-header-teal);outline-offset:3px; }
.site-notifications,.site-announcements { position:relative;flex-shrink:0; }
.site-topbar .site-notification-button,.site-topbar .site-announcement-button { position:relative;display:grid;place-items:center;box-sizing:border-box;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:1px solid #dce8df;border-radius:50%;color:var(--site-header-teal);background:#f7faf8;font-size:16px;cursor:pointer; }
.site-topbar .site-notification-button:hover,.site-topbar .site-notification-button[aria-expanded="true"],.site-topbar .site-announcement-button:hover,.site-topbar .site-announcement-button[aria-expanded="true"] { color:#fff;background:var(--site-header-teal); }
.site-topbar .site-notification-button svg,.site-topbar .site-announcement-button svg { display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.site-notification-badge { position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border:1px solid #fff;border-radius:999px;color:#fff;background:#c24e37;font-size:10px;font-weight:800;line-height:1; }
.site-notification-panel { position:absolute;z-index:2;left:50%;right:auto;top:calc(100% + 10px);width:min(175px,calc(100vw - 24px));max-height:min(68dvh,520px);overflow:auto;padding:14px;border:1px solid #dce5dc;border-radius:14px;background:#fff;box-shadow:0 16px 42px rgba(21,60,53,.19);color:#153c35;font-size:12px;transform:translateX(-50%); }
.site-notification-panel>strong { display:block;margin-bottom:8px;font-size:14px; }
.site-notification-item { padding:10px 2px;border-top:1px solid #e5ebe6; }
.site-notification-item.is-unread { padding-left:10px;border-left:3px solid #b68a30; }
.site-notification-item strong,.site-notification-item p,.site-notification-item small { display:block;margin:0; }
.site-notification-item p { margin:5px 0;line-height:1.55; }
.site-notification-item small { color:#72857c; }
.site-notification-action { display:inline-flex;margin-top:8px;padding:5px 9px;border:1px solid #cfe2da;border-radius:999px;color:var(--site-header-teal);background:#f1f7f3;font-size:11px;font-weight:700;text-decoration:none; }
.site-announcement-panel { position:absolute;z-index:2;left:50%;right:auto;top:calc(100% + 10px);width:min(280px,calc(100vw - 24px));max-height:min(68dvh,520px);overflow:auto;padding:14px;border:1px solid #dce5dc;border-radius:14px;background:#fff;box-shadow:0 16px 42px rgba(21,60,53,.19);color:#153c35;font-size:12px;transform:translateX(-50%); }
.site-announcement-panel>strong { display:block;margin-bottom:8px;font-size:14px; }.site-announcement-item{padding:11px 2px;border-top:1px solid #e5ebe6}.site-announcement-item>strong,.site-announcement-item>small{display:block}.site-announcement-preview{display:-webkit-box;margin:6px 0;overflow:hidden;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.site-topbar .site-announcement-detail{margin-top:7px;padding:5px 9px;border:1px solid #cfe2da;border-radius:999px;color:var(--site-header-teal);background:#f1f7f3;font-size:11px;font-weight:700;cursor:pointer}
.site-announcement-dialog{width:min(620px,calc(100% - 28px));max-height:86dvh;padding:26px;border:1px solid #dce5dc;border-radius:20px;color:#153c35;background:#fff;box-shadow:0 24px 90px rgba(21,60,53,.25);font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif}.site-announcement-dialog::backdrop{background:rgba(16,33,28,.46)}.site-announcement-dialog img{display:block;width:100%;max-height:320px;margin:0 0 18px;border-radius:14px;object-fit:cover}.site-announcement-dialog small,.site-announcement-dialog time{display:block;color:#75857e}.site-announcement-dialog h2{margin:7px 42px 16px 0;font-size:24px}.site-announcement-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.site-announcement-dialog time{margin-top:20px}.site-announcement-close{float:right;width:38px;height:38px;border:0;border-radius:50%;color:var(--site-header-teal);background:#edf3ed;font-size:24px;cursor:pointer}
.site-announcement-dialog .navigation-dialog-actions button{padding:10px 16px;border:0;border-radius:12px;color:#167b6d;background:#edf4ef;font:inherit;cursor:pointer}
.site-contribute { flex-shrink:0;padding:8px 12px;border:1px solid #dce8df;border-radius:18px;color:var(--site-header-teal);background:#f1f7f3;font-size:12px;text-decoration:none;white-space:nowrap; }
.site-contribute:hover { color:#fff;background:var(--site-header-teal); }
.site-account { position:relative; }
.site-account summary { list-style:none;cursor:pointer; }
.site-account summary::-webkit-details-marker { display:none; }
.site-avatar { position:relative;width:32px;height:32px;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:#fffaf1;background:#d3a33d;font-size:12px;font-weight:700; }
.site-avatar.has-image{color:transparent;background-position:center;background-size:cover}
.site-avatar.is-reviewing::after{content:"审核中";position:absolute;left:0;right:0;top:50%;translate:0 -50%;padding:2px 0;color:#fff;background:rgba(18,57,49,.82);font-size:7px;line-height:1;text-align:center}
.site-account-dropdown { position:absolute;z-index:2;right:0;top:calc(100% + 10px);min-width:210px;padding:14px;border:1px solid #dce5dc;border-radius:14px;background:#fff;box-shadow:0 12px 36px rgba(21,60,53,.15);color:#153c35;font-size:13px; }
.site-account-dropdown a { display:block;padding:8px;color:var(--site-header-teal);text-decoration:none; }
.site-topbar .site-account-dropdown button { border:0;border-radius:8px;padding:10px;color:var(--site-header-teal);background:#edf3ed;cursor:pointer; }
.site-account-dropdown p { margin:8px;font-size:12px; }
.site-account-dropdown [hidden] { display:none; }
.studio-page:not(.studio-embedded)>.studio-header,.creator-page:not(.studio-embedded)>.studio-header,.feedback-page>.feedback-header { display:none; }
.studio-embedded>.site-topbar { display:none; }
.studio-embedded.has-site-topbar { padding-top:0; }
@media(max-width:1100px) {
  .site-topbar { padding:0 28px; }
  .site-nav { gap:18px;margin-left:0; }
}
@media(max-width:980px) {
  .site-nav a { font-size:13px; }
}
@media(max-width:700px) {
  .site-topbar { z-index:900;padding-inline:14px;display:grid;grid-template-columns:1fr auto;grid-template-rows:44px 26px;gap:0;align-content:center;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none; }
  .site-nav { grid-row:2;grid-column:1/-1;justify-content:center;gap:24px;margin:0; }
  .site-nav a { font-size:10px; }
  .site-nav a.is-current::after { bottom:-4px; }
  .site-actions { gap:8px; }
  .site-contribute { padding:7px 9px;font-size:11px; }
}

/* One flattened raster scene per theme/width; no separate website mascot layer.
   Desktop scenes use their reviewed crop anchors. Compact variants frame the
   original paintings without AI super-resolution / sharpening reconstruction.
   Cover keeps the artwork proportional at every breakpoint.
   Responsive changes below are art/anchor parameters, never another layout. */
html .site-topbar{--site-header-art:url('/assets/ui/site-header-day-wide-scene-v9.png');--site-header-art-x:0%;--site-header-art-y:63.4%;isolation:isolate;background:#75bcec;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Extend the painting behind the device safe area, but keep the original
   78px control area below it. Zero-inset browsers retain their old geometry. */
html .site-topbar{height:var(--site-header-height);padding-top:var(--site-safe-top);padding-left:max(14px,env(safe-area-inset-left,0px),4vw);padding-right:max(14px,env(safe-area-inset-right,0px),4vw)}
@media(max-width:1100px) and (min-width:701px){html .site-topbar{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}}
@media(max-width:700px){html .site-topbar{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}}
.site-topbar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:1;filter:none;background-image:var(--site-header-art);background-position:var(--site-header-art-x) var(--site-header-art-y);background-size:cover;background-repeat:no-repeat}
.site-topbar::after{content:none}
.site-topbar .site-brand,.site-topbar .site-nav a{text-shadow:0 1px 0 #ffffff66}
.site-topbar .site-nav a:not(.is-current){color:#153f38}
html:not([data-theme=night]) .site-topbar .site-nav a.is-current::after{border-radius:0;background:#293d70;box-shadow:none}
:root[data-theme=night] .site-topbar{--site-header-art:url('/assets/ui/site-header-night-wide-scene-v12.webp');--site-header-art-y:86.5%;--site-header-ink:#e5f3ef;--site-header-muted:#b6cec6;--site-header-teal:#a6dccf;background:#152d38;border-bottom-color:#b9d5d82e}
:root[data-theme=night] .site-topbar .site-nav a{color:#e3f2ee;text-shadow:0 1px 1px #10242a}
:root[data-theme=night] .site-topbar .site-brand{text-shadow:0 1px 1px #10242a}
:root[data-theme=night] .site-topbar .site-nav a:is(:hover,.is-current){color:#fff}
:root[data-theme=night] .site-topbar :is(.site-home-mark,.site-settings-button,.site-notification-button,.site-announcement-button,.site-contribute){background:#193b43;border-color:#94bcb366;color:#c2ecdf}
:root[data-theme=night] .site-topbar :is(.site-settings-panel,.site-account-dropdown,.site-notification-panel,.site-announcement-panel){color:#153c35;--site-header-ink:#153c35;--site-header-muted:#64736c;--site-header-teal:#176f62}
:root[data-theme=night] .site-topbar .site-settings-button:is(:hover,[aria-expanded=true]){background:#2a5057;color:#fff}
@media(min-width:1500px) and (max-width:1850px){html:not([data-theme=night]) .site-topbar{--site-header-art-y:64.5%}}
@media(min-width:1851px) and (max-width:2100px){html:not([data-theme=night]) .site-topbar{--site-header-art-y:65%}}
@media(min-width:1851px) and (max-width:2100px){:root[data-theme=night] .site-topbar{--site-header-art-y:87.2%}}
@media(min-width:2101px){html:not([data-theme=night]) .site-topbar{--site-header-art:url('/assets/ui/site-header-day-ultra-scene-v7.svg');--site-header-art-y:96%}}
@media(min-width:2101px){:root[data-theme=night] .site-topbar{--site-header-art-y:85.8%}}
@media(max-width:1100px){
 html .site-topbar{--site-header-art:url('/assets/ui/site-header-day-medium-scene-v11.svg');--site-header-art-y:65%}
 :root[data-theme=night] .site-topbar{--site-header-art:url('/assets/ui/site-header-night-medium-scene-v7.svg');--site-header-art-x:30%;--site-header-art-y:100%}
}
@media(max-width:600px){
 html .site-topbar{--site-header-art:url('/assets/ui/site-header-day-compact-scene-v11.svg');--site-header-art-y:65%}
 :root[data-theme=night] .site-topbar{--site-header-art:url('/assets/ui/site-header-night-compact-scene-v7.svg');--site-header-art-x:0%;--site-header-art-y:40%}
}