/* pagewrenbaby.com — 视觉照 App 的 DESIGN.md：书架底色、胡桃墨、肉桂色 wren 只给「做一页 / 留住这本书」。
   只有书页（示例页、插画框）投影，其余都是 surface + 细线。改完 build.py 会给链接换 ?v= 版本号。 */
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --shelf:#EFE9DF;--surface:#FAF7F2;--paper:#FFFEFB;--ink:#2A2520;--muted:#6B6258;--soft:#7A6F64;--rule:#D8CFC1;
  --wren:#9A4A26;--wren-deep:#7E3B1D;--wren-soft:#F2E2D6;--cream:#FAF7F2;
  --display:"Source Serif 4",ui-serif,"New York",Georgia,"Songti SC","Hiragino Mincho ProN","Noto Serif CJK SC","Noto Serif Thai",serif;
  --text:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans","Microsoft YaHei","Apple SD Gothic Neo","Noto Sans Thai",Arial,sans-serif;
  --wrap:1080px;--gutter:24px;
  --page-shadow:0 1px 2px rgba(42,37,32,.08),0 10px 28px rgba(42,37,32,.12)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--shelf);color:var(--ink);font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
img,svg,video{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--wren);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:9;background:var(--paper);padding:8px 14px;border-radius:999px}
html[lang^=ko] body{word-break:keep-all;overflow-wrap:anywhere}
html[lang^=ja] h1,html[lang^=ja] h2{word-break:auto-phrase}
html[lang^=th] *{letter-spacing:0!important}

/* header */
.top{display:flex;align-items:center;gap:16px;height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:34px;height:34px;border-radius:8px}
.brand b{font:600 22px/1 var(--display);letter-spacing:-.01em}
.top-end{margin-left:auto;display:flex;align-items:center;gap:6px}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font:500 14px/1 var(--text);color:var(--muted);padding:11px 12px;border-radius:999px}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:17px;height:17px}
.lang summary:hover,.lang[open] summary{background:var(--surface);color:var(--ink)}
.lang ul{position:absolute;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--rule);border-radius:16px;min-width:200px;columns:2;column-gap:4px}
.lang li a{display:block;padding:8px 10px;border-radius:10px;font-size:14px;text-decoration:none;white-space:nowrap}
.lang li a:hover{background:var(--wren-soft)}
.lang li a[aria-current]{font-weight:700}
.top .get{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 14px/1 var(--text);padding:11px 16px;border-radius:999px;border:1px solid var(--rule);background:var(--surface)}
.top .get:hover{border-color:var(--ink)}
.top .get svg{width:15px;height:15px;fill:currentColor}

/* type */
h1{margin:0;font:600 clamp(38px,5.4vw,60px)/1.06 var(--display);letter-spacing:-.02em;text-wrap:balance}
h2{margin:0 0 18px;font:600 clamp(28px,3.4vw,38px)/1.14 var(--display);letter-spacing:-.015em;text-wrap:balance}
h3{font-family:var(--text)}
html[lang^=zh] h1,html[lang^=ja] h1,html[lang^=ko] h1,html[lang^=zh] h2,html[lang^=ja] h2,html[lang^=ko] h2{letter-spacing:0;line-height:1.25}
.eyebrow{margin:0 0 14px;font:600 14px/1.5 var(--text);letter-spacing:.01em;color:var(--muted)}
.sec{padding:clamp(56px,8vw,96px) 0 0}
section{scroll-margin-top:16px}
.intro{color:var(--muted);max-width:40em}

