@font-face { font-family: "RDR Lino"; src: url("../font/RDRLino-Regular.ttf") format("truetype"); font-display: swap; }
:root { --red: #d20d12; --paper: #eee9df; --muted: #aaa59c; --line: rgba(232,226,214,.18); }
* { box-sizing: border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;background:transparent; }
body { display:none;color:var(--paper);font-family:"RDR Lino",Georgia,serif; }
body.preview { display:block;background:#040404; }
button,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:default;opacity:.35; }
button:focus-visible,input:focus-visible,article:focus-visible { outline:2px solid #e7494d;outline-offset:3px; }
[hidden] { display:none!important; }
#guide-root { position:fixed;inset:0;display:none; } #guide-root.is-open { display:block; }
.view { position:absolute;inset:0;display:none; } .view.is-active { display:block;animation:view-in 140ms ease-out; }
@keyframes view-in { from { opacity:0; } to { opacity:1; } }
.dark-view { background:radial-gradient(ellipse at 65% 15%,rgba(58,47,39,.22),transparent 55%),repeating-linear-gradient(4deg,transparent 0 9px,rgba(255,255,255,.012) 10px),rgba(4,4,4,.975); }
.view-header { position:absolute;top:4.5vh;left:5vw;right:5vw;height:11.5vh;min-height:76px;border-bottom:2px solid rgba(232,226,214,.6); }
.view-eyebrow { margin:0 0 7px;color:var(--muted);font:11px/1.3 Arial,sans-serif;letter-spacing:.19em; }
.view-header h1 { margin:0;font-size:clamp(32px,3vw,58px);font-weight:400;line-height:1.05; }

.overview-content { position:absolute;top:max(18vh,120px);bottom:10.5vh;left:5vw;right:5vw;overflow:auto;padding:0 10px 24px 0;scrollbar-gutter:stable; }
.overview-intro { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:19px; }
.overview-intro h2 { margin:0 0 6px;font-size:clamp(25px,1.8vw,35px);font-weight:400; }
.overview-intro p { margin:0;color:var(--muted);font:14px/1.5 Arial,sans-serif; }
.start-guide { display:flex;align-items:center;gap:15px;flex-shrink:0;padding:13px 18px;border:1px solid #863236;color:var(--paper);background:rgba(210,13,18,.12);font-size:22px; }
.start-guide span:first-child { color:#e88985;font:bold 10px Arial,sans-serif;letter-spacing:.12em; } .start-guide:hover { background:rgba(210,13,18,.25); }
.overview-tools { display:flex;gap:15px;align-items:center;margin-bottom:13px; }
.search-box { display:flex;gap:12px;align-items:center;width:min(660px,72%);min-height:43px;padding:0 14px;border:1px solid #49433c;background:rgba(255,255,255,.025); }
.search-box>span:first-child { font:28px Georgia,serif;color:#b8afa2; }
.search-box input { width:100%;border:0;outline:0;padding:10px 0;color:var(--paper);background:transparent;font:14px Arial,sans-serif; }
.search-box:focus-within { border-color:#e7494d; } .search-box input::placeholder { color:#89837a; }
.search-shortcut { border:1px solid #514b42;padding:2px 6px;font:11px Arial,sans-serif;color:#89837a; }
#clear-filters { border:0;border-bottom:1px solid #595147;padding:6px 0;color:#c0b8ad;background:transparent;font:12px Arial,sans-serif; }
.category-filters { display:flex;flex-wrap:wrap;gap:7px; }
.category-filters button { padding:8px 12px;border:1px solid #3e3933;color:#bfb6aa;background:#11100e;font:12px Arial,sans-serif; }
.category-filters button.is-active,.category-filters button:hover { border-color:#ad3033;color:#fff;background:#481417; }
.result-count { margin:15px 0 11px;color:#989084;font:11px Arial,sans-serif;letter-spacing:.07em; }
.tile-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-content:start; }
.tutorial-card { display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:15px;align-content:start;position:relative;width:100%;min-height:142px;border:1px solid #39342e;padding:17px;color:var(--paper);background:linear-gradient(135deg,rgba(46,42,35,.5),rgba(17,16,14,.9));text-align:left;transition:border-color 100ms,background 100ms; }
.tutorial-card:hover,.tutorial-card.is-selected { border-color:#bd3538;background:linear-gradient(135deg,#30231e,#1c1513); }
.card-image { grid-row:1/span 3;position:relative;width:76px;height:76px;overflow:hidden;border:1px solid #554c40;background:#24201b; }
.card-image,.detail-image { filter:grayscale(.8) sepia(.22) contrast(1.06); }
.card-image img,.detail-image img { position:absolute;top:-80%;left:calc(0% - var(--crop-offset,25%));width:440%;height:auto;max-width:none;pointer-events:none; }
.has-custom-image img { inset:0;width:100%;height:100%;object-fit:cover; }
.card-image.is-icon { filter:sepia(.18); background:radial-gradient(circle,#383128,#191612); }
.card-image.is-icon img { object-fit:contain; padding:8px; }
.card-category { color:#a59b8c;font:9px/1.4 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase; }
.tutorial-card h2 { margin:5px 0 6px;font-size:clamp(20px,1.38vw,28px);font-weight:400;line-height:1.1;overflow-wrap:anywhere; }
.tutorial-card p { margin:0;color:#c0b6a8;font:clamp(12px,.8vw,15px)/1.5 Arial,sans-serif; }
.card-chapters { grid-column:2;margin-top:10px;color:#897e6f;font:10px Arial,sans-serif; }
.empty-state { margin:30px 0;padding:28px;border:1px solid var(--line);text-align:center; } .empty-state h2 { font-weight:400; } .empty-state p { font:14px Arial,sans-serif;color:var(--muted); }
.tutorial-detail-layout { position:absolute;top:max(19vh,130px);right:5vw;left:5vw;bottom:12vh;display:grid;grid-template-columns:minmax(210px,24%) minmax(0,1fr);gap:4vw; }
.detail-summary { min-width:0;padding-right:25px;border-right:1px solid var(--line);overflow-y:auto; }
.detail-image { position:relative;width:100%;aspect-ratio:1.72;overflow:hidden;margin-bottom:18px;border:1px solid #833638;background:#25211d; }
#detail-description,#rule-detail-description { margin:0 0 15px;color:#bfb6a9;font:14px/1.55 Arial,sans-serif; }
#detail-page-count,#rule-detail-page-count { display:block;margin-bottom:14px;color:#928778;font:10px Arial,sans-serif;letter-spacing:.1em; }
.page-tabs { display:flex;flex-direction:column;gap:5px;margin:0 0 20px; }
.page-tab { border:1px solid #39332c;padding:9px 12px;color:#bfb6a9;background:rgba(255,255,255,.02);text-align:left;font:12px/1.45 Arial,sans-serif; }
.page-tab:hover,.page-tab.is-active { border-color:#a53538;color:#fff;background:rgba(210,13,18,.16); }
.related-topics { display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding:15px 0; }
.related-topics h2 { margin:0 0 3px;font:10px Arial,sans-serif;letter-spacing:.1em;color:#928778; }
.related-topics button { border:0;padding:5px 0;color:#c7b8a1;background:transparent;font:12px/1.4 Arial,sans-serif;text-align:left; } .related-topics button:hover { color:#fff; }
.tutorial-article { min-width:0;padding:0 15px 28px 0;overflow-y:auto;user-select:text; }
.tutorial-article h2 { margin:0 0 13px;font-size:clamp(29px,2.4vw,46px);font-weight:400;line-height:1.1; }
.article-intro { max-width:880px;margin:0 0 25px;color:#b7ada0;font:16px/1.65 Arial,sans-serif; }
.article-section { max-width:880px;border-top:1px solid var(--line);padding:17px 0 19px; }
.article-section h3 { margin:0 0 9px;font-size:clamp(21px,1.5vw,30px);font-weight:400; }
.article-section p,.article-section li { margin:0;color:#d0c7ba;font:clamp(15px,.96vw,19px)/1.75 Arial,sans-serif; }
.article-section ol,.article-section ul { margin:7px 0 0;padding-left:24px; } .article-section li { padding-left:5px;margin-bottom:8px; } .article-section li::marker { color:#dc6d69; }
.article-section.is-tip { border:1px solid #655440;border-left:3px solid #ad8650;padding:16px 20px;margin:7px 0 20px;background:rgba(173,134,80,.06); }
.screen-footer { position:absolute;left:5vw;right:5vw;bottom:3.6vh;display:flex;align-items:center;justify-content:flex-end;gap:24px;border-top:1px solid rgba(232,226,214,.5);padding-top:12px;font-size:16px; }
.hint { display:inline-flex;align-items:center;gap:8px; } .keycap { display:inline-flex;min-width:23px;height:23px;align-items:center;justify-content:center;padding:0 5px;border:1px solid #a29888;border-radius:3px;font:bold 10px Arial,sans-serif; }
.footer-button { padding:0;border:0;color:inherit;background:transparent;text-decoration:none; } .footer-button:hover { color:#e88985; }
.footer-label-mobile { display:none; }
.chapter-picker>summary { display:none; }
.chapter-picker:not([open])>.page-tabs { display:none; }
.overview-content,.detail-summary,.tutorial-article { scrollbar-color:#7c3334 #151310;scrollbar-width:thin; }
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:#151310; } ::-webkit-scrollbar-thumb { background:#7c3334; }
@media(max-width:1500px) { .tile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .tutorial-card { min-height:134px; } }
@media(max-width:1000px) { .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .overview-intro { gap:10px; } .overview-intro p { max-width:330px; } .start-guide { font-size:18px;padding:12px; } .start-guide span:first-child { display:none; } .tutorial-detail-layout { grid-template-columns:200px minmax(0,1fr);gap:25px; } .screen-footer { font-size:13px;gap:15px; } }
@media(max-height:740px) { .overview-intro { margin-bottom:12px; } .overview-intro h2 { font-size:25px; } .tutorial-card { padding:12px;min-height:125px;grid-template-columns:62px minmax(0,1fr);gap:10px; } .card-image { width:62px;height:62px; } .screen-footer { bottom:3vh; } .tutorial-detail-layout { bottom:13vh; } .detail-image { margin-bottom:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }

/* On phones and tablets the document scrolls as a single page. Keep this
   breakpoint in sync with mobileLayout in js/main.js. */
@media(max-width:900px), (max-height:500px) and (pointer:coarse) {
  html,body { height:auto;min-height:100%;overflow:visible;background:#040404; }
  html { scroll-padding-top:20px;scroll-padding-bottom:100px; }
  body { -webkit-text-size-adjust:100%;text-size-adjust:100%; }
  #guide-root { position:relative;inset:auto;min-height:100svh; }
  .view { position:relative;inset:auto;min-height:100svh;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
  .view-header { position:static;height:auto;min-height:0;padding:0 0 17px;margin:0 0 24px; }
  .view-eyebrow { font-size:10px;letter-spacing:.13em;line-height:1.5;overflow-wrap:anywhere; }
  .view-header h1 { font-size:clamp(32px,6vw,48px);line-height:1.1;overflow-wrap:anywhere; }
  .overview-content { position:static;overflow:visible;padding:0;scrollbar-gutter:auto; }
  .overview-intro { align-items:flex-start;gap:20px;margin-bottom:24px; }
  .overview-intro h2 { font-size:30px;line-height:1.15; }
  .overview-intro p { max-width:none;font-size:16px;line-height:1.6; }
  .start-guide { min-height:48px;justify-content:center;font-size:22px; }
  .overview-tools { align-items:stretch;gap:12px;margin-bottom:18px; }
  .search-box { width:auto;min-width:0;flex:1;min-height:48px;gap:10px;padding:0 12px; }
  .search-box input { min-width:0;padding:13px 0;font-size:16px; }
  .search-shortcut { display:none; }
  #clear-filters { min-height:48px;padding:8px 10px;border:1px solid #49433c;font-size:14px; }
  .category-filters { gap:8px; }
  .category-filters button { min-height:44px;padding:10px 12px;font-size:14px;line-height:1.4; }
  .result-count { font-size:12px;line-height:1.5;margin:20px 0 13px;overflow-wrap:anywhere; }
  .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  .tutorial-card { grid-template-columns:64px minmax(0,1fr);gap:10px 14px;padding:16px;min-height:152px;touch-action:manipulation; }
  .card-image { width:64px;height:64px; }
  .card-category { font-size:10px;line-height:1.5; }
  .tutorial-card h2 { margin:0;font-size:25px;line-height:1.15; }
  .tutorial-card p { font-size:15px;line-height:1.55; }
  .card-chapters { margin-top:2px;font-size:12px; }
  .empty-state { padding:22px 16px; }
  .empty-state p { font-size:16px;line-height:1.6; }
  .tutorial-detail-layout { position:static;display:flex;flex-direction:column;gap:0; }
  .detail-summary { display:contents; }
  .detail-image { width:100%;aspect-ratio:2.4;max-height:220px;flex-shrink:0;margin:0 0 16px; }
  #detail-description,#rule-detail-description { font-size:16px;line-height:1.65;margin-bottom:20px; }
  #detail-page-count,#rule-detail-page-count { display:none; }
  .chapter-picker { border:1px solid #55453a;background:rgba(255,255,255,.025);margin-bottom:28px; }
  .chapter-picker>summary { display:block;position:relative;min-height:64px;padding:13px 42px 13px 15px;cursor:pointer;list-style:none;font:13px/1.5 Arial,sans-serif;color:#bfb6a9;touch-action:manipulation; }
  .chapter-picker>summary::-webkit-details-marker { display:none; }
  .chapter-picker>summary::after { content:'⌄';position:absolute;right:16px;top:16px;font:24px/1 Arial,sans-serif;color:#dc6d69; }
  .chapter-picker[open]>summary::after { content:'⌃'; }
  .chapter-picker>summary:focus-visible { outline:2px solid #e7494d;outline-offset:3px; }
  .current-chapter { display:block;color:var(--paper);font:16px/1.5 Arial,sans-serif;margin-top:3px;overflow-wrap:anywhere; }
  .page-tabs { gap:6px;padding:0 10px 10px;margin:0; }
  .page-tab { min-height:48px;padding:12px;font-size:15px;line-height:1.5;touch-action:manipulation; }
  .tutorial-article { padding:0;overflow:visible; }
  .tutorial-article h2 { font-size:32px;line-height:1.15;overflow-wrap:anywhere; }
  .article-intro { font-size:16px;line-height:1.7;margin-bottom:24px; }
  .article-section { padding:20px 0; }
  .article-section h3 { font-size:25px;line-height:1.2;overflow-wrap:anywhere; }
  .article-section p,.article-section li { font-size:16px;line-height:1.75;overflow-wrap:anywhere; }
  .article-section ol,.article-section ul { padding-left:22px; }
  .article-section li { padding-left:2px; }
  .article-section.is-tip { padding:16px;margin:8px 0 24px; }
  .related-topics { margin-top:24px;padding:22px 0 0;gap:8px; }
  .related-topics h2 { font-size:12px;line-height:1.5;margin:0 0 4px; }
  .related-topics button { min-height:44px;border:1px solid #39332c;padding:12px;font-size:15px;line-height:1.5;touch-action:manipulation; }
  .screen-footer { position:fixed;z-index:10;left:0;right:0;bottom:0;justify-content:center;gap:8px;padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-color:#534237;background:#11100e;box-shadow:0 -8px 24px rgba(0,0,0,.35); }
  .screen-footer .desktop-hint,.screen-footer .keycap,.footer-label-desktop { display:none; }
  .footer-label-mobile { display:inline; }
  .footer-button { min-height:46px;justify-content:center;gap:0;padding:10px 12px;border:1px solid #5d4438;font:15px/1.4 Arial,sans-serif;touch-action:manipulation; }
  .overview-footer .footer-button { width:100%;max-width:400px; }
  .detail-footer { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .detail-footer .footer-button { padding:10px 5px; }
  .detail-footer [data-overview] { background:#481417;border-color:#ad3033; }
}
@media(max-width:600px) {
  .view { padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right)); }
  .overview-intro { flex-direction:column;gap:16px; }
  .start-guide { width:100%;justify-content:space-between;padding:13px 16px; }
  .start-guide span:first-child { display:none; }
  .overview-tools { flex-wrap:wrap;gap:8px; }
  .search-box { flex-basis:100%; }
  #clear-filters { display:none;margin-left:auto; }
  .has-active-filters #clear-filters { display:block; }
  .tile-grid { grid-template-columns:minmax(0,1fr); }
  .tutorial-card { min-height:144px;grid-template-columns:64px minmax(0,1fr); }
}
@media(hover:none) {
  .tutorial-card.is-selected:not(:focus-visible) { border-color:#39342e;background:linear-gradient(135deg,rgba(46,42,35,.5),rgba(17,16,14,.9)); }
}