*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#F5F0E6;--bg-warm:#EDE8DE;--card:#FFFFFF;
--text:#1C1917;--text-secondary:#57534E;--text-muted:#A3A09C;
--border:rgba(28,25,23,0.08);--border-visible:rgba(28,25,23,0.12);
--accent:#0D9488;--accent-light:#f0fdfa;
--grade1:#A05020;--grade2:#7A9BA8;--grade3:#337058;
--shadow-sm:0 1px 2px rgba(61,67,64,0.05),0 4px 12px rgba(61,67,64,0.08);
--shadow:0 2px 4px rgba(61,67,64,0.06),0 8px 24px rgba(61,67,64,0.12);
--shadow-hover:0 4px 8px rgba(61,67,64,0.08),0 16px 40px rgba(61,67,64,0.16);
--radius-sm:12px;--radius-md:16px;--radius-lg:20px;
--ease:cubic-bezier(0.4,0,0.2,1);--spring:cubic-bezier(0.34,1.56,0.64,1);
--duration-fast:200ms;--duration-normal:300ms
}
html.dark{
--bg:#0f0e0d;--bg-warm:#1a1816;--card:rgba(36,34,32,0.92);
--text:#F5F3F0;--text-secondary:#A3A09C;--text-muted:#666666;
--border:rgba(255,255,255,0.06);--border-visible:rgba(255,255,255,0.10);
--accent:#5BA8A0;--accent-light:rgba(91,168,160,0.12);
--grade1:#C06030;--grade2:#9ABBC8;--grade3:#4A9070;
--shadow-sm:0 2px 8px rgba(0,0,0,0.4);
--shadow:0 4px 20px rgba(0,0,0,0.5);
--shadow-hover:0 8px 32px rgba(0,0,0,0.6)
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:0.01ms!important}}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{min-height:100vh;font-family:'Sora','Noto Sans JP',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;position:relative}
.bg-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 0.5s ease}
html.dark .bg-glow{opacity:1}
.bg-glow::before{content:'';position:absolute;top:-20%;left:-10%;width:50%;height:60%;background:radial-gradient(ellipse at center,rgba(160,80,32,0.12) 0%,transparent 70%);filter:blur(80px);animation:glowPulse1 8s ease-in-out infinite}
.bg-glow::after{content:'';position:absolute;top:30%;right:-10%;width:45%;height:50%;background:radial-gradient(ellipse at center,rgba(122,155,168,0.10) 0%,transparent 70%);filter:blur(80px);animation:glowPulse2 10s ease-in-out infinite}
.bg-glow-accent{position:fixed;bottom:-10%;left:30%;width:40%;height:45%;background:radial-gradient(ellipse at center,rgba(51,112,88,0.10) 0%,transparent 70%);filter:blur(80px);z-index:-1;pointer-events:none;opacity:0;transition:opacity 0.5s ease;animation:glowPulse3 12s ease-in-out infinite}
html.dark .bg-glow-accent{opacity:1}
@keyframes glowPulse1{0%,100%{transform:translate(0,0) scale(1);opacity:0.8}50%{transform:translate(5%,10%) scale(1.1);opacity:1}}
@keyframes glowPulse2{0%,100%{transform:translate(0,0) scale(1);opacity:0.7}50%{transform:translate(-5%,-5%) scale(1.15);opacity:0.9}}
@keyframes glowPulse3{0%,100%{transform:translate(0,0) scale(1);opacity:0.6}50%{transform:translate(10%,-10%) scale(1.2);opacity:0.8}}
.header{position:sticky;top:0;z-index:100;padding:16px 24px;background:var(--bg-warm);border-bottom:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
html.dark .header{background:rgba(26,24,22,0.8)}
.header-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:16px}
.header-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:white;box-shadow:var(--shadow-sm);flex-shrink:0}
.header-content{flex:1;min-width:0}
.header-title{font-size:17px;font-weight:600;letter-spacing:-0.02em}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;flex-wrap:wrap;margin-top:2px}
.breadcrumb-item{color:var(--text-secondary);text-decoration:none;transition:color var(--duration-fast) ease}
.breadcrumb-item:hover{color:var(--accent)}
.breadcrumb-sep{color:var(--text-muted);font-size:10px}
.breadcrumb-current{color:var(--text);font-weight:500}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-badge{font-size:12px;font-weight:500;color:var(--text-secondary);background:var(--card);padding:6px 12px;border-radius:100px;border:1px solid var(--border)}
.theme-btn{width:36px;height:36px;border:1px solid var(--border);background:var(--card);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--duration-fast) ease}
.theme-btn:hover{color:var(--text);border-color:var(--border-visible)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .sun-icon{display:block}
.theme-btn .moon-icon{display:none}
html.dark .theme-btn .sun-icon{display:none}
html.dark .theme-btn .moon-icon{display:block}
main{padding:40px 24px 80px}
.container{max-width:900px;margin:0 auto}
.hero{text-align:center;margin-bottom:48px;opacity:0;animation:fadeIn 0.6s var(--ease) forwards}
.hero-title{font-size:clamp(28px,5vw,40px);font-weight:600;letter-spacing:-0.03em;margin-bottom:8px}
.hero-description{font-size:16px;color:var(--text-secondary);max-width:400px;margin:0 auto}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.section{margin-bottom:40px;opacity:0;animation:fadeIn 0.6s var(--ease) forwards}
.section:nth-child(2){animation-delay:0.1s}
.section:nth-child(3){animation-delay:0.2s}
.section-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.section-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px}
.section-title{font-size:14px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}
.section-count{font-size:12px;color:var(--text-muted);margin-left:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.list{display:flex;flex-direction:column;gap:10px}
.card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--card);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:all var(--duration-normal) var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--border-visible)}
.card-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;color:white;flex-shrink:0}
.card-content{flex:1;min-width:0}
.card-title{font-size:15px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{font-size:13px;color:var(--text-secondary);margin-top:2px}
.card-arrow{color:var(--text-muted);opacity:0;transform:translateX(-8px);transition:all var(--duration-fast) ease}
.card:hover .card-arrow{opacity:1;transform:translateX(0)}
.card-arrow svg{width:16px;height:16px}
.item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border-radius:var(--radius-sm);border:1px solid var(--border);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:all var(--duration-normal) var(--ease)}
.item:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--border-visible)}
.item-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:white;flex-shrink:0}
.item-content{flex:1;min-width:0}
.item-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-meta{font-size:12px;color:var(--text-muted);margin-top:1px}
.item-arrow{color:var(--text-muted);opacity:0.4;transition:all var(--duration-fast) ease}
.item:hover .item-arrow{opacity:1;transform:translateX(4px)}
.item-arrow svg{width:14px;height:14px}
.empty-state{text-align:center;padding:60px 24px}
.empty-icon{width:64px;height:64px;margin:0 auto 20px;border-radius:16px;background:var(--bg-warm);display:flex;align-items:center;justify-content:center;font-size:28px}
.empty-title{font-size:20px;font-weight:600;margin-bottom:6px}
.empty-description{font-size:14px;color:var(--text-secondary)}
footer{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--text-muted)}
.footer-date{font-size:11px;margin-top:6px}
.card:focus-visible,.item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:1024px){.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.container{max-width:800px}}
@media(max-width:768px){.header{padding:14px 20px}main{padding:32px 20px 70px}.hero{margin-bottom:40px}.section{margin-bottom:32px}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.card{padding:14px 16px}.card-icon{width:42px;height:42px}}
@media(max-width:600px){.header{padding:12px 16px}main{padding:24px 16px 60px}.hero{margin-bottom:32px}.section{margin-bottom:28px}.grid{grid-template-columns:1fr;gap:12px}.card{padding:14px 16px}.card-icon{width:40px;height:40px}.item{padding:12px 14px}.item-icon{width:32px;height:32px}.header-badge{display:none}}