/* buttons */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--wren);color:#fff;text-decoration:none;font:600 16px/1.2 var(--text);transition:background .15s,transform .15s}
.cta:hover{background:var(--wren-deep);transform:translateY(-1px)}
.cta svg{width:19px;height:19px;fill:currentColor;flex:none}
.textlink{font-weight:600;text-decoration:underline;text-underline-offset:5px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,80px);align-items:center;padding:clamp(20px,4vw,48px) 0 0}
.hero .icon{width:76px;height:76px;border-radius:17px;margin:0 0 24px;outline:1px solid rgba(42,37,32,.08);outline-offset:-1px}
.hero .lede{margin:22px 0 0;color:var(--muted);font-size:18px;max-width:34em}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{font:500 13px/1 var(--text);color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:9px 13px;background:var(--surface)}
.art{margin:0;justify-self:center;width:min(100%,460px);aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--paper);box-shadow:var(--page-shadow);transform:rotate(1.2deg)}
.art img{width:100%;height:100%;object-fit:cover}
.qr{display:none}
html.is-desk .qr{display:flex;align-items:center;gap:16px;margin-top:26px;padding:12px 20px 12px 12px;width:fit-content;max-width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:16px}
.qr img{width:88px;height:88px;border-radius:6px;background:#fff}
.qr p{margin:0;max-width:20em;font-size:14px;line-height:1.5;color:var(--muted)}

/* example page */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center}
.story .intro{font-size:18px}
.sample{position:relative;margin:0}
.tag{position:absolute;right:-6px;top:-14px;z-index:1;font:700 11px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(250,247,242,.92);border:1px solid var(--rule);border-radius:999px;padding:7px 10px}
.page{background:var(--paper);box-shadow:var(--page-shadow);border-radius:8px;padding:clamp(28px,5vw,48px) clamp(26px,5vw,48px) clamp(36px,6vw,56px);color:var(--ink);transform:rotate(-1deg)}
.page .book{margin:0 0 30px;font:500 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.page .age{margin:0 0 6px;font:400 14px/1.4 var(--display);color:var(--muted)}
.page h3{margin:0 0 18px;font:600 clamp(24px,2.6vw,30px)/1.25 var(--display)}
.page blockquote{margin:0;font:400 clamp(19px,2vw,23px)/1.6 var(--display)}
.page .no{margin:28px 0 0;text-align:center;font:400 12px/1 var(--display);color:var(--soft);font-variant-numeric:lining-nums}
.sample figcaption{margin:22px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:8px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{border-top:1px solid var(--rule);padding-top:20px;counter-increment:s}
.steps li::before{content:counter(s);display:block;font:600 34px/1 var(--display);color:var(--ink);margin-bottom:14px}
.steps h3{margin:0 0 8px;font:600 18px/1.4 var(--text)}
.steps p{margin:0;color:var(--muted);font-size:16px}

/* features */
.feats{display:grid;gap:20px}
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(24px,4vw,44px) clamp(22px,5vw,56px);background:var(--surface);border:1px solid var(--rule);border-radius:24px}
.feat:nth-child(even) figure{order:2}
.feat figure{margin:0;justify-self:center;width:min(100%,320px);aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--paper);box-shadow:var(--page-shadow)}
.feat figure img{width:100%;height:100%;object-fit:cover}
.feat h3{margin:0 0 12px;font:600 clamp(22px,2.4vw,27px)/1.25 var(--display)}
.feat p{margin:0;color:var(--muted)}
.badges{display:flex;gap:6px;margin:20px 0 0;padding:0;list-style:none}
.badges li{flex:0 1 52px;min-width:0}
.badges img{width:100%;height:auto;aspect-ratio:1}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:8px}
.plan{padding:26px 28px;border:1px solid var(--rule);border-radius:20px;background:var(--surface)}
.plan.pro{border-color:var(--wren);background:var(--paper)}
.plan h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 22px/1.3 var(--display)}
.plan .chip{font:700 11px/1 var(--text);letter-spacing:.06em;color:var(--wren);background:var(--wren-soft);border-radius:999px;padding:6px 9px}
.plan ul{margin:0;padding:0;list-style:none}
.plan li{position:relative;padding-left:26px;margin:10px 0;color:var(--muted);font-size:16px}
.plan li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.price-note{margin:22px 0 0;color:var(--muted);max-width:46em;font-size:16px}
.price-note+.price-note{margin-top:8px}

/* details, what's new, faq */
.more{margin-top:8px;border-top:1px solid var(--rule)}
.more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:18px 0;font:600 17px/1.4 var(--text)}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"+";font:400 24px/1 var(--display);width:20px;color:var(--muted)}
.more[open]>summary::before{content:"–"}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 48px;padding-bottom:12px}
.blocks h3{margin:12px 0 8px;font:600 16px/1.4 var(--text)}
.blocks p,.blocks li{color:var(--muted);font-size:15px}
.blocks p{margin:0 0 8px}.blocks ul{margin:0;padding-left:20px}.blocks li{margin:0 0 6px}
.fine{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:12px}
.fine p{font-size:13px!important}
.news{max-width:46em;color:var(--muted)}
.news h3{margin:18px 0 6px;font:600 17px/1.4 var(--text);color:var(--ink)}
.news p{margin:0 0 10px}.news ul{margin:0 0 10px;padding-left:20px}.news li{margin:0 0 6px}
.qa{max-width:760px}
.qa div{padding:22px 0;border-top:1px solid var(--rule)}
.qa h3{margin:0;font:600 18px/1.4 var(--text)}
.qa p{margin:10px 0 0;color:var(--muted);font-size:16px}

