/* Public historical work gallery. Gate selectors affect the visible entrance only. */
.c4-work { --work-paper:#f5f1e8; --work-ink:#253a43; --work-muted:#65747a; --work-accent:#ae613f; --work-line:#c7ceca; }
.c4-work-nav { position:relative; z-index:1005; display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(1200px,calc(100% - 48px)); margin:0 auto; padding:22px 0; border-bottom:1px solid var(--work-line); font:13px/1.5 system-ui,sans-serif; color:var(--work-ink); }
.c4-work-nav a { color:inherit; text-decoration:none; }
.c4-work-nav > a { font-weight:700; }
.c4-work-nav nav { display:flex; gap:22px; }
.c4-work :is(a,button,input):focus-visible { outline:3px solid var(--work-accent); outline-offset:4px; }
.c4-work-project { margin:0; padding:0; min-height:100vh; height:auto; display:block; overflow-x:clip; overflow-y:auto; color:var(--work-ink); background:var(--work-paper); font-family:system-ui,"Microsoft YaHei",sans-serif; }
.c4-work-project #backgroundCanvas,.c4-work-project #box,.c4-work-project #snowPile { opacity:.07; pointer-events:none; }
.c4-work-cover { position:relative; z-index:2; width:min(1120px,calc(100% - 48px)); margin:64px auto 36px; padding:0 0 40px; border-bottom:1px solid var(--work-line); }
.c4-work-cover > p:first-child { color:var(--work-accent); font-size:12px; letter-spacing:.12em; }
.c4-work-cover h1 { margin:20px 0; color:var(--work-ink); font-family:"Songti SC","STSong",Georgia,serif; font-weight:500; font-size:clamp(44px,6vw,82px); line-height:1.2; }
.c4-work-cover > p { color:var(--work-muted); font-size:15px; line-height:1.8; }
.c4-work-cover nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:28px; }
.c4-work-cover nav a { padding:9px 0; color:var(--work-ink); text-decoration:none; border-bottom:2px solid transparent; }
.c4-work-cover nav a[aria-current] { color:var(--work-accent); border-color:currentColor; }
.c4-work-project > .container,.c4-work-project > #menu-container { position:relative; inset:auto; transform:none; width:min(1120px,calc(100% - 48px)); max-width:1120px; height:auto; min-height:0; margin:40px auto 100px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.c4-work-project .content { opacity:1; visibility:visible; }
.c4-work-project h1,.c4-work-project h2,.c4-work-project h3 { color:var(--work-ink); text-shadow:none; }
.c4-work-project p { color:var(--work-muted); }
.c4-work-project button,.c4-work-project input[type=submit],.c4-work-project input[type=button] { min-height:44px; color:var(--work-paper); background:var(--work-ink); border:1px solid var(--work-ink); border-radius:3px; box-shadow:none; padding:10px 20px; }
.c4-work-project .button-container { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.c4-work-project .quote-container { max-width:720px; margin:32px auto; padding:30px; border-block:1px solid var(--work-line); color:var(--work-ink); background:#ebe8de; }
.c4-work-project .quote { color:var(--work-ink); font-size:20px; line-height:1.8; text-shadow:none; }
.c4-work-project .logout-button { position:relative; inset:auto; width:min(1120px,calc(100% - 48px)); margin:20px auto; text-align:right; }
.c4-work-project .home-intro,.c4-work-project .home-section,.c4-work-project #menu-1,.c4-work-project #menu-container { background:transparent; box-shadow:none; width:100%; max-width:100%; padding:0; }
.c4-work-project .welcome-title { font-size:30px; line-height:1.4; color:var(--work-ink); }
.c4-work-project .projects-header { text-align:left; max-width:760px; margin:42px auto; line-height:1.9; }
.c4-work-project .projects-holder { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:40px 0; }
.c4-work-project .projects-holder > * { width:auto; float:none; margin:0; }
.c4-work-project .project-item { background:#fffdf7; border:1px solid var(--work-line); box-shadow:none; border-radius:0; }
.c4-work-project .project-item img { width:100%; height:auto; object-fit:cover; }
.c4-work-project .navigation-buttons,.c4-work-project .back-to-home { position:relative; inset:auto; display:flex; justify-content:center; gap:16px; transform:none; margin:36px auto; }
.c4-work-project footer { position:relative; inset:auto; margin:64px auto 20px; background:transparent; }
.c4-work-myself .c4-work-cover { margin-bottom:48px; }
.c4-work-myself > .sidebar { position:relative; inset:auto; width:min(1120px,calc(100% - 48px)); height:auto; margin:0 auto; padding:22px; background:var(--work-ink); display:flex; gap:32px; align-items:center; }
.c4-work-myself .sidebar .avatar { margin:0; width:86px; height:86px; flex-shrink:0; }
.c4-work-myself .sidebar .avatar img { width:86px; height:86px; }
.c4-work-myself .sidebar .nav { display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; }
.c4-work-myself .sidebar .nav a { color:var(--work-paper); padding:10px; }
.c4-work-myself > main { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:0; }
.c4-work-myself main section { border-bottom:1px solid var(--work-line); padding:52px 0; background:transparent; }
.c4-work-myself .wrap { padding:0; }
.c4-work-myself .row { margin:0; }
.c4-work-myself .skills-icon { color:var(--work-accent); }
.c4-work-myself main a { color:var(--work-accent); }
.c4-work-Collect .sidebar { background:var(--work-ink); }
.c4-work-Collect .sidebar :is(a,li) { color:var(--work-paper); }
.c4-work-Collect #content-container { padding:32px; background:#fffdf7; border:1px solid var(--work-line); }
.c4-work-login #overlay { background:transparent; pointer-events:none; }
.c4-work-login .back { position:relative; inset:auto; width:min(440px,calc(100% - 48px)); height:auto; margin:72px auto; transform:none; }
.c4-work-login .log { width:100%; height:auto; margin:0; padding:36px; color:var(--work-ink); border:1px solid var(--work-line); border-radius:0; background:#fffdf7; box-shadow:12px 12px 0 #e3e6df; box-sizing:border-box; }
.c4-work-login .logtitle { color:var(--work-ink); font-size:36px; margin-bottom:28px; }
.c4-work-login .txt { width:100%; box-sizing:border-box; min-height:48px; border:1px solid var(--work-line); border-radius:3px; margin:8px 0; color:var(--work-ink); background:var(--work-paper); padding:12px; }
.c4-work-login #sub,.c4-work-login #ykbt { width:100%; margin:12px 0 0; }
.c4-work-love .prompt,.c4-work-love .prompta { color:var(--work-ink); background:#fffdf7; border:1px solid var(--work-line); border-radius:4px; box-shadow:10px 10px 0 #d5ddd5; max-width:calc(100vw - 48px); padding:28px; }
.c4-work-love .me404 { display:block; width:min(1000px,100%); height:auto; margin:10vh auto; }
.c4-loading-copy { width:min(760px,calc(100% - 48px)); margin:20vh auto; }
.c4-loading-copy h1 { font:500 clamp(36px,6vw,70px)/1.3 Georgia,"STSong",serif; }
.c4-loading-copy a { display:inline-block; margin-top:30px; color:var(--work-accent); }
.c4-work-dev { display:block; padding:0; background:var(--work-paper); color:var(--work-ink); font-family:system-ui,sans-serif; }
.c4-work-dev > .container { width:min(1000px,calc(100% - 48px)); max-width:1000px; text-align:left; margin:80px auto; }
.c4-work-dev .header { display:grid; grid-template-columns:80px 1fr; gap:4px 20px; margin-bottom:56px; }
.c4-work-dev .header .icon { grid-row:span 2; font-size:50px; animation:none; }
.c4-work-dev .header h1 { color:var(--work-ink); font:500 clamp(40px,7vw,72px)/1.2 "STSong",Georgia,serif; letter-spacing:0; }
.c4-work-dev .header p,.c4-work-dev .entry-info .desc,.c4-work-dev .empty,.c4-work-dev .footer,.c4-work-dev .back-link { color:var(--work-muted); }
.c4-work-dev .entry-card { padding:32px; border:1px solid var(--work-line); background:#fffdf7; border-radius:0; box-shadow:8px 8px 0 #e0e4db; }
.c4-work-dev .entry-info .label { font-size:24px; color:var(--work-ink); margin-bottom:12px; }
.c4-work-dev .entry-arrow { color:var(--work-accent); }
.c4-work-dev .status-badge { color:#854726; background:#f3e2cc; }
.c4-work-dev .empty { border-bottom:1px solid var(--work-line); font-size:14px; }
.c4-work-gate .c4-work-nav { position:fixed; top:0; left:24px; right:24px; z-index:100001; color:#fff7e9; border-color:#676263; width:auto; }
.c4-work-gate #pw-gate { background:linear-gradient(130deg,#243c43,#25313c); }
.c4-work-gate :is(.pw-title,.pw-hint) { color:#fff7e9; }
.c4-work-gate .pw-input-wrap input { border:1px solid #99b0b4; border-radius:3px; }
.c4-work-wanzhong { background:#f5efe3; color:#492f31; }
.c4-work-wanzhong > canvas { opacity:.15; }
.c4-work-wanzhong .c4-work-nav { position:fixed; inset:0 24px auto; width:auto; }
.c4-work-wanzhong .phase { padding-top:84px; box-sizing:border-box; }
.c4-work-wanzhong .arrival-text { color:#593237; font:500 clamp(28px,5vw,58px)/1.4 "STSong",Georgia,serif; }
.c4-work-wanzhong .arrival-hint { color:#785e54; opacity:1; animation:none; }
.c4-work-wanzhong .arrival-star { border:0; padding:0; }
.c4-work-wanzhong .arrival-star:focus-visible { outline:3px solid #713b3c; outline-offset:14px; }
.c4-work-wanzhong .memory-hint.show { animation:none; background:#fffaf0; border-color:#cbb7a4; }
.c4-work-wanzhong .letter-paper { background:#fffaf0; border:1px solid #cbb7a4; border-radius:0; box-shadow:14px 14px 0 #e1d4c1; }
.c4-work-wanzhong .letter-content { color:#503f38; }
.c4-work-wanzhong .letter-sign,.c4-work-wanzhong .letter-continue,.c4-work-wanzhong .memory-caption,.c4-work-wanzhong .memory-hint,.c4-work-wanzhong .reasons-counter,.c4-work-wanzhong .reasons-done,.c4-work-wanzhong .ending-line,.c4-work-wanzhong .ending-restart { color:#78534c; }
.c4-work-wanzhong .memory-title { color:#492f31; }
.c4-work-wanzhong .reason-card-front { background:#713b3c; color:#fff5e5; border:1px solid #713b3c; border-radius:4px; }
.c4-work-wanzhong .reason-card-back { background:#fffaf0; color:#593237; border:1px solid #cbb7a4; border-radius:4px; }
.c4-work-wanzhong .ending-btn { background:#713b3c; border-color:#713b3c; color:#fff5e5; border-radius:3px; }
@media(max-width:700px) {
  .c4-work-nav { width:calc(100% - 32px); padding:16px 0; gap:12px; font-size:11px; flex-wrap:wrap; }
  .c4-work-nav > span { display:none; }
  .c4-work-nav nav { gap:16px; }
  .c4-work-cover { width:calc(100% - 32px); margin-top:40px; }
  .c4-work-project > .container,.c4-work-project > #menu-container,.c4-work-myself > main,.c4-work-myself > .sidebar { width:calc(100% - 32px); }
  .c4-work-project .projects-holder { grid-template-columns:1fr; }
  .c4-work-myself > .sidebar { box-sizing:border-box; gap:16px; }
  .c4-work-myself .row > * { width:100%; float:none; padding:14px 0; }
  .c4-work-project .quote-container { padding:22px 16px; }
  .c4-work-project .quote { font-size:17px; }
  .c4-work-dev > .container { width:calc(100% - 32px); margin:48px auto; }
  .c4-work-dev .entry-card { padding:24px 18px; }
  .c4-work-dev .entry-info .label { font-size:19px; }
  .c4-work-gate .c4-work-nav,.c4-work-wanzhong .c4-work-nav { left:16px; right:16px; width:auto; }
}
.c4-work-project *, .c4-work-project *::before, .c4-work-project *::after { box-sizing:border-box; }
.c4-work-project :is(.container,#menu-container,#menu-1,.home-intro) { min-width:0!important; max-width:100%; }
.c4-work-project :is(#menu-container,#menu-1,.home-intro) { padding:0!important; margin-inline:0!important; width:100%!important; }
.c4-work-project .animated { animation:none!important; transform:none!important; opacity:1!important; }
.c4-work-project #title1 { color:var(--work-ink); text-shadow:none; font:500 clamp(30px,4vw,48px)/1.4 "STSong",Georgia,serif; }
.c4-work-project #title2 { color:var(--work-muted); text-shadow:none; font-size:21px; line-height:1.6; }
.c4-work-project #buttons { margin-block:28px; }
.c4-work-myself .sidebar .nav { flex-direction:row; height:auto; width:auto; align-items:center; }
.c4-work-myself .avatar img { position:static; transform:none; object-fit:cover; height:86px; width:86px; }
.c4-work-project .c4-music { width:min(1120px,calc(100% - 32px)); margin:24px auto; border-block:1px solid var(--work-line); background:#ebece3; }
.c4-work-project .c4-music summary { min-height:44px; padding:14px 18px; cursor:pointer; color:var(--work-ink); font-size:14px; }
.c4-work-project #player-container { position:relative!important; inset:auto!important; width:100%!important; max-width:100%; height:auto; transform:none!important; border:0; background:#e4e8e0; color:var(--work-ink); box-shadow:none; margin:0; padding:20px; }
.c4-work-project #song-list { max-height:240px; overflow-y:auto; background:transparent; }
.c4-work-project #songs li { color:var(--work-ink); background:transparent; padding:12px; }
.c4-work-project #controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.c4-work-project #controls button { flex:1 1 auto; padding:10px; font-size:14px; }
.c4-work-project #song-hint { display:none; }
.c4-work-Collect #sidebar-toggle { position:relative; top:auto; left:auto; width:auto; margin:0 16px 24px; z-index:20; transform:none; }
.c4-work-Collect #content-container { min-height:0; width:100%; overflow-wrap:anywhere; }
.c4-work-Collect #content-container p { line-height:1.95; }
.c4-work-myself .sidebar .nav { background:transparent; }
.c4-work-myself .row.scrollable { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; white-space:normal; overflow:visible; }
.c4-work-myself .row.scrollable > * { width:auto; min-width:0; }
.c4-work-love .me404 { position:relative!important; inset:auto!important; transform:none!important; width:min(900px,calc(100% - 32px)); margin:4rem auto; }
.c4-work-love .return-home-button { position:relative; inset:auto; display:block; margin:2rem auto 4rem; }
@media(max-width:700px) {
  .c4-work-myself > .sidebar { align-items:flex-start; }
  .c4-work-myself .sidebar .nav { gap:0; }
  .c4-work-project > .container { width:calc(100% - 32px)!important; margin-inline:auto!important; }
  .c4-work-project > #menu-container { width:calc(100% - 32px)!important; margin-inline:auto!important; }
  .c4-work-project .welcome-title { font-size:26px; overflow-wrap:anywhere; }
  .c4-work-myself .row.scrollable { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .c4-work-project * { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
.c4-work-gate #pw-gate .pw-hint { color: #e6dbc5; }
.c4-work-wanzhong .arrival-star { min-width:44px; min-height:44px; background:radial-gradient(circle,#b35d2a 0 5px,transparent 6px); border:1px solid #cbb7a4; }
.c4-work-wanzhong .letter-greeting,.c4-work-wanzhong .ending-resp { color:#713b3c; }
.c4-work-wanzhong .letter-sign.show { opacity:1; }
.c4-work-wanzhong .letter-continue { min-height:44px; color:#fff5e5; background:#713b3c; border-color:#713b3c; }
.c4-work-wanzhong .memory-arrow { color:#713b3c; background:#fffaf0; border-color:#cbb7a4; }
.c4-work-wanzhong .memory-counter,.c4-work-wanzhong .reasons-counter { top:86px; color:#78534c; }
.c4-work-wanzhong .memory-label { opacity:1; transform:none; }