/* Colors come from the app's note catalog (src/core/styles/catalog.ts); cork is the app's own texture. */
:root{
  --paper:#FBF8F1;
  --paper-deep:#F2EBDC;
  --ink:#1E2B36;
  --ink-soft:#5B6670;
  --yellow:#FFE97A;
  --coral:#F4A08F;
  --mint:#CFEBD6;
  --sky:#D6E8F2;
  --peach:#FFCDB8;
  --lavender:#E4DAF5;
  --sand:#EFE3C8;
  --cork:#F4C48A;
  --navy:#2F4A68;
  --pin:#E0604A;
  --tape:rgba(255,255,255,.65);
  color-scheme:light;
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);word-break:keep-all;line-break:strict;overflow-wrap:break-word;}
img,video{display:block;max-width:100%;height:auto;}
a:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
section{padding:72px 0;}
h2{font-size:30px;font-weight:900;margin:0 0 12px;text-wrap:balance;}
.section-sub{font-size:15.5px;color:var(--ink-soft);max-width:540px;line-height:1.85;margin:0 0 40px;}

/* grain overlays: paper-grain / dark-grain were generated with GPT Image (via Codex) */
.grain-note,.grain-dark{position:relative;overflow:hidden;}
.grain-note::before,.grain-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-repeat:repeat;z-index:0;
}
.grain-note::before{background-image:url("textures/paper-grain.webp");background-size:240px 240px;mix-blend-mode:multiply;opacity:.6;}
.grain-dark::before{background-image:url("textures/dark-grain.webp");background-size:200px 200px;mix-blend-mode:soft-light;opacity:.85;}
.grain-note > *,.grain-dark > *{position:relative;z-index:1;}

.cork{
  background-color:var(--cork);
  background-image:radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), url("textures/cork-light.webp");
  background-size:100% 100%, 240px 240px;
  background-repeat:no-repeat, repeat;
}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit;}
.brand-mark{font-weight:900;font-size:21px;letter-spacing:.01em;}
.brand-sub{font-family:'Klee One',cursive;font-size:12px;color:var(--ink-soft);background:var(--sky);padding:3px 10px 4px;border-radius:999px;}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--ink-soft);font-weight:500;}
.nav-links a{color:inherit;text-decoration:none;}
.nav-links a:hover{color:var(--ink);}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding:24px 0 64px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--navy);background:var(--mint);padding:7px 14px;border-radius:999px;margin-bottom:22px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pin);}
h1{font-size:44px;line-height:1.38;font-weight:900;margin:0 0 20px;text-wrap:balance;letter-spacing:.01em;}
h1 .accent{position:relative;white-space:nowrap;z-index:0;}
h1 .accent::after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:14px;background:var(--yellow);z-index:-1;opacity:.85;border-radius:2px;}
.lead{font-size:16.5px;line-height:1.9;color:var(--ink-soft);max-width:480px;margin:0 0 30px;}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:26px;}
.btn-primary{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--ink);color:var(--paper);font-weight:700;font-size:15px;padding:13px 24px;border-radius:14px;text-decoration:none;box-shadow:0 10px 18px -10px rgba(30,43,54,.55), 0 1px 0 rgba(255,255,255,.08) inset;}
.btn-primary small{font-weight:500;font-size:11px;opacity:.75;}
.btn-ghost{color:var(--ink);font-weight:700;font-size:14.5px;text-decoration:none;border-bottom:2px solid var(--coral);padding-bottom:2px;}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-size:12.5px;font-weight:700;background:var(--paper-deep);border:1px solid rgba(30,43,54,.08);padding:7px 13px;border-radius:999px;}

.board{position:relative;border-radius:28px;padding:36px 0;display:flex;justify-content:center;box-shadow:0 1px 0 rgba(0,0,0,.04) inset, 0 24px 40px -24px rgba(30,20,10,.35);}
/* The frame is generated with GPT Image (via Codex); its screen is cut out, and the screenshot sits under it.
   The screen rectangle below was measured on that image (751 × 1502). */
