/* ============================================================
   blog.css — PLAY AI 筆記（/blog）
   Blog 自己維持閱讀層；共享品牌 token 必須與 style.css 同步。
   ============================================================ */

:root{
  /* Shared with style.css — scripts/test-blog-tokens.mjs guards these. */
  --bg:#0A0A0B;
  --surface:#16161A;
  --surface-2:#1D1D22;
  --border:#2A2A30;
  --text:#F2F2F0;
  --text-dim:#94949C;
  --text-faint:#5C5C64;
  --accent:#7C6CFF;
  --accent-dim:#4A3FE0;
  --radius-lg:22px;
  --radius-md:12px;
  --radius-sm:8px;

  /* Blog reading layer: higher contrast without drifting shared tokens. */
  --read:#D9D9E6;
  --read-dim:#B2B2BC;
  --read-faint:#808089;
  --rule:#232329;
  --raise:#131317;

  --news:#4FD9E8;
  --knowledge:#8E7BFF;
  --opinion:#E7C15C;

  --font-brand:'Space Grotesk','Inter',-apple-system,sans-serif;
  --font-head:'Noto Serif TC','Songti TC',Georgia,serif;
  --font-read:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',
              'PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;

  --col:40rem;
  --col-wide:54rem;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse 1100px 620px at 50% -12%,rgba(124,108,255,.09),transparent),
    var(--bg);
  color:var(--read);
  font-family:var(--font-read);
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:rgba(124,108,255,.34);color:var(--text)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

[data-mode="news"]{--mode:var(--news);--mode-soft:rgba(79,217,232,.11)}
[data-mode="knowledge"]{--mode:var(--knowledge);--mode-soft:rgba(142,123,255,.13)}
[data-mode="opinion"]{--mode:var(--opinion);--mode-soft:rgba(231,193,92,.11)}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(10,10,11,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.top-in{max-width:var(--col-wide);margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font:700 14.5px/1 var(--font-brand);letter-spacing:-.01em;color:var(--text)}
.brand img{width:26px;height:26px;flex:0 0 auto}
.brand em{font-style:normal;color:var(--read-faint);font-weight:500}
.to-app{margin-left:auto;font:600 12.5px/1 var(--font-read);color:var(--read-dim);border:1px solid var(--border);padding:9px 15px;border-radius:999px;transition:color .15s,border-color .15s,background .15s;white-space:nowrap}
.to-app:hover{color:var(--text);border-color:#454550;background:rgba(255,255,255,.02)}

.wrap{max-width:var(--col-wide);margin:0 auto;padding:0 22px 90px}
.demo-note{max-width:var(--col-wide);margin:18px auto 0;padding:12px 18px;border:1px solid rgba(231,193,92,.3);background:rgba(231,193,92,.07);border-radius:var(--radius-md);font-size:12.5px;line-height:1.7;color:var(--opinion)}

/* Shared editorial atoms */
.eyebrow{font:600 11px/1 var(--font-brand);letter-spacing:.16em;text-transform:uppercase;color:var(--read-faint)}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--font-brand);letter-spacing:.06em;color:var(--mode,var(--accent));background:var(--mode-soft,rgba(124,108,255,.13));border:1px solid color-mix(in srgb,var(--mode,var(--accent)) 34%,transparent);padding:5px 10px;border-radius:999px;white-space:nowrap}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.meta{font-size:12.5px;color:var(--read-faint);font-variant-numeric:tabular-nums}
.cover{object-fit:cover;width:100%;height:100%;transition:transform .35s ease}
.shot{background:radial-gradient(115% 88% at 74% 16%,rgba(124,108,255,.34),transparent 58%),radial-gradient(66% 60% at 20% 82%,rgba(74,63,224,.28),transparent 64%),var(--surface)}

