:root{
  --ink:#132a43;--text:#536879;--muted:#94a0aa;--paper:#fffdfa;
  --line:#edf0ef;--accent:#ff715f;--gold:#f3aa21;--mint:#20ba9b;
  --cream:#fff9f1;--shadow:0 7px 24px rgba(57,45,32,.075)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI","Yu Gothic UI","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,select{font:inherit}

/* Header — close to the approved visual */
.topbar{height:80px;display:flex;align-items:center;gap:28px;padding:0 3.2vw;background:rgba(255,255,255,.98);border-bottom:1px solid #f0eee9;position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:305px}.brand-mark{width:48px;height:48px;object-fit:contain;flex:0 0 auto;border-radius:12px}.brand-copy{display:block}.brand-name{display:block;font-size:24px;line-height:1.05;letter-spacing:.11em;font-weight:750;background:linear-gradient(90deg,#2a979d 0%,#74bc95 52%,#f0bd49 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.brand small{display:block;font-size:14px;color:#69635e;margin-top:4px}
.topbar nav{display:flex;gap:30px;white-space:nowrap}.topbar nav a{text-decoration:none;font-weight:700;font-size:14px;padding:29px 2px 22px;border-bottom:2px solid transparent}.topbar nav a.active{border-color:var(--accent)}
.prefs{display:flex;gap:7px;align-items:center;margin-left:auto;min-width:0}.prefs select{height:36px;border:1px solid #e7e2da;background:#fff;border-radius:18px;padding:0 28px 0 11px;font-size:14px;color:#44545b;outline:none;min-width:0}.prefs #countrySelect{width:170px;max-width:170px}.prefs #langSelect{width:128px;max-width:128px}.prefs button{height:36px;width:36px;flex:0 0 36px;border:1px solid #e7e2da;border-radius:50%;background:#fff;color:#41545d;cursor:pointer}.prefs button:hover{background:#faf8f4}

/* Hero */
.hero{height:268px;display:grid;grid-template-columns:53.5% 46.5%;overflow:hidden;background:#fbf8f2}.hero-copy{padding:31px 3vw 26px 6.5vw;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 94% 45%,rgba(247,234,207,.72),transparent 38%),linear-gradient(98deg,#fffdf9 0,#fbf7ef 76%,#faf1e3 100%)}
.hero h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(38px,3.35vw,54px);font-weight:600;line-height:1.12;letter-spacing:.045em;margin:0 0 10px;color:#281e19}.hero p{margin:0;font-size:14px;color:#334c61}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:14px;min-width:0}.compare-note{font-size:14px;color:#6b7777;background:rgba(255,255,255,.72);border:1px solid #eee5dc;border-radius:16px;padding:6px 10px;white-space:nowrap}
.scribble{margin-left:auto;padding:0 12px 4px 5px;font-family:"Yu Mincho",serif;font-size:14px;color:#4e443d;border-bottom:1px solid #7d7166;transform:rotate(-2deg);white-space:nowrap}.hero-photo{background-image:linear-gradient(90deg,rgba(251,247,239,.28),transparent 18%),url('/static/hero-room.png?v=8.2.0');background-size:cover;background-position:center center;min-width:0}
/* English copy is longer than Japanese; keep the same design without forcing it into a Japanese-sized column. */
body[data-lang="en"] .hero{grid-template-columns:56% 44%}
body[data-lang="en"] .hero h1{font-size:clamp(36px,2.8vw,48px);line-height:1.12;letter-spacing:.025em}
body[data-lang="en"] .hero-copy{padding-right:3.6vw}
body[data-lang="en"] .compare-note{white-space:normal;max-width:460px;line-height:1.35}
body[data-lang="en"] .scribble{font-size:13px}

/* Genre cards — local and overseas shown together */
.genres-section{padding:18px 3vw 15px;background:#fff}.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.section-title{display:flex;align-items:center;gap:11px}.section-head h2{font-size:23px;margin:0;color:#142a40}.grid-icon{width:37px;height:37px;border-radius:9px;background:linear-gradient(135deg,#58aeea,#23bea5);color:#fff;display:grid;place-items:center;font-size:23px;box-shadow:0 3px 10px rgba(45,162,180,.12)}.section-head p{font-size:14px;color:#627485;margin:0 1vw 0 0}
.genre-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.genre-card{min-width:0;border:1px solid #edf0ef;border-radius:18px;background:#fff;box-shadow:0 5px 18px rgba(46,54,57,.055);min-height:276px;position:relative;transition:.16s;overflow:hidden}.genre-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.open-genre{width:100%;height:100%;border:0;background:transparent;display:block;padding:14px 14px 13px;cursor:pointer;text-align:left;color:inherit;min-width:0}.genre-card-head{display:grid;grid-template-columns:45px minmax(0,1fr) 24px;align-items:center;gap:10px;margin-bottom:11px;min-height:45px}.genre-icon{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font-size:21px}.genre-title{font-size:15px;color:#18314b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;height:45px;line-height:1;position:relative;top:-1px}.genre-arrow{font-size:22px;color:#98a6ac;text-align:right}.card-pulse{position:absolute;right:17px;top:14px;font-size:14px;color:#c4cbcb}.card-pulse.hot{color:var(--accent);font-weight:800}
.genre-compare{display:grid;grid-template-columns:1fr;gap:8px}.genre-side{min-width:0;border-radius:12px;padding:10px 11px 9px;background:#fbfcfb;border:1px solid #f0f1ee}.genre-side.overseas{background:#fffbf7;border-color:#f4ece4}.genre-side-label{display:block;font-size:14px;font-weight:800;line-height:1.25;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.local-label{color:#347466}.overseas-label{color:#ba7552}.genre-sites{display:grid;gap:6px;min-width:0}.mini-link{display:flex;align-items:flex-start;gap:6px;text-decoration:none;color:#5f7180;min-width:0;line-height:1.25}.mini-dot{width:5px;height:5px;border-radius:50%;background:#b8d0e5;flex:0 0 auto;margin-top:6px}.overseas .mini-dot{background:#efc0a8}.mini-copy{display:block;min-width:0;overflow:hidden}.mini-copy b,.mini-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-copy b{font-size:13.5px;font-weight:650;color:#566c7c}.mini-copy small{font-size:10px;color:#8b969d;margin-top:1px}.empty-mini{display:block;font-size:14px;color:#a1aaa9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:1px}
/* Rising strip */
.rising-section{margin:3px 3vw 10px;border-radius:17px;background:#fff6f1;padding:13px 15px;display:grid;grid-template-columns:285px 1fr;gap:11px;align-items:center}.rise-title{display:flex;align-items:center;gap:10px}.rise-title>span{font-size:32px}.rise-title h2{margin:0;font-size:20px;color:#201b18}.rise-title p{margin:3px 0 0;color:#7a848d;font-size:14px}.rise-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.rise-card{background:#fff;border:1px solid #f0ebe6;border-radius:12px;min-width:0;display:grid;grid-template-columns:27px 42px minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px;text-decoration:none;min-height:82px}.rise-card:hover{box-shadow:0 4px 14px rgba(70,50,38,.06)}.rank{width:25px;height:25px;border-radius:50%;background:#fb7860;color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}.rise-thumb{width:42px;height:42px;border-radius:9px;background:#f1f5f6;display:grid;place-items:center;font-size:20px}.rise-copy{min-width:0}.rise-copy b,.rise-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rise-copy b{font-size:14px;color:#223341}.rise-copy small{font-size:14px;color:#7b8892;margin-top:2px}.rise-score{color:#ff6a59;font-weight:800;font-size:14px;text-align:center}.rise-score small{display:block;font-size:14px;color:#a6aaa9}.rise-empty{font-size:14px;color:#899}

/* Status + footer */
.quiet-strip{display:flex;align-items:center;gap:16px;margin:0 3vw 10px;padding:12px 14px;background:#f7faf7;border:1px solid #e7eee8;border-radius:13px}.quiet-strip>div:first-child{min-width:0}.quiet-strip b{font-size:14px}.quiet-strip>div:first-child span{font-size:14px;color:#748078;margin-left:7px}.update-status{margin-left:auto;display:grid;grid-template-columns:auto auto;column-gap:4px;align-items:center;white-space:nowrap}.update-status .dot{width:7px;height:7px;background:#28b78e;border-radius:50%;margin:0}.update-status>span:nth-child(2){margin:0;font-size:14px;font-weight:700;color:#50665d}.update-status small{grid-column:2;font-size:14px;color:#91a098}.quiet-strip button{border:0;background:#293b42;color:#fff;border-radius:10px;padding:8px 12px;font-size:14px;font-weight:700;cursor:pointer}.quiet-strip button:disabled{opacity:.6}
footer{padding:10px 3vw 13px;border-top:1px solid #efefeb;display:flex;align-items:center;gap:12px;color:#26211e}footer b{font-size:14px}footer span{font-size:14px;color:#777}footer small{margin-left:auto;color:#9a9f9c;font-size:14px}

/* Drawer */
.drawer{display:none;position:fixed;inset:0;background:rgba(22,28,31,.28);z-index:50}.drawer.open{display:block}.drawer-panel{width:min(560px,94vw);height:100%;margin-left:auto;background:#fffdf9;padding:24px;box-shadow:-15px 0 60px rgba(0,0,0,.13);overflow:auto}.close{float:right;border:0;border-radius:50%;width:35px;height:35px;background:#f0ece6;font-size:21px;cursor:pointer}.drawer-title{display:flex;align-items:center;gap:12px;margin:18px 0 14px}.drawer-title>span{width:45px;height:45px;border-radius:14px;background:#ecf3f5;display:grid;place-items:center;font-size:22px}.drawer-title h2{margin:0;font-size:21px}.drawer-title p{margin:2px 0 0;color:#7c898d;font-size:10px}.drawer-list{display:grid;gap:8px}.drawer-item{border:1px solid #ebeae6;border-radius:14px;background:#fff;padding:12px}.drawer-main{display:flex;align-items:center;gap:10px;text-decoration:none}.drawer-rank{width:28px;height:28px;border-radius:50%;background:#f8ece6;display:grid;place-items:center;font-weight:800;font-size:10px;flex:0 0 auto}.drawer-copy{min-width:0;flex:1}.drawer-copy b,.drawer-copy small{display:block}.drawer-copy b{font-size:13px}.drawer-copy small{font-size:9.5px;color:#738087;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer-score{font-size:13px;font-weight:800;color:#24a487}.feedback{display:flex;gap:6px;margin:8px 0 0 38px}.feedback button{border:1px solid #e7e5df;background:#fbfaf7;border-radius:13px;padding:5px 8px;font-size:8.5px;cursor:pointer}.feedback button.sent{background:#edf7f2;color:#27775e;border-color:#d6ebe2}

@media(max-width:1350px){.brand{min-width:220px}.brand-name{font-size:21px}.topbar nav{gap:14px}.genre-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rise-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:950px){.topbar{height:auto;min-height:70px;padding:10px 15px;flex-wrap:wrap;gap:10px}.brand{min-width:0}.topbar nav{display:none}.prefs{margin-left:auto}.hero{height:auto;grid-template-columns:1fr}.hero-copy{padding:28px 20px}.hero h1{font-size:38px}body[data-lang="en"] .hero{grid-template-columns:1fr}body[data-lang="en"] .hero-copy{padding:28px 20px}body[data-lang="en"] .hero h1{font-size:36px}.hero-photo{height:170px}.hero-bottom{align-items:flex-start;flex-direction:column}.scribble{margin-left:0}.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rising-section{grid-template-columns:1fr}.rise-list{grid-template-columns:repeat(2,minmax(0,1fr))}.rise-card:nth-child(n+4){display:none}}
@media(max-width:620px){.prefs{gap:5px;width:100%;justify-content:flex-end}.prefs #countrySelect{width:150px;max-width:150px}.prefs #langSelect{width:112px;max-width:112px}.prefs select{padding-left:9px;padding-right:22px}.brand small{display:none}.brand-name{font-size:19px}.hero h1{font-size:34px}.genres-section{padding:14px}.section-head p{display:none}.compare-note{font-size:14px;white-space:normal}.genre-grid{grid-template-columns:1fr;gap:9px}.genre-card{min-height:264px}.open-genre{padding:12px}.genre-compare{gap:7px}.genre-side{padding:8px}.rising-section{margin:0 14px 10px}.rise-list{grid-template-columns:1fr}.quiet-strip{margin:0 14px 10px;align-items:flex-start;flex-wrap:wrap}.update-status{margin-left:0}footer{padding:13px 14px;flex-wrap:wrap}footer small{margin-left:0;width:100%}}

/* v12.17 — controlled serendipity */
.quiet-strip .wander-btn{background:#fff;border:1px solid #dfe8e2;color:#355b50;box-shadow:none;padding:8px 13px;white-space:nowrap}.quiet-strip .wander-btn:hover{background:#f1f7f3}.wander-modal{display:none;position:fixed;inset:0;background:rgba(20,27,29,.28);z-index:70;place-items:center;padding:18px}.wander-modal.open{display:grid}.wander-card{position:relative;width:min(430px,94vw);background:#fffdf9;border:1px solid #ebe7df;border-radius:23px;padding:27px 26px 23px;box-shadow:0 24px 80px rgba(28,34,36,.18)}.wander-close{position:absolute;right:14px;top:13px;border:0;background:#f1ede7;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;color:#5f615f}.wander-kicker{margin:0 45px 17px 0;font-size:13px;font-weight:800;letter-spacing:.08em;color:#688278}.wander-content{min-height:150px}.wander-icon{width:50px;height:50px;border-radius:16px;background:#eef4f1;display:grid;place-items:center;font-size:24px;margin-bottom:11px}.wander-genre{display:block;font-size:12px;color:#819087;margin-bottom:5px}.wander-content h3{font-size:22px;line-height:1.32;margin:0 0 8px;color:#21332e}.wander-content p{font-size:14px;line-height:1.7;margin:0;color:#66736f}.wander-empty{padding:34px 0;color:#84918c}.wander-actions{display:flex;gap:8px;align-items:center;margin-top:19px}.wander-go,.wander-again{border-radius:13px;padding:9px 14px;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer}.wander-go{background:#304c43;color:#fff}.wander-go.disabled{opacity:.45;pointer-events:none}.wander-again{border:1px solid #dedfd9;background:#fff;color:#5b6863}.wander-again:hover{background:#f7f6f2}
@media(max-width:620px){.quiet-strip .wander-btn{order:2}.wander-card{padding:24px 20px 20px}.wander-actions{align-items:stretch;flex-direction:column}.wander-go,.wander-again{text-align:center}}


/* v12.18 — comfort: less information at once, softer rhythm */
body{background:#fbfaf7;line-height:1.5}
.topbar{background:rgba(255,254,251,.96);border-bottom-color:#efede8}
.hero{background:#faf6ee}
.genres-section{padding:26px 3vw 27px;background:#fbfaf7}
.section-head{margin-bottom:17px}
.genre-grid{gap:16px}
.genre-card{min-height:218px;background:#fffefb;border-color:#ecebe7;box-shadow:0 3px 14px rgba(46,54,57,.035)}
.genre-card:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(57,45,32,.06)}
.open-genre{padding:16px 15px 15px}
.genre-card-head{margin-bottom:13px}
.genre-side{padding:12px 12px 11px;background:#fafcf9;border-color:#eef0eb}
.genre-side.overseas{background:#fdf9f5;border-color:#f0ebe4}
.genre-compare{gap:10px}
.rising-section{margin:7px 3vw 17px;padding:16px 18px;background:#fbf5f0;gap:16px}
.rise-card{grid-template-columns:27px 42px minmax(0,1fr);min-height:78px;padding:8px 10px;border-color:#ede9e3;box-shadow:none}
.rise-card:hover{box-shadow:0 4px 12px rgba(70,50,38,.045)}
.quiet-strip{margin:0 3vw 15px;padding:14px 16px;background:#f5f7f3;border-color:#e5eae3}
footer{background:#fbfaf7}
.drawer-panel{background:#fcfbf7;padding:27px}
.drawer-list{gap:15px}
.drawer-group{padding:0 0 5px}
.drawer-group h3{margin:0 0 8px;font-size:13px;color:#60706b;font-weight:700;letter-spacing:.02em}
.drawer-item{padding:13px 12px;background:#fffefb;border-color:#e9e8e3;box-shadow:none}
.drawer-item+.drawer-item{margin-top:7px}
.drawer-item-extra{display:none}
.drawer-group.expanded .drawer-item-extra{display:block}
.drawer-more{display:block;width:100%;margin:9px 0 2px;padding:8px 10px;border:0;background:transparent;color:#65756f;font-size:12px;cursor:pointer;border-radius:10px}
.drawer-more:hover{background:#f1f3ee}
.drawer-more span{color:#96a19c;margin-left:3px}
.drawer-copy b{font-size:14px;font-weight:650;color:#263a46}
.drawer-copy small{font-size:11px;line-height:1.45;color:#7d898d}
.feedback{margin-top:9px}
.feedback button{font-size:10px;padding:5px 9px;background:#fcfbf8}
@media(max-width:620px){
  .genres-section{padding:18px 14px 20px}
  .genre-grid{gap:11px}
  .genre-card{min-height:210px}
  .open-genre{padding:14px}
  .rising-section{margin:4px 14px 13px;padding:14px}
  .quiet-strip{margin:0 14px 13px}
  .drawer-panel{padding:22px 17px}
}


/* Fixed discovery pages: crawlable genre/trending URLs */
.fixed-page{background:#fbfaf7;color:#26211e;min-height:100vh}
.fixed-page .topbar{position:sticky}
.fixed-main{max-width:1180px;margin:0 auto;padding:34px 28px 56px}
.fixed-hero{padding:8px 0 28px;border-bottom:1px solid #ece9e3}
.fixed-kicker{margin:0 0 8px;color:#7a848d;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.fixed-hero h1{margin:0;color:#201b18;font-size:36px;line-height:1.25}
.fixed-hero>p:not(.fixed-kicker):not(.fixed-updated){max-width:760px;margin:12px 0 0;color:#67727a;font-size:15px;line-height:1.8}
.fixed-updated{margin:10px 0 0;color:#929995;font-size:12px}
.fixed-section{padding:30px 0 4px}
.fixed-section h2{margin:0 0 14px;font-size:21px;color:#201b18}
.fixed-site-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fixed-site-card{display:grid;grid-template-columns:50px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:14px;border:1px solid #ece9e3;border-radius:16px;background:#fff;text-decoration:none;min-width:0;box-shadow:0 3px 12px rgba(57,45,32,.035)}
.fixed-site-card:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(57,45,32,.07)}
.fixed-site-icon{width:50px;height:50px;border-radius:13px;background:#f1f5f6;display:grid;place-items:center;font-size:22px}
.fixed-site-copy{min-width:0}
.fixed-site-copy b,.fixed-site-copy small,.fixed-site-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fixed-site-copy b{font-size:15px;color:#223341}
.fixed-site-copy small{margin-top:4px;color:#6f7b83;font-size:13px}
.fixed-site-meta{margin-top:5px;color:#9aa09d;font-size:11px}
.fixed-site-arrow{color:#fb7860;font-size:16px}
.fixed-empty{grid-column:1/-1;margin:0;padding:20px;border:1px dashed #ddd8d0;border-radius:14px;color:#899;background:#fff}
.fixed-genre-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fixed-genre-card{display:grid;grid-template-columns:46px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:14px;border:1px solid #ece9e3;border-radius:16px;background:#fff;text-decoration:none;color:#223341;font-weight:700}
.fixed-genre-card:hover{box-shadow:0 6px 18px rgba(57,45,32,.06)}
.fixed-genre-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px}
.fixed-related{margin-top:36px;padding-top:22px;border-top:1px solid #ece9e3}
.fixed-related h2{font-size:16px;margin:0 0 10px}
.fixed-related nav{display:flex;flex-wrap:wrap;gap:8px}
.fixed-related a{padding:7px 10px;border:1px solid #e6e3dd;border-radius:999px;background:#fff;text-decoration:none;font-size:12px;color:#45545f}
footer small a{color:#6f7b83;text-decoration:none}footer small a:hover{text-decoration:underline}
@media(max-width:820px){.fixed-main{padding:26px 16px 44px}.fixed-hero h1{font-size:29px}.fixed-site-grid{grid-template-columns:1fr}.fixed-genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.fixed-genre-grid{grid-template-columns:1fr}.fixed-hero h1{font-size:26px}}