.phone{position:relative;flex:none;width:270px;aspect-ratio:751/1502;filter:drop-shadow(0 22px 22px rgba(30,20,10,.28)) drop-shadow(0 3px 4px rgba(30,20,10,.25));}
.phone .frame{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.phone img:not(.frame),.phone video{position:absolute;left:4.66%;top:1.93%;width:90.68%;height:96.21%;object-fit:cover;background:var(--paper);}
.side-note{position:absolute;z-index:3;width:132px;padding:14px 14px 16px;font-family:'Klee One',cursive;font-size:14px;line-height:1.5;border-radius:3px;box-shadow:0 14px 20px -10px rgba(0,0,0,.32);}
.side-note.a{background:var(--yellow);bottom:120px;left:14px;transform:rotate(-7deg);}
.side-note.b{background:var(--mint);top:46%;right:14px;transform:rotate(5deg);}
.tape{position:absolute;top:-9px;left:50%;width:54px;height:19px;background:var(--tape);transform:translateX(-50%) rotate(-4deg);z-index:2;}
.pin{position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--pin);transform:translateX(-50%);box-shadow:0 2px 3px rgba(0,0,0,.3);z-index:2;}
.caption{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:14px 0 0;}

/* how it is used */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.step{border-radius:4px;padding:26px 22px 24px;box-shadow:0 14px 22px -14px rgba(30,20,10,.35);}
.step:nth-child(1){background:var(--yellow);transform:rotate(-1.2deg);}
.step:nth-child(2){background:var(--sky);transform:rotate(.8deg);}
.step:nth-child(3){background:var(--peach);transform:rotate(-.6deg);}
.step-num{font-family:'Klee One',cursive;font-size:13px;color:var(--ink-soft);margin:0 0 6px;}
.step-title{font-size:19px;font-weight:900;margin:0 0 10px;}
.step-text{font-size:14px;line-height:1.8;margin:0;color:#3A444C;}

/* features */
#dekiru{background:var(--paper-deep);}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.feat-card{background:var(--paper);border-radius:22px;padding:22px 22px 26px;border:1px solid rgba(30,43,54,.07);display:flex;flex-direction:column;}
.feat-visual{height:340px;border-radius:16px;margin-bottom:22px;display:flex;justify-content:center;align-items:flex-start;padding-top:30px;overflow:hidden;}
.feat-visual .phone{width:224px;}
.feat-visual.from-bottom{align-items:flex-end;padding:0 0 30px;}
.feat-title{font-size:17.5px;font-weight:700;margin:0 0 8px;}
.feat-text{font-size:14px;line-height:1.85;color:var(--ink-soft);margin:0;}

/* free plan + download */
#download{border-radius:28px;background:var(--ink);color:var(--paper);padding:60px 40px;text-align:center;}
#download h2{color:var(--paper);}
#download .section-sub{color:var(--sand);margin:0 auto 30px;}
.store-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.store-badge{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:rgba(255,253,248,.08);border:1px solid rgba(255,253,248,.2);border-radius:14px;padding:12px 24px;min-width:170px;}
.store-badge small{font-size:11px;color:var(--sand);}
.store-badge strong{font-size:17px;}
.lang-note{font-size:12.5px;color:var(--sand);margin:22px 0 0;}

footer{padding:30px 0 48px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-soft);flex-wrap:wrap;gap:10px;}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:4px;}
  h1{font-size:34px;}
  .nav-links{display:none;}
  .steps{grid-template-columns:minmax(0,1fr);}
  .feat-grid{grid-template-columns:minmax(0,1fr);}
  section{padding:56px 0;}
  #download{padding:48px 22px;}
}
@media (max-width:480px){
  h1{font-size:29px;}
  h1 .accent{white-space:normal;}
  .brand-sub{display:none;}
}
@media (max-width:420px){
  .side-note{width:104px;font-size:12.5px;padding:10px 10px 12px;}
  .side-note.a{left:2%;}
  .side-note.b{right:2%;}
  .board .phone{width:220px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* language switch + footer links */
.nav-right{display:flex;align-items:center;gap:28px;}
.lang-link{font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;border:1px solid rgba(30,43,54,.18);border-radius:999px;padding:5px 12px;}
.lang-link:hover{background:var(--paper-deep);}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;}
.foot-links a{color:inherit;}

/* manga: card on the top page */
#manga{padding-top:0;}
.manga-card{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:44px;align-items:center;border-radius:28px;padding:40px 48px;}
.manga-cover{border-radius:4px;box-shadow:0 22px 30px -18px rgba(30,20,10,.55), 0 2px 4px rgba(30,20,10,.2);transform:rotate(-2deg);}
.kicker{font-family:'Klee One',cursive;font-size:13px;color:var(--ink-soft);margin:0 0 8px;}
.manga-meta{font-size:13px;color:var(--ink-soft);margin:0 0 22px;}
.manga-card .btn-primary{flex-direction:row;align-items:center;gap:8px;}

/* manga: its own page */
.manga-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:56px;align-items:center;padding:24px 0 64px;}
.manga-hero h1{font-size:40px;}
.tagline{font-family:'Klee One',cursive;font-size:18px;margin:0 0 18px;color:var(--navy);}
.store-row.on-paper .store-badge{background:var(--paper);border-color:rgba(30,43,54,.16);color:var(--ink);}
.store-row.on-paper .store-badge small{color:var(--ink-soft);}
.store-row.on-paper{justify-content:flex-start;}
.status-note{font-size:12.5px;color:var(--ink-soft);margin:14px 0 0;}
.toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;counter-reset:ep;}
.toc li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;padding:16px 0;border-bottom:1px dashed rgba(30,43,54,.2);}
.toc .ep{grid-row:span 2;font-family:'Klee One',cursive;font-size:13px;color:var(--pin);padding-top:3px;}
.toc strong{font-size:16.5px;}
.toc span.feat{font-size:13px;color:var(--ink-soft);line-height:1.7;}
.previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.previews figure{margin:0;}
.previews img{width:100%;height:auto;border-radius:3px;box-shadow:0 18px 26px -16px rgba(30,20,10,.5);}
.previews figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:10px;}
.cast-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.cast{padding:18px 16px 20px;border-radius:3px;box-shadow:0 12px 18px -12px rgba(30,20,10,.35);}
.cast:nth-child(4n+1){background:var(--yellow);transform:rotate(-1deg);}
.cast:nth-child(4n+2){background:var(--sky);transform:rotate(.8deg);}
.cast:nth-child(4n+3){background:var(--peach);transform:rotate(-.6deg);}
.cast:nth-child(4n+4){background:var(--mint);transform:rotate(1deg);}
.cast strong{display:block;font-size:16px;margin-bottom:6px;}
.cast p{margin:0;font-size:13px;line-height:1.7;color:#3A444C;}

/* privacy / support */
.doc{max-width:720px;padding:16px 0 72px;}
.doc h1{font-size:32px;margin-bottom:8px;}
.doc .updated{font-size:13px;color:var(--ink-soft);margin:0 0 36px;}
.doc h2{font-size:19px;margin:36px 0 10px;}
.doc p,.doc li{font-size:15px;line-height:1.95;color:#3A444C;}
.doc ul{padding-left:1.3em;}
.doc .note{background:var(--paper-deep);border-radius:14px;padding:18px 22px;}
.todo{background:var(--yellow);padding:0 4px;border-radius:3px;}
.faq dt{font-weight:700;font-size:15.5px;margin:22px 0 6px;}
.faq dd{margin:0;font-size:15px;line-height:1.9;color:#3A444C;}

@media (max-width:860px){
  .manga-card{grid-template-columns:minmax(0,1fr);padding:30px 22px;gap:28px;}
  .manga-card .manga-cover{max-width:220px;}
  .manga-hero{grid-template-columns:minmax(0,1fr);gap:32px;}
  .manga-hero .manga-cover{max-width:260px;}
  .manga-hero h1{font-size:32px;}
  .toc{grid-template-columns:minmax(0,1fr);}
  .previews{grid-template-columns:minmax(0,1fr);max-width:420px;}
  .cast-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-right{gap:0;}
}