/* Designed fallback cover used before a generated raster cover exists. */
.auto-cover{width:100%;height:100%;position:relative;overflow:hidden;padding:20px;display:flex;align-items:flex-end;background:radial-gradient(120% 100% at 78% 8%,color-mix(in srgb,var(--mode,var(--accent)) 45%,transparent),transparent 56%),radial-gradient(85% 85% at 12% 88%,rgba(255,255,255,.06),transparent 58%),linear-gradient(155deg,rgba(255,255,255,.04),transparent 45%),linear-gradient(180deg,rgba(10,10,11,.16),rgba(10,10,11,.55)),var(--surface);isolation:isolate}
.auto-cover::before,.auto-cover::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(.4px)}
.auto-cover::before{width:220px;height:220px;right:-54px;top:-56px;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--mode,var(--accent)) 88%,#fff 12%),transparent 70%);opacity:.33}
.auto-cover::after{width:250px;height:250px;left:-110px;bottom:-120px;border:1px solid rgba(255,255,255,.1);opacity:.55}
.auto-cover-grid{position:absolute;inset:0;pointer-events:none;opacity:.22;background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.auto-cover-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;max-width:92%}
.auto-cover-kicker{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1 var(--font-brand);letter-spacing:.14em;text-transform:uppercase;color:var(--read-dim)}
.auto-cover-kicker::before{content:"";width:18px;height:1px;background:var(--mode,var(--accent));opacity:.9}
.auto-cover-title{font:700 clamp(22px,2.8vw,38px)/1.22 var(--font-head);color:var(--text);text-wrap:balance;text-shadow:0 10px 30px rgba(0,0,0,.28)}
.auto-cover-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 11px/1 var(--font-brand);letter-spacing:.06em;color:var(--read-faint)}
.auto-cover-mark{font:700 11px/1 var(--font-brand);letter-spacing:.12em;text-transform:uppercase;color:var(--read-dim)}

