/* 取代 Tailwind preflight（原站 @import "tailwindcss"）的最小重設 */
*,::before,::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{-webkit-text-size-adjust:100%;tab-size:4}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
img,svg{display:block;vertical-align:middle;max-width:100%}
button,input{font:inherit;color:inherit;letter-spacing:inherit;background-color:transparent;border-radius:0;opacity:1}
::placeholder{opacity:1;color:color-mix(in oklab,currentcolor 50%,transparent)}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
[hidden]{display:none!important}

:root { --cream:#f5f0e4; --paper:#fffdf7; --ink:#242624; --muted:#6f7069; --red:#9b4f48; --red-dark:#703731; --yellow:#d1ab58; --line:#d7ccba; --shadow:#382f2a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-reading), "PingFang TC", sans-serif; line-height:1.75; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button { color:inherit; }
:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.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; }

.hero { min-height:760px; background:var(--cream); border-bottom:8px solid var(--red-dark); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(112,55,49,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(112,55,49,.055) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 85%); pointer-events:none; }
.topbar { height:76px; max-width:1160px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(112,55,49,.2); position:relative; z-index:1; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; text-decoration:none; letter-spacing:.05em; }
.brand-mark, .footer-mark { width:30px; height:30px; display:grid; place-items:center; background:var(--red); color:var(--paper); border:3px solid var(--red-dark); box-shadow:3px 3px 0 var(--yellow); font-family:var(--font-pixel); line-height:1; }
.nav-link { font-size:14px; text-underline-offset:5px; text-decoration-thickness:2px; }
.hero-grid { max-width:1280px; margin:auto; padding:92px 42px 110px; display:grid; grid-template-columns:minmax(430px,1fr) 245px 310px; gap:34px; align-items:center; position:relative; z-index:1; }
.eyebrow, .section-kicker { font:700 12px/1.4 var(--font-pixel); letter-spacing:.12em; color:var(--red-dark); }
.eyebrow span { color:var(--paper); background:var(--red); padding:4px 7px; margin-right:8px; }
h1 { margin:22px 0 20px; font-size:clamp(44px,6vw,74px); line-height:1.14; letter-spacing:-.045em; font-weight:900; }
h1 span { color:var(--red); }
.hero-question { font-size:22px; font-weight:800; margin:0 0 12px; color:var(--red-dark); }
.hero-portrait { height:470px; align-self:center; display:flex; align-items:center; justify-content:center; }
.hero-portrait img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.hero-intro { max-width:620px; color:#4e504c; font-size:17px; margin:0 0 34px; }
.pixel-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:50px; padding:10px 22px; background:var(--paper); border:3px solid var(--red-dark); box-shadow:5px 5px 0 var(--shadow); font-weight:800; text-decoration:none; cursor:pointer; transition:transform .12s,box-shadow .12s,background .12s; }
.pixel-button.primary { background:var(--red); color:white; }
.pixel-button:hover { background:#e1c781; transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--shadow); }
.pixel-button:active { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--shadow); }
.subscription-form { margin-top:30px; }
.subscription-copy { margin:0 0 10px; color:#555852; font-size:14px; line-height:1.65; }
.subscription-fields { display:flex; gap:8px; align-items:stretch; }
.subscription-fields label { flex:1; min-width:0; }
.subscription-fields input { width:100%; height:44px; border:2px solid var(--red-dark); background:var(--paper); padding:0 10px; border-radius:0; color:var(--ink); font-size:12px; outline:0; }
.subscription-fields input:focus { box-shadow:inset 0 0 0 2px var(--yellow); }
.subscription-fields button { flex:0 0 auto; min-height:44px; border:2px solid var(--red-dark); background:var(--red); color:white; padding:0 13px; box-shadow:3px 3px 0 var(--shadow); cursor:pointer; font-weight:800; font-size:12px; white-space:nowrap; }
.subscription-fields button:hover { background:var(--red-dark); transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--shadow); }
.subscription-fields button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow); }
.subscription-fields button:disabled { opacity:.65; cursor:wait; }
.subscription-error { margin:8px 0 0; color:#8e302a; font-size:13px; font-weight:700; }
.subscription-success { margin-top:30px; padding:15px 17px; border:3px solid var(--red-dark); background:#f4ead1; box-shadow:4px 4px 0 #d1b56f; font-size:14px; }
.subscription-success p { margin:0; }
.subscription-success p + p { margin-top:10px; color:#625f57; font-size:12px; }
.device { width:310px; background:var(--red); padding:24px 25px 30px; border:7px solid var(--red-dark); border-radius:14px 14px 55px 14px; box-shadow:13px 13px 0 #c9bca6; transform:rotate(2deg); justify-self:end; }
.device-lights { display:flex; gap:8px; margin-bottom:15px; }
.device-lights i { width:10px;height:10px;background:var(--yellow);border:2px solid var(--red-dark); }
.device-lights i:first-child { width:23px;height:23px;border-radius:50%;background:#8eb4ac; }
.screen { height:245px; background:#d9dbc6; border:8px solid #3f4140; box-shadow:inset 0 0 0 4px #adb29d; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#353b35; position:relative; }
.screen::after { content:""; position:absolute; inset:8px; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(53,59,53,.05) 4px 5px); }
.screen-no { position:absolute; left:14px; top:11px; font:700 11px var(--font-pixel); }
.screen-icon { width:72px;height:72px;display:grid;place-items:center;border:7px double #4d594d;font:700 36px var(--font-pixel);margin-bottom:13px; }
.screen strong { font-size:24px; }
.screen small { font:700 11px var(--font-pixel); letter-spacing:.15em; }
.controls { padding-top:23px; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.dpad { margin-right:auto; color:#343434; font:52px/1 var(--font-pixel); transform:scaleX(1.3); }
.round { width:44px;height:44px;border-radius:50%;background:var(--red-dark);color:white;display:grid;place-items:center;font:700 12px var(--font-pixel);box-shadow:3px 3px 0 #48231f; }
.round.small { width:36px;height:36px; }

.catalog { max-width:1180px; margin:auto; padding:92px 24px 110px; }
.section-heading { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:35px; }
.section-heading h2 { margin:4px 0 0; font-size:38px; letter-spacing:-.04em; }
.section-heading>p { color:var(--muted); margin:0 0 5px; }
.filter-panel { border:2px solid var(--line); background:rgba(255,253,247,.74); padding:18px; box-shadow:6px 6px 0 rgba(112,55,49,.12); }
.search-box { height:55px; display:flex; align-items:center; gap:12px; padding:0 17px; background:white; border:2px solid var(--red-dark); }
.search-box>span:not(.sr-only) { font:28px/1 var(--font-pixel); color:var(--red); }
.search-box input { border:0; outline:0; flex:1; min-width:0; background:transparent; font-size:16px; }
.search-box button { border:0;background:transparent;font-size:25px;cursor:pointer; }
.category-filters { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.category-filters button { border:1px solid #beb4a5; background:var(--paper); padding:8px 13px; cursor:pointer; font-size:14px; font-weight:650; transition:.15s; }
.category-filters button span { font-family:var(--font-pixel);margin-right:5px;color:var(--red); }
.category-filters button:hover,.category-filters button.active { background:#e4cd91; border-color:var(--red-dark); transform:translateY(-1px); }
.results-row { min-height:68px; display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted); }
.results-row p { margin:0; }
.results-row strong { color:var(--red-dark); font:800 17px var(--font-pixel); }
.results-row button { border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:var(--red-dark); }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.section-divider { grid-column:1/-1; display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:10px; min-height:48px; margin:20px 0 -4px; color:var(--red-dark); }
.section-divider:first-child { margin-top:0; }
.section-divider>span { width:22px; height:22px; display:grid; place-items:center; background:var(--red); color:var(--yellow); border:2px solid var(--red-dark); font:700 9px var(--font-pixel); box-shadow:3px 3px 0 #d8c18b; }
.section-divider h3 { margin:0; font-size:15px; letter-spacing:.08em; white-space:nowrap; }
.section-divider i { height:6px; background:repeating-linear-gradient(90deg,var(--red) 0 6px,transparent 6px 10px); opacity:.42; }
.term-card { min-height:292px; padding:21px 21px 18px; text-align:left; border:2px solid #a9a092; background:var(--paper); box-shadow:5px 5px 0 #c7bdad; cursor:pointer; position:relative; display:flex; flex-direction:column; transition:transform .14s,box-shadow .14s,border-color .14s; clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) 100%,8px 100%,8px calc(100% - 4px),0 calc(100% - 4px),0 8px,4px 8px,4px 4px,8px 4px); }
.term-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--cat,#8d8d78); }
.term-card:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 #c4a962; border-color:var(--red-dark); }
.category-1 { --cat:#8c7469; }.category-2 { --cat:#6d8882; }.category-3 { --cat:#9a8053; }.category-4 { --cat:#6e738e; }
.card-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; margin-left:5px; }
.card-meta span:first-child { font:800 12px var(--font-pixel); color:var(--red-dark); background:#ead9a8; padding:3px 6px; }
.card-title { margin:23px 5px 15px; }
.card-title h3 { font-size:27px; line-height:1.25; margin:0; letter-spacing:-.025em; }
.card-title p { margin:3px 0 0; font:600 13px/1.45 var(--font-pixel); color:var(--red-dark); }
.card-plain { margin:0 5px; color:#555852; font-size:15px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-open { margin:auto 5px 0; padding-top:15px; font-size:12px; font-weight:750; color:var(--red-dark); }
.card-open b { font-family:var(--font-pixel); margin-left:4px; }
.loading-state,.empty-state { min-height:330px; display:grid; place-content:center; justify-items:center; text-align:center; }
.loading-state span { width:34px;height:34px;border:5px solid var(--line);border-top-color:var(--red);animation:spin .8s steps(8) infinite; }
.empty-state>div { width:60px;height:60px;display:grid;place-items:center;background:#ead9a8;border:4px solid var(--red-dark);font:800 28px var(--font-pixel); }
.empty-state h3 { font-size:24px;margin:20px 0 3px; }.empty-state p { color:var(--muted);margin:0 0 20px; }
@keyframes spin { to { transform:rotate(360deg); } }

footer { background:#2d2e2b; color:#f3eee4; padding:58px max(24px,calc((100vw - 1132px)/2)); display:grid; grid-template-columns:auto 1.6fr 1fr; gap:26px; align-items:start; }
.footer-mark { margin-top:4px; }.footer-about { display:flex; align-items:center; gap:18px; }.footer-portrait-frame { flex:0 0 68px; width:68px; height:78px; }.footer-portrait-frame img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }.footer-copy strong { font-size:19px; }.footer-copy p { color:#c8c4bb;max-width:600px;margin:8px 0 0;font-size:14px; }.footer-links { display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;font-size:13px; }.footer-links a { text-underline-offset:4px; }
.footer-collaboration { grid-column:1/-1; margin-top:12px; padding-top:24px; border-top:1px solid #55564f; }
.footer-collaboration p { margin:0; line-height:1.75; color:#d8d3c9; font-size:14px; }
.footer-collaboration strong,.footer-collaboration span,.footer-collaboration a { display:block; }
.footer-collaboration strong { margin-bottom:3px; color:#d08173; font-size:17px; }
.footer-collaboration a { width:max-content; color:var(--yellow); font-weight:750; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.footer-collaboration a:hover { color:#f0d275; }
.subscription-footer { grid-column:1/-1; margin-top:20px; padding-top:24px; border-top:1px solid #55564f; }
.subscription-footer h3 { margin:0 0 10px; font-size:15px; color:#f3eee4; }
.subscription-footer .subscription-fields { display:grid; grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) auto; max-width:820px; }
.subscription-footer .subscription-fields input { border-color:#c9bda9; background:#373936; color:#f3eee4; }
.subscription-footer .subscription-fields input::placeholder { color:#bbb7af; }
.subscription-footer .subscription-fields button { border-color:#e4d8c7; background:#b56359; box-shadow:3px 3px 0 #171816; }
.subscription-footer.subscription-success { color:#f3eee4; background:#373936; border-color:#c9bda9; box-shadow:4px 4px 0 #171816; }
.subscription-footer.subscription-success p + p { color:#c8c4bb; }
.subscription-footer .subscription-error { color:#f3b3aa; }

.modal-backdrop { position:fixed;inset:0;background:rgba(26,25,23,.76);z-index:50;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px);animation:fade .15s ease-out; }
.modal-card { width:min(740px,100%);max-height:min(890px,calc(100vh - 40px));background:var(--paper);border:5px solid var(--red-dark);box-shadow:12px 12px 0 rgba(0,0,0,.35);display:flex;flex-direction:column;clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 5px,100% 5px,100% calc(100% - 12px),calc(100% - 5px) calc(100% - 12px),calc(100% - 5px) 100%,12px 100%,12px calc(100% - 5px),0 calc(100% - 5px),0 12px,5px 12px,5px 5px,12px 5px);animation:openCard .18s ease-out; }
.modal-topline { background:var(--red);height:55px;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 15px 0 23px;flex:0 0 auto; }
.modal-topline>span { font:800 13px var(--font-pixel);letter-spacing:.08em; }.modal-topline button { width:36px;height:36px;border:2px solid var(--paper);background:var(--red-dark);color:white;font-size:25px;line-height:1;cursor:pointer; }
.modal-scroll { overflow:auto;padding:31px 42px 36px; }
.modal-header { border-bottom:2px solid var(--line);padding-bottom:23px;margin-bottom:26px; }
.category-tag { background:#ead9a8;color:var(--red-dark);font-size:12px;font-weight:750;padding:5px 9px; }.modal-header h2 { font-size:38px;line-height:1.2;margin:14px 0 2px; }.modal-header p { font:600 14px var(--font-pixel);color:var(--red-dark);margin:0; }
.explanation-list section { display:grid;grid-template-columns:150px 1fr;gap:22px;padding:18px 0;border-bottom:1px solid var(--line); }.explanation-list h3 { font-size:15px;margin:2px 0;white-space:nowrap; }.explanation-list h3 span { display:inline-grid;place-items:center;width:28px;height:24px;background:var(--red);color:white;font:700 10px var(--font-pixel);margin-right:9px; }.explanation-list p { margin:0;font-size:16px;line-height:1.85; }
.example,.related,.resources { margin-top:26px; }.example { border-left:5px solid var(--yellow);background:#f4ead1;padding:15px 19px; }.example h3,.related h3,.resources h3 { margin:0 0 10px;font-size:15px; }.example p { margin:0; }
.related>div { display:flex;gap:8px;flex-wrap:wrap; }.related button { background:white;border:1px solid var(--red);padding:7px 10px;cursor:pointer;font-weight:700; }.related button span { font:500 10px var(--font-pixel);color:var(--muted);margin-left:7px; }.related button:hover { background:#ead9a8; }
.resources { display:grid;gap:8px; }.resources h3 { margin-bottom:2px; }.resources a { display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);text-decoration:none;font-size:14px; }.resources a:hover { border-color:var(--red);background:#faf4e6; }.resources a span { font-size:11px;background:var(--red);color:white;padding:2px 6px; }.resources a b { margin-left:auto; }
.updated { color:var(--muted);font-size:11px;margin:27px 0 12px;font-family:var(--font-pixel); }.action-row { display:flex;gap:10px;border-top:2px solid var(--line);padding-top:19px; }.action-row button { flex:1;min-height:46px;background:var(--paper);border:2px solid var(--red-dark);box-shadow:3px 3px 0 var(--shadow);font-weight:750;cursor:pointer; }.action-row button:first-child { background:var(--red);color:white; }.action-row button:active { transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow); }
.toast { position:fixed;left:50%;bottom:25px;z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#30332f;color:white;padding:10px 14px 10px 18px;border:2px solid var(--yellow);box-shadow:4px 4px 0 rgba(0,0,0,.35);font-size:14px;transition:.2s; }.toast span { color:var(--yellow);margin-left:12px; }.toast.show { opacity:1;transform:translate(-50%,0); }
@keyframes fade { from { opacity:0; } } @keyframes openCard { from { opacity:0;transform:translateY(12px) scale(.98); } }

@media (max-width:1050px) { .hero-grid { grid-template-columns:minmax(380px,1fr) 220px;gap:34px; }.hero-portrait { height:430px; }.device { grid-column:1/-1;justify-self:center; } }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr;gap:38px;padding:70px 45px 90px; }.hero-portrait { width:min(360px,80vw);height:440px;justify-self:center; }.device { grid-column:auto;justify-self:center; }.card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.section-heading { align-items:start;flex-direction:column;gap:4px; }.section-heading>p { margin:0; } footer { grid-template-columns:auto 1fr; }.footer-links { grid-column:2; } }
@media (max-width:620px) { .hero { min-height:auto;border-bottom-width:5px; }.topbar { height:64px;padding:0 18px; }.nav-link { display:none; }.hero-grid { padding:58px 20px 76px;gap:34px; }.eyebrow { font-size:10px; }.hero h1 { font-size:42px;margin-top:18px; }.hero-question { font-size:19px; }.hero-portrait { width:min(270px,78vw);height:350px;margin-top:4px; }.hero-intro { font-size:15px; }.subscription-fields,.subscription-footer .subscription-fields { display:flex; flex-direction:column; }.subscription-fields label,.subscription-fields button { width:100%; }.subscription-success { font-size:13px; }.device { width:245px;padding:18px 19px 24px;border-width:5px;box-shadow:9px 9px 0 #c9bca6; }.screen { height:185px;border-width:6px; }.screen-icon { width:58px;height:58px;font-size:28px; }.controls { padding-top:16px; }.dpad { font-size:43px; }.round { width:36px;height:36px; }.catalog { padding:68px 16px 78px; }.section-heading h2 { font-size:31px; }.filter-panel { padding:11px; }.category-filters { flex-wrap:nowrap;overflow-x:auto;padding:2px 1px 7px;scrollbar-width:none; }.category-filters button { white-space:nowrap; }.results-row { min-height:60px; }.card-grid { grid-template-columns:1fr;gap:15px; }.section-divider { margin-top:15px;gap:8px; }.section-divider h3 { font-size:14px;letter-spacing:.04em; }.section-divider i { height:4px; }.term-card { min-height:250px;padding:19px 18px 16px;box-shadow:4px 4px 0 #c7bdad; }.card-title { margin-top:18px; }.modal-backdrop { padding:0;place-items:end center; }.modal-card { max-height:94vh;width:100%;border-width:3px;border-bottom:0;box-shadow:none;clip-path:none; }.modal-topline { height:50px; }.modal-scroll { padding:25px 20px 31px; }.modal-header h2 { font-size:32px; }.explanation-list section { grid-template-columns:1fr;gap:7px;padding:16px 0; }.explanation-list h3 { margin:0; }.explanation-list p { font-size:15.5px; }.action-row { flex-direction:column; }.related button { text-align:left; }.footer-links { grid-template-columns:1fr; }.toast { white-space:nowrap;max-width:calc(100vw - 30px); } footer { padding:46px 22px;grid-template-columns:auto 1fr;gap:18px; }.footer-about { align-items:flex-start; }.footer-portrait-frame { flex-basis:56px;width:56px;height:66px; }.footer-links { grid-column:1/-1; }.footer-collaboration { margin-top:8px; }.footer-collaboration strong { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; } }