:root{--color-bg: #0f1419;--color-bg-elevated: #161d27;--color-surface: #1e2733;--color-border: rgba(255, 248, 235, .12);--color-text: #f5f0e6;--color-text-muted: rgba(245, 240, 230, .65);--color-accent: #c9a227;--color-accent-soft: rgba(201, 162, 39, .2);--color-music: #6eb8c0;--color-art: #c8956d;--font-serif: "Noto Serif SC", "Songti SC", serif;--font-sans: "DM Sans", system-ui, -apple-system, sans-serif;--radius: 12px;--shadow: 0 18px 50px rgba(0, 0, 0, .45);--max-width: 1120px;--header-h: 64px}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--color-text);background:radial-gradient(1200px 800px at 10% -10%,#1a2433 0%,var(--color-bg) 55%)}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}#app{min-height:100vh;display:flex;flex-direction:column}.sanoi-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--color-border);background:#0f1419eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sanoi-header-inner{width:100%;max-width:var(--max-width);margin:0 auto;padding:max(.65rem,env(safe-area-inset-top,0px)) 1rem .65rem;display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand toggle" "nav nav";align-items:center;column-gap:.75rem;row-gap:0}.sanoi-brand{grid-area:brand;display:flex;align-items:baseline;gap:.45rem;min-width:0;color:var(--color-text);text-decoration:none;white-space:nowrap}.sanoi-brand:hover{text-decoration:none}.sanoi-brand-mark{font-family:var(--font-serif);font-weight:700;font-size:1.15rem;letter-spacing:.04em}.sanoi-brand-sub{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--color-text-muted)}.sanoi-nav-toggle{grid-area:toggle;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);cursor:pointer}.sanoi-nav-toggle-bar{display:block;width:1.1rem;height:2px;margin:0 auto;border-radius:1px;background:currentColor;transition:transform .2s ease,opacity .2s ease}.sanoi-header.nav-open .sanoi-nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}.sanoi-header.nav-open .sanoi-nav-toggle-bar:nth-child(2){opacity:0}.sanoi-header.nav-open .sanoi-nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.sanoi-nav{grid-area:nav;display:none;flex-direction:column;gap:.15rem;margin-top:.65rem;padding:.5rem 0 .25rem;border-top:1px solid var(--color-border)}.sanoi-header.nav-open .sanoi-nav{display:flex}.sanoi-nav a{font-size:1rem;color:var(--color-text-muted);padding:.65rem .5rem;border-radius:8px;text-decoration:none}.sanoi-nav a:hover{color:var(--color-text);background:var(--color-surface);text-decoration:none}.sanoi-nav a.active{color:var(--color-bg);background:var(--color-accent)}body.sanoi-nav-lock{overflow:hidden}@media (min-width: 768px){.sanoi-header-inner{display:flex;flex-wrap:nowrap;justify-content:space-between;padding:0 1.25rem;min-height:var(--header-h)}.sanoi-nav-toggle{display:none}.sanoi-nav{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem .5rem;margin-top:0;padding:0;border-top:none}.sanoi-nav a{font-size:.9rem;padding:.35rem .5rem;white-space:nowrap}body.sanoi-nav-lock{overflow:auto}}.sanoi-main{flex:1;width:100%;max-width:var(--max-width);margin:0 auto;padding:2rem 1.25rem 3rem}.sanoi-footer{border-top:1px solid var(--color-border);padding:1.5rem 1.25rem 2rem;color:var(--color-text-muted);font-size:.85rem}.sanoi-footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}.hero{display:grid;gap:1.5rem;padding:2rem 0 2.5rem}@media (min-width: 840px){.hero{grid-template-columns:1.15fr .85fr;align-items:center;padding:3rem 0}}.hero-kicker{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .75rem}.hero-title{font-family:var(--font-serif);font-size:clamp(2rem,4vw,2.75rem);line-height:1.2;margin:0 0 1rem}.hero-lead{margin:0;color:var(--color-text-muted);max-width:36rem}.hero-panel{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}.hero-panel h2{font-family:var(--font-serif);font-size:1.1rem;margin:0 0 1rem}.pillar-grid{display:grid;gap:.75rem}.pillar-card{display:block;padding:.9rem 1rem;border-radius:10px;background:var(--color-surface);border:1px solid transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}.pillar-card:hover{border-color:var(--color-border);transform:translateY(-1px);text-decoration:none}.pillar-card strong{display:block;font-size:.95rem;margin-bottom:.2rem}.pillar-card span{font-size:.8rem;color:var(--color-text-muted)}.pillar-card.music{border-left:3px solid var(--color-music)}.pillar-card.art{border-left:3px solid var(--color-art)}.pillar-card.play{border-left:3px solid var(--color-accent)}.daily-picks{margin:.5rem 0 2.5rem;padding:1.25rem 1.25rem 1.5rem;border-radius:var(--radius);border:1px solid var(--color-border);background:linear-gradient(165deg,rgba(110,184,192,.08) 0%,var(--color-bg-elevated) 42%,rgba(200,149,109,.07) 100%);box-shadow:var(--shadow)}.daily-picks-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}.daily-picks-title{margin:0;font-size:clamp(1.35rem,2.8vw,1.65rem);font-family:var(--font-serif)}.daily-picks-date{margin:0;font-size:.88rem;color:var(--color-text-muted)}.daily-picks-lead{margin:.75rem 0 1rem;max-width:none}.daily-kbd{display:inline-block;padding:.1em .35em;border-radius:4px;border:1px solid var(--color-border);font-size:.82em;font-family:ui-monospace,monospace;background:var(--color-surface);color:var(--color-text-muted)}.daily-picks-grid{display:grid;gap:1.25rem}@media (min-width: 720px){.daily-picks-grid{grid-template-columns:1fr 1fr;align-items:stretch}}.daily-picks-loading{margin:0;grid-column:1 / -1}.daily-picks-placeholder{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}.daily-picks-hint{margin:0;max-width:40rem}.daily-card{padding:1rem 1.1rem 1.15rem;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);display:flex;flex-direction:column;min-height:100%}.daily-card--music{border-top:3px solid var(--color-music)}.daily-card--art{border-top:3px solid var(--color-art)}.daily-card--empty{border-top-color:var(--color-border)}.daily-card-eyebrow{margin:0 0 .35rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent)}.daily-card-title{font-family:var(--font-serif);font-size:1.15rem;margin:0 0 .35rem;line-height:1.35}.daily-card-title a{color:var(--color-text);text-decoration:none}.daily-card-title a:hover{color:var(--color-accent);text-decoration:underline}.daily-card-meta{margin:0 0 .5rem;font-size:.85rem;color:var(--color-text-muted)}.daily-card-blurb{margin:0 0 .75rem;font-size:.9rem;color:var(--color-text-muted);line-height:1.55;flex:1}.daily-card-audio{margin:0 0 .75rem}.daily-card-audio audio{width:100%;max-height:40px}.daily-card-visual{margin:0 0 .75rem;border-radius:10px;overflow:hidden;border:1px solid var(--color-border);background:var(--color-bg);aspect-ratio:4 / 3;max-height:220px}.daily-card-visual img{width:100%;height:100%;object-fit:contain;display:block}.daily-card-cta{font-size:.88rem;font-weight:600;margin-top:auto;align-self:flex-start}.section-title{font-family:var(--font-serif);font-size:1.5rem;margin:2.5rem 0 1rem}.section-sub{color:var(--color-text-muted);margin:0 0 1.25rem;max-width:40rem}.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}.card-img{aspect-ratio:4 / 3;background:var(--color-surface);object-fit:cover;width:100%;display:block}.card-body{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.35rem}.card-body h3{font-family:var(--font-serif);font-size:1.05rem;margin:0}.card-meta{font-size:.8rem;color:var(--color-text-muted)}.card-body p{margin:0;font-size:.88rem;color:var(--color-text-muted);flex:1}.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}.tag{font-size:.75rem;padding:.25rem .55rem;border-radius:999px;background:var(--color-accent-soft);color:var(--color-accent)}.callout{border:1px dashed var(--color-border);border-radius:var(--radius);padding:1rem 1.15rem;color:var(--color-text-muted);font-size:.9rem}.callout strong{color:var(--color-text)}.game-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.game-list li{padding:1rem;border-radius:var(--radius);background:var(--color-bg-elevated);border:1px solid var(--color-border)}.game-list h3{margin:0 0 .35rem;font-size:1rem;font-family:var(--font-serif)}.game-list p{margin:0;font-size:.88rem;color:var(--color-text-muted)}.card-link{color:inherit;text-decoration:none}.card-link:hover{text-decoration:none;border-color:var(--color-accent)}.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.filter-chip{font:inherit;cursor:pointer;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg-elevated);color:var(--color-text-muted)}.filter-chip:hover{color:var(--color-text);border-color:var(--color-text-muted)}.filter-chip.active{background:var(--color-accent-soft);color:var(--color-accent);border-color:var(--color-accent)}.music-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.music-card-wrap{display:flex;flex-direction:column;gap:.45rem}.music-card-play{padding:0 .25rem .35rem}.music-card-play audio{width:100%;max-width:100%;height:32px}.game-mini-desc{line-height:1.65;max-width:40rem}.music-ai-inline-text{margin:.35rem 0 0;padding:.85rem 1rem;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-bg-elevated);font-size:.95rem;line-height:1.65;color:var(--color-text-muted);white-space:pre-wrap;max-width:52rem}.music-card-intro{margin:.35rem 0 0;font-size:.82rem;line-height:1.45;color:var(--color-text-muted)}.detail-lead{margin:0 0 .75rem;font-size:.95rem;line-height:1.55;color:var(--color-text-muted);border-left:3px solid var(--color-music);padding-left:.85rem}.music-card-main{display:block;padding:1rem 1.1rem;border-radius:var(--radius);background:var(--color-bg-elevated);border:1px solid var(--color-border);transition:border-color .15s,transform .15s;color:inherit;text-decoration:none}.music-card-main:hover{transform:translateY(-2px);border-color:var(--color-music);text-decoration:none}.music-card-main h3{font-family:var(--font-serif);font-size:1.05rem;margin:0 0 .35rem}.detail-layout{max-width:720px}.detail-layout.art-detail-page{max-width:var(--max-width)}.art-list-lead{margin:.35rem 0 .75rem}.back-link{display:inline-block;margin-bottom:.5rem;font-size:.9rem}.text-link{color:var(--color-accent)}.detail-article{padding:.25rem 0 1rem}.detail-sub{margin:.25rem 0 .75rem;color:var(--color-text-muted);font-size:.95rem}.detail-heading{font-family:var(--font-serif);font-size:1.15rem;margin:1.5rem 0 .5rem}.detail-body{margin:0;color:var(--color-text);white-space:pre-wrap}.audio-block{margin:1rem 0}.audio-block audio{width:100%;max-width:420px}.art-card-grid{align-items:stretch}.art-list-header .filter-row{margin-bottom:0}.art-card{overflow:hidden;transition:transform .15s ease,border-color .15s ease}.art-card:hover{transform:translateY(-3px);border-color:var(--color-art)}.art-card-image-wrap{min-height:11rem;max-height:20rem;background:var(--color-surface);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:.35rem}.art-card-image-wrap.is-portrait{min-height:13rem;max-height:22rem}.art-card-image-wrap.is-landscape{min-height:9rem;max-height:16rem}.art-card .art-card-img.card-img{aspect-ratio:unset;width:auto;height:auto;max-width:100%;max-height:19rem;object-fit:contain}.art-card-intro{margin:.4rem 0 0;font-size:.84rem;line-height:1.45;color:var(--color-text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.art-detail-host{display:block!important;grid-template-columns:none!important}.art-detail-head{margin-bottom:1rem;max-width:52rem}.art-detail-title{margin:0}.art-detail-meta{margin-bottom:.35rem}.art-detail-head .section-sub{margin:.2rem 0}.art-detail{display:grid;gap:1.25rem;grid-template-columns:1fr}@media (min-width: 768px){.art-detail{grid-template-columns:minmax(260px,42%) minmax(0,1fr);align-items:start;gap:1.75rem}}.art-detail-copy{min-width:0;max-width:42rem}.art-detail-lead{margin:0 0 .75rem;font-size:1.02rem;line-height:1.65;color:var(--color-text)}.art-detail-museum{margin-top:.35rem}.art-detail-visual{min-width:0}@media (min-width: 768px){.art-detail-visual{position:sticky;top:calc(var(--header-h) + .75rem)}}.art-detail-visual-frame{background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;width:100%;min-height:min(42vh,360px);max-height:min(78vh,820px);padding:.5rem;overflow:hidden}.art-detail-visual-frame.is-portrait{min-height:min(50vh,440px);max-height:min(82vh,880px)}.art-detail-visual-frame.is-landscape{min-height:min(32vh,260px);max-height:min(58vh,480px)}.art-detail-visual-img{display:block;width:auto;height:auto;max-width:100%;max-height:min(76vh,800px);object-fit:contain;border-radius:calc(var(--radius) - 4px)}.art-detail-fold{margin:0 0 .65rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg-elevated);overflow:hidden}.art-detail-fold-summary{cursor:pointer;padding:.75rem 1rem;font-family:var(--font-serif);font-size:1.05rem;font-weight:600;list-style:none;-webkit-user-select:none;user-select:none}.art-detail-fold-summary::-webkit-details-marker{display:none}.art-detail-fold-summary:before{content:"▸ ";color:var(--color-accent)}.art-detail-fold[open] .art-detail-fold-summary:before{content:"▾ "}.art-detail-fold .detail-body{padding:0 1rem .85rem;margin:0;font-size:.95rem;line-height:1.6;white-space:normal}.art-detail-fold .detail-heading{display:none}.art-img-missing{width:100%;min-height:10rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1rem;text-align:center;color:var(--color-text-muted);font-size:.9rem;border-radius:var(--radius);border:1px dashed var(--color-border);background:var(--color-bg-elevated)}.art-img-missing span{font-weight:600;color:var(--color-text)}.art-img-missing small{font-size:.78rem;line-height:1.35;max-width:18rem}.art-detail-visual-frame .art-img-missing{min-height:12rem}.mini-intro-section{margin:2rem 0;padding:1.25rem 1.35rem;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface)}.wechat-mini-cta{margin:.35rem 0 0}.pill-btn-link{display:inline-block;text-decoration:none;text-align:center}.pill-btn-link:hover{text-decoration:none;filter:brightness(1.05)}.quiz-section{margin:2rem 0}.quiz-root{margin-top:.75rem}.quiz-card{padding:1.25rem;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-bg-elevated)}.quiz-progress{margin:0 0 .5rem;font-size:.8rem;color:var(--color-text-muted)}.quiz-question{margin:0 0 1rem;font-size:1.05rem;font-family:var(--font-serif)}.quiz-hint{margin:.75rem 0 0;font-size:.88rem;color:var(--color-text-muted)}.quiz-options{display:grid;gap:.5rem;margin-top:1rem}.quiz-opt{font:inherit;text-align:left;padding:.65rem .85rem;border-radius:10px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer}.quiz-opt:hover:not(:disabled){border-color:var(--color-accent)}.quiz-opt.right{border-color:#4caf50;background:#4caf501f}.quiz-opt.wrong{border-color:#e57373;background:#e573731f}.quiz-opt:disabled{cursor:default;opacity:.85}.quiz-feedback{margin-top:1rem}.quiz-feedback p{margin:0 0 .75rem;color:var(--color-text-muted);font-size:.92rem}.pill-btn{font:inherit;cursor:pointer;padding:.45rem 1rem;border-radius:999px;border:none;background:var(--color-accent);color:var(--color-bg);font-weight:600}.pill-btn:hover{filter:brightness(1.05)}.footer-link{color:var(--color-text-muted);text-decoration:none}.footer-link:hover{color:var(--color-music);text-decoration:underline}