/* List */
.masthead{padding:52px 0 34px;border-bottom:1px solid var(--rule)}
.masthead h1{font:700 42px/1.18 var(--font-head);color:var(--text);letter-spacing:.01em;text-wrap:balance;margin:14px 0 12px}
.masthead p{max-width:34rem;font-size:15.5px;line-height:1.8;color:var(--read-dim)}
/* Site search. The form posts a plain GET to /blog, so it works with JS disabled and
   the result is a real URL a visitor can bookmark or share. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.blog-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:24px 0 0}
.blog-search input{flex:1;min-width:200px;font:400 15px/1.4 var(--font-read);color:var(--text);background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:999px;padding:11px 18px;transition:border-color .15s}
.blog-search input::placeholder{color:var(--read-faint)}
.blog-search input:focus{outline:none;border-color:var(--accent)}
.blog-search button{font:600 13px/1 var(--font-read);color:var(--text);background:var(--surface-2,var(--raise));border:1px solid var(--border);border-radius:999px;padding:11px 20px;cursor:pointer;transition:.15s}
.blog-search button:hover{border-color:#454550}
.blog-search-clear{font:600 13px/1 var(--font-read);color:var(--read-faint);padding:11px 4px}
.blog-search-clear:hover{color:var(--read-dim)}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:24px 0 30px}
.filters a{font:600 13px/1 var(--font-read);border:1px solid var(--border);color:var(--read-dim);padding:9px 15px;border-radius:999px;transition:.15s;background:rgba(255,255,255,.01)}
.filters a:hover{color:var(--text);border-color:#454550;background:rgba(255,255,255,.02)}
.filters a[aria-current="page"]{background:var(--surface-2);border-color:#3A3A44;color:var(--text)}
.lead-card{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--raise);margin-bottom:38px;transition:border-color .18s,transform .18s,box-shadow .18s;box-shadow:0 16px 44px rgba(0,0,0,.12)}
.lead-card:hover{border-color:#3A3A44;transform:translateY(-2px);box-shadow:0 20px 56px rgba(0,0,0,.2)}
.lead-card .shot{aspect-ratio:16/11;overflow:hidden}
.lead-card:hover .cover{transform:scale(1.035)}
.lead-body{padding:30px 32px;display:flex;flex-direction:column;gap:13px;justify-content:center}
.lead-body h2{font:700 27px/1.35 var(--font-head);color:var(--text);text-wrap:balance}
.lead-body p{font-size:14.5px;line-height:1.8;color:var(--read-dim)}
.card-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:26px}
.card{display:flex;flex-direction:column;gap:12px}
.card .shot{aspect-ratio:16/9;border-radius:var(--radius-md);border:1px solid var(--rule);overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card h3{font:600 18px/1.45 var(--font-head);color:var(--text);text-wrap:balance;transition:color .15s}
.card p{font-size:13.5px;line-height:1.75;color:var(--read-dim)}
.card:hover .shot{border-color:#3A3A44;transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,0,0,.18)}
.card:hover h3{color:var(--mode)}
.card:hover .cover{transform:scale(1.04)}
.pager{display:flex;justify-content:center;gap:12px;margin-top:46px}
.pager a{font:600 13.5px/1 var(--font-read);color:var(--read-dim);border:1px solid var(--border);padding:13px 26px;border-radius:999px;transition:.15s}
.pager a:hover{color:var(--text);border-color:#454550;background:rgba(255,255,255,.02)}
.empty{padding:70px 0;text-align:center;color:var(--read-faint);display:flex;flex-direction:column;gap:10px;align-items:center}
.empty b{font:600 19px/1.4 var(--font-head);color:var(--read-dim)}

/* Article */
.article{display:grid;grid-template-columns:1fr minmax(0,var(--col)) 1fr;gap:0 34px}
.article > *{grid-column:2;min-width:0}
.a-head{padding:46px 0 0}
.a-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.a-head h1{font:700 38px/1.32 var(--font-head);color:var(--text);letter-spacing:.005em;text-wrap:balance;margin-bottom:20px}
.a-lead{font-size:18.5px;line-height:1.85;color:var(--read-dim)}
.author-strip{margin-top:22px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--radius-md);background:rgba(255,255,255,.018);display:flex;align-items:flex-start;gap:14px}
.author-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,rgba(124,108,255,.3),rgba(79,217,232,.16));border:1px solid rgba(255,255,255,.08);font:700 11px/1 var(--font-brand);color:var(--text)}
.author-copy{display:flex;flex-direction:column;gap:2px}
.author-copy b{font:600 14px/1.4 var(--font-head);color:var(--text)}
.author-copy span{font-size:12.5px;line-height:1.65;color:var(--read-faint)}
.hero{grid-column:1/-1;margin:34px 0 8px}
.hero .shot{aspect-ratio:16/7;border-radius:var(--radius-lg);border:1px solid var(--rule);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.22)}
.hero .auto-cover{padding:34px 34px 28px}
.hero figcaption{max-width:var(--col-wide);margin:11px auto 0;font-size:12px;color:var(--read-faint)}
.toc{grid-column:1;grid-row:span 40;align-self:start;position:sticky;top:88px;justify-self:end;width:12rem;padding:12px 0 0;display:flex;flex-direction:column;gap:10px}
.toc span{font:600 10.5px/1 var(--font-brand);letter-spacing:.16em;text-transform:uppercase;color:var(--read-faint);margin-bottom:2px}
.toc a{font-size:12.5px;line-height:1.55;color:var(--read-faint);border-left:2px solid var(--rule);padding-left:11px;transition:.15s}
.toc a:hover{color:var(--read-dim);border-color:#3A3A44}
.toc-mobile{margin-top:22px;border:1px solid var(--rule);border-radius:var(--radius-md);background:rgba(255,255,255,.018);display:none}
.toc-mobile summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 13px/1 var(--font-brand);letter-spacing:.05em;color:var(--text)}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::after{content:"＋";color:var(--read-faint);font-size:16px;line-height:1}
.toc-mobile[open] summary::after{content:"－"}
.toc-mobile nav{padding:0 16px 14px;display:flex;flex-direction:column;gap:10px}
.toc-mobile a{font-size:13.5px;line-height:1.55;color:var(--read-dim);border-left:2px solid var(--rule);padding-left:11px}
.body{padding-top:14px;display:flex;flex-direction:column;gap:26px;min-width:0}
.body h2{font:600 25px/1.45 var(--font-head);color:var(--text);margin-top:22px;text-wrap:balance;display:flex;align-items:baseline;gap:13px;scroll-margin-top:92px}
.body h2::before{content:"";width:20px;height:2px;background:var(--mode);flex:0 0 auto;transform:translateY(-7px)}
.body p{color:var(--read)}
.body strong{color:var(--text);font-weight:650}
.body code{font:500 .88em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--rule);padding:2px 6px;border-radius:5px;color:#C9C4FF}
.body figure{grid-column:1/-1;width:100%;min-width:0;max-width:var(--col-wide);justify-self:center}
.body figure .shot{aspect-ratio:16/8;border-radius:var(--radius-md);border:1px solid var(--rule);overflow:hidden}
.body figcaption{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--read-faint)}
.body figure.diagram{max-width:var(--col)}
.body figure.diagram .frame{border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
.body figure.diagram img{display:block;width:100%;height:auto}
.callout{border-left:3px solid var(--mode);background:var(--mode-soft);padding:18px 22px;border-radius:0 var(--radius-md) var(--radius-md) 0;display:flex;flex-direction:column;gap:7px}
.callout .k{font:600 11px/1 var(--font-brand);letter-spacing:.14em;text-transform:uppercase;color:var(--mode)}
.callout p{font-size:16px;color:var(--text)}
.callout.caveat{--mode:#E7C15C;--mode-soft:rgba(231,193,92,.09)}
.t-wrap{grid-column:1/-1;width:100%;min-width:0;max-width:var(--col-wide);justify-self:center;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:14px}
caption{text-align:left;font-size:12.5px;color:var(--read-faint);padding-bottom:10px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.65}
thead th{font:600 11.5px/1.4 var(--font-brand);letter-spacing:.05em;color:var(--read-dim);border-bottom:1px solid #3A3A44;white-space:nowrap}
tbody th{font-weight:650;color:var(--text);white-space:nowrap}
tbody tr:hover{background:rgba(255,255,255,.018)}
td{color:var(--read-dim)}
ol.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:13px}
ol.steps li{counter-increment:s;display:flex;gap:14px;align-items:baseline}
ol.steps li::before{content:counter(s);flex:0 0 auto;font:600 11.5px/1 var(--font-brand);color:var(--mode);width:22px;height:22px;border:1px solid color-mix(in srgb,var(--mode) 40%,transparent);border-radius:50%;display:grid;place-items:center;transform:translateY(3px)}
ul.plain{list-style:none;display:flex;flex-direction:column;gap:11px}
ul.plain li{display:flex;gap:12px}
ul.plain li::before{content:"—";color:var(--read-faint);flex:0 0 auto}
blockquote{border-left:2px solid var(--rule);padding-left:20px;font:600 17px/1.75 var(--font-head);color:var(--text)}
blockquote cite{display:block;margin-top:9px;font:400 12.5px/1 var(--font-read);color:var(--read-faint);font-style:normal}
.a-foot{margin-top:52px;padding-top:30px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:26px}
.cta{background:var(--raise);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:26px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:0 16px 44px rgba(0,0,0,.14)}
.cta div{flex:1 1 15rem;display:flex;flex-direction:column;gap:6px}
.cta b{font:600 17px/1.4 var(--font-head);color:var(--text)}
.cta p{font-size:13.5px;color:var(--read-dim);line-height:1.7}
.cta a{background:var(--accent);color:#0B0B0D;font:700 13.5px/1 var(--font-read);padding:13px 22px;border-radius:999px;white-space:nowrap;transition:background .15s,transform .15s}
.cta a:hover{background:#8E7BFF;transform:translateY(-1px)}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.np{border:1px solid var(--rule);border-radius:var(--radius-md);padding:16px 18px;display:flex;flex-direction:column;gap:7px;transition:border-color .15s,transform .15s,background .15s;background:rgba(255,255,255,.014)}
.np:hover{border-color:#3A3A44;transform:translateY(-1px);background:rgba(255,255,255,.02)}
.np span{font:600 10.5px/1 var(--font-brand);letter-spacing:.14em;text-transform:uppercase;color:var(--read-faint)}
.np b{font:600 14.5px/1.5 var(--font-head);color:var(--text)}
.np.r{text-align:right}
.np.empty-slot{border-style:dashed;opacity:.35;pointer-events:none}

/* Footer */
.site-foot{border-top:1px solid var(--rule);padding:28px 22px 42px}
.site-foot-in{max-width:var(--col-wide);margin:0 auto;display:flex;gap:22px;justify-content:space-between;flex-wrap:wrap}
.site-foot-copy{display:flex;flex-direction:column;gap:7px;max-width:30rem}
.site-foot-copy b{font:700 14px/1 var(--font-brand);letter-spacing:.03em;color:var(--text)}
.site-foot-copy p{font-size:13px;line-height:1.7;color:var(--read-faint)}
.site-foot-links{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.site-foot-links a{font:600 12.5px/1 var(--font-read);color:var(--read-dim);border:1px solid var(--border);padding:10px 14px;border-radius:999px;transition:.15s}
.site-foot-links a:hover{color:var(--text);border-color:#454550;background:rgba(255,255,255,.02)}

/* Responsive */
@media (max-width:1100px){
  .article{grid-template-columns:minmax(0,var(--col));gap:0;justify-content:center}
  .article > *{grid-column:1}
  .toc{display:none}
  .toc-mobile{display:block}
}
@media (max-width:900px){
  .lead-card{grid-template-columns:1fr}
  .lead-card .shot{aspect-ratio:16/9}
  .lead-body{padding:24px 22px 28px}
  .article{grid-template-columns:1fr;gap:0}
  .article > *{grid-column:1}
  .body figure,.t-wrap{grid-column:1}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .masthead h1{font-size:32px}
  .a-head h1{font-size:29px}
  .body h2{font-size:22px}
  .lead-body h2{font-size:23px}
  .nextprev{grid-template-columns:1fr}
  .cta a{width:100%;text-align:center}
  .hero .shot{aspect-ratio:16/10}
  .hero .auto-cover{padding:24px 22px}
  .auto-cover-title{font-size:24px}
  .site-foot{padding-bottom:36px}
}

/* iOS Safari zooms the whole page in when a focused input's text is under 16px, and it
   does not zoom back out. The blog had no inputs until the search box, so this is the
   first place on these pages that can trigger it. Kept at the end of the file so it wins
   on specificity ties — a media query adds none of its own. */
@media (pointer: coarse){
  .blog-search input{font-size:16px}
}