/* Ceritaku v9 — Claude Design Explore / Inspect composition */
:root{--bg:#f4f6fa;--surface:#fff;--surface2:#f9fafc;--ink:#182033;--muted:#778196;--line:#e4e8ef;--accent:#ed7020;--accent2:#fff0e5;--success:#248a62;--sidebar:224px;--radius:12px;--shadow:0 16px 38px rgba(32,42,62,.08)}
body{background:var(--bg)}
.sidebar{width:var(--sidebar);padding:22px 15px;background:#fff}.brand{padding:0 8px 22px}.brand-mark{border-radius:9px;width:36px;height:36px}.brand-copy span{letter-spacing:.01em}.side-nav{gap:3px}.nav-btn{border-radius:8px;padding:10px 11px}.side-stat{margin:17px 8px 0}.main{margin-left:var(--sidebar)}
.topbar{height:64px;background:rgba(255,255,255,.92);padding:0 30px;border-color:var(--line)}.top-title{font-size:14px}.search{height:38px;border-radius:9px}.top-action{width:38px;height:38px;border-radius:9px}
.content{max-width:1280px;padding:29px 34px 76px}.library-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.library-head h1{font-size:29px;letter-spacing:-.04em;line-height:1.05;margin:6px 0 5px}.library-head p{font-size:13px;color:var(--muted);margin:0}.library-summary{display:flex;gap:9px}.summary-chip{background:#fff;border:1px solid var(--line);padding:9px 12px;border-radius:9px;min-width:82px}.summary-chip b{display:block;font-size:14px}.summary-chip span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.hero{display:block;margin:0}.hero-main{display:none}.continue{width:100%;min-height:178px;display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:25px;padding:24px 27px;margin:0 0 31px;background:#20283a;color:#fff;border-radius:14px;box-shadow:0 13px 30px rgba(30,39,57,.13);overflow:hidden}.continue:after{width:230px;height:230px;right:-80px;top:-95px;border:40px solid rgba(255,255,255,.045);background:transparent}.continue:hover{transform:translateY(-2px)}.continue-cover{width:98px;aspect-ratio:3/4;border-radius:8px;background:#f7e6d8;color:#253047;padding:13px 12px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 9px 22px rgba(0,0,0,.18);transform:rotate(-2deg);position:relative;z-index:1}.continue-cover small{font-size:8px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:#a35c2e}.continue-cover strong{font-family:'Literata',serif;font-size:20px;line-height:.9;letter-spacing:-.05em}.continue-copy{text-align:left;position:relative;z-index:1}.continue-label{font-size:9px;color:#f5aa75;letter-spacing:.16em}.continue h2{font-family:'Literata',serif;font-size:24px;margin:10px 0 6px;letter-spacing:-.03em}.continue p{font-size:12px;max-width:580px;color:#b9c0cd}.continue-bottom{display:block;margin:0;min-width:115px;text-align:right}.continue-bottom>span:first-child{display:block;color:#b9c0cd;font-size:10px;margin-bottom:9px}.continue-arrow{margin-left:auto;width:42px;height:42px;background:var(--accent)}
.toolbar{align-items:center;margin-bottom:14px}.toolbar .eyebrow{display:none}.toolbar h2{font-size:17px}.filter{border-radius:8px;padding:7px 11px}.filter.active{background:#20283a;border-color:#20283a}
.story-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px}.story-card{display:block;min-height:0;border:0;background:transparent;border-radius:0;overflow:visible;text-align:left}.story-card:hover{transform:none;box-shadow:none;border:0}.story-art{height:auto;aspect-ratio:4/3;position:relative;display:block;border:1px solid #e7ded7;border-radius:11px;background:#f2e3d7;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}.story-card:hover .story-art{transform:translateY(-3px);box-shadow:0 13px 25px rgba(44,47,58,.11)}.story-art:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.5),transparent 55%)}.cover-number{position:absolute;left:16px;top:14px;font-family:'Literata',serif;font-size:31px;line-height:1;font-weight:700;letter-spacing:-.07em;color:#293247}.cover-kicker{position:absolute;left:17px;top:49px;font-size:8px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#a05d33}.cover-symbol{position:absolute;right:14px;bottom:12px;font-size:29px;filter:saturate(.8)}.cover-rule{position:absolute;left:17px;right:62px;bottom:18px;height:1px;background:rgba(46,56,76,.19)}.story-card:nth-child(4n+2) .story-art{background:#e7edf0;border-color:#dce4e8}.story-card:nth-child(4n+3) .story-art{background:#ede8dd;border-color:#e2dbce}.story-card:nth-child(4n+4) .story-art{background:#ece8e6;border-color:#e2dcda}.story-body{padding:11px 2px 0}.story-top{align-items:center}.story-card h3{font-size:14px}.story-num{background:transparent;padding:0;font-size:9px;color:#9299a7}.story-sub{font-family:'DM Sans',sans-serif;font-size:11px;line-height:1.4;margin:4px 0 8px}.story-meta{font-size:10px;margin-top:0}.story-progress{height:2px;margin-top:8px}
.detail-wrap{max-width:1040px;padding-top:30px}.detail-hero{grid-template-columns:188px minmax(0,1fr);gap:34px;align-items:center;padding-bottom:30px;border-bottom:1px solid var(--line)}.detail-art{width:188px;aspect-ratio:4/5;border-radius:11px;position:relative;display:block;background:#f0dfd1;border-color:#e3d7cd;box-shadow:0 15px 30px rgba(40,42,52,.11);overflow:hidden}.detail-art:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.45),transparent 55%)}.detail-art .cover-number{font-size:50px;left:22px;top:22px}.detail-art .cover-kicker{left:24px;top:79px;font-size:9px}.detail-art .cover-symbol{font-size:45px;right:18px;bottom:17px}.detail-art .cover-rule{left:24px;right:80px;bottom:28px}.detail-hero h1{font-family:'Literata',serif;font-size:36px}.detail-hero p{font-family:'DM Sans',sans-serif;font-size:13px}.primary,.secondary{border-radius:9px}.chapter-head{margin-top:24px}.chapter-list{border-radius:11px}.chapter-item{padding:13px 15px}.chapter-index{border-radius:7px}.chapter-name{font-size:12px}
.reader-view{background:#f8f7f4}.reader-layout{grid-template-columns:230px minmax(0,700px);gap:64px;padding-top:38px}.reader-toc{top:92px}.reader-toc h3{font-size:10px}.toc-btn{font-size:10px;padding:8px 10px}.reader-main{background:#fff;border:1px solid #e9e6df;border-radius:3px;padding:49px 64px 60px;box-shadow:0 18px 55px rgba(37,39,47,.07)}.reader-title{font-size:32px}.reader-kicker{font-size:9px}.reader-body{color:#303645}.reader-dock{left:calc(var(--sidebar) + (100% - var(--sidebar))/2);border-radius:11px;padding:5px}.settings{border-radius:11px}
@media(max-width:1120px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reader-layout{grid-template-columns:180px minmax(0,670px);gap:28px}.reader-main{padding:42px 48px}}
@media(max-width:767px){.topbar{height:56px;padding:0 14px}.content{padding:19px 13px 36px}.library-head{display:block;margin-bottom:15px}.library-head h1{font-size:24px;margin-top:3px}.library-head p{font-size:11px}.library-summary{margin-top:13px;gap:7px}.summary-chip{padding:7px 9px;min-width:0;flex:1}.summary-chip b{font-size:12px}.summary-chip span{font-size:8px}.continue{min-height:133px;grid-template-columns:66px minmax(0,1fr) 35px;gap:13px;padding:17px 15px;margin-bottom:24px;border-radius:12px}.continue-cover{width:64px;padding:9px 8px}.continue-cover small{font-size:6px}.continue-cover strong{font-size:14px}.continue-label{font-size:7px}.continue h2{font-size:16px;margin:7px 0 4px}.continue p{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continue-bottom{min-width:34px}.continue-bottom>span:first-child{display:none}.continue-arrow{width:34px;height:34px}.toolbar{margin-bottom:10px}.toolbar h2{font-size:15px}.story-grid{display:block}.story-card{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);margin:0}.story-card:last-child{border-bottom:0}.story-art{width:74px;aspect-ratio:3/4;border-radius:8px}.cover-number{left:9px;top:9px;font-size:22px}.cover-kicker{left:10px;top:35px;font-size:5px}.cover-symbol{font-size:20px;right:8px;bottom:7px}.cover-rule{left:10px;right:35px;bottom:12px}.story-body{padding:5px 0}.story-card h3{font-size:13px}.story-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px;margin:4px 0 9px}.story-num{font-size:8px}.story-progress{margin-top:7px}.detail-wrap{padding-top:20px}.detail-hero{grid-template-columns:96px minmax(0,1fr);gap:15px;padding-bottom:20px}.detail-art{width:96px}.detail-art .cover-number{font-size:29px;left:12px;top:12px}.detail-art .cover-kicker{left:13px;top:47px;font-size:6px}.detail-art .cover-symbol{font-size:26px;right:10px;bottom:9px}.detail-art .cover-rule{left:13px;right:45px;bottom:16px}.detail-hero h1{font-size:22px}.detail-actions{grid-column:1/-1}.reader-layout{padding:14px 10px 105px}.reader-main{padding:28px 19px 40px;border-radius:2px;box-shadow:none}.reader-title{font-size:26px}.reader-meta{font-size:10px}.reader-body{padding-top:24px}.reader-dock{border-radius:11px}.mobile-nav{height:calc(60px + env(safe-area-inset-bottom))}}