@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Shippori+Mincho:wght@400;500;600;700&display=swap);:root{--bg-primary:#FAF6F0;--bg-secondary:#F5EFE6;--bg-paper:#FDF9F3;--bg-toolbar:#3D3A36;--text-primary:#2D2A26;--text-secondary:#6B635A;--text-muted:#A39E96;--accent:#C0392B;--accent-soft:#E74C3C;--accent-author:#8E44AD;--accent-author-soft:#9B59B6;--border:#E2DCD4;--border-light:#EDE8E0;--shadow:rgba(45,42,38,0.08);--shadow-strong:rgba(45,42,38,0.15);--panel-bg:#FFFFFF;--card-bg:#FFFFFF;--hero-from:#2D2A26;--hero-to:#6B4423}[data-theme=dark]{--bg-primary:#1A1A1A;--bg-secondary:#222;--bg-paper:#252525;--bg-toolbar:#222;--text-primary:#E8E0D8;--text-secondary:#A09890;--text-muted:#706860;--accent:#E74C3C;--accent-soft:#FF6B5A;--accent-author:#9B59B6;--accent-author-soft:#BB7CD4;--border:#3A3530;--border-light:#302C28;--shadow:rgba(0,0,0,0.3);--shadow-strong:rgba(0,0,0,0.5);--panel-bg:#2A2A2A;--card-bg:#2A2A2A;--hero-from:#111;--hero-to:#2A1428}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Zen Kaku Gothic New','Noto Serif JP',serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.7;min-height:100vh}.font-serif{font-family:'Shippori Mincho','Noto Serif JP',serif}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.anim-fade{animation:fadeIn .4s ease-out}.anim-slide{animation:slideUp .5s ease-out}.portal-header{background:var(--bg-toolbar);color:#fff;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;box-shadow:0 2px 12px var(--shadow-strong)}.portal-header .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}.portal-header .logo-text{font-family:'Shippori Mincho',serif;font-size:22px;font-weight:700;letter-spacing:2px}.portal-header .logo-sub{font-size:11px;opacity:.5;margin-left:4px}.header-actions{display:flex;align-items:center;gap:8px}.portal-hero{background:linear-gradient(160deg,var(--hero-from) 0,var(--hero-to) 100%);color:#faf6f0;padding:64px 24px;text-align:center;position:relative;overflow:hidden}.portal-hero::after{content:'物語';position:absolute;right:-40px;top:50%;transform:translateY(-50%);font-size:200px;font-family:'Shippori Mincho',serif;font-weight:700;opacity:.04;pointer-events:none;writing-mode:vertical-rl}.portal-hero h1{font-family:'Shippori Mincho',serif;font-size:clamp(28px,5vw,48px);font-weight:700;margin-bottom:12px;letter-spacing:3px}.portal-hero p{font-size:16px;opacity:.7;margin-bottom:8px}.hero-stats{display:flex;justify-content:center;gap:32px;margin-top:24px}.hero-stat{text-align:center}.hero-stat .num{font-size:28px;font-weight:700;display:block}.hero-stat .label{font-size:12px;opacity:.5}.portal-container{max-width:1200px;margin:0 auto;padding:0 24px}.section-title{font-family:'Shippori Mincho',serif;font-size:24px;font-weight:600;margin:48px 0 24px;padding-bottom:12px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:10px}.section-title .icon{font-size:20px}.featured-works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}.work-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .25s ease;position:relative}.work-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px var(--shadow-strong);border-color:var(--accent-author)}.card-banner{height:8px;width:100%}.card-body{padding:20px}.card-title{font-family:'Shippori Mincho',serif;font-size:18px;font-weight:600;margin-bottom:6px;line-height:1.4}.card-author{font-size:13px;color:var(--text-muted);margin-bottom:10px}.card-description{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-stats{display:flex;gap:12px;margin-bottom:10px;flex-wrap:wrap}.stats-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);background:var(--bg-secondary);padding:3px 10px;border-radius:12px}.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.card-tags .tag{font-size:11px;padding:2px 10px;border-radius:10px;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-light)}.card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border-light)}.featured-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .25s ease}.featured-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px var(--shadow-strong)}.featured-card .card-banner{height:6px}.featured-card .card-body{padding:20px}.featured-rank{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;z-index:2}.rank-1{background:linear-gradient(135deg,#f59e0b,#d97706)}.rank-2{background:linear-gradient(135deg,#9ca3af,#6b7280)}.rank-3{background:linear-gradient(135deg,#d97706,#92400e)}.ranking-section{margin-bottom:48px}.ranking-controls{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.ranking-sort-btn{padding:8px 18px;border-radius:20px;border:1px solid var(--border);background:var(--panel-bg);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit}.ranking-sort-btn:hover{border-color:var(--accent-author);color:var(--accent-author)}.ranking-sort-btn.active{background:var(--accent-author);color:#fff;border-color:var(--accent-author)}.ranking-list{display:flex;flex-direction:column;gap:8px}.ranking-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s}.ranking-item:hover{border-color:var(--accent-author);box-shadow:0 4px 16px var(--shadow)}.ranking-number{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;background:var(--bg-secondary);color:var(--text-secondary)}.ranking-item:first-child .ranking-number{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.ranking-item:nth-child(2) .ranking-number{background:linear-gradient(135deg,#9ca3af,#6b7280);color:#fff}.ranking-item:nth-child(3) .ranking-number{background:linear-gradient(135deg,#d97706,#92400e);color:#fff}.ranking-info{flex:1;min-width:0}.ranking-title{font-weight:600;font-size:15px;margin-bottom:2px}.ranking-author{font-size:12px;color:var(--text-muted)}.ranking-stats{display:flex;gap:16px;flex-shrink:0}.ranking-stats .stats-badge{font-size:12px}.vote-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--panel-bg);color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit;flex-shrink:0}.vote-btn:hover{border-color:var(--accent);color:var(--accent)}.vote-btn.voted{background:var(--accent);color:#fff;border-color:var(--accent)}.vote-btn.voted:hover{background:var(--accent-soft)}.vote-count{font-weight:600}.auth-buttons{display:flex;gap:8px}.user-badge{display:flex;align-items:center;gap:8px;font-size:13px}.user-badge .name{font-weight:500}.btn{padding:8px 18px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;font-family:inherit}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-soft)}.btn-author{background:var(--accent-author);color:#fff}.btn-author:hover{background:var(--accent-author-soft)}.btn-ghost{background:0 0;color:var(--text-primary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-secondary)}.btn-sm{padding:5px 12px;font-size:12px;border-radius:6px}.btn-icon{width:36px;height:36px;padding:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:0 0;border:none;color:inherit;cursor:pointer;transition:all .2s;font-size:18px}.btn-icon:hover{background:rgba(255,255,255,.15)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadeIn .2s ease}.modal-content{background:var(--panel-bg);border-radius:16px;padding:32px;max-width:480px;width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px var(--shadow-strong)}.modal-title{font-family:'Shippori Mincho',serif;font-size:20px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}.auth-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:4px}.form-group label{font-size:13px;font-weight:500;color:var(--text-secondary)}.form-group input{padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:var(--panel-bg);color:var(--text-primary);transition:border-color .2s}.form-group input:focus{outline:0;border-color:var(--accent-author)}.tab-group{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--border);border-radius:8px;overflow:hidden}.tab-btn{flex:1;padding:10px;text-align:center;font-size:14px;font-weight:500;cursor:pointer;background:var(--bg-secondary);border:none;color:var(--text-secondary);transition:all .2s;font-family:inherit}.tab-btn.active{background:var(--accent-author);color:#fff}.warning-banner{background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;padding:10px 14px;font-size:12px;color:#92400e;margin-bottom:8px}[data-theme=dark] .warning-banner{background:#451a03;border-color:#92400e;color:#fde68a}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-toolbar);color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;z-index:60;box-shadow:0 8px 24px var(--shadow-strong);animation:slideUp .3s ease;pointer-events:none}.about-lead{font-size:17px;color:var(--text-secondary);text-align:center;margin-bottom:36px;line-height:1.9}.mode-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:40px}.mode-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .25s ease;display:flex;flex-direction:column}.mode-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow-strong)}.mode-cta{margin-top:auto;padding-top:16px;display:flex;gap:8px;flex-wrap:wrap}.mode-cta .btn{flex:1;justify-content:center;min-width:120px}.welcome-banner{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:28px 32px;border-radius:16px;margin:24px auto;max-width:1100px;box-shadow:0 8px 24px rgba(99,102,241,.25)}.welcome-title{font-size:22px;font-weight:700;margin-bottom:8px}.welcome-role{font-size:13px;opacity:.85;margin-bottom:8px}.welcome-tips{font-size:14px;line-height:1.7;opacity:.95}.reader-mode-card{border-top:4px solid #3b82f6}.author-mode-card{border-top:4px solid var(--accent-author)}.mode-icon{font-size:36px;margin-bottom:12px}.mode-title{font-size:20px;font-weight:700;margin-bottom:12px}.mode-desc{font-size:14px;color:var(--text-secondary);line-height:1.8}.mode-desc h4{font-size:14px;font-weight:600;color:var(--text-primary);margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border-light)}.mode-desc ul{list-style:none;padding:0;margin:0 0 12px}.mode-desc li{padding:4px 0 4px 4px;font-size:13px}.mode-highlight{font-size:16px;font-weight:700;color:#3b82f6;margin-bottom:8px}.mode-note{font-size:12px;color:var(--text-muted);margin-top:8px;font-style:italic}.mode-reg{font-size:13px;margin-top:10px;padding:8px 12px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-light)}.auth-flow-info{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:40px}.auth-flow-info h3{font-size:18px;font-weight:700;margin-bottom:20px;text-align:center}.flow-steps{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.flow-step{display:flex;align-items:center;gap:10px;background:var(--bg-secondary);padding:12px 18px;border-radius:12px;border:1px solid var(--border-light)}.step-num{width:28px;height:28px;border-radius:50%;background:var(--accent-author);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.step-text{font-size:13px;color:var(--text-primary)}.flow-arrow{font-size:14px;color:var(--text-muted)}.flow-note{font-size:12px;color:var(--text-muted);text-align:center}.portal-footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:32px 24px;text-align:center;margin-top:48px}.portal-footer .footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:12px}.portal-footer a{color:var(--accent-author);text-decoration:none;font-size:14px}.portal-footer a:hover{text-decoration:underline}.portal-footer .note{font-size:11px;color:var(--text-muted);margin-top:8px}@media(max-width:1024px){.featured-works,.works-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.featured-works,.mode-cards,.works-grid{grid-template-columns:1fr}.portal-hero{padding:40px 16px}.portal-hero h1{font-size:28px}.hero-stats{gap:16px}.ranking-item{flex-wrap:wrap;gap:10px}.ranking-stats{width:100%;justify-content:flex-end}.portal-header{padding:0 12px}.section-title{font-size:20px;margin:32px 0 16px}.modal-content{padding:20px}}