:root { --sand:#fff8ec; --ink:#3e3441; --muted:#756b72; --purple:#4d285d; --purple-soft:#77538a; --aqua:#8edee4; --aqua-deep:#277b9a; --coral:#e98683; --pink:#f5b4b8; --gold:#c79a58; --white-glass:rgba(255,255,255,.85); --line:rgba(116,84,103,.16); --shadow:0 14px 36px rgba(73,48,73,.12); --shadow-hover:0 20px 42px rgba(73,48,73,.20); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; color:var(--ink); font-family:"Nunito","Segoe UI",Arial,sans-serif; background:radial-gradient(circle at 6% 19%,rgba(142,222,228,.21),transparent 27rem),radial-gradient(circle at 96% 36%,rgba(245,180,184,.18),transparent 25rem),linear-gradient(180deg,#fffdf8 0%,var(--sand) 56%,#fdf0dc 100%); }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { max-width:100%; }
.site-header { position:absolute; z-index:30; top:0; left:0; width:100%; padding:20px clamp(18px,4vw,72px); }
.nav-shell { position:relative; max-width:1320px; margin:0 auto; padding:10px 14px 10px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid rgba(255,255,255,.54); border-radius:999px; background:rgba(60,37,72,.28); box-shadow:0 8px 28px rgba(47,25,57,.16); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-family:Georgia,serif; font-size:.9rem; font-weight:700; letter-spacing:.06em; white-space:nowrap; }
.nav-links { display:flex; align-items:center; justify-content:flex-end; gap:4px; list-style:none; padding:0; margin:0; }
.nav-links a { display:block; padding:9px 13px; border-radius:999px; color:rgba(255,255,255,.94); font-size:.88rem; font-weight:800; transition:background .2s ease,color .2s ease; }
.nav-links a:hover,.nav-links a:focus { background:rgba(255,250,238,.9); color:var(--purple); }
.menu-toggle { display:none; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.58); border-radius:13px; cursor:pointer; color:#fff; background:rgba(77,40,93,.26); }
.menu-toggle span { display:block; width:19px; height:2px; margin:4px auto; border-radius:999px; background:currentColor; transition:transform .2s ease,opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.guide-hero { position:relative; min-height:590px; overflow:hidden; border-radius:0 0 38px 38px; background:url('/guide/assets/images/guides-hero.jpg') center center/cover no-repeat; box-shadow:inset 0 -20px 35px rgba(90,58,48,.10); }
.guide-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(42,28,60,.13) 0%,transparent 48%,rgba(255,255,255,.02) 100%); pointer-events:none; }
.page-shell { width:min(1180px,calc(100% - 36px)); margin:0 auto; padding:64px 0 84px; }
.section-heading { max-width:720px; margin:0 auto 32px; text-align:center; }
.eyebrow { margin:0 0 8px; color:var(--aqua-deep); font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2 { color:var(--purple); font-family:Georgia,serif; } h1 { margin-bottom:12px; font-size:clamp(2rem,4vw,3.1rem); line-height:1.1; } h2 { margin-bottom:12px; font-size:clamp(1.75rem,3vw,2.35rem); line-height:1.15; } .section-heading p:last-child,.muted { color:var(--muted); line-height:1.7; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:82px; }
.guide-card { position:relative; min-height:258px; overflow:hidden; padding:22px; border:1px solid var(--line); border-radius:24px; background:var(--white-glass); box-shadow:var(--shadow); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.guide-card:after { content:""; position:absolute; width:105px; height:105px; top:-46px; right:-36px; border-radius:50%; opacity:.2; background:var(--card-color,var(--aqua)); }
.guide-card:hover { transform:translateY(-6px); border-color:rgba(199,154,88,.48); box-shadow:var(--shadow-hover); }
.guide-card-icon { position:relative; z-index:1; display:grid; place-items:center; width:47px; height:47px; margin-bottom:17px; border:1px solid rgba(119,83,138,.25); border-radius:15px; color:var(--purple); font-size:1.4rem; background:rgba(255,255,255,.54); }
.guide-card h3 { margin-bottom:8px; color:var(--purple); font-family:Georgia,serif; font-size:1.25rem; } .guide-card p { margin-bottom:15px; color:var(--muted); font-size:.88rem; line-height:1.55; } .guide-card-meta { display:block; margin-bottom:17px; color:var(--muted); font-size:.72rem; font-weight:800; } .guide-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--aqua-deep); font-size:.77rem; font-weight:900; } .guide-card-footer strong { color:var(--purple); font-size:.96rem; } .guide-card-status { position:relative; z-index:1; display:inline-flex; margin-bottom:16px; padding:5px 9px; border:1px solid rgba(39,123,154,.18); border-radius:999px; color:var(--aqua-deep); font-size:.65rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; background:rgba(142,222,228,.16); } .guide-card-status.is-planned { border-color:rgba(119,83,138,.18); color:var(--purple-soft); background:rgba(119,83,138,.1); }
.classes-section { scroll-margin-top:24px; padding:38px clamp(16px,4vw,42px) 42px; border:1px solid rgba(199,154,88,.28); border-radius:32px; background:rgba(255,255,255,.57); box-shadow:0 14px 42px rgba(103,72,74,.08); } .classes-header { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:24px; } .classes-header h2 { margin-bottom:7px; } .classes-header p { margin-bottom:0; max-width:640px; } .status-pill { flex:0 0 auto; padding:9px 13px; border:1px solid rgba(39,123,154,.22); border-radius:999px; color:var(--aqua-deep); font-size:.77rem; font-weight:900; background:rgba(142,222,228,.16); white-space:nowrap; }
.tier-filters { display:flex; flex-wrap:wrap; gap:9px; padding:8px; margin-bottom:22px; border:1px solid rgba(116,84,103,.12); border-radius:18px; background:rgba(255,255,255,.67); } .tier-filter { appearance:none; cursor:pointer; min-height:42px; padding:10px 16px; border:1px solid transparent; border-radius:12px; color:var(--muted); font:inherit; font-size:.88rem; font-weight:900; background:transparent; transition:.2s ease; touch-action:manipulation; } .tier-filter:hover,.tier-filter:focus { color:var(--purple); background:rgba(245,180,184,.18); } .tier-filter.active { border-color:rgba(77,40,93,.14); color:#fff; background:linear-gradient(135deg,var(--purple),#795687); box-shadow:0 7px 14px rgba(77,40,93,.15); }
.tier-loading { display:none; align-items:center; justify-content:center; gap:10px; min-height:56px; margin-bottom:15px; border:1px solid rgba(39,123,154,.14); border-radius:16px; color:var(--aqua-deep); font-size:.84rem; font-weight:900; background:rgba(142,222,228,.12); } .tier-loading.show { display:flex; } .spinner { width:19px; height:19px; border:3px solid rgba(39,123,154,.18); border-top-color:var(--aqua-deep); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.tier-board { display:grid; gap:15px; transition:opacity .16s ease,transform .16s ease; } .tier-board.is-loading { opacity:.28; transform:translateY(5px); pointer-events:none; } .tier-row { display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; align-items:stretch; } .tier-label { display:grid; place-items:center; min-height:102px; border-radius:20px; color:#fff; font-family:Georgia,serif; font-size:2.3rem; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.12); } .tier-s { background:linear-gradient(140deg,#e56e79,#df9a84); } .tier-a { background:linear-gradient(140deg,#c8944e,#dfbe77); } .tier-b { background:linear-gradient(140deg,#55b7c8,#93dfe2); } .tier-c { background:linear-gradient(140deg,#9c8da8,#c0b3c4); }
.tier-classes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .class-card { display:flex; align-items:center; gap:12px; min-width:0; min-height:68px; padding:13px; border:1px solid rgba(116,84,103,.12); border-radius:17px; color:var(--ink); background:rgba(255,255,255,.82); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .class-card:hover { transform:translateY(-3px); border-color:rgba(199,154,88,.46); box-shadow:0 10px 22px rgba(77,40,93,.10); } .class-icon { display:grid; flex:0 0 auto; place-items:center; width:42px; height:42px; overflow:hidden; border-radius:14px; background:var(--class-light,#e9f8f9); } .class-icon img { display:block; width:100%; height:100%; object-fit:cover; } .class-card-info { min-width:0; } .class-card-name { display:block; overflow:hidden; color:var(--purple); font-weight:1000; text-overflow:ellipsis; white-space:nowrap; } .class-card-meta { display:block; overflow:hidden; margin-top:3px; color:var(--muted); font-size:.73rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.all-classes { margin-top:42px; padding-top:32px; border-top:1px dashed rgba(116,84,103,.25); } .all-classes h3 { margin-bottom:4px; color:var(--purple); font-family:Georgia,serif; font-size:1.45rem; } .all-classes > p { margin-bottom:19px; color:var(--muted); } .class-directory { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .directory-class { display:flex; align-items:center; gap:10px; min-height:58px; padding:12px; border:1px solid rgba(116,84,103,.1); border-radius:16px; background:rgba(255,255,255,.63); transition:background .2s ease,transform .2s ease; } .directory-class:hover { transform:translateY(-2px); background:#fff; } .directory-class .class-icon { width:35px; height:35px; border-radius:11px; } .directory-class span:last-child { overflow:hidden; color:var(--purple); font-size:.9rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.notice { margin:62px auto 0; padding:25px 28px; border:1px dashed rgba(199,154,88,.55); border-radius:24px; text-align:center; background:rgba(255,252,245,.64); } .notice h2 { margin-bottom:8px; font-size:1.6rem; } .notice p { max-width:670px; margin:0 auto; color:var(--muted); line-height:1.7; } .site-footer { padding:25px 18px calc(35px + env(safe-area-inset-bottom)); border-top:1px solid rgba(116,84,103,.1); color:var(--muted); font-size:.84rem; text-align:center; }
.accent-coral { --class-light:#ffe4df; --card-color:var(--coral); } .accent-gold { --class-light:#fff1d3; --card-color:var(--gold); } .accent-violet { --class-light:#eee2f4; --card-color:#a076b7; } .accent-aqua { --class-light:#def7f6; --card-color:var(--aqua); } .accent-blue { --class-light:#e0edfb; --card-color:#7aaad8; } .accent-pink { --class-light:#fde4ed; --card-color:var(--pink); } .accent-green { --class-light:#e0f3e6; --card-color:#91c89c; }
@media (max-width:1100px) { .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .class-directory { grid-template-columns:repeat(3,minmax(0,1fr)); } .tier-classes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
    .site-header { padding:calc(12px + env(safe-area-inset-top)) 14px 12px; }
    .nav-shell { min-height:54px; padding:6px 7px 6px 15px; border-radius:18px; }
    .brand { font-size:.8rem; }
    .menu-toggle { display:block; }
    .nav-links { position:absolute; z-index:40; top:calc(100% + 9px); right:0; left:0; display:grid; gap:4px; max-height:0; overflow:hidden; padding:0 8px; border:1px solid transparent; border-radius:18px; opacity:0; visibility:hidden; background:rgba(55,31,67,.96); box-shadow:0 16px 32px rgba(47,25,57,.28); transform:translateY(-8px); transition:max-height .25s ease,padding .25s ease,opacity .2s ease,transform .2s ease,visibility .2s; }
    .nav-links.is-open { max-height:360px; padding:8px; border-color:rgba(255,255,255,.22); opacity:1; visibility:visible; transform:translateY(0); }
    .nav-links li { width:100%; }
    .nav-links a { min-height:45px; padding:12px 14px; border-radius:12px; color:#fff; font-size:.92rem; }
    .nav-links a:hover,.nav-links a:focus { background:rgba(255,250,238,.92); color:var(--purple); }
    .guide-hero { min-height:clamp(250px,72vw,390px); border-radius:0 0 26px 26px; background-position:center center; }
    .guide-hero:before { background:linear-gradient(180deg,rgba(42,28,60,.10),transparent 42%); }
    .page-shell { width:min(100% - 26px,1180px); padding:42px 0 64px; }
    .section-heading { margin-bottom:24px; }
    .section-heading p:last-child { font-size:.93rem; }
    .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:52px; }
    .guide-card { min-height:226px; padding:17px; border-radius:20px; }
    .guide-card h3 { font-size:1.1rem; } .guide-card p { font-size:.8rem; }
    .classes-section { padding:27px 13px 30px; border-radius:25px; }
    .classes-header { display:block; } .classes-header p { margin-bottom:14px; } .status-pill { display:inline-block; white-space:normal; }
    .tier-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:6px; margin-bottom:17px; }
    .tier-filter { width:100%; min-height:44px; padding:8px 5px; font-size:.8rem; }
    .tier-loading { min-height:48px; margin-bottom:10px; font-size:.78rem; }
    .tier-row { grid-template-columns:50px minmax(0,1fr); gap:9px; }
    .tier-label { min-height:82px; border-radius:16px; font-size:1.7rem; }
    .tier-classes { grid-template-columns:1fr; gap:8px; }
    .class-card { min-height:62px; padding:10px; border-radius:14px; }
    .class-icon { width:39px; height:39px; border-radius:12px; }
    .class-card-meta { font-size:.7rem; }
    .all-classes { margin-top:33px; padding-top:26px; }
    .class-directory { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .directory-class { min-height:54px; padding:9px; border-radius:13px; }
    .directory-class .class-icon { width:34px; height:34px; }
    .directory-class span:last-child { font-size:.82rem; }
    .notice { margin-top:45px; padding:22px 18px; border-radius:20px; }
}
@media (max-width:390px) { .category-grid { grid-template-columns:1fr; } .guide-card:last-child { grid-column:auto; } .guide-card { min-height:auto; } .class-directory { grid-template-columns:1fr; } .tier-filter { font-size:.76rem; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }