:root {
  --black: #050505; --white: #f7f3e8; --paper: #fffdf6; --red: #e84635;
  --yellow: #f4cf21; --blue: #2468c9; --pencil: #d9c5a0; --muted: #6e6a61;
  --app-height: 100dvh; --safe-top: max(env(safe-area-inset-top), 0px);
  --safe-bottom: max(env(safe-area-inset-bottom), 0px); --safe-left: max(env(safe-area-inset-left), 0px); --safe-right: max(env(safe-area-inset-right), 0px);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--black); background: #d7d3c8; font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; }
button, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.manual { position: relative; display: grid; grid-template-rows: 54px minmax(0,1fr) 62px; width: min(100%, 940px); height: var(--app-height); margin: auto; overflow: hidden; background: var(--white); box-shadow: 0 0 60px rgba(0,0,0,.22); }
.manual-bar { z-index: 10; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(5px + var(--safe-top)) calc(10px + var(--safe-right)) 5px calc(10px + var(--safe-left)); border-bottom: 1px solid #bbb5a7; background: rgba(247,243,232,.95); backdrop-filter: blur(10px); }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.05rem; }
.manual-title { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font-size: .68rem; letter-spacing: .11em; white-space: nowrap; }
.manual-title i { width: 30px; height: 7px; background: linear-gradient(90deg,var(--yellow) 0 33%,var(--blue) 33% 66%,var(--red) 66%); }
.manual-title span { margin-left: 4px; color: var(--muted); font-family: Georgia, serif; letter-spacing: 0; }

.book { min-height: 0; overflow: hidden; }
.page-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; touch-action: pan-x pinch-zoom; }
.page-track::-webkit-scrollbar { display: none; }
.page { position: relative; flex: 0 0 100%; width: 100%; height: 100%; min-height: 0; padding: clamp(22px,5vw,54px) clamp(22px,7vw,74px); overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background-color: var(--paper); background-image: repeating-linear-gradient(0deg,transparent 0 27px,rgba(36,104,201,.08) 27px 28px); }
.page::after { content: attr(data-folio); position: absolute; right: 18px; bottom: 12px; font-family: "Courier New", monospace; font-size: .7rem; opacity: .55; }
.page-inner { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.center { justify-content: center; align-items: center; text-align: center; }
.kicker { margin: 0 0 10px; font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.title { max-width: 760px; margin: 0 0 clamp(12px,2.8vh,24px); font-family: Georgia, serif; font-size: clamp(2.05rem,7vw,4.9rem); line-height: 1.02; letter-spacing: -.045em; }
.title.compact { font-size: clamp(1.75rem,5.8vw,3.7rem); }
.copy { max-width: 670px; margin: 0; color: #33312d; font-size: clamp(.92rem,2.3vw,1.18rem); line-height: 1.5; }
.margin-note { align-self: flex-end; max-width: min(290px,calc(100% - 58px)); margin: auto 58px 0 0; padding-top: 10px; border-top: 2px solid currentColor; font-family: "Courier New", monospace; font-size: .72rem; }

.cover { padding: 0; color: var(--white); background: linear-gradient(to bottom,var(--white) 0 41%,var(--black) 41% 100%); }
.cover::after { color: white; }
.cover .page-inner { position: relative; justify-content: center; padding: clamp(26px,7vw,72px); }
.brand-word { position: absolute; left: 50%; width: calc(100% - 36px); margin: 0; transform: translateX(-50%); font-family: "Arial Black", Impact, sans-serif; line-height: .82; letter-spacing: -.065em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.brand-word.hello { top: 24%; color: var(--black); font-size: clamp(3rem,12vw,7.4rem); }
.brand-word.subconscious { top: 49%; color: var(--white); font-size: clamp(2rem,8.5vw,5.2rem); }
.primary-divider { position: absolute; top: 41%; left: 0; display: grid; grid-template-columns: repeat(3,1fr); width: 100%; height: 15px; }
.primary-divider i:nth-child(1) { background: var(--yellow); }.primary-divider i:nth-child(2) { background: var(--blue); }.primary-divider i:nth-child(3) { background: var(--red); }
.cover-copy { position: absolute; bottom: clamp(70px,12vh,115px); max-width: 590px; margin: 0; color: #d6d6d6; font-family: Georgia, serif; font-size: clamp(.92rem,2.2vw,1.2rem); }
.cover small { position: absolute; top: clamp(34px,7vh,70px); font-weight: 900; letter-spacing: .18em; }
.swipe { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #aaa; font-size: .72rem; white-space: nowrap; }

.blackboard { color: var(--white); background: #101412; background-image: radial-gradient(rgba(255,255,255,.08) .7px,transparent .7px); background-size: 5px 5px; }
.blackboard .copy { color: #dedbd1; }.blackboard::after { color: white; }
.white-page { background-color: var(--paper); }
.yellow-page { background-color: #f6e78c; }.blue-page { background-color: #c9dcf6; }.red-page { background-color: #f3c5bc; }
.chapter-number { font-family: "Arial Black", Impact, sans-serif; font-size: clamp(4.5rem,18vw,10rem); line-height: .75; }
.rule { width: 54px; height: 12px; margin: 24px 0; background: linear-gradient(to bottom,var(--yellow) 0 33%,var(--blue) 33% 66%,var(--red) 66%); }

.school-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; width: min(100%,680px); margin-top: 12px; }
.school-index button { display: grid; grid-template-columns: 30px 1fr; align-items: center; min-height: 52px; padding: 8px 10px; border: 2px solid var(--black); background: rgba(255,255,255,.45); box-shadow: 3px 3px 0 var(--black); cursor: pointer; text-align: left; }
.school-index b { font-family: "Courier New",monospace; font-size: .72rem; }.school-index span { font-weight: 900; }
.mind-board { width: min(100%,560px); margin: auto; border: 3px solid var(--black); box-shadow: 8px 8px 0 rgba(0,0,0,.18); }
.mind-board .half { min-height: 125px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; text-align: center; }
.mind-board .half:first-child { color: var(--black); background: var(--white); }.mind-board .half:last-child { color: white; background: var(--black); }
.mind-board strong { font-family: Georgia,serif; font-size: clamp(1.35rem,4vw,2.2rem); }.mind-board small { font-weight: 900; letter-spacing: .1em; }
.three-bars { display: grid; grid-template-columns: repeat(3,1fr); height: 42px; color: var(--black); font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-align: center; }
.three-bars span { display: grid; place-items: center; }.three-bars span:nth-child(1){background:var(--yellow)}.three-bars span:nth-child(2){background:var(--blue)}.three-bars span:nth-child(3){background:var(--red)}
.owl-lesson { width: min(100%,250px); margin: auto auto 18px; }
.owl-lesson svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.owl-lesson .eye { fill: var(--yellow); stroke: none; }
.year-path { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; width: min(100%,760px); margin-top: 20px; }
.year-path div { min-height: 120px; display: grid; align-content: center; gap: 7px; padding: 14px; border: 2px solid currentColor; text-align: center; }
.year-path b { font-family: Georgia,serif; font-size: 1.08rem; }.year-path span { font-size: .77rem; }
.track-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: min(100%,720px); margin-top: 18px; }
.track-compare article { min-height: 220px; padding: 20px; border: 2px solid currentColor; background: rgba(255,255,255,.24); }
.track-compare h3 { margin: 0 0 12px; font-family: Georgia,serif; font-size: 1.35rem; }.track-compare p { margin: 7px 0; font-size: .86rem; }
.practice-list { display: grid; gap: 7px; width: min(100%,700px); margin-top: 16px; }
.practice-list div { display: grid; grid-template-columns: 30px 1fr; align-items: center; min-height: 43px; padding: 6px 10px; border: 1px solid currentColor; background: rgba(255,255,255,.22); }
.practice-list b { font-family:"Courier New",monospace; }.practice-list span { font-size: .86rem; }
.memory-tree { position: relative; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; width: min(100%,760px); margin: auto; text-align: center; }
.memory-tree div { min-height: 120px; display: grid; place-items: center; padding: 14px; border: 2px solid currentColor; border-radius: 50%; font-family: Georgia,serif; }
.memory-tree i { height: 80px; border-left: 3px solid currentColor; justify-self: center; }
.quick-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; width: min(100%,680px); margin-top: 16px; }
.quick-grid button { min-height: 54px; padding: 9px 12px; border: 2px solid currentColor; background: rgba(255,255,255,.38); box-shadow: 3px 3px 0 currentColor; cursor: pointer; font-weight: 900; }

.page-controls { z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px calc(12px + var(--safe-right)) calc(5px + var(--safe-bottom)) calc(12px + var(--safe-left)); border-top: 1px solid #bbb5a7; background: rgba(247,243,232,.96); }
.page-controls button { min-height: 44px; border: 0; background: transparent; cursor: pointer; font-weight: 900; }.page-controls button:last-child { justify-self: end; }.page-controls button:disabled { opacity: .3; }
#position-button { display:flex;align-items:center;gap:7px; }#position-button i{width:80px;height:3px;background:#c9c3b6}#position-button em{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--yellow),var(--blue),var(--red));}
.owl-button { position: absolute; z-index: 20; right: calc(14px + var(--safe-right)); bottom: calc(76px + var(--safe-bottom)); width: 54px; height: 54px; display:grid;place-items:center;border:2px solid var(--black);border-radius:50%;background:var(--yellow);box-shadow:4px 4px 0 var(--black);cursor:pointer; }
.owl-button svg{width:34px;fill:none;stroke:var(--black);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.owl-button .eye{fill:var(--blue);stroke:none;transform-box:fill-box;transform-origin:center;animation:blink 5s ease-in-out infinite}@keyframes blink{0%,44%,52%,100%{transform:scale(1)}48%{transform:scale(.2)}}

dialog { width:min(100% - 18px,720px);max-height:86dvh;padding:0;border:2px solid var(--black);background:var(--paper);box-shadow:8px 8px 0 var(--black); }dialog::backdrop{background:rgba(0,0,0,.68)}dialog header{display:flex;justify-content:space-between;align-items:flex-start;padding:22px;border-bottom:2px solid var(--black)}dialog h2{margin:3px 0 0;font-family:Georgia,serif;font-size:2rem}dialog small{font-weight:900;letter-spacing:.14em}dialog header button{width:42px;height:42px;border:2px solid var(--black);background:var(--yellow);font-size:1.4rem;cursor:pointer}#contents-list{display:grid;padding:10px 18px 24px}#contents-list button{display:grid;grid-template-columns:38px 1fr;gap:8px;min-height:50px;align-items:center;border:0;border-bottom:1px solid #aaa;background:transparent;text-align:left;cursor:pointer}#contents-list span{font-family:"Courier New",monospace;color:var(--blue)}.guide-options{display:grid;gap:10px;padding:22px}.guide-options button,.save-button{min-height:52px;border:2px solid var(--black);background:var(--white);box-shadow:3px 3px 0 var(--black);cursor:pointer;font-weight:900}#note-form label{display:block;padding:22px;font-weight:900}textarea{width:100%;margin-top:8px;padding:12px;border:2px solid var(--black);background:white}.save-button{margin:0 22px 12px;padding:10px 16px;background:var(--yellow)}#note-status{min-height:22px;margin:0 22px 20px}

@media(max-width:640px){
  .page { padding:22px 24px; }
  .manual-title span { display:none; }
  .year-path { grid-template-columns:1fr 1fr;gap:6px}.year-path div{min-height:84px;padding:9px}.track-compare{grid-template-columns:1fr;gap:8px}.track-compare article{min-height:150px;padding:13px}.memory-tree{grid-template-columns:1fr;justify-items:center;gap:3px;margin-top:8px}.memory-tree div{width:min(100%,230px);min-height:62px;padding:8px;border-radius:999px}.memory-tree i{height:28px}.page-controls span{display:none}.mind-board .half{min-height:105px;padding:12px}
}
@media(max-height:670px){.page{padding-top:18px;padding-bottom:18px}.title{font-size:clamp(1.75rem,6.5vw,3rem);margin-bottom:9px}.copy{font-size:.86rem}.year-path div{min-height:70px}.track-compare article{min-height:125px}.practice-list{gap:4px;margin-top:9px}.practice-list div{min-height:35px}.cover-copy{bottom:62px}.owl-lesson{width:160px}}
@media(min-width:900px){body{padding:18px}.manual{height:calc(100dvh - 36px);border-radius:18px}.page{border-left:1px solid #ddd8cc;border-right:1px solid #aaa}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}
@media print{@page{size:A5 portrait;margin:0}html,body{height:auto;overflow:visible}.manual{display:block;width:auto;height:auto;box-shadow:none}.manual-bar,.page-controls,.owl-button,dialog{display:none!important}.book,.page-track{display:block;height:auto;overflow:visible}.page{width:148mm;height:210mm;page-break-after:always;padding:18mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}}