/* guides / app card */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.guides a{display:block;text-decoration:none;padding:22px 24px;border:1px solid var(--rule);border-radius:20px;background:var(--surface);transition:border-color .15s}
.guides a:hover{border-color:var(--ink)}
.guides b{display:block;font:600 21px/1.3 var(--display);margin-bottom:6px}
.guides span{display:block;color:var(--muted);font-size:15px}

.end{text-align:center;padding:clamp(64px,9vw,110px) 0 clamp(48px,7vw,80px)}
.end h2{margin-bottom:24px}
.end .badges{justify-content:center;margin:0 0 26px}

/* article pages: legal, support, about, tools */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule)}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.doc{max-width:760px;margin:0 auto;padding:0 0 clamp(48px,8vw,80px)}
.doc>article{padding-top:clamp(20px,4vw,40px)}
.doc h1{font-size:clamp(34px,4.6vw,48px);margin-bottom:12px}
.doc h2{font-size:clamp(23px,2.6vw,28px);margin:40px 0 12px}
.doc h3{margin:26px 0 8px;font:600 18px/1.4 var(--text)}
.doc p,.doc li{color:#3d362f}
.doc .updated,.doc .meta{color:var(--muted);font-size:14px}
.doc .callout{margin:24px 0;padding:18px 22px;background:var(--surface);border:1px solid var(--rule);border-radius:16px}
.doc .callout p{margin:0}
.doc table{border-collapse:collapse;width:100%;font-size:15px}.doc th,.doc td{border-bottom:1px solid var(--rule);padding:10px 8px;text-align:left;vertical-align:top}
.article{max-width:1032px;margin:0 auto;padding:clamp(20px,4vw,40px) 0 0}
.article>h1{max-width:20em}
.article>.lede{margin:18px 0 0;color:var(--muted);font-size:18px;max-width:46em}
.article>h2{margin:56px 0 14px;font-size:clamp(25px,3vw,32px)}
.article>p,.article>ul,.article>ol{max-width:46em}
.article>ul li,.article>ol li{margin:0 0 8px}
.article .meta{margin-top:40px;color:var(--muted);font-size:14px}
.tool-faq{max-width:1032px;margin:0 auto}
.tool-more{max-width:1032px;margin:0 auto}
.tool-more details{border-top:1px solid var(--rule);padding:16px 0}
.tool-more summary{cursor:pointer;font-weight:600}
.tool-more details p{margin:10px 0 0;color:var(--muted)}
.appcard{display:flex;gap:20px;align-items:flex-start;max-width:1032px;margin:56px auto 0;padding:24px 26px;background:var(--surface);border:1px solid var(--rule);border-radius:24px}
.appcard img{width:72px;height:72px;border-radius:16px;flex:none}
.appcard b{display:block;font:600 22px/1.3 var(--display)}
.appcard p{margin:6px 0 16px;color:var(--muted);font-size:16px}
.appcard .cta{min-height:46px;padding:0 20px;font-size:15px}

/* footer */
.foot{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--rule);background:var(--surface)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:28px;padding-top:44px;padding-bottom:28px}
.foot .brand{margin-bottom:12px}
.foot p{margin:0;color:var(--muted);font-size:15px;max-width:26em}
.foot h2{margin:0 0 12px;font:700 12px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin:0 0 8px;font-size:15px}
.foot li a{text-decoration:none}.foot li a:hover{text-decoration:underline}
.foot .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid var(--rule);padding-top:20px;font-size:13px;color:var(--muted)}

@media (max-width:820px){
  :root{--gutter:16px}
  body{font-size:16px}
  .top{height:64px}
  .top .get span{display:none}.top .get{padding:11px 13px}
  .lang summary span{display:none}
  .hero,.story,.feat{grid-template-columns:1fr}
  .hero{gap:36px}
  .art{width:min(86vw,400px);transform:none}
  .feat figure,.feat:nth-child(even) figure{order:-1;width:min(76vw,300px)}
  .steps,.plans{grid-template-columns:1fr}
  .steps{gap:22px}
  .page{transform:none}
  .tag{right:8px}
  .appcard{flex-direction:column}
  .foot .wrap{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}
}
@media (max-width:380px){.cta{padding:0 20px;font-size:15px}.actions{gap:14px 18px}}
@media print{.top,.foot,.appcard{display:none}body{background:#fff}}