/* 知識+ 問題頁：8-bit 懷舊 Windows 視窗版。疊在 /style.css、/qa/qa.css 後面。
   版面：電腦（≥1000px）固定格子——左上踩坑、左下 AI 題詞、中間問題、右邊最佳解答（最大格、內部捲動）、最下面一排其他回答三則；視窗之間不重疊（留 18px 縫）。
         手機／平板（<1000px）：問題在最上面，回答往下一個一個疊。
   節拍：172 BPM，一拍 349ms、半拍 174ms（win.js 的動畫用同一組數字）。減少動態：全部不動，直接最後一格。
   日夜：日間＝暖紙色底、墨紫字，閃亮元素是葡萄柚粉→淡紫珠光漸層；夜間＝墨色底＋斜細紋（style.css），閃亮元素改粉紫霓虹發光。字永遠放在實色底上。
   沒有 JS（html 沒有 .wjs）時：所有視窗直接疊著顯示，不需要工作列。 */
:root{
  --px:3px;                       /* 像素邊框一格 */
  --b:349ms;
  --w-edge:linear-gradient(135deg,oklch(78% .14 350),oklch(88% .07 310) 30%,oklch(98% .02 350) 50%,oklch(80% .12 320) 70%,oklch(72% .15 350));
  --w-line:oklch(42% .13 330);
  --w-bar:linear-gradient(180deg,oklch(90% .08 350),oklch(82% .1 330) 55%,oklch(80% .11 310));
  --w-bar-ink:oklch(24% .05 335);
  --w-face:var(--card);
  --w-shadow:drop-shadow(4px 4px 0 oklch(72% .09 330 / .55));
  --w-star:oklch(60% .2 350);
  --w-btn:linear-gradient(180deg,oklch(94% .06 350),oklch(84% .11 340));
  --w-btn-ink:oklch(26% .05 335);
  --w-tb:linear-gradient(180deg,oklch(94% .04 330),oklch(86% .07 320));
  --w-tb-line:oklch(98% .02 350);
  --w-glit:oklch(78% .13 340);
}
[data-theme="night"]{
  --w-edge:linear-gradient(135deg,oklch(76% .17 352),oklch(70% .17 305) 35%,oklch(90% .08 330) 50%,oklch(70% .17 305) 65%,oklch(76% .17 352));
  --w-line:oklch(76% .15 340);
  --w-bar:linear-gradient(180deg,oklch(36% .1 335),oklch(28% .08 310));
  --w-bar-ink:oklch(95% .02 330);
  --w-face:oklch(21% .02 330);
  --w-shadow:drop-shadow(0 0 7px oklch(74% .17 352 / .55)) drop-shadow(0 0 1px oklch(86% .1 330));
  --w-star:oklch(90% .12 330);
  --w-btn:linear-gradient(180deg,oklch(40% .12 340),oklch(30% .1 310));
  --w-btn-ink:oklch(96% .02 330);
  --w-tb:linear-gradient(180deg,oklch(27% .06 320),oklch(21% .05 310));
  --w-tb-line:oklch(76% .15 340);
  --w-glit:oklch(88% .12 330);
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.glitter{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glitter i{position:absolute;left:0;font-style:normal;color:var(--w-glit);line-height:1;will-change:transform,opacity;text-shadow:0 0 6px currentColor}
[data-theme="day"] .glitter i{text-shadow:none}
.qa-shell{position:relative;z-index:1}

/* 頁面：寬一點、不再是單欄文章 */
.qa-win-wrap{max-width:1360px;padding-bottom:84px}
.stage{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);margin-top:6px;--b:349ms}

/* ---------- 視窗 ---------- */
.win{position:relative;min-width:0;min-height:0;display:flex;filter:var(--w-shadow);will-change:auto}
.win-edge{flex:1;display:flex;min-width:0;min-height:0;padding:var(--px);background:var(--w-edge);
  clip-path:polygon(0 var(--px),var(--px) var(--px),var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)))}
.win-face{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--w-face);outline:2px solid var(--w-line);outline-offset:-2px;position:relative}
.win-bar{position:relative;flex:none;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 6px;background:var(--w-bar);color:var(--w-bar-ink);border-bottom:2px solid var(--w-line);overflow:hidden}
.win-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,oklch(100% 0 0 / .6),transparent);pointer-events:none}
[data-theme="night"] .win-bar::before{background:linear-gradient(180deg,oklch(100% 0 0 / .12),transparent)}
.win-bar>*{position:relative}
.win-ttl{flex:1;min-width:0;font:700 14.5px/1 var(--sans);letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="night"] .win-ttl{text-shadow:0 0 8px oklch(74% .17 352 / .8)}
.win-ico{display:grid;place-items:center;width:20px;height:20px;flex:none;transform-origin:50% 100%}
.win-ico svg{display:block;width:18px;height:18px;image-rendering:pixelated}
.win-star{flex:none;font-size:15px;line-height:1;color:var(--w-star);transform-origin:50% 55%}
[data-theme="night"] .win-star{text-shadow:0 0 8px currentColor}
.win-x{all:unset;box-sizing:border-box;flex:none;position:relative;width:24px;height:24px;display:grid;place-items:center;cursor:var(--cur-hand,pointer);color:var(--w-bar-ink);
  background:var(--w-btn);outline:2px solid var(--w-line);outline-offset:-2px;
  clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px))}
.win-x svg{display:block;pointer-events:none}
.win-x:hover{background:var(--pink);color:var(--on-pink)}
.win-x:focus-visible{outline:2px solid var(--ink);outline-offset:1px;clip-path:none}
.win-body{flex:1;min-height:0;overflow:auto;padding:12px 15px 14px;font-size:15px;line-height:1.75;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--pink) var(--bg2)}
.win-body::-webkit-scrollbar{width:12px;height:12px}
.win-body::-webkit-scrollbar-track{background:var(--bg2);border-left:2px solid var(--line-strong)}
.win-body::-webkit-scrollbar-thumb{background:var(--pink);border:2px solid var(--bg2)}

/* 窗內共用：頭像（圓、無外框線）、名條列 */
.av-photo{display:block;flex:none;border-radius:50%;object-fit:cover;background:var(--bg2)}
.av{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--av-bg,var(--bg2));overflow:hidden}
.av svg{display:block;width:100%;height:100%;image-rendering:pixelated}
.win .who{display:flex;align-items:center;gap:10px;min-width:0}
.win .qa-bar{display:flex;align-items:center;margin-bottom:8px}
.ex-who{margin-bottom:4px}
.ex-who .av-photo{width:30px;height:30px}
.win .push-row{margin-top:10px}

/* 問題視窗 */
.q-seal{position:relative;margin-left:auto;flex:none;display:inline-block;padding:3px 12px 3px 14px;border:3px double var(--pink);color:var(--pink);font:900 20px/1.2 var(--serif);letter-spacing:.2em;background:color-mix(in oklch,var(--card) 80%,transparent);
  transform:rotate(-8deg);transform-origin:50% 40%}
[data-theme="night"] .q-seal{text-shadow:0 0 8px currentColor;box-shadow:0 0 10px oklch(74% .17 352 / .5)}
.win-q h1{font:900 clamp(18px,1.6vw,22px)/1.45 var(--serif);letter-spacing:.02em;margin:2px 0 12px}
.q-who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.q-who .av-photo{width:48px;height:48px}
.q-who small{display:block;font:italic 400 13px/1.3 var(--latin);color:var(--muted);margin-top:2px}
.q-info{margin:0 0 12px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:4px 0;background:var(--bg2);border:1px dashed var(--line-strong);font-size:13px;line-height:1.6}
.q-info>div{display:flex;gap:.45em;padding:0 .8em 0 0;margin-right:.8em;border-right:1px solid var(--line-strong)}
.q-info>div:last-child{border-right:0;margin-right:0;padding-right:0}
.q-info dt{color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.q-info dd{margin:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.q-info sup{font-size:.75em;color:var(--muted);font-weight:500}
.win-q .body p{margin:0 0 .35em}
.q-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:16px}
.q-hint{margin:0;font-size:13px;color:var(--muted);letter-spacing:.04em}
.q-fake{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.q-fake sup{margin-right:.2em}

/* 像素按鈕 */
.pbtn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:.6em;min-height:40px;padding:0 1.2em;cursor:var(--cur-hand,pointer);position:relative;
  font:900 16px/1 var(--sans);letter-spacing:.12em;color:var(--w-btn-ink);background:var(--w-btn);
  box-shadow:inset 0 0 0 2px var(--w-line),inset 0 3px 0 oklch(100% 0 0 / .55),3px 3px 0 var(--w-line);transition:transform .14s steps(2),box-shadow .14s steps(2)}
[data-theme="night"] .pbtn{box-shadow:inset 0 0 0 2px var(--w-line),inset 0 3px 0 oklch(100% 0 0 / .18),0 0 12px oklch(74% .17 352 / .5)}
.pbtn:hover{transform:translate(-1px,-1px)}
.pbtn:active{transform:translate(2px,2px);box-shadow:inset 0 0 0 2px var(--w-line)}
.pbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pbtn .pbtn-n{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .3em;background:var(--pink);color:var(--on-pink);font:800 13px/1 var(--latin);letter-spacing:0}
.pbtn[data-state="done"]{opacity:.9}
.pbtn[data-state="done"] .pbtn-n{display:none}

/* 最佳解答窗 */
.win-best .qa-bar .who{flex-wrap:nowrap}
.best-bulb{display:flex;align-items:center;gap:8px;margin:0 -16px 12px;padding:6px 16px;background:linear-gradient(90deg,var(--pink-soft),transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:800 15px/1.4 var(--sans);letter-spacing:.14em;color:var(--pink)}
.best-bulb .pxi{width:20px;height:20px}
.win-best .qa-ans h3,.win-ans h3,.qa-ans h3{margin-top:22px}
.win.qa-extra{margin:0;padding:0;border:0;background:none}
.win-extra ol>li code{white-space:normal}

/* Railway 官方原文 */
.rw-quote{margin:8px 0 12px;border:2px solid var(--w-line);background:var(--bg2)}
.rw-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:5px 10px;background:var(--w-bar);color:var(--w-bar-ink);border-bottom:2px solid var(--w-line);font:700 13px/1.5 var(--sans);letter-spacing:.08em}
.rw-head a{color:inherit;font:600 12.5px/1.5 var(--latin);letter-spacing:.02em}
.rw-quote blockquote{margin:0;padding:10px 12px 4px;font:400 13.5px/1.6 var(--latin);font-variation-settings:"SOFT" 0;color:var(--ink)}
.rw-quote blockquote p{margin:0 0 .5em}
.rw-title b{font:700 15px/1.45 var(--latin)}
.rw-state{color:var(--muted);font-style:italic}
.rw-upd{display:flex;gap:8px;align-items:center}
.rw-id{font-weight:700;padding:0 .5em;border:1px solid var(--line-strong)}
.rw-late{font-size:11.5px;letter-spacing:.1em;padding:0 .5em;background:var(--pink);color:var(--on-pink)}
.rw-time{color:var(--muted);font-style:italic}
.rw-old{margin-top:.8em!important;padding-top:.6em;border-top:1px dashed var(--line-strong);color:var(--muted);letter-spacing:.04em}
.rw-zh{margin:0;padding:8px 12px 10px;border-top:2px dashed var(--line-strong);background:var(--pink-soft);font-size:14px;line-height:1.7}
.rw-zh b{color:var(--pink);letter-spacing:.06em}

/* AI 題詞窗 */
.win-ai .win-body{display:flex;flex-direction:column;gap:0}
.ai-say{margin:0 0 8px}
.win-ai .ai-code{flex:1;min-height:0;display:flex;flex-direction:column;margin:2px 0 8px}
.win-ai .ai-code pre{flex:1;min-height:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px}
.win-ai .ai-code pre code{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.ai-small{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}

/* 其他回答窗 */
.o-row{display:flex;gap:12px;align-items:flex-start}
.o-row .av{width:40px;height:40px}
.o-main{min-width:0}
.o-main .name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.o-main .text{margin:4px 0 0}

/* ---------- 工作列 ---------- */
.taskbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:stretch;gap:6px;height:46px;padding:5px 8px calc(5px + env(safe-area-inset-bottom));box-sizing:content-box;
  background:var(--w-tb);border-top:3px solid var(--w-tb-line);box-shadow:0 -2px 0 var(--w-line)}
[data-theme="night"] .taskbar{box-shadow:0 -4px 14px oklch(74% .17 352 / .35)}
.taskbar[hidden]{display:none}
.tb-start,.tb-item{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;padding:0 12px;cursor:var(--cur-hand,pointer);color:var(--w-btn-ink);font:700 14px/1 var(--sans);letter-spacing:.06em;
  background:var(--w-btn);box-shadow:inset 0 0 0 2px var(--w-line),inset 0 3px 0 oklch(100% 0 0 / .5),2px 2px 0 var(--w-line);white-space:nowrap}
.tb-start{font-weight:900}
.tb-start:active,.tb-item:active{transform:translate(2px,2px);box-shadow:inset 0 0 0 2px var(--w-line)}
.tb-start:focus-visible,.tb-item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tb-start .pxi,.tb-item .pxi{width:18px;height:18px;flex:none}
.tb-items{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 3px 3px 0}
.tb-items::-webkit-scrollbar{display:none}
.tb-item{flex:0 1 190px;min-width:44px;max-width:190px}
.tb-item span{overflow:hidden;text-overflow:ellipsis}
.tb-tray{flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;font:700 13px/1 var(--latin);color:var(--w-btn-ink);box-shadow:inset 1px 1px 0 var(--w-line),inset -1px -1px 0 var(--w-tb-line)}
.tb-spark{color:var(--w-star)}

/* ---------- 有 JS：舞台分階段（沒 .wjs 時全部直接顯示）---------- */
html.wjs .win[data-st="idle"],html.wjs .win[data-st="closed"]{visibility:hidden;pointer-events:none}
html.wjs .win[data-st="idle"],html.wjs .win[data-st="closed"]{position:relative}
@media (max-width:999px){
  html.wjs .win[data-st="idle"],html.wjs .win[data-st="closed"]{display:none}
  .stage .win{max-height:none}
  .win-best .win-body{max-height:none;overflow:visible}
  .win-body{overflow:visible}
  .win-ai .ai-code pre{max-height:320px}
  .stage{max-width:680px;margin-left:auto;margin-right:auto}
}
@media (min-width:1000px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1.32fr);grid-template-rows:300px 300px 188px;
    grid-template-areas:"ex q best" "ai q best" "o1 o2 o3"}
  .win-extra{grid-area:ex}.win-q{grid-area:q}.win-best{grid-area:best}.win-ai{grid-area:ai}
  #o1{grid-area:o1}#o2{grid-area:o2}#o3{grid-area:o3}
  .win>.win-edge{min-height:0}
  .win-body{overflow:auto}
}
@media (min-width:1000px) and (max-height:760px){
  .stage{grid-template-rows:280px 280px 188px}
}

/* 手機細部 */
@media (max-width:719px){
  .win-body{padding:12px 13px 14px}
  .q-seal{font-size:17px}
  .win-ttl{font-size:14px}
  .tb-start span{display:none}
  .tb-tray .tb-spark{display:none}
  .tb-item{flex:0 0 auto;max-width:160px}
  .best-bulb{margin-left:-13px;margin-right:-13px}
  .qa-ans ol>li{padding-left:1.9em}
}

/* ---------- 小動畫（CSS 的部分；進場／彈出／關閉在 win.js）---------- */
@keyframes ico-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes ico-hop{0%{transform:translateY(0)}40%{transform:translateY(-5px) scale(1.12)}70%{transform:translateY(0) scale(.94,1.06)}100%{transform:translateY(0)}}
@keyframes star-flash{0%{transform:scale(1) rotate(0);opacity:1}35%{transform:scale(2.1) rotate(90deg);opacity:1;text-shadow:0 0 10px currentColor}100%{transform:scale(1) rotate(180deg)}}
@keyframes star-twinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.7) rotate(45deg)}}
@keyframes x-spin{to{transform:rotate(180deg)}}
@keyframes tb-pop{0%{transform:scale(.2) translateY(14px);opacity:0}65%{transform:scale(1.1);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .win-ico{animation:ico-blink 4s steps(1,end) infinite}
  .win[data-win="best"] .win-ico{animation-delay:-.7s}.win[data-win="extra"] .win-ico{animation-delay:-1.4s}.win[data-win="ai"] .win-ico{animation-delay:-2.1s}
  .win[data-win="o1"] .win-ico{animation-delay:-2.8s}.win[data-win="o2"] .win-ico{animation-delay:-3.3s}.win[data-win="o3"] .win-ico{animation-delay:-3.7s}
  .win-ico:hover,.win-bar:hover .win-ico{animation:ico-hop .349s ease-out}
  .win.landed .win-star{animation:star-flash .349s ease-out}
  .win.twinkle .win-star{animation:star-twinkle .349s ease-in-out}
  .win-x.spin svg{animation:x-spin .174s ease-in forwards}
  .tb-item.pop{animation:tb-pop .349s cubic-bezier(.34,1.56,.64,1)}
}
@media (prefers-reduced-motion:reduce){
  .tb-item,.pbtn{transition:none}
}

/* 進場的燈泡小圖示（win.js 放在畫面上，問題視窗從它放大出來） */
html.wjs .win-q:not([data-st]){visibility:hidden}
.intro-bulb{position:fixed;z-index:40;width:48px;height:48px;pointer-events:none;filter:drop-shadow(0 0 8px oklch(85% .15 90 / .8))}
.intro-bulb svg{display:block;width:100%;height:100%;image-rendering:pixelated}

/* 窗內字級再收一點，電腦版的格子才放得下 */
.win .qa-ans h3,.win.qa-ans h3{font-size:17px;margin:18px 0 4px}
.win .qa-ans ol>li,.win.qa-ans ol>li{padding-top:2px;padding-bottom:2px}
.win .qa-ans ol>li::before,.win.qa-ans ol>li::before{font-size:14px;line-height:1.85;top:2px}
.win-q .body{font-size:15px}
.win .qa-code pre code,.win .qa-ans pre code{font-size:12.5px}
.win .qa-review{font-size:14px}
.win .qa-wait-big{font-size:21px}
.win .qa-aside{font-size:.93em}
@media (min-width:1000px){.win-ai .win-body{overflow:hidden}}
@media (max-width:999px){.win-ai .ai-code{min-height:180px}}