# 8-bit-orbit — 슬라이드 만들기 지시서 (채팅 AI용)

> 이 파일은 **ChatGPT·Claude·Gemini 같은 채팅 AI**에게 통째로 주면, 이 디자인(`8-bit-orbit`)으로 수업 슬라이드를 만들어 주도록 쓴 지시서입니다.
> 파일을 읽고 쓸 수 있는 에이전트 AI(Claude Code 등)를 쓴다면 갤러리의 **받기 .zip**을 쓰세요.

## 사용법 (사람이 읽는 안내)

1. 채팅 AI 대화창에 **이 파일을 첨부**합니다. 첨부가 안 되면 파일 내용을 **전부 복사해 붙여 넣습니다**(끝까지 빠짐없이).
2. 이어서 만들고 싶은 수업을 말합니다(**"결과는 .html 파일로 만들어 줘"**도 같이 말하면 좋습니다). 예) "6학년 2학기 과학 1단원 3~4차시, 학습 목표는 ○○○, 00초등학교, 슬라이드로 만들어 줘(장 수와 구성은 내용에 맞게 정해 줘)."
3. AI가 먼저 **장별 구성안**(장마다 제목·내용·쓸 부품)을 보여 줍니다. 마음에 들면 "좋아, 만들어 줘", 고칠 곳이 있으면 "3장은 빼고 퀴즈를 하나 더 넣어 줘"처럼 말합니다. 구성 확인 없이 바로 받고 싶으면 2번에서 "구성 확인 없이 바로 만들어 줘"라고 하세요.
4. AI가 **슬라이드.html 파일**을 만들어 줍니다. 내려받아 더블클릭하면 브라우저에서 열립니다. 방향키(→ ←)와 스페이스로 넘깁니다. 만약 파일 대신 **코드만 글로 보여 주면** "코드 말고 .html 파일로 만들어서 내려받게 해 줘"라고 다시 요청하세요. 그래도 안 되면 코드를 모두 복사해 메모장에 붙여 넣고 `슬라이드.html`로 저장합니다(파일 형식은 '모든 파일', 인코딩은 UTF-8).
5. 고치고 싶으면 AI에게 "2장 제목을 ○○로 바꿔 줘"처럼 말하면 됩니다. 중간에 코드가 끊기면 "끊긴 곳부터 이어서 출력해 줘"라고 하세요.

서비스별 팁 (메뉴 이름은 서비스마다 바뀔 수 있습니다)
- 공통: 고를 수 있다면 **생각하는(추론) 모드**나 상위 모델을 쓰세요. 긴 코드를 끝까지 정확하게 쓰는 데 차이가 큽니다.
- ChatGPT: "캔버스로 만들어 줘" 또는 "다운로드할 수 있는 .html 파일로 만들어 줘"라고 요청합니다.
- Gemini: 입력창의 **Canvas**를 켜고 요청하면 화면에서 바로 보고 내려받을 수 있습니다.
- Claude: 결과가 **아티팩트**(오른쪽 창)로 열리면 거기서 내려받습니다.
- AI가 그림 파일(이미지)을 따로 만들어 주더라도 슬라이드에는 들어가지 않습니다. 슬라이드는 .html 파일입니다.
- **AI 화면 안의 미리보기에서는 색·모양·버튼이 안 나올 수 있습니다.** 이 디자인의 공통 모양과 동작은 슬라이드를 열 때 인터넷(`https://k-slide.web.app`)에서 불러오는데, 일부 서비스의 미리보기 창은 바깥 파일을 막기 때문입니다. **내려받아 브라우저(크롬·엣지 등)로 열면 정상**으로 보입니다.

알아 둘 점
- 이 디자인의 한글 글씨체는 제목 Mona12 Bold(700) · 본문 Orbit(400)입니다. 글씨체와 공통 모양·동작은 **인터넷에서 불러오므로 슬라이드를 열 때 인터넷이 필요**합니다(영문 글꼴도 마찬가지). 인터넷 없이 발표하려면 갤러리의 **받기 .zip**(모든 것이 파일 안에 들어 있음)을 쓰세요.
- AI가 긴 코드를 일부 생략하거나 어긋나게 쓸 수 있습니다. 열어서 한 번 확인하세요. 안 열리거나 깨지면 "코드가 생략되었어. 완성된 HTML 하나로 처음부터 끝까지 다시 출력해 줘"라고 요청합니다.
- 사진·학생 이름 같은 개인정보는 AI에게 넣지 마세요.

## 라이선스

폰트 라이선스 안내
==================

- Mona12 Bold: Mona12 — 눈누에 웹 파일이 없어 원본 배포처에서 받음 (extra.js, 2026-10-07) / https://cdn.jsdelivr.net/gh/MonadABXY/mona-font/web/Mona12.woff2
  파일: Mona12-Bold.ttf
- Orbit: Orbit — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright 2022 The Orbit Project Authors (https://github.com/JAMO-TYPEFACE/Orbit)
  파일: Orbit-Regular.ttf

SIL Open Font License 1.1 요약
- 폰트를 자유롭게 사용·복제·수정·재배포할 수 있습니다(폰트 파일 단독 판매는 불가).
- 수정본(글자를 줄인 서브셋 포함)은 원래 폰트의 '예약 이름'을 쓰지 못할 수 있습니다.
- 재배포할 때는 저작권 표시와 라이선스 문구를 함께 넣어야 합니다.
- 전문: https://openfontlicense.org

학교안심 글꼴과 easy3D 폴더의 글꼴은 사용자가 OFL로 확인한 내용을 따랐습니다. 배포 전에 각 배포처에서 최신 라이선스를 다시 확인하세요.

design.md 라이선스 (MIT)
=======================
design.md는 frontend-slides(https://github.com/zarazhangrui/frontend-slides)의 템플릿을 바탕으로 한 것이며, 아래 MIT 라이선스를 따릅니다.

MIT License

Copyright (c) 2025 Zara Zhang

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

# ▼▼▼ 여기부터 AI에게 주는 지시서 ▼▼▼

(이 줄 위의 '사용법'과 '라이선스'는 사람을 위한 안내입니다. AI는 아래 지시서를 따르세요.)

## 0. 당신(AI)의 일

당신은 슬라이드 제작 도우미입니다. 사용자가 알려 주는 수업 내용으로, 아래 **디자인 규칙(1)**, **부품 사전(3)**, **HTML 뼈대(4)**를 지켜 **브라우저에서 바로 열리는 슬라이드 HTML 파일 하나**를 만듭니다.
이 디자인의 공통 CSS(글씨체·색·부품 모양)와 동작 엔진은 사이트에 올려 둔 파일이라, 뼈대의 `<link>`·`<script src>` 두 줄이 불러옵니다. **당신이 쓰는 것은 슬라이드 HTML(`<section class="slide">`들과 내비)과, 꼭 필요할 때만 '추가 부품' CSS뿐입니다.** 공통 CSS의 내용은 참고용으로 5에 있습니다.

### 진행 순서
1. 사용자가 아직 수업 내용을 말하지 않았다면, 먼저 아래를 짧게 물어보세요: 학교급·학년·과목, 단원과 차시, 학습 목표, 학교 이름(선택), 원하는 장 수(말하지 않으면 내용 분량에 맞게 정함).
2. **장별 구성안을 먼저 보여 주고 확인을 받습니다**(아래 '구성은 내용이 정합니다'). 이때는 코드를 쓰지 마세요.
3. 확인을 받으면 HTML을 만들고, 내보내기 전에 아래 '내보내기 전 점검'을 하나씩 확인합니다.
- 내용은 사용자가 준 것만 쓰고, **숫자·사실·출처를 지어내지 마세요.** 모르면 묻거나 "(예시)"라고 표시하세요.
- **사용자가 주지 않은 사실(연도·기록·수치·등재·'세계 최고'·'가장 ○○하다' 같은 말)을 덧붙이고 싶으면, 구성안에 '추가 사실'로 따로 적어 확인을 받으세요.** 확인받지 않은 사실은 슬라이드에 넣지 않습니다. 널리 알려진 이야기라도 정확한 대상을 쓰세요(예: 유네스코 세계기록유산에 오른 것은 '한글'이 아니라 《훈민정음》 해례본이라는 책).

### 반드시 지킬 것
1. **디자인 규칙(1)을 어기지 마세요.** 색·글꼴·배치·장식·움직임 규칙과 '하지 말 것'을 그대로 따릅니다. 규칙에 없는 효과(임의의 애니메이션, 새 색, 새 장식)를 더하지 마세요.
2. **뼈대(4)의 공통 파일 두 줄을 그대로 두세요.** `<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/8-bit-orbit.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/8-bit-orbit.js"></script>`(body 맨 끝)는 주소 한 글자도 바꾸거나 지우지 마세요. **공통 CSS(5)나 엔진을 HTML 안에 옮겨 쓰거나, 줄이거나, 비슷하게 새로 짜지 마세요**(이미 불러오므로 같은 규칙을 또 쓰면 서로 부딪혀 깨집니다). `<style>`에는 '추가 부품' 줄과 그 아래에 직접 정의한 클래스만 둡니다. 엔진이 쓰는 속성 이름(`data-steps`, `data-s`, `data-quiz`, `data-opt`, `data-act`, `data-blank` 등)은 5의 엔진 사용법대로 씁니다.
3. **클래스는 부품 사전(3)과 공통 CSS(5)에 있는 것만 쓰세요.** 없는 클래스 이름을 지어 쓰면 아무 모양도 적용되지 않아 배치가 무너집니다(창이 좁아지고 빈 공간이 생김). 새 부품이 꼭 필요하면 `<style>`의 '추가 부품' 주석 줄 **아래에** 그 클래스를 직접 정의하세요(디자인 규칙의 색·선·글꼴만 사용). 모양을 `style="…"`로 하나하나 지정하는 것보다 부품 클래스를 쓰는 쪽이 낫습니다.
   - **새 배치를 만들기 전에, 예시 장의 배치 클래스로 할 수 있는지 먼저 보세요.** 직접 만든 배치는 화면을 볼 수 없는 상태에서 쓰기 때문에 깨질 위험이 큽니다. 예시 배치로 안 될 때만 새로 정의합니다.
4. **슬라이드의 장 수·순서·내용은 사용자 수업에 맞게 새로 구성하세요.** 뼈대의 슬라이드는 '계절의 변화' 예시이므로 그 문구는 하나도 남기지 마세요. 장을 늘리거나 줄이거나 순서를 바꾸면 **내비 점 개수와 쪽 표시(예: 01 / 06)를 실제 장 수에 맞추세요.** 뼈대의 6번째 장은 이 디자인의 대표 장치를 눌러 보여 주는 안내 장이므로, 그 부품·움직임(예: data-demo 시연 버튼과 .play 상태)만 참고하고 디자인 안내 문구는 남기지 마세요. 아래 '구성은 내용이 정합니다'를 따르세요.
5. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Mona12 Bold(700) · 본문 Orbit(400))는 공통 CSS가 불러옵니다. `@font-face`를 새로 쓰지 말고, 글꼴은 `var(--kt)`(제목)·`var(--kb)`(본문)·`var(--ka)`(포인트) 변수로만 지정하세요.
6. **글자 크기와 화면 채우기** (슬라이드는 1920×1080 기준으로 그려져 화면 크기에 맞게 통째로 줄어듭니다)
   - 읽어야 하는 글(본문·설명·표 내용·보기)은 **28px 이상**, 보조 글(캡션·주석)은 **22px 이상**으로 씁니다. 창 제목줄·쪽 번호·작은 라벨 같은 장식 글자는 디자인 규칙의 크기를 따릅니다.
   - 창·판·카드가 **화면의 대부분을 채우게** 하세요. 한쪽에 작게 몰리거나 큰 빈 공간이 남으면 안 됩니다. 내용이 적은 장은 글자와 그림을 키우거나 다른 장과 합칩니다.
   - **높이 예산**: 장 제목과 아래 내비를 빼면 본문에 쓸 수 있는 높이는 대략 **650~750px**입니다. 모든 내용이 1920×1080 안에 들어가야 하고, 넘친 부분은 잘려서 보이지 않습니다. 쓰기 전에 줄 수 × 줄 높이(글자 크기의 약 1.5배)로 높이를 어림해 보세요.
   - **카드 규칙**: 한 장에 카드(칸)를 4개 이상 놓으면 카드마다 글은 **3줄 이하**로 줄입니다. 글이 들어가는 칸은 **너비 400px 이상**으로 두고(그림+글을 나란히 놓을 때는 글 칸 기준), 한 줄에 몇 글자밖에 안 들어가게 좁히지 마세요. 카드를 두 줄로 쌓아야 하면 그 줄들의 높이 합이 높이 예산 안에 드는지 확인합니다.
   - 제목은 **두 줄 이내**로 씁니다. 표지 제목은 한 줄에 15자 안팎으로 끊어 줄을 바꾸세요. 글이 창 밖으로 넘치거나 잘리면 글자를 줄이지 말고 문장을 짧게 고칩니다.
   - 한글은 단어 중간에서 줄이 바뀌지 않게(`word-break:keep-all`) 합니다(공통 CSS에 이미 들어 있음).
7. 저작권이 있는 글·그림·사진을 가져오지 마세요. **사용자가 요청하지 않으면 그림 파일(이미지 생성)을 따로 만들지 마세요. 슬라이드에 필요한 그림은 HTML 안에서 SVG·CSS로 그립니다.**

### 구성은 내용이 정합니다
- 예시 덱(deck.html)은 이 디자인의 **부품 견본**입니다. 따라야 할 장 구성이 아닙니다. 예시의 장 순서·장 수·제목 짜임·문장 구조를 그대로 따라 하지 마세요.
- 사용자가 준 내용을 먼저 살펴 **필요한 장 수와 장별 역할을 직접 정하세요.** 내용이 적으면 3~4장, 많으면 8장 이상도 괜찮습니다.
- **코드를 쓰기 전에 장별 구성안(장마다 제목 · 전할 내용 한 줄 · 쓸 부품)을 먼저 보여 주고 확인을 받으세요.** 사용자가 고치라고 하면 고친 구성안을 다시 보여 주고, "좋아", "만들어 줘"라고 하면 그때 만듭니다. 사용자가 처음부터 "구성 확인 없이 바로 만들어 줘"라고 했으면 이 단계는 건너뜁니다.
- 아래 부품 중 **필요한 것만 골라 쓰세요.** 안 쓰는 부품이 있어도 되고(예: 퀴즈 없는 덱), 같은 부품을 여러 장에 쓰거나 한 장에 섞어 써도 됩니다.
  · 표지 · 단계 버튼이 있는 흐름(data-steps) · 큰 숫자와 통계 · 그래프 · 비교와 표 · 목록과 인용 · 퀴즈와 다시 풀기 · 빈칸 채우기 · 시연 버튼(data-demo)
- 장마다 전하는 메시지는 하나로 하고, 같은 모양의 장이 연달아 나오지 않게 하세요.
- 지켜야 하는 것은 디자인 규칙(design.md)과 동작 엔진입니다. 자유로운 것은 장의 수·순서·구성입니다.

### 출력 방식
- **결과물은 '.html 파일'로 주세요.** 파일 이름은 슬라이드.html, 형식은 UTF-8 HTML 문서 하나입니다. 파일을 만들거나 내려받게 해 주는 기능(아티팩트·캔버스·코드 실행 환경·파일 첨부 등)이 있으면 **반드시 그 기능으로 .html 파일을 만들어 내려받거나 열 수 있게** 하세요. 코드만 글로 보여 주고 끝내지 마세요.
- 파일을 만들 수 있는 기능이 **전혀 없을 때만**, 설명은 한두 줄로 줄이고 **완성된 HTML 전체를 ```html 코드 블록 하나**로 출력하세요(이때 사용자가 직접 .html로 저장합니다).
- **`...`, "(이하 동일)", "(생략)" 같은 생략 표시를 쓰지 마세요.** `<!DOCTYPE html>`부터 `</html>`까지 전부 씁니다.
- 너무 길어 끊길 것 같으면 먼저 쓰지 말고, 사용자에게 "장 수를 줄일까요?"라고 묻거나, 끊기면 사용자가 "이어서"라고 할 때 **끊긴 글자 바로 다음부터** 이어 쓰세요.
- **미리보기 창에서 색·모양·버튼이 안 보여도 고치지 마세요.** 공통 CSS·엔진은 인터넷 주소(`https://k-slide.web.app`)에서 불러오는데, 일부 미리보기 창은 바깥 파일을 막습니다. 내려받아 브라우저로 열면 정상입니다. 이때 공통 CSS나 엔진을 HTML 안에 직접 써 넣으면 안 됩니다. 사용자에게 "내려받아 브라우저로 열어 보세요"라고 안내하세요.
- 파일을 코드(파이썬 등)로 써서 만든다면, HTML 전체를 **원문 그대로의 문자열**로 쓰세요(예: 파이썬은 따옴표 세 개짜리 raw 문자열). 백슬래시(`\`)가 다른 문자로 바뀌어 깨지는 일을 막기 위해서입니다. 새로 쓰는 CSS·JS에서도 `\00a0` 같은 이스케이프 대신 실제 문자를 쓰세요.
- 파일로 줬다면 "슬라이드.html을 내려받아 더블클릭하세요(열 때 인터넷 필요)"라고, 코드 블록으로 줬다면 "코드를 모두 복사해 메모장에 붙여 넣고 슬라이드.html로 저장한 뒤 더블클릭하세요(열 때 인터넷 필요)"라고 한 줄로 안내하세요.

### 내보내기 전 점검 (하나라도 아니면 고친 뒤 내보내기)
1. HTML에 쓴 클래스가 모두 부품 사전(3)·공통 CSS(5)·'추가 부품' 칸에 정의되어 있는가?
2. 공통 파일 두 줄(`<link>`·`<script src>`)이 주소 그대로 있고, 공통 CSS·엔진을 HTML 안에 옮겨 쓰지 않았는가? `@font-face`를 새로 쓰지 않았는가?
3. 장 수 = 내비 점 개수 = 쪽 표시 숫자인가?
4. 모든 장의 내용이 1920×1080 안에 들어가는가(높이 예산, 카드 규칙)? 제목·글이 창 밖으로 넘치거나 잘리지 않는가(특히 표지 제목과 마지막 장)? 읽는 글이 28px 이상이고, 화면에 큰 빈 공간이 없는가?
5. '계절의 변화' 예시 문구나 디자인 안내 문구가 남아 있지 않은가?
6. 사용자가 주지 않았고 확인도 받지 않은 사실을 넣지 않았는가?
7. `...`·"(생략)" 같은 생략이 없고, `<!DOCTYPE html>`부터 `</html>`까지 다 있는가?
8. 사용자가 요청하지 않은 그림 파일을 따로 만들지 않았는가?

---

## 1. 디자인 규칙 (`8-bit-orbit` design.md)

````markdown
---
version: alpha
name: 8-Bit Orbit
description: A retro-futuristic pixel-art presentation system that fuses 16-bit arcade nostalgia with editorial discipline. Display type runs in Tektur (a chunky geometric display face built on pixel-grid logic) paired with Chakra Petch for body and Space Mono for code-flavored labels and tabular data. The palette pivots on a deep cosmic navy (`#0F1B3D` / `#0A0E27`) lit by three saturated neons — cyan, hot pink, and a high-key yellow — with a soft lavender pastel for warm reprieves. Depth is built from stacked hard offset shadows in 4px increments (the pixel unit), CRT scanlines, atmospheric grain, vignettes, and animated starfields. The effect sits between an arcade cabinet and a Tron-era boardroom — unmistakably digital, intentionally lo-fi, and engineered to feel as if it just booted up.

colors:
  dark-void: "#0A0E27"
  deep-navy: "#0F1B3D"
  neon-cyan: "#5EDCF4"
  neon-pink: "#F0A6CA"
  neon-yellow: "#F4D03F"
  soft-lavender: "#E2D5F2"
  white: "#FFFFFF"

shadows:
  pixel-stack-cyan-yellow: "4px 0 0 0 {colors.deep-navy}, 0 4px 0 0 {colors.deep-navy}, 4px 4px 0 0 {colors.deep-navy}, 8px 4px 0 0 {colors.neon-yellow}, 4px 8px 0 0 {colors.neon-yellow}, 8px 8px 0 0 {colors.neon-yellow}"
  pixel-stack-pink-cyan: "4px 0 0 0 {colors.deep-navy}, 0 4px 0 0 {colors.deep-navy}, 4px 4px 0 0 {colors.deep-navy}, 8px 4px 0 0 {colors.neon-cyan}, 4px 8px 0 0 {colors.neon-cyan}, 8px 8px 0 0 {colors.neon-cyan}"
  pixel-l-shape: "4px 0 0 0 {colors.deep-navy}, 0 4px 0 0 {colors.deep-navy}, 4px 4px 0 0 {colors.deep-navy}"
  pixel-text-shadow: "4px 4px 0 {colors.neon-yellow}, 8px 8px 0 {colors.deep-navy}"
  pixel-text-shadow-small: "3px 3px 0 {colors.deep-navy}"
  card-offset: "6px 6px 0 rgba(15, 27, 61, 0.15)"
  card-featured: "8px 8px 0 {colors.neon-yellow}"

typography:
  pixel-hero:
    fontFamily: "'Tektur', cursive"
    fontSize: "clamp(48px, 10vw, 128px)"
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: 0.04em
  display:
    fontFamily: "'Tektur', cursive"
    fontSize: "clamp(32px, 5vw, 64px)"
    fontWeight: 700
    lineHeight: 1.15
  headline:
    fontFamily: "'Tektur', cursive"
    fontSize: "clamp(24px, 3.5vw, 45px)"
    fontWeight: 700
    lineHeight: 1.15
  subhead:
    fontFamily: "'Tektur', cursive"
    fontSize: "clamp(17.6px, 2vw, 24px)"
    fontWeight: 700
    lineHeight: 1.15
  stat-number:
    fontFamily: "'Tektur', cursive"
    fontSize: "clamp(32px, 4vw, 56px)"
    fontWeight: 900
    lineHeight: 1
  body:
    fontFamily: "'Chakra Petch', sans-serif"
    fontSize: "clamp(14.4px, 1.2vw, 18.4px)"
    fontWeight: 400
    lineHeight: 1.7
  hero-tagline:
    fontFamily: "'Chakra Petch', sans-serif"
    fontSize: "clamp(14.4px, 1.5vw, 19.2px)"
    fontWeight: 400
    lineHeight: 1.8
  quote-body:
    fontFamily: "'Chakra Petch', sans-serif"
    fontSize: "clamp(17.6px, 2.2vw, 25.6px)"
    fontWeight: 500
    lineHeight: 1.8
  label-pill:
    fontFamily: "'Space Mono', monospace"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.2em
    textTransform: uppercase
  label-eyebrow:
    fontFamily: "'Space Mono', monospace"
    fontSize: 13.6px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.3em
    textTransform: uppercase
  badge:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11.2px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.1em
    textTransform: uppercase
  chart-value:
    fontFamily: "'Space Mono', monospace"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
  chart-label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11.2px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.05em
  date-chip:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11.2px
    fontWeight: 400
    lineHeight: 1
  counter:
    fontFamily: "'Space Mono', monospace"
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.15em

spacing:
  pixel-unit: 4px
  pad-slide-y: "3vh"
  pad-slide-x: "4vw"
  pad-card-lg: "32px 40px"
  pad-card-md: "28px"
  pad-card-sm: "16px 20px"
  gap-grid-lg: 32px
  gap-grid-md: 24px
  gap-grid-sm: 16px
  content-max-width: 1200px

canvas:
  width: 100vw
  height: 100vh

components:
  label-pill:
    background: "{colors.deep-navy}"
    color: "{colors.neon-yellow}"
    padding: "6px 14px"
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 0.2em
    textTransform: uppercase
    fontFamily: "'Space Mono', monospace"
    description: "Universal section tag. Default fill is deep-navy with neon-yellow text. Variant fills swap text color so the pill stays legible (e.g., navy bg with cyan text, navy bg with pink text)."
  pixel-button:
    background: "{colors.neon-cyan}"
    color: "{colors.deep-navy}"
    padding: "16px 36px"
    fontFamily: "'Tektur', cursive"
    fontWeight: 700
    letterSpacing: 0.08em
    textTransform: uppercase
    boxShadow: "{shadows.pixel-stack-cyan-yellow}"
    description: "The signature stacked-shadow CTA. The pink variant swaps cyan body for pink and yellow shadow halo for cyan halo."
  pixel-corner-bracket:
    width: 24px
    height: 24px
    borderWidth: 4px
    description: "Two outward-facing L-shapes (top-left + bottom-right) bracketing a region. Default color is neon-cyan; yellow and pink variants exist. Sits 8px outside the bracketed element."
  feature-card:
    background: "rgba(255, 255, 255, 0.15)"
    backdropFilter: "blur(8px)"
    padding: "32px 24px"
    border: "2px solid rgba(15, 27, 61, 0.2)"
    description: "Frosted-glass card with inset navy L-brackets (top-left + bottom-right) replacing rounded corners. Used on light-surface slides."
  stat-block:
    background: "rgba(94, 220, 244, 0.08)"
    border: "2px solid rgba(94, 220, 244, 0.2)"
    padding: "32px 16px"
    description: "Cyan-tinted glass stat tile with cyan L-bracket accents at opposite corners. Used on dark surfaces. Stat numeral uses the pixel-text-shadow-small treatment."
  bar-track-light:
    height: 32px
    background: "rgba(15, 27, 61, 0.1)"
    description: "Horizontal track for hbar charts on light surfaces. Fill is solid navy/cyan/pink with a yellow offset shadow."
  bar-vertical:
    background: "{colors.neon-cyan}"
    boxShadow: "{shadows.pixel-l-shape}"
    description: "Vertical chart bar with three-piece navy L-shadow. Color cycles cyan → pink → yellow."
  timeline-node:
    width: 24px
    height: 24px
    background: "{colors.neon-cyan}"
    border: "4px solid {colors.deep-navy}"
    description: "Square pixel node on timeline rails. Active state swaps fill to neon-yellow."
  timeline-rail:
    width: 4px
    background: "repeating-linear-gradient(to bottom, {colors.deep-navy} 0px, {colors.deep-navy} 16px, transparent 16px, transparent 24px)"
    description: "Dashed pixel rail running between timeline nodes."
  date-chip:
    background: "{colors.deep-navy}"
    color: "{colors.neon-cyan}"
    padding: "2px 10px"
    fontFamily: "'Space Mono', monospace"
    fontSize: 11.2px
    description: "Small inline date marker on timeline events."
  hero-badge:
    border: "2px solid {colors.neon-yellow}"
    color: "{colors.neon-yellow}"
    padding: "8px 16px"
    fontFamily: "'Space Mono', monospace"
    fontSize: 11.2px
    letterSpacing: 0.1em
    textTransform: uppercase
    description: "Outline-only chip used in clusters under hero headlines."
  bg-grid:
    backgroundColor: "{colors.dark-void}"
    backgroundImage: "linear-gradient(rgba(94, 220, 244, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 220, 244, 0.07) 1px, transparent 1px)"
    backgroundSize: "40px 40px"
    description: "40px cyan-on-navy grid wallpaper for dark surfaces. Pink, cyan, and lavender variants invert the relationship (colored ground with low-opacity navy grid lines)."
  scanlines:
    background: "repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(10, 14, 39, 0.04) 2px, rgba(10, 14, 39, 0.04) 4px)"
    mixBlendMode: multiply
    description: "Horizontal CRT scanline overlay applied via ::after at z-index 50. Always present on every slide."
  grain:
    opacity: 0.035
    description: "SVG fractal-noise grain layer applied via ::before at z-index 49. Always present on every slide."
  crt-glow:
    background: "radial-gradient(ellipse at center, transparent 50%, rgba(10, 14, 39, 0.25) 100%)"
    description: "Radial vignette that darkens the corners to mimic a CRT bulge. Applied to dark-surface slides via ::after at z-index 51."
  starfield:
    description: "Container of small 4-6px colored squares (cyan, yellow, pink) positioned absolutely with a 3s twinkle keyframe. Lives on dark surfaces only."
  pixel-particles:
    description: "Floating 8px colored squares with an 8s float keyframe. Decorative ambient layer on hero and CTA-type surfaces."
  nav-dot:
    width: 12px
    height: 12px
    border: "2px solid {colors.neon-cyan}"
    background: transparent
    description: "Hollow square pip with a 2px inset cyan fill on active state. Fixed vertical rail at right edge."
  quote-line:
    width: 60px
    height: 4px
    background: "{colors.neon-yellow}"
    boxShadow: "4px 4px 0 {colors.deep-navy}"
    description: "Short yellow rule with navy offset shadow, used as a separator under quote bodies."
---

## Frontend Slides Fixed-Stage Policy

When this design system is used by the `frontend-slides` skill, generate the final deck as a **fixed 1920×1080 stage** that scales uniformly to the browser viewport. The deck should preserve a 16:9 slide canvas on every screen, including phones; it may letterbox or pillarbox, but it should not reflow slide content for mobile.

This policy has higher priority than any source-template responsive behavior described later in this file. If a later section says the original template is viewport-fluid, treat that as source history only, not as the target generation model for `frontend-slides`.

This policy applies even if the source template was originally implemented with viewport-fluid CSS such as `100vw`, `100vh`, `vw`, `vh`, or `clamp()`. Treat those values as design proportions to translate into 1920×1080 stage coordinates, not as live responsive rules in the generated deck.

Use `deck-stage.js` or an equivalent inline stage scaler for final output: render each slide at 1920×1080, scale the whole stage with one transform, and verify rendered screenshots for both text overflow and panel overlap.


## Overview

8-Bit Orbit is a **retro-futuristic pixel-art presentation system**. Its foundational premise is the **4-pixel unit**: every shadow offset, every border, every corner bracket, every label height resolves to a multiple of 4px. Layouts feel as if they were rasterized on an old CRT and dragged into HTML — and atmospheric overlays (scanlines, grain, vignette glow, animated starfields) reinforce the illusion on every surface.

The type stack is three faces working in concert. **Tektur** is the display face — a chunky, geometric, semi-pixelated grotesque that carries headlines, hero text, stat numerals, and any text that needs to feel like it was drawn on the pixel grid. **Chakra Petch** is the body face — a humanist sans with subtle geometric cuts that reads cleanly at small sizes and avoids fighting Tektur for attention. **Space Mono** is the system face — used exclusively for labels, captions, badges, chart values, dates, and counters. The mono treatment + wide tracking on these elements makes them feel like HUD readouts, not editorial captions.

The palette is built around **deep navy as ground** (`{colors.dark-void}` and `{colors.deep-navy}`) lit by **three saturated neons** — cyan, hot pink, yellow — plus a soft lavender pastel. Surfaces alternate: a dark navy surface (cyan grid wallpaper, white text, neon accents glowing in front) followed by a colored surface (pink, cyan, or lavender ground with navy text and navy grid lines etched at low opacity). The neons never appear as body text — they are reserved for headlines, stat numerals, accent rules, and label fills. The result is high contrast without being harsh: the neons feel illuminated rather than printed.

Depth is the system's signature trick: **stacked hard offset shadows in the pixel unit**. The flagship pattern is a six-piece shadow on buttons — three navy offsets stepping down-right at 4px, then three colored halo offsets stepping further at 8px. Hero text gets a two-layer text shadow (yellow at +4/+4, navy at +8/+8). Cards get either a 6px navy box shadow or an 8px yellow box shadow on the featured tier. Every shadow is hard-edged, zero blur, locked to the 4px grid. Atmospheric depth comes from the always-on **scanlines + grain + CRT glow** overlay trio that subtly modulates every surface.

**Density philosophy: moderately dense, atmospherically loaded.** The system reads as broken when surfaces are clean and unaccompanied — without scanlines, grain, vignette, particles, or a colored grid behind, the type loses its arcade context and starts to look like generic web typography. Always layer the atmosphere. Within content regions, however, breathing room matters: cards are widely spaced (24-32px gaps), stat tiles get heavy internal padding, and hero text is allowed to dominate. A typical slide carries one display moment + a small constellation of supporting elements (badges, labels, a chart, or a small grid), all sitting on a fully decorated atmospheric background.

**Key Characteristics:**
- Three-font stack: Tektur (display), Chakra Petch (body), Space Mono (HUD/labels) — never substitute, never mix outside their roles.
- Navy ground (`{colors.dark-void}` / `{colors.deep-navy}`) alternates with colored-grid surfaces (pink, cyan, lavender) — both carry the 40px etched grid.
- Three neons (cyan, pink, yellow) reserved for display, stats, rules, and label fills — never for body text.
- All measurements snap to the 4px pixel unit: borders 2-4px, shadow offsets 4px / 8px, corner brackets 24×24 with 4px stroke.
- Stacked hard offset shadows are the system's depth language — never blurred, never colored on text shadows except in the yellow→navy cascade.
- Every slide carries the persistent scanline + grain + CRT-vignette trio at z-index 49-51.
- L-shaped corner brackets (`{components.pixel-corner-bracket}`) replace rounded corners and frame regions, cards, and stat tiles.
- A monospace label pill (`{components.label-pill}`) sits as the universal eyebrow on every region — navy fill, neon text, 0.2em tracking, uppercase.
- Animated starfields and floating particle squares wallpaper dark surfaces — ambient, not decorative.

## Colors

### Palette

- **Dark Void** (`{colors.dark-void}` — `#0A0E27`): The deepest ground, used on `<body>` and as the base for dark-grid surfaces. Reads as black-with-blue-bias under the CRT vignette.
- **Deep Navy** (`{colors.deep-navy}` — `#0F1B3D`): The structural color — all shadow stacks, label fills, dark cards, button text on neon surfaces, and chart bar text. Slightly warmer than the void; the two read as ground and figure when stacked.
- **Neon Cyan** (`{colors.neon-cyan}` — `#5EDCF4`): The system's primary glow. Used for headlines on dark surfaces, primary button fill, stat numerals, primary chart bars, timeline nodes, navigation dots, corner brackets, and grid lines on dark surfaces (at 7% opacity).
- **Neon Pink** (`{colors.neon-pink}` — `#F0A6CA`): The warm accent. Used as a colored surface ground (40px navy-on-pink grid), secondary button fill, secondary chart bars, mouth detail in pixel avatars, and tertiary corner brackets.
- **Neon Yellow** (`{colors.neon-yellow}` — `#F4D03F`): The high-key alert color. Used in shadow halos behind buttons and on featured tier cards, as the active timeline-node fill, on hero badges, in label-pill text variants, in the quote-line, and as Tektur text-shadow layer 1.
- **Soft Lavender** (`{colors.soft-lavender}` — `#E2D5F2`): The calm pastel surface — used as ground for slides that need a softer reprieve from the neon-on-navy intensity. Carries the same etched-navy grid wallpaper as the other colored surfaces.
- **White** (`{colors.white}` — `#FFFFFF`): Text color on dark/neon surfaces only. Never used as a slide background.

### Defaults

- **Default surface background**: `{colors.dark-void}` with the 40px cyan grid (`{components.bg-grid}`). Always apply scanlines + grain + crt-glow on top.
- **Default headline color on dark surfaces**: `{colors.neon-cyan}`, with the `{shadows.pixel-text-shadow-small}` or `{shadows.pixel-text-shadow}` treatment for hero-scale text.
- **Default headline color on colored grids (pink/cyan/lavender)**: `{colors.deep-navy}` — neon text becomes illegible on neon grounds.
- **Default body text color on dark surfaces**: `rgba(255, 255, 255, 0.7)` — softened white, not pure white.
- **Default body text color on colored grids**: `rgba(15, 27, 61, 0.75)` — softened navy.
- **Default label-pill fill**: `{colors.deep-navy}` with `{colors.neon-yellow}` text. On colored grids the text can swap to cyan or pink as long as contrast against navy holds.
- **Default accent color for callouts and stat numerals**: `{colors.neon-cyan}`.
- **Default chart palette order**: cyan → pink → yellow (in that order across series).
- **Default corner bracket color**: `{colors.neon-cyan}`. Yellow and pink variants exist for thematic accents.

When a slide needs to feel softer or warmer, switch the colored grid from cyan-on-navy (default) to navy-on-pink, navy-on-cyan, or navy-on-lavender — the structural relationship inverts (grid lines become navy at low opacity) but the typographic rules stay the same.

## Typography

### Font Family
The system runs three faces, each locked to its role.

**Tektur** is the display face — a wide-bodied, semi-geometric grotesque with subtle pixel-grid cuts. Used for every hero title, headline, stat numeral, quote mark, and large numeral. Tektur's chunky personality is what makes the system feel arcade-native; replacing it with Inter or Space Grotesk breaks the entire aesthetic.

**Chakra Petch** is the body face — a humanist sans with mild geometric/squared character that reads cleanly at 14-22px and has enough personality to sit next to Tektur without disappearing. Used for paragraphs, hero taglines, quote bodies, and any longer-form prose.

**Space Mono** is the HUD face — a monospace used exclusively for labels, badges, chart values/axes, page counters, date chips, and any element that should feel like a system readout. The mono + wide-tracked uppercase combination is the system's "interface" voice.

Never use Tektur for body, never use Chakra Petch for chrome/HUD, never use Space Mono for headlines. The three-role separation is the typographic structure.

### Typography Scale

| Token | Size (clamp) | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.pixel-hero}` | 48–128px | Tektur | 900 | Hero or cover display title — always carries the two-layer text shadow |
| `{typography.display}` | 32–64px | Tektur | 700 | Large section opener |
| `{typography.headline}` | 24–45px | Tektur | 700 | Primary section headline |
| `{typography.subhead}` | 17.6–24px | Tektur | 700 | Region-level subheading or card title |
| `{typography.stat-number}` | 32–56px | Tektur | 900 | Stat tile numeral — pairs with the small text shadow |
| `{typography.body}` | 14.4–18.4px | Chakra Petch | 400 | Paragraph body |
| `{typography.hero-tagline}` | 14.4–19.2px | Chakra Petch | 400 | Hero subtitle / lede paragraph below a pixel-hero |
| `{typography.quote-body}` | 17.6–25.6px | Chakra Petch | 500 | Quote text |
| `{typography.label-pill}` | 12px | Space Mono | 700 | Text inside the navy label pill |
| `{typography.label-eyebrow}` | 13.6px | Space Mono | 400 | Standalone uppercase eyebrow above a headline (heavier tracking than the pill) |
| `{typography.badge}` | 11.2px | Space Mono | 400 | Outline-only hero badge text |
| `{typography.chart-value}` | 12px | Space Mono | 700 | Chart bar value numerals |
| `{typography.chart-label}` | 11.2px | Space Mono | 400 | Chart axis or category labels |
| `{typography.date-chip}` | 11.2px | Space Mono | 400 | Date marker on timeline events |
| `{typography.counter}` | 12.8px | Space Mono | 400 | Persistent slide counter (NN / NN) |

### Defaults

- **Default size for a hero or cover title**: `{typography.pixel-hero}` (48–128px clamp) — always Tektur weight 900 with the two-layer text shadow.
- **Default size for a primary section headline**: `{typography.headline}` (24–45px clamp) — Tektur weight 700.
- **Default size for paragraph body**: `{typography.body}` (14.4–18.4px clamp) — Chakra Petch weight 400.
- **Default size for a stat numeral**: `{typography.stat-number}` (32–56px clamp) — Tektur weight 900, always carries the 3px navy text shadow.
- **Default size for an eyebrow label**: `{typography.label-pill}` (12px) housed in the navy pill — or `{typography.label-eyebrow}` (13.6px) if the eyebrow sits standalone.
- **Default tracking for any Space Mono label**: 0.1em (badges) to 0.3em (eyebrow labels). Mono without wide tracking reads as code, not HUD.
- **Default body weight**: 400 for Chakra Petch, 500 for quote bodies.
- **Default display weight**: 700 for headlines, 900 for hero scale and stat numerals.

When unsure which display token to reach for, default to `{typography.headline}` — it's the section-level workhorse. Reserve `{typography.pixel-hero}` for cover and CTA moments only.

### Signature Treatments

These treatments are **non-optional whenever the corresponding element type is used**:

- **Every pixel-hero element carries the stacked text-shadow.** The pattern is `4px 4px 0 {colors.neon-yellow}, 8px 8px 0 {colors.deep-navy}` on cyan text. A pixel-hero element without this two-layer cascade reads as untreated display type and breaks the arcade voice.
- **Every stat numeral carries the small text-shadow.** The pattern is `3px 3px 0 {colors.deep-navy}` on cyan text. Stat numerals on dark surfaces need this shadow to feel illuminated; without it they read flat.
- **Every Space Mono element is uppercase with wide tracking** — minimum 0.05em for chart labels, 0.08–0.2em for pills and badges, 0.3em for standalone eyebrow labels. Sentence-case mono does not exist in this system.
- **Every Tektur display element keeps its native letter-spacing or slight positive (+0.04em on hero scale).** Tektur is wide-bodied by design — adding negative tracking compresses it into something that no longer reads as the same face.
- **Every Chakra Petch body block uses line-height ≥ 1.6.** The face is dense; tighter line-height on body bleeds into unreadable.
- **Every label pill uses Space Mono at 12px with 0.2em letter-spacing.** No exceptions — the pill is the system's most recognizable small chrome and any deviation in size or tracking breaks it.
- **Every chart bar value / axis label uses Space Mono.** Numerical chrome is mono, never Tektur or Chakra Petch.

### Typography Principles

The voice contrast is **chunky display ↔ humanist body ↔ wide-tracked mono chrome**. Switching any of the three roles to a different face flattens the system into a generic dark-mode aesthetic. Italic is never used in display or body — the only italic that appears anywhere is implicit in the slight tilt on pixel-art decorative elements.

Tektur should always feel **planted** — left-aligned, generous line-height, never centered for body-length runs (centering is permitted on hero and CTA titles only). Chakra Petch should always feel **calm** — left-aligned by default, no all-caps treatment, no letter-spacing.

## Layout

### Canvas System
The system targets `100vw × 100vh` per slide. Slides are stacked vertically inside a `slides-container` and translated via `transform: translateY(...)` for navigation. Only one slide occupies the viewport at a time, with cubic-bezier `(0.22, 1, 0.36, 1)` easing on an 800ms transition.

Default slide padding is `3vh 4vw`. The inner `slide-content` caps at `max-width: 1200px` and centers, so on wide displays content keeps editorial column width while the colored background fills the viewport.

### Pixel Unit
Every measurement in the system snaps to a **4px grid**. Border widths are 2px or 4px. Shadow offsets are 4px or 8px. Corner brackets are 24×24 with 4px stroke. The background grid is 40px (10 × pixel-unit). Card padding usually resolves to multiples of 8 (16, 24, 32, 48). This discipline is what makes the system feel rasterized rather than vector.

### Persistent Chrome
Three elements appear on every slide:
- **Navigation dot rail** — vertical stack of 12×12 cyan-bordered squares, fixed at `right: 24px`, vertically centered. Active state fills the inner 8×8 with cyan.
- **Slide counter** — Space Mono `01 / 10` format, fixed at `bottom: 24px`, horizontally centered, dark-navy semi-transparent pill background.
- **Nav hint** — `USE KEYS ↑ ↓`, Space Mono 11px at 50% opacity, fixed at `bottom: 24px right: 24px`.

The cursor across the entire deck is `crosshair` — an additional arcade signal.

### Atmospheric Overlay Stack
Every slide carries (in z-order):
1. Surface background — either `{components.bg-grid}` (cyan-on-navy) or one of the colored grid variants.
2. Grain layer at z-index 49, opacity 0.035.
3. Scanlines at z-index 50, multiply blend mode.
4. CRT vignette glow at z-index 51 (dark surfaces only).
5. Optional starfield / pixel particles at z-index 1 inside the surface.
6. `.slide-content` at z-index 10 above the atmospheric layers.

This overlay stack is the system's identity. A slide rendered without it looks like a wireframe.

## Depth and Elevation

### Stacked Hard Offset Shadow (Signature)
The system uses **stacked, multi-step hard offset shadows** in the 4px pixel unit. Every shadow value is composed in one of three patterns:

- **Three-step navy L-shape** (`{shadows.pixel-l-shape}`) — three offsets at `4px 0`, `0 4px`, `4px 4px` in deep-navy, zero blur. Used on chart bars and small elevated chrome to suggest a single-layer drop.
- **Six-step button cascade** (`{shadows.pixel-stack-cyan-yellow}` / `{shadows.pixel-stack-pink-cyan}`) — three navy offsets at 4px stepping then three colored halo offsets at 8px stepping behind. Creates a two-layer pixel-bevel effect. Used exclusively on `{components.pixel-button}`.
- **Two-layer text-shadow** (`{shadows.pixel-text-shadow}` / `{shadows.pixel-text-shadow-small}`) — yellow layer at +4/+4 then navy layer at +8/+8 (or just navy at +3/+3 for stat-scale numerals). Used on every Tektur display element.

All shadows are zero-blur, hard-edged, locked to the pixel unit. A blurred drop shadow does not exist anywhere in the system.

### Card Shadows
Two simpler patterns serve cards:
- `{shadows.card-offset}` = `6px 6px 0 rgba(15, 27, 61, 0.15)` — soft navy offset for non-featured tier cards on light surfaces.
- `{shadows.card-featured}` = `8px 8px 0 {colors.neon-yellow}` — neon-yellow offset for featured tier cards, paired with a `-12px` translateY lift.

### Corner Brackets as Depth
The L-shaped corner brackets (`{components.pixel-corner-bracket}`) replace traditional border treatments on regions and cards. Two brackets at opposite corners imply a frame without enclosing it — the eye fills in the missing edges. On stat blocks and feature cards, brackets sit inset at `top: -2px / left: -2px` and `bottom: -2px / right: -2px` so they break the cell edge slightly, reinforcing the pixel-bevel feel.

### Atmospheric Depth
The scanline + grain + CRT-vignette stack provides ambient depth on every surface without requiring shadow on individual elements. Animated starfields and floating particles layer additional spatial cues behind content. None of these are decorative add-ons — they are core to the depth perception of the system.

## Shapes and Treatment

### Border Radius
Effectively zero. The only round shape that appears anywhere is the donut-style nav dot inner-fill (which is still a square in this system — the nav dots are square pips, not circles). Rounded buttons, rounded cards, or rounded pill chips break the pixel-art aesthetic immediately.

The pixel-face avatar zone uses square eyes and a rectangular mouth — anatomy rendered in pixels, not curves.

### Border Weights
- **2px solid** — used on feature-card outlines, hero badges, nav dots, stat-block frames, chart bars (inline edges).
- **3px stroke** — used for chart axes inside SVG charts (deep-navy).
- **4px solid** — used on corner brackets, timeline node borders, the quote-line, and the inner pixel-bevel of buttons.

Borders are always solid, always navy or neon, never dashed except for the timeline rail (`{components.timeline-rail}`) which is intentionally rendered as a 16px-on, 8px-off repeating linear gradient to mimic a pixel-dashed line.

### Decorative Element Types

**Pixel corner bracket** — Two outward L-shapes (top-left + bottom-right) bracketing a region. 24×24 with 4px stroke. Default color is cyan; yellow and pink variants exist. The bracket pattern is the system's most distinctive non-typographic mark.

**Label pill** — Navy rectangle with neon-yellow Space Mono text at 12px / 0.2em. The universal section eyebrow. Variants flip the text color to cyan or pink while keeping the navy fill.

**Hero badge** — Outline-only 2px yellow border with yellow Space Mono text. Appears in clusters under hero titles as feature tags.

**Stat block** — Cyan-tinted glass tile (8% cyan fill, 20% cyan border) with cyan corner brackets at top-left and bottom-right. Holds a large stat numeral over a Space Mono pink label.

**Feature card** — Frosted-glass white card (15% white fill, blur) with navy corner brackets at opposite corners. Used on colored-grid surfaces.

**Pixel button** — Cyan rectangle with the six-step stacked shadow cascade. On hover, the button translates +2/+2 and the shadow collapses to a 4-step cascade — simulating a key-press in pixel art.

**Quote-line** — A 60×4 yellow rectangle with a 4×4 navy offset shadow. Used as a separator beneath quote bodies.

**Timeline node** — 24×24 cyan square with a 4px navy border, positioned on a dashed navy rail. Active state swaps fill to yellow.

**Date chip** — Inline 2px-padded navy pill with cyan Space Mono text, used to mark timeline events.

**Pixel face** — A 120×120 grouping of square "facial features" (cyan eyes, pink mouth) rendered as absolutely positioned divs inside a navy avatar zone. Functions as both a friendly mascot and a system-signature decorative module.

**Tier card** — White rectangle, 6px navy offset shadow. Featured tier swaps fill to deep-navy and shadow to 8px yellow, with a `-12px` translateY lift. Tier features use a `+` ::before glyph in cyan instead of standard bullets.

**Pixel landscape** — A row of variable-height navy mountains at the bottom of CTA-class surfaces, opacity 0.3. Pure decoration suggesting an arcade horizon.

## Do's and Don'ts

### Do

- Apply the scanlines + grain + CRT-vignette overlay stack to every slide. The atmosphere is the design system; surfaces without it look like wireframes.
- Use `{colors.neon-cyan}` as the default headline color on dark surfaces and `{colors.deep-navy}` as the default headline color on colored grids (pink/cyan/lavender).
- Apply `{shadows.pixel-text-shadow}` to every pixel-hero element and `{shadows.pixel-text-shadow-small}` to every stat numeral. Tektur display type without its text-shadow reads flat.
- Snap every measurement to the 4px pixel unit — border widths, shadow offsets, padding, corner-bracket dimensions. Off-grid values break the rasterized feel.
- Use Tektur for display, Chakra Petch for body, Space Mono for chrome — exclusively. Cross-mixing the three voices flattens the system.
- Wrap eyebrows in the `{components.label-pill}` (navy bg, yellow Space Mono text, 0.2em tracking, uppercase) as the universal section tag.
- Pair the navy ground with at least one neon glow per region — text, chart bar, corner bracket, or button shadow halo. Pure navy without a neon accent reads as dead screen.
- Layer animated starfields and pixel-particle floaters on dark hero and CTA surfaces. The motion is part of the atmosphere.
- Render charts with cyan → pink → yellow series order and Space Mono numerals/labels. The neon trio is the chart palette.
- Bracket cards and stat tiles with the L-shaped corner brackets at opposite corners instead of fully outlining them. The implied frame is the system's signature card treatment.

### Don't

- Don't substitute fonts. Tektur, Chakra Petch, and Space Mono are the three voices — replacing any of them with Inter, Roboto, or Space Grotesk collapses the system.
- Don't round any corner. The pixel aesthetic depends on square edges. Border-radius is reserved for SVG donut chart geometry only.
- Don't blur any shadow. Every shadow is hard-edged at zero blur. `0 4px 12px rgba(0,0,0,0.1)` does not exist here.
- Don't place neon text on neon surfaces. Cyan headlines on the pink grid become illegible — switch to deep-navy on colored grounds.
- Don't use Tektur in sentence-case body runs or Chakra Petch in chrome/labels. Each face has a single role.
- Don't introduce a fourth neon. The palette is cyan + pink + yellow + lavender pastel. Adding green or orange breaks the curated neon trio.
- Don't omit the atmospheric overlay stack on any slide, even chart-heavy or table-heavy slides. The overlays are non-negotiable.
- Don't use uppercase Chakra Petch body text. Body always sentence-case; uppercase is reserved for Space Mono and Tektur display.
- Don't drop the navy label pill in favor of a plain text eyebrow. The pill is the most recognizable small chrome in the system.
- Don't shadow text or chrome with off-axis offsets. Every shadow steps down-right in 4px increments — left or upward offsets do not exist.

## Responsive Behavior

8-Bit Orbit is a **viewport-fluid system** built around `vw/vh`-based sizing and CSS `clamp()` ranges. There are no hard breakpoints for the deck itself — every font size, padding value, and gap interpolates between a minimum and maximum based on viewport width.

### Scaling Behavior
- Hero text scales 48px → 128px on viewport width.
- Stat numerals scale 32px → 56px.
- Body scales 14.4px → 18.4px.
- The 4px pixel unit, 40px grid size, scanline 4px stripe, and corner-bracket dimensions are fixed — they do not scale, which means at larger viewports the pixel chrome appears proportionally finer (intentionally — the larger the canvas, the smaller and more refined the pixels read).

### Component Breakpoints
Three component-level breakpoints exist:
- `max-width: 1024px` — feature grid collapses 4→2 columns, two-column split layouts stack.
- `max-width: 900px` — feature grid further collapses, hbar chart label column shrinks.
- `max-width: 500px` — feature grid becomes single column, stats grid stacks.

### Presenter Behavior
- Slides advance via `ArrowDown`, `ArrowRight`, or `Space`.
- Slides reverse via `ArrowUp` or `ArrowLeft`.
- `Home` jumps to first, `End` to last.
- Vertical swipe on touch devices advances/reverses with a 50px threshold.
- Mouse wheel scroll advances/reverses with an 800ms debounce lock.
- Slide transitions use 800ms cubic-bezier `(0.22, 1, 0.36, 1)` on a translateY transform.

### Animation Triggers
Chart bars and stat counters animate in on slide entry with `setTimeout` staggers (100-150ms between items). When a slide is exited, its bars/counters reset to 0 so re-entry replays the animation. The `prefers-reduced-motion` media query disables transitions and the starfield/particle twinkle keyframes.

### Print Behavior
The system has no `@media print` rule. The deck is screen-first; printing produces only the active slide. For static export, screenshots of each slide preserve all atmospheric overlays (scanlines and grain are CSS-rendered, not assets).

## CJK & International Content

When using this template for Chinese (or other CJK) content, swap the Latin typeface stack for an equivalent Chinese pairing and apply universal CJK adjustments. All recommended Chinese fonts load via CDN — no install required.

### Recommended Chinese Pairing

| Role | Latin (default) | Chinese counterpart |
|---|---|---|
| Display / hero / stat numerals | Tektur 700–900 | 思源黑体 Noto Sans SC 900 |
| Body / hero tagline / quote body | Chakra Petch 400–500 | 思源黑体 Noto Sans SC 400 |
| HUD labels / badges / chart values / counter | Space Mono 400–700 (uppercase + wide tracking) | 思源黑体 Noto Sans SC 500 (no transform, no tracking) — see Known CJK Gap below |

### Mixed-Content Strategy

**Strategy A** — single CJK family with built-in Latin glyph coverage. Set every text element to `font-family: 'Noto Sans SC', sans-serif`. 思源黑体 ships Latin glyphs that read cleanly alongside Chinese characters, so a sentence like `使用 Tektur 字体` renders in one consistent face rather than font-switching mid-word. This system normally runs three faces (display / body / HUD); collapsing to one CJK face is the right tradeoff because none of the three Latin faces have credible Chinese counterparts, and visual hierarchy still works through weight (900 / 700 / 500 / 400) plus the system's signature shadow stacks.

### Loading

Add to the template's `<head>`:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
```

### Universal CJK Adjustments

- **Line-height**: increase by ~15–25% from the Latin spec. Body 1.75–1.85 (up from 1.7–1.8), display 1.15–1.25 (up from 1.05–1.15). CJK characters are square and visually full — they crowd vertically more than Latin.
- **Letter-spacing**: set to 0 on every CJK run. The template's positive tracking on Tektur display (+0.04em) and 0.1–0.3em mono tracking on Space Mono labels looks broken on square CJK glyphs — they're already evenly spaced by design.
- **Text transform**: don't apply `uppercase` to Chinese text — CJK has no case. Every Space Mono label in this system uses `text-transform: uppercase`; remove it for CJK runs.
- **Punctuation**: use full-width Chinese punctuation （，。：；！？「」（））.
- **No period on display headlines**: Chinese typography convention omits trailing 。 on display-scale headlines.
- **Space between CJK and Latin (盘古之白)**: insert an ASCII space between every Chinese character and adjacent Latin character or digit. Write `8 位赛博 / 1989 模式` not `8位赛博/1989模式`.
- **One font per sentence**: 思源黑体 covers both CJK and Latin glyphs in a unified style — let it handle mixed sentences. Don't let the browser fall back to Tektur or Space Mono mid-sentence for ASCII characters.

### Aesthetic Notes for This System

The system's identity rests on three voices — Tektur (chunky arcade display), Chakra Petch (humanist body), Space Mono (HUD readouts) — and a CJK build cannot preserve that three-face contrast. Compensate by leaning harder on the **non-typographic** signature elements: the stacked text-shadow (yellow at +4/+4, navy at +8/+8) still works on 思源黑体 900 headlines and is what carries the arcade voice when the face itself is generic. Keep all atmospheric overlays (scanlines, grain, CRT vignette, starfields, grid wallpaper) — they do more identity work in a CJK build than in the Latin original.

The system's Space Mono label-pill (navy fill, neon-yellow text, 0.2em tracking, uppercase) is the most recognizable small chrome and translates poorly: CJK characters won't accept the wide tracking or uppercase transform. Render Chinese label-pills with 思源黑体 weight 500 at 0 tracking, no transform, and a slightly tighter fontSize (10–11px instead of 12px) to preserve the chip's compact silhouette. The colored pill background and corner-bracket framing carry the recognition load.

### Known CJK Gap

- **No CDN-loadable Chinese pixel font.** The system's arcade aesthetic depends on Tektur's semi-pixel grotesque character — there is no equivalent Chinese face on Google Fonts or major CDNs that reads as "pixel-art" while remaining legible. 思源黑体 at weight 900 gives heft but loses the pixel-grid signal entirely. The atmospheric overlays (scanlines, grain, vignette, starfields) and pixel-bevel shadow stacks must carry the arcade voice on their own.
- **No CDN Chinese monospace face for HUD labels.** Space Mono's "system readout" voice depends on monospaced rhythm + uppercase + 0.1–0.3em tracking — none of which transfer to CJK. The label-pill loses its mono character; lean on the navy fill + neon text + corner-bracket framing to keep chrome recognizable.

## Iteration Guide

1. Any new slide gets the full atmospheric overlay trio (scanlines + grain + crt-glow on dark surfaces, scanlines + grain on colored surfaces) and a 40px etched grid surface. Don't skip the overlays.
2. Any new display element uses Tektur. Any new body element uses Chakra Petch. Any new label, badge, counter, or chart value uses Space Mono. Never cross the role boundaries.
3. Any new headline gets `{colors.neon-cyan}` on dark surfaces or `{colors.deep-navy}` on colored grids — both with the appropriate Tektur weight and (for hero scale) the stacked text-shadow.
4. Any new eyebrow uses the `{components.label-pill}` — navy fill, neon-yellow Space Mono text at 12px / 0.2em / uppercase. Don't substitute a plain h-tag.
5. Any new card or region gets the L-shaped corner brackets at opposite corners (top-left + bottom-right) instead of a full outline. The implied frame is the system's signature.
6. Any new measurement snaps to the 4px pixel unit. Borders 2-4px, shadow offsets 4px / 8px, corner brackets 24px, grid 40px. Off-grid values feel wrong.
7. Any new shadow is hard-edged at zero blur. For buttons use the six-step cascade; for cards use 6px navy or 8px yellow; for text use the two-layer cascade.
8. Any new chart cycles cyan → pink → yellow in series order. Numerical labels and axis labels are always Space Mono.
9. If a surface needs to feel warmer or softer, switch to the pink, cyan, or lavender etched grid variant — but keep all typographic rules intact (navy headlines, softened-navy body).
10. Animated elements (starfield, particles, chart bar grow, counter rollup) should respect `prefers-reduced-motion`. Atmospheric overlays (scanlines, grain, vignette) are not animated and stay on always.

## Known Gaps

- **Tektur, Chakra Petch, and Space Mono are Google Fonts** loaded via a preconnect + `<link>`. The system has no fallback strategy beyond `cursive` / `sans-serif` / `monospace` — in environments where Google Fonts fail (offline, restricted networks), the aesthetic collapses to system defaults and loses its character.
- **Starfield and pixel-particle elements are generated by inline JS** that creates a fixed count of absolutely-positioned divs with random positions and animation delays. The animation keyframes are present in CSS, but the elements are only created if the JS runs successfully.
- **The chart system is hardcoded**: bar heights, hbar widths, and stat counter targets are stored in `data-*` attributes and animated via `setTimeout` staggers triggered by slide-index matching. There is no data-binding layer — adding a new chart requires copying the HTML pattern and updating the JS slide-index matcher.
- **The pixel-landscape on CTA surfaces is JS-generated** from a hardcoded heights array `[30, 50, 70, ...]`. Width varies per mountain (60 + (i % 3) * 20px). Replacing the landscape requires editing the JS heights array.
- **The CRT vignette glow uses a fixed dark-navy radial gradient.** Adjusting it requires editing the CSS gradient stops; there is no tokenized vignette intensity.
- **The cursor is set to `crosshair` deck-wide** for atmospheric reasons. This may conflict with text-selection expectations in contexts where the deck is embedded.
- **No keyboard navigation hint exists for the wheel/touch fallback.** The nav-hint reads `USE KEYS ↑ ↓` even though wheel and touch are also wired up.
- **The slide counter format is fixed at `NN / NN` zero-padded.** Decks with more than 99 slides would render with a layout-shifting counter.
- **The pixel-corner-bracket sizing is fixed at 24×24 with 4px stroke** and does not scale with viewport. On very large or very small viewports the brackets may feel proportionally off.
````

---

## 2. 글씨체

- 이 디자인의 한글 글씨체: 제목 Mona12 Bold(700) · 본문 Orbit(400). (쓰는 폰트: Mona12 Bold, Orbit)
- 글씨체 파일은 공통 CSS(5)의 `@font-face`가 인터넷의 폰트 창고(`https://maker-ssam.github.io/korean-ofl-fonts/…`)에서 불러옵니다. 설치하지 않아도 되지만 열 때 인터넷이 필요합니다.
- 글씨체 규칙(굵기·크기·자간)은 1의 디자인 규칙을 따르고, 한글 폰트는 변수(`--kt` 제목, `--kb` 본문, `--ka` 포인트)로만 지정하세요.

---

## 3. 부품 사전 (이 디자인의 CSS에 정의된 클래스)

이 목록과 공통 CSS(5)에 있는 클래스만 쓰세요. '○장'은 아래 뼈대에서 그 클래스를 쓴 예시 장이고, '예'는 그 장의 실제 태그입니다. 장 구성은 따라 하지 말고, 필요한 부품을 골라 어느 장에서든 쓰면 됩니다. 클래스를 조합하는 방법(어떤 부품 안에 어떤 부품이 들어가는지)은 뼈대의 예시 장을 보고 따르세요.
- 여러 장에서 쓰인 클래스는 이 디자인의 공통 부품입니다(창·제목줄·버튼·표 등).
- 한 장에서만 쓰인 클래스 중 크기·위치를 정하는 것(이름에 번호가 붙은 창·격자 등)은 **그 예시 장 전용 배치**입니다. 같은 배치를 다시 쓸 때만 쓰고, 새 배치가 필요하면 비슷한 이름을 지어 쓰지 말고 '추가 부품' 칸에 직접 정의하세요.
- 예시 장의 측정기 그림(`g-…` 클래스)은 예시 주제 전용이라 이 목록에 없습니다. 새 주제의 그림은 SVG로 새로 그리세요.

**1장(표지)에서 처음 나오는 부품**
- `.badge` — 1·5장 — 예: `<span class="badge">`
- `.badges` — 1·5장 — 예: `<div class="badges">`
- `.br` — 1·2·3·4·5·6장 — 예: `<i class="br tl ">`
- `.brr` — 1·2·3·4·5·6장 — 예: `<i class="br brr ">`
- `.content` — 1·2·3·4·5·6장 — 예: `<div class="content cover">`
- `.cover` — 1장 — 예: `<div class="content cover">`
- `.crt` — 1·3·5장 — 예: `<div class="crt">`
- `.dark` — 1·3·5장 — 예: `<section class="slide dark">`
- `.eyebrow` — 1장 — 예: `<p class="eyebrow">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.grain` — 1·2·3·4·5·6장 — 예: `<div class="grain">`
- `.hero` — 1장 — 예: `<h1 class="hero">`
- `.hero-wrap` — 1장 — 예: `<div class="hero-wrap">`
- `.pill` — 1·2·3·4·5·6장 — 예: `<span class="pill">`
- `.pt` — 1·5장 — 예: `<i class="pt" style="left:93px;top:131px;background:#5EDCF4;animation-delay:0s">`
- `.scan` — 1·2·3·4·5·6장 — 예: `<div class="scan">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide dark">`
- `.star` — 1·3·5장 — 예: `<i class="star" style="left:97px;top:41px;width:4px;height:4px;background:#5EDCF4;animation-delay:0s">`
- `.tl` — 1·2·3·4·5·6장 — 예: `<i class="br tl ">`
- `.unit` — 1장 — 예: `<p class="unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.btns` — 2·5장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;STEP 01 — 자 붙이기&quot;,&quot;STEP 02 — 수수깡 꽂기&…`
- `.chip` — 2·3·4·5·6장 — 예: `<span class="chip">`
- `.def` — 2장 — 예: `<p class="def">`
- `.ev` — 2장 — 예: `<div class="ev" data-s="1">`
- `.fcard` — 2·4·6장 — 예: `<div class="fcard fig">`
- `.fig` — 2장 — 예: `<div class="fcard fig">`
- `.figwrap` — 2장 — 예: `<div class="figwrap">`
- `.hl` — 2·3·4·5·6장 — 예: `<h2 class="hl">`
- `.lav` — 2·6장 — 예: `<section class="slide lav" data-steps="4">`
- `.navy` — 2·4·6장 — 예: `<i class="br tl navy">`
- `.node` — 2장 — 예: `<i class="node">`
- `.pbtn` — 2·5·6장 — 예: `<button class="pbtn" data-act="step">`
- `.pink` — 2·5·6장 — 예: `<button class="pbtn pink" data-act="reset">`
- `.qline` — 2·4장 — 예: `<i class="qline">`
- `.qline-row` — 2장 — 예: `<div class="qline-row">`
- `.rail` — 2장 — 예: `<div class="rail">`
- `.side` — 2장 — 예: `<div class="side">`
- `.split2` — 2장 — 예: `<div class="split2">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.ax` — 3장 — 예: `<text x="74" y="348" class="ax" text-anchor="end">`
- `.bar` — 3장 — 예: `<g class="bar" style="--i:0">`
- `.base` — 3장 — 예: `<line x1="90" x2="1600" y1="340" y2="340" class="base"/>`
- `.bn` — 3장 — 예: `<i class="k bn">`
- `.bsh` — 3장 — 예: `<rect x="153.85714285714286" y="192.75" width="88" height="147.25" class="bsh"/>`
- `.bvl` — 3장 — 예: `<text x="193.85714285714286" y="226.75" class="bvl" text-anchor="middle">`
- `.chartbox` — 3장 — 예: `<div class="chartbox">`
- `.cv` — 3장 — 예: `<svg class="cv" viewBox="0 0 1640 400">`
- `.cy` — 3·5장 — 예: `<h2 class="hl cy">`
- `.gl` — 3장 — 예: `<line x1="90" x2="1600" y1="340" y2="340" class="gl"/>`
- `.hb` — 3장 — 예: `<span class="hb">`
- `.k` — 3장 — 예: `<i class="k bn">`
- `.lg` — 3장 — 예: `<div class="lg">`
- `.ln` — 3장 — 예: `<g class="ln ls">`
- `.ls` — 3장 — 예: `<i class="k ls">`
- `.lt` — 3장 — 예: `<i class="k lt">`
- `.pv` — 3장 — 예: `<text x="253.85714285714286" y="249.025" class="pv">`
- `.sblock` — 3·5·6장 — 예: `<div class="sblock">`
- `.sk` — 3·5장 — 예: `<span class="sk">`
- `.src` — 3장 — 예: `<p class="src">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.sv` — 3장 — 예: `<b class="sv">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.feat` — 4장 — 예: `<div class="tier feat">`
- `.grid4` — 4장 — 예: `<div class="grid4">`
- `.lst` — 4장 — 예: `<div class="fcard lst">`
- `.nr` — 4·5장 — 예: `<p class="nr">`
- `.pinkg` — 4장 — 예: `<section class="slide pinkg">`
- `.plus` — 4·6장 — 예: `<p class="plus">`
- `.qt` — 4장 — 예: `<blockquote class="qt">`
- `.sm` — 4·6장 — 예: `<span class="pill sm">`
- `.tbl` — 4장 — 예: `<div class="tbl">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tier` — 4장 — 예: `<div class="tier feat">`
- `.tr` — 4장 — 예: `<div class="tr th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<p class="bl">`
- `.blank` — 5장 — 예: `<button class="chip blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="sblock blk">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.key` — 5장 — 예: `<span class="key">`
- `.land` — 5장 — 예: `<div class="land">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.pk` — 5장 — 예: `<i class="br tl pk">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.quiz` — 5장 — 예: `<div class="sblock quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong=…`
- `.split5` — 5장 — 예: `<div class="split5">`
- `.wl` — 5장 — 예: `<span class="sk wl">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.ab6` — 6장 — 예: `<p class="ab6">`
- `.bars6` — 6장 — 예: `<div class="bars6" id="eb-bars">`
- `.d6` — 6장 — 예: `<div class="sblock d6">`
- `.demo` — 6장 — 예: `<span class="pbtn demo" id="eb-btn">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.dr` — 6장 — 예: `<div class="dr">`
- `.ft6` — 6장 — 예: `<div class="ft6">`
- `.g6` — 6장 — 예: `<div class="fcard g6">`
- `.hero6` — 6장 — 예: `<b class="hero6" id="eb-hero">`
- `.sig6` — 6장 — 예: `<div class="sig6">`
- `.split6` — 6장 — 예: `<div class="split6">`
- `.sw6` — 6장 — 예: `<div class="sw6">`
- `.tip6` — 6장 — 예: `<div class="tip6">`

**예시 장에는 없지만 CSS에 정의된 클래스**(디자인 규칙에 맞으면 써도 됨): `.deck-stage` `.hint`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.on` `.now` `.open` `.right` `.wrong` `.play` `.solved` `.tried` `.active` `.visible` `.flash` `.in-frame`)와 내비 클래스(`.dk-…`)는 배치용으로 쓰지 마세요(뼈대의 내비 부분은 그대로 둡니다).

---

## 4. HTML 뼈대 (예시 덱 6장 — 부품 견본입니다. 장 구성은 따라 하지 말고, 공통 파일 두 줄은 그대로 두며, 장은 내용에 맞게 새로 구성)

```html
<!DOCTYPE html>
<html lang="ko" data-template="8-bit-orbit">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계절의 변화</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tektur:wght@700;900&family=Chakra+Petch:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/8-bit-orbit.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide dark">
  <i class="star" style="left:97px;top:41px;width:4px;height:4px;background:#5EDCF4;animation-delay:0s"></i><i class="star" style="left:338px;top:204px;width:4px;height:4px;background:#F4D03F;animation-delay:0.43s"></i><i class="star" style="left:579px;top:367px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.86s"></i><i class="star" style="left:820px;top:530px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.29s"></i><i class="star" style="left:1061px;top:693px;width:4px;height:4px;background:#F4D03F;animation-delay:1.72s"></i><i class="star" style="left:1302px;top:856px;width:6px;height:6px;background:#F0A6CA;animation-delay:2.15s"></i><i class="star" style="left:1543px;top:1019px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.58s"></i><i class="star" style="left:1784px;top:142px;width:4px;height:4px;background:#F4D03F;animation-delay:0s"></i><i class="star" style="left:145px;top:305px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.43s"></i><i class="star" style="left:386px;top:468px;width:4px;height:4px;background:#5EDCF4;animation-delay:0.86s"></i><i class="star" style="left:627px;top:631px;width:4px;height:4px;background:#F4D03F;animation-delay:1.29s"></i><i class="star" style="left:868px;top:794px;width:6px;height:6px;background:#F0A6CA;animation-delay:1.72s"></i><i class="star" style="left:1109px;top:957px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.15s"></i><i class="star" style="left:1350px;top:80px;width:4px;height:4px;background:#F4D03F;animation-delay:2.58s"></i><i class="star" style="left:1591px;top:243px;width:6px;height:6px;background:#F0A6CA;animation-delay:0s"></i><i class="star" style="left:1832px;top:406px;width:4px;height:4px;background:#5EDCF4;animation-delay:0.43s"></i><i class="star" style="left:193px;top:569px;width:4px;height:4px;background:#F4D03F;animation-delay:0.86s"></i><i class="star" style="left:434px;top:732px;width:6px;height:6px;background:#F0A6CA;animation-delay:1.29s"></i><i class="star" style="left:675px;top:895px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.72s"></i><i class="star" style="left:916px;top:18px;width:4px;height:4px;background:#F4D03F;animation-delay:2.15s"></i><i class="star" style="left:1157px;top:181px;width:6px;height:6px;background:#F0A6CA;animation-delay:2.58s"></i><i class="star" style="left:1398px;top:344px;width:4px;height:4px;background:#5EDCF4;animation-delay:0s"></i><i class="star" style="left:1639px;top:507px;width:4px;height:4px;background:#F4D03F;animation-delay:0.43s"></i><i class="star" style="left:0px;top:670px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.86s"></i><i class="star" style="left:241px;top:833px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.29s"></i><i class="star" style="left:482px;top:996px;width:4px;height:4px;background:#F4D03F;animation-delay:1.72s"></i><i class="star" style="left:723px;top:119px;width:6px;height:6px;background:#F0A6CA;animation-delay:2.15s"></i><i class="star" style="left:964px;top:282px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.58s"></i><i class="star" style="left:1205px;top:445px;width:4px;height:4px;background:#F4D03F;animation-delay:0s"></i><i class="star" style="left:1446px;top:608px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.43s"></i><i class="star" style="left:1687px;top:771px;width:4px;height:4px;background:#5EDCF4;animation-delay:0.86s"></i><i class="star" style="left:48px;top:934px;width:4px;height:4px;background:#F4D03F;animation-delay:1.29s"></i><i class="star" style="left:289px;top:57px;width:6px;height:6px;background:#F0A6CA;animation-delay:1.72s"></i><i class="star" style="left:530px;top:220px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.15s"></i><i class="pt" style="left:93px;top:131px;background:#5EDCF4;animation-delay:0s"></i><i class="pt" style="left:482px;top:342px;background:#F0A6CA;animation-delay:1.1s"></i><i class="pt" style="left:871px;top:553px;background:#F4D03F;animation-delay:2.2s"></i><i class="pt" style="left:1260px;top:764px;background:#5EDCF4;animation-delay:3.3000000000000003s"></i><i class="pt" style="left:1649px;top:75px;background:#F0A6CA;animation-delay:4.4s"></i><i class="pt" style="left:238px;top:286px;background:#F4D03F;animation-delay:5.5s"></i>
  <div class="content cover">
    <span class="pill">초등 과학 · 6학년 2학기 · 1단원 · 3~4차시</span>
    <p class="unit">계절의 변화<span>SUN, SHADOW & TEMPERATURE</span></p>
    <p class="eyebrow">학습 목표</p>
    <div class="hero-wrap"><i class="br tl "></i><i class="br brr "></i><h1 class="hero">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1></div>
    <div class="badges"><span class="badge">태양 고도</span><span class="badge">그림자 길이</span><span class="badge">기온</span><span class="badge">00초등학교</span><span class="badge">2026</span></div>
  </div>
  <div class="grain"></div><div class="scan"></div><div class="crt"></div>
</section>
<section class="slide lav" data-steps="4">
  <div class="content">
    <span class="pill">측정 준비</span>
    <h2 class="hl">태양 고도 측정기 만들기</h2>
    <div class="split2">
      <div class="figwrap">
        <div class="fcard fig"><i class="br tl navy"></i><i class="br brr navy"></i><span class="chip">FIG. 01</span><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></div>
        <div class="qline-row"><i class="qline"></i><p>막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
      </div>
      <div class="side">
        <p class="def"><b>태양 고도</b> = 태양이 지표면과 이루는 각</p>
        <div class="tl"><div class="rail"></div>
          <div class="ev" data-s="1"><i class="node"></i><span class="chip">STEP 01</span><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div><div class="ev" data-s="2"><i class="node"></i><span class="chip">STEP 02</span><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div><div class="ev" data-s="3"><i class="node"></i><span class="chip">STEP 03</span><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div><div class="ev" data-s="4"><i class="node"></i><span class="chip">STEP 04</span><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div>
        </div>
        <div class="btns"><button class="pbtn" data-act="step">다음 단계 ▶</button><button class="pbtn pink" data-act="reset">처음부터</button></div>
        <p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;STEP 01 — 자 붙이기&quot;,&quot;STEP 02 — 수수깡 꽂기&quot;,&quot;STEP 03 — 실 묶기&quot;,&quot;STEP 04 — 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p>
      </div>
    </div>
  </div>
  <div class="grain"></div><div class="scan"></div>
</section>
<section class="slide dark">
  <i class="star" style="left:291px;top:123px;width:4px;height:4px;background:#5EDCF4;animation-delay:0s"></i><i class="star" style="left:532px;top:286px;width:4px;height:4px;background:#F4D03F;animation-delay:0.43s"></i><i class="star" style="left:773px;top:449px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.86s"></i><i class="star" style="left:1014px;top:612px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.29s"></i><i class="star" style="left:1255px;top:775px;width:4px;height:4px;background:#F4D03F;animation-delay:1.72s"></i><i class="star" style="left:1496px;top:938px;width:6px;height:6px;background:#F0A6CA;animation-delay:2.15s"></i><i class="star" style="left:1737px;top:61px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.58s"></i><i class="star" style="left:98px;top:224px;width:4px;height:4px;background:#F4D03F;animation-delay:0s"></i><i class="star" style="left:339px;top:387px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.43s"></i><i class="star" style="left:580px;top:550px;width:4px;height:4px;background:#5EDCF4;animation-delay:0.86s"></i><i class="star" style="left:821px;top:713px;width:4px;height:4px;background:#F4D03F;animation-delay:1.29s"></i><i class="star" style="left:1062px;top:876px;width:6px;height:6px;background:#F0A6CA;animation-delay:1.72s"></i><i class="star" style="left:1303px;top:1039px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.15s"></i><i class="star" style="left:1544px;top:162px;width:4px;height:4px;background:#F4D03F;animation-delay:2.58s"></i><i class="star" style="left:1785px;top:325px;width:6px;height:6px;background:#F0A6CA;animation-delay:0s"></i><i class="star" style="left:146px;top:488px;width:4px;height:4px;background:#5EDCF4;animation-delay:0.43s"></i><i class="star" style="left:387px;top:651px;width:4px;height:4px;background:#F4D03F;animation-delay:0.86s"></i><i class="star" style="left:628px;top:814px;width:6px;height:6px;background:#F0A6CA;animation-delay:1.29s"></i><i class="star" style="left:869px;top:977px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.72s"></i><i class="star" style="left:1110px;top:100px;width:4px;height:4px;background:#F4D03F;animation-delay:2.15s"></i><i class="star" style="left:1351px;top:263px;width:6px;height:6px;background:#F0A6CA;animation-delay:2.58s"></i><i class="star" style="left:1592px;top:426px;width:4px;height:4px;background:#5EDCF4;animation-delay:0s"></i>
  <div class="content">
    <span class="pill">측정 결과</span>
    <h2 class="hl cy">하루 동안 무엇이 어떻게 변할까요?</h2>
    <div class="stats"><div class="sblock"><i class="br tl "></i><i class="br brr "></i><span class="sk">남중 시각</span><b class="sv">12:30</b><p>태양 고도가 가장 높아요 <span>무렵 · 남중</span></p></div><div class="sblock"><i class="br tl "></i><i class="br brr "></i><span class="sk">남중 방향</span><b class="sv">정남</b><p>남중할 때 태양의 위치 <span>쪽</span></p></div><div class="sblock"><i class="br tl "></i><i class="br brr "></i><span class="sk">최고 기온</span><b class="sv">14:30</b><p>기온이 가장 높아요 <span>무렵</span></p></div><div class="sblock"><i class="br tl "></i><i class="br brr "></i><span class="sk">가장 긴 그림자</span><b class="sv">9:30</b><p>그림자가 가장 길어요 <span>· 15:30</span></p></div></div>
    <div class="chartbox">
      <div class="lg"><span class="chip">측정 시각별 태양 고도, 그림자 길이, 기온</span><span><i class="k bn"></i>태양 고도(°)</span><span><i class="k ls"></i>그림자 길이(cm)</span><span><i class="k lt"></i>기온(℃)</span><span class="hb">예시 값</span></div>
      <svg class="cv" viewBox="0 0 1640 400"><line x1="90" x2="1600" y1="340" y2="340" class="gl"/><text x="74" y="348" class="ax" text-anchor="end">0°</text><line x1="90" x2="1600" y1="262.5" y2="262.5" class="gl"/><text x="74" y="270.5" class="ax" text-anchor="end">20°</text><line x1="90" x2="1600" y1="185" y2="185" class="gl"/><text x="74" y="193" class="ax" text-anchor="end">40°</text><line x1="90" x2="1600" y1="107.5" y2="107.5" class="gl"/><text x="74" y="115.5" class="ax" text-anchor="end">60°</text><line x1="90" x2="1600" y1="30" y2="30" class="gl"/><text x="74" y="38" class="ax" text-anchor="end">80°</text><g class="bar" style="--i:0"><rect x="153.85714285714286" y="192.75" width="88" height="147.25" class="bsh"/><rect x="149.85714285714286" y="188.75" width="88" height="151.25" class="bn"/><text x="193.85714285714286" y="226.75" class="bvl" text-anchor="middle">38</text></g><g class="bar" style="--i:1"><rect x="369.57142857142856" y="154" width="88" height="186" class="bsh"/><rect x="365.57142857142856" y="150" width="88" height="190" class="bn"/><text x="409.57142857142856" y="188" class="bvl" text-anchor="middle">48</text></g><g class="bar" style="--i:2"><rect x="585.2857142857143" y="126.875" width="88" height="213.125" class="bsh"/><rect x="581.2857142857143" y="122.875" width="88" height="217.125" class="bn"/><text x="625.2857142857143" y="160.875" class="bvl" text-anchor="middle">55</text></g><g class="bar" style="--i:3"><rect x="801" y="119.125" width="88" height="220.875" class="bsh"/><rect x="797" y="115.125" width="88" height="224.875" class="bn"/><text x="841" y="153.125" class="bvl" text-anchor="middle">57</text></g><g class="bar" style="--i:4"><rect x="1016.7142857142858" y="130.75" width="88" height="209.25" class="bsh"/><rect x="1012.7142857142858" y="126.75" width="88" height="213.25" class="bn"/><text x="1056.7142857142858" y="164.75" class="bvl" text-anchor="middle">54</text></g><g class="bar" style="--i:5"><rect x="1232.4285714285713" y="157.875" width="88" height="182.125" class="bsh"/><rect x="1228.4285714285713" y="153.875" width="88" height="186.125" class="bn"/><text x="1272.4285714285713" y="191.875" class="bvl" text-anchor="middle">47</text></g><g class="bar" style="--i:6"><rect x="1448.142857142857" y="196.625" width="88" height="143.375" class="bsh"/><rect x="1444.142857142857" y="192.625" width="88" height="147.375" class="bn"/><text x="1488.142857142857" y="230.625" class="bvl" text-anchor="middle">37</text></g><g class="ln ls"><polyline points="197.85714285714286,240.025 413.57142857142856,269.475 629.2857142857143,285.75 845,290.4 1060.7142857142858,284.2 1276.4285714285713,267.15 1492.142857142857,236.15"/><rect x="189.85714285714286" y="232.025" width="16" height="16"/><text x="253.85714285714286" y="249.025" class="pv">12.9</text><rect x="405.57142857142856" y="261.475" width="16" height="16"/><text x="469.57142857142856" y="278.475" class="pv">9.1</text><rect x="621.2857142857143" y="277.75" width="16" height="16"/><text x="685.2857142857143" y="294.75" class="pv">7</text><rect x="837" y="282.4" width="16" height="16"/><text x="901" y="299.4" class="pv">6.4</text><rect x="1052.7142857142858" y="276.2" width="16" height="16"/><text x="1116.7142857142858" y="293.2" class="pv">7.2</text><rect x="1268.4285714285713" y="259.15" width="16" height="16"/><text x="1332.4285714285713" y="276.15" class="pv">9.4</text><rect x="1484.142857142857" y="228.15" width="16" height="16"/><text x="1548.142857142857" y="245.15" class="pv">13.4</text></g><g class="ln lt"><polyline points="197.85714285714286,154 413.57142857142856,126.1 629.2857142857143,104.4 845,87.35 1060.7142857142858,76.5 1276.4285714285713,70.30000000000001 1492.142857142857,78.05000000000001"/><rect x="189.85714285714286" y="146" width="16" height="16"/><text x="197.85714285714286" y="136" class="pv" text-anchor="middle">22</text><rect x="405.57142857142856" y="118.1" width="16" height="16"/><text x="413.57142857142856" y="108.1" class="pv" text-anchor="middle">23.8</text><rect x="621.2857142857143" y="96.4" width="16" height="16"/><text x="629.2857142857143" y="86.4" class="pv" text-anchor="middle">25.2</text><rect x="837" y="79.35" width="16" height="16"/><text x="845" y="69.35" class="pv" text-anchor="middle">26.3</text><rect x="1052.7142857142858" y="68.5" width="16" height="16"/><text x="1060.7142857142858" y="58.5" class="pv" text-anchor="middle">27</text><rect x="1268.4285714285713" y="62.30000000000001" width="16" height="16"/><text x="1276.4285714285713" y="52.30000000000001" class="pv" text-anchor="middle">27.4</text><rect x="1484.142857142857" y="70.05000000000001" width="16" height="16"/><text x="1492.142857142857" y="60.05000000000001" class="pv" text-anchor="middle">26.9</text></g><line x1="90" x2="1600" y1="340" y2="340" class="base"/><text x="197.85714285714286" y="384" class="ax" text-anchor="middle">9:30</text><text x="413.57142857142856" y="384" class="ax" text-anchor="middle">10:30</text><text x="629.2857142857143" y="384" class="ax" text-anchor="middle">11:30</text><text x="845" y="384" class="ax" text-anchor="middle">12:30</text><text x="1060.7142857142858" y="384" class="ax" text-anchor="middle">13:30</text><text x="1276.4285714285713" y="384" class="ax" text-anchor="middle">14:30</text><text x="1492.142857142857" y="384" class="ax" text-anchor="middle">15:30</text></svg>
    </div>
    <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
  </div>
  <div class="grain"></div><div class="scan"></div><div class="crt"></div>
</section>
<section class="slide pinkg">
  <div class="content">
    <span class="pill">관계 정리</span>
    <h2 class="hl">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
    <div class="grid4">
      <div class="cmp"><div class="tier feat"><span class="chip">HIGH</span><h3>태양 고도가 높을 때</h3><p class="plus">그림자 길이는 짧아져요</p><p class="plus">기온은 높아져요</p></div><div class="tier"><span class="chip">LOW</span><h3>태양 고도가 낮을 때</h3><p class="plus">그림자 길이는 길어져요</p><p class="plus">기온은 낮아져요</p></div></div>
      <div class="fcard lst"><i class="br tl navy"></i><i class="br brr navy"></i><span class="chip">남중</span><p class="plus">태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p class="plus">이때의 태양 고도를 남중 고도라고 해요</p></div>
      <div class="tbl"><span class="pill sm">시각별 변화</span>
        <div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div>
        <div class="tr"><span>오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span>낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span>오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div>
      </div>
      <blockquote class="qt"><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><i class="qline"></i><span>오늘의 정리</span></blockquote>
    </div>
  </div>
  <p class="nr">표 규칙 없음 → 라벨 알약 머리 + 2px 선 행으로 표현</p>
  <div class="grain"></div><div class="scan"></div>
</section>
<section class="slide dark">
  <i class="star" style="left:485px;top:205px;width:4px;height:4px;background:#5EDCF4;animation-delay:0s"></i><i class="star" style="left:726px;top:368px;width:4px;height:4px;background:#F4D03F;animation-delay:0.43s"></i><i class="star" style="left:967px;top:531px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.86s"></i><i class="star" style="left:1208px;top:694px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.29s"></i><i class="star" style="left:1449px;top:857px;width:4px;height:4px;background:#F4D03F;animation-delay:1.72s"></i><i class="star" style="left:1690px;top:1020px;width:6px;height:6px;background:#F0A6CA;animation-delay:2.15s"></i><i class="star" style="left:51px;top:143px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.58s"></i><i class="star" style="left:292px;top:306px;width:4px;height:4px;background:#F4D03F;animation-delay:0s"></i><i class="star" style="left:533px;top:469px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.43s"></i><i class="star" style="left:774px;top:632px;width:4px;height:4px;background:#5EDCF4;animation-delay:0.86s"></i><i class="star" style="left:1015px;top:795px;width:4px;height:4px;background:#F4D03F;animation-delay:1.29s"></i><i class="star" style="left:1256px;top:958px;width:6px;height:6px;background:#F0A6CA;animation-delay:1.72s"></i><i class="star" style="left:1497px;top:81px;width:4px;height:4px;background:#5EDCF4;animation-delay:2.15s"></i><i class="star" style="left:1738px;top:244px;width:4px;height:4px;background:#F4D03F;animation-delay:2.58s"></i><i class="star" style="left:99px;top:407px;width:6px;height:6px;background:#F0A6CA;animation-delay:0s"></i><i class="star" style="left:340px;top:570px;width:4px;height:4px;background:#5EDCF4;animation-delay:0.43s"></i><i class="star" style="left:581px;top:733px;width:4px;height:4px;background:#F4D03F;animation-delay:0.86s"></i><i class="star" style="left:822px;top:896px;width:6px;height:6px;background:#F0A6CA;animation-delay:1.29s"></i><i class="star" style="left:1063px;top:19px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.72s"></i><i class="star" style="left:1304px;top:182px;width:4px;height:4px;background:#F4D03F;animation-delay:2.15s"></i><i class="star" style="left:1545px;top:345px;width:6px;height:6px;background:#F0A6CA;animation-delay:2.58s"></i><i class="star" style="left:1786px;top:508px;width:4px;height:4px;background:#5EDCF4;animation-delay:0s"></i><i class="star" style="left:147px;top:671px;width:4px;height:4px;background:#F4D03F;animation-delay:0.43s"></i><i class="star" style="left:388px;top:834px;width:6px;height:6px;background:#F0A6CA;animation-delay:0.86s"></i><i class="star" style="left:629px;top:997px;width:4px;height:4px;background:#5EDCF4;animation-delay:1.29s"></i><i class="star" style="left:870px;top:120px;width:4px;height:4px;background:#F4D03F;animation-delay:1.72s"></i><i class="pt" style="left:305px;top:415px;background:#5EDCF4;animation-delay:0s"></i><i class="pt" style="left:694px;top:626px;background:#F0A6CA;animation-delay:1.1s"></i><i class="pt" style="left:1083px;top:837px;background:#F4D03F;animation-delay:2.2s"></i><i class="pt" style="left:1472px;top:148px;background:#5EDCF4;animation-delay:3.3000000000000003s"></i><i class="pt" style="left:61px;top:359px;background:#F0A6CA;animation-delay:4.4s"></i>
  <div class="land"><i style="left:0px;width:60px;height:36px"></i><i style="left:60px;width:80px;height:60px"></i><i style="left:140px;width:100px;height:84px"></i><i style="left:240px;width:60px;height:48px"></i><i style="left:300px;width:80px;height:108px"></i><i style="left:380px;width:100px;height:72px"></i><i style="left:480px;width:60px;height:132px"></i><i style="left:540px;width:80px;height:60px"></i><i style="left:620px;width:100px;height:96px"></i><i style="left:720px;width:60px;height:48px"></i><i style="left:780px;width:80px;height:144px"></i><i style="left:860px;width:100px;height:84px"></i><i style="left:960px;width:60px;height:60px"></i><i style="left:1020px;width:80px;height:108px"></i><i style="left:1100px;width:100px;height:72px"></i><i style="left:1200px;width:60px;height:36px"></i><i style="left:1260px;width:80px;height:84px"></i><i style="left:1340px;width:100px;height:120px"></i><i style="left:1440px;width:60px;height:60px"></i><i style="left:1500px;width:80px;height:48px"></i></div>
  <div class="content">
    <span class="pill">확인하기</span>
    <h2 class="hl cy">배운 내용을 확인해 볼까요?</h2>
    <div class="split5">
      <div class="sblock quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요"><i class="br tl "></i><i class="br brr "></i>
        <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
        <div class="opts"><button class="opt" data-opt="0"><span class="key">A</span>오전 9시 30분</button><button class="opt" data-opt="1"><span class="key">B</span>낮 12시 30분 무렵</button><button class="opt" data-opt="2"><span class="key">C</span>오후 3시 30분</button></div>
        <p class="fb" data-fb></p>
        <div class="btns"><button class="pbtn pink" data-act="retry">다시 풀기 ↺</button></div>
      </div>
      <div class="sblock blk"><i class="br tl pk"></i><i class="br brr pk"></i>
        <span class="sk">빈칸을 눌러 확인해요</span>
        <p class="bl"><button class="chip blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="bl"><button class="chip blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="bl"><button class="chip blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
        <span class="sk wl">오늘의 낱말</span>
        <div class="badges"><span class="badge">태양 고도</span><span class="badge">남중 고도</span><span class="badge">그림자 길이</span><span class="badge">기온</span></div>
      </div>
    </div>
  </div>
  <p class="nr">퀴즈 보기 규칙 없음 → 청록 테두리 칸으로 표현 · 빈칸 규칙 없음 → 날짜 칩으로 표현</p>
  <div class="grain"></div><div class="scan"></div><div class="crt"></div>
</section>
<section class="slide lav">
  <div class="content">
    <span class="pill">디자인 안내</span>
    <h2 class="hl">이 디자인 사용 설명서</h2>
    <div class="split6">
      <div class="fcard g6"><i class="br tl navy"></i><i class="br brr navy"></i>
        <span class="chip">한눈에</span><p class="ab6">8비트 게임 화면처럼 <b>4px 픽셀 단위</b>로 그립니다. 모서리는 각지고, 그림자는 흐림 없이 <b>계단처럼 겹쳐</b> 찍어요. 남색 격자 장과 라벤더·분홍 격자 장을 번갈아 씁니다.</p>
        <span class="chip">색</span><div class="sw6"><span><i style="background:#0A0E27"></i>밤 남색</span><span><i style="background:#0F1B3D"></i>남색</span><span><i style="background:#5EDCF4"></i>청록</span><span><i style="background:#F0A6CA"></i>분홍</span><span><i style="background:#F4D03F"></i>노랑</span><span><i style="background:#E2D5F2"></i>라벤더</span></div>
        <span class="chip">글꼴</span><div class="ft6"><p><b>제목·숫자</b> Tektur → Mona12 Bold</p><p><b>본문</b> Chakra Petch → Orbit</p><p><b>라벨·값</b> Space Mono</p></div>
        <span class="chip">이렇게 쓰면 좋아요</span><div class="tip6"><p class="plus">게임처럼 단계를 깨 나가는 수업 — 퀴즈, 미션, 레벨 업</p><p class="plus">네온색(청록·분홍·노랑)은 제목·숫자에만, 본문은 남색·흰색</p><p class="plus">추천 카드 하나만 노랑 그림자로 띄워 강조</p></div>
      </div>
      <div class="sig6">
        <span class="pill sm">대표 장치 — 눌러 보세요</span>
        <div class="sblock d6"><i class="br tl navy"></i><i class="br brr navy"></i><div class="dh"><h3>픽셀 버튼 누르기</h3><button class="pbtn pink sm" data-demo="#eb-btn" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>누르면 2px 아래로 내려가고 계단 그림자가 6단 → 4단으로 줄어요.</p><div class="dr"><span class="pbtn demo" id="eb-btn">START ▶</span></div></div>
        <div class="sblock d6"><i class="br tl navy"></i><i class="br brr navy"></i><div class="dh"><h3>막대가 차례로 자람</h3><button class="pbtn pink sm" data-demo="#eb-bars">다시 보기</button></div><p>그래프 장에 들어오면 막대가 120ms 간격으로 아래에서 자라요.</p><div class="bars6" id="eb-bars"><i style="--i:0;height:38px"></i><i style="--i:1;height:48px"></i><i style="--i:2;height:55px"></i><i style="--i:3;height:57px"></i><i style="--i:4;height:54px"></i><i style="--i:5;height:47px"></i><i style="--i:6;height:37px"></i></div></div>
        <div class="sblock d6"><i class="br tl navy"></i><i class="br brr navy"></i><div class="dh"><h3>픽셀 히어로 글자</h3><button class="pbtn pink sm" data-demo="#eb-hero" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>노랑 +4px → 남색 +8px 두 겹 그림자로 글자가 튀어나와 보여요.</p><div class="dr"><b class="hero6" id="eb-hero">LEVEL 06</b></div></div>
      </div>
    </div>
  </div>
  <div class="grain"></div><div class="scan"></div>
</section>
<nav class="dk-nav"><span class="dk-dots"><button class="dk-dot" aria-label="1장"></button><button class="dk-dot" aria-label="2장"></button><button class="dk-dot" aria-label="3장"></button><button class="dk-dot" aria-label="4장"></button><button class="dk-dot" aria-label="5장"></button><button class="dk-dot" aria-label="6장"></button></span><span class="dk-count" data-pad></span><span class="hint">USE KEYS ↑ ↓</span></nav>
  </main>
</div>

<!-- 슬라이드 넘김·단계 버튼·퀴즈 엔진. 이 줄은 지우거나 바꾸지 마세요 -->
<script src="https://k-slide.web.app/kit/v1/8-bit-orbit.js"></script>
</body>
</html>
```

---

## 5. 참고: 공통 CSS와 엔진 사용법 (뼈대가 이미 불러옴 — HTML에 옮겨 쓰지 마세요)

아래는 `https://k-slide.web.app/kit/v1/8-bit-orbit.css`의 내용과 엔진(`https://k-slide.web.app/kit/v1/8-bit-orbit.js`)의 사용법 주석입니다. 클래스의 모양·크기·배치를 이해하는 데에만 쓰세요. 이 내용을 `<style>`이나 `<script>`에 넣으면 안 됩니다.

```css
/* 8-bit-orbit — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-0';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/mona12/Mona12-Bold.woff2") format("woff2");font-weight:700}
@font-face{font-family:'kp-1';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/orbit/Orbit-Regular.woff2") format("woff2");font-weight:400}
/* === THEME === */
:root{--stage-bg:#0A0E27;--slide-bg:#0A0E27;
  --kt:'kp-0';--kb:'kp-1';--ka:'kp-1';
  --wt:700;--wb:400}
*{margin:0;padding:0;box-sizing:border-box}
body{font-synthesis:none;word-break:keep-all;letter-spacing:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
/* === VIEWPORT BASE (frontend-slides, mandatory) === */
/* ===========================================
   FIXED 16:9 STAGE: MANDATORY BASE STYLES
   Include this ENTIRE file in every presentation.
   Slides are authored at 1920×1080 and scaled as a whole.
   =========================================== */

/* 1. Lock the browser viewport */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 2. Full-window deck viewport */
.deck-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 3. Fixed 16:9 design canvas.
   JavaScript sets transform: translate(...) scale(...). */
.deck-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform-origin: 0 0;
    background: var(--slide-bg, #fff);
}

/* 4. Slides stack inside the fixed stage.
   Content must be laid out at 1920×1080, not reflowed per device. */
.slide {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--slide-bg, #fff);
}

.slide.active,
.slide.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* 5. Keep media inside authored slide bounds */
img,
video,
canvas,
svg {
    max-width: 100%;
    max-height: 100%;
}

/* 6. Presentation chrome stays outside the slide design system */
.deck-controls {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 1000;
}

/* 7. Print one fixed-size slide per page */
@media print {
    html,
    body {
        width: 1920px;
        height: auto;
        overflow: visible;
        background: #fff;
    }

    .deck-viewport {
        position: static;
        overflow: visible;
        background: #fff;
    }

    .deck-stage {
        position: static;
        width: auto;
        height: auto;
        transform: none !important;
        background: none;
    }

    .slide {
        position: relative;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 1920px;
        height: 1080px;
        break-after: page;
        page-break-after: always;
    }

    .slide:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .deck-controls {
        display: none !important;
    }
}

/* 8. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
}

/* 동작 줄이기(Windows '애니메이션 효과' 끔 등): 위 규칙이 길이를 0.01ms로 줄이면 반복 애니메이션이 깜빡이듯 빨라짐 → 반복은 한 번만 */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-iteration-count:1 !important}}
.dk-nav{position:absolute;z-index:50}


/* === 측정기 그림(figure-gauge.js) 기본 === */
.gauge{display:block;width:100%;height:auto;overflow:visible;--g-sw:2.5}
.gauge .g-lb{font-family:var(--g-font,var(--kb));font-size:40px;font-weight:700;fill:var(--g-ink,currentColor)}
.gauge .g-ground{stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw);opacity:.35}
.gauge .g-board{fill:var(--g-board,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-ruler{fill:var(--g-ruler,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-tick{stroke:var(--g-ink,currentColor);stroke-width:1.5}
.gauge .g-stick{fill:var(--g-stick,var(--g-ink,currentColor));stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-mark,.gauge .g-lead,.gauge .g-dim,.gauge .g-angle{fill:none;stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-angle{stroke-width:4}
.gauge .g-shadow{fill:var(--g-shadow,var(--g-ink,currentColor));opacity:.6}
.gauge .g-string{stroke:var(--g-acc,var(--g-ink,currentColor));stroke-width:4}
.gauge .g-prot{fill:var(--g-prot,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-prot2{fill:none;stroke:var(--g-ink,currentColor);stroke-width:1.5}
.gauge .g-hole{fill:var(--g-ink,currentColor)}
.gauge .g-ray{stroke:var(--g-acc,var(--g-ink,currentColor));stroke-width:7}
.gauge .g-rayh{fill:var(--g-acc,var(--g-ink,currentColor))}
/* 만드는 중(1~3단계): 아직 안 만든 부품과 측정 표시는 흐리게 / 0·4단계는 모두 또렷 */
.slide[data-step="1"] .gauge .g-part:not(.on),.slide[data-step="2"] .gauge .g-part:not(.on),.slide[data-step="3"] .gauge .g-part:not(.on),
.slide[data-step="1"] .gauge .g-meas,.slide[data-step="2"] .gauge .g-meas,.slide[data-step="3"] .gauge .g-meas{opacity:var(--g-dim,.2)}

/* === TEMPLATE STYLES === */

/* --- 토큰: 픽셀 단위·격자·그림자는 명세 고정값 그대로, 글자는 1920 무대·교실 화면용으로 키움 --- */
:root{--void:#0A0E27;--navy:#0F1B3D;--cyan:#5EDCF4;--pink:#F0A6CA;--yellow:#F4D03F;--lav:#E2D5F2;
  --stack-cy:4px 0 0 0 var(--navy),0 4px 0 0 var(--navy),4px 4px 0 0 var(--navy),8px 4px 0 0 var(--yellow),4px 8px 0 0 var(--yellow),8px 8px 0 0 var(--yellow);
  --stack-pk:4px 0 0 0 var(--navy),0 4px 0 0 var(--navy),4px 4px 0 0 var(--navy),8px 4px 0 0 var(--cyan),4px 8px 0 0 var(--cyan),8px 8px 0 0 var(--cyan);
  --stack-4:4px 0 0 0 var(--navy),0 4px 0 0 var(--navy),4px 4px 0 0 var(--navy),6px 2px 0 0 var(--yellow),2px 6px 0 0 var(--yellow),6px 6px 0 0 var(--yellow);
  --stack-4p:4px 0 0 0 var(--navy),0 4px 0 0 var(--navy),4px 4px 0 0 var(--navy),6px 2px 0 0 var(--cyan),2px 6px 0 0 var(--cyan),6px 6px 0 0 var(--cyan);
  --ease:cubic-bezier(0.22,1,0.36,1)}
.deck-stage{cursor:crosshair}
.slide{font-family:'Chakra Petch',var(--kb),sans-serif}
.slide.dark{background-color:var(--void);background-image:linear-gradient(rgba(94,220,244,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(94,220,244,.07) 1px,transparent 1px);background-size:40px 40px;color:rgba(255,255,255,.7)}
.slide.lav,.slide.pinkg{background-color:var(--lav);background-image:linear-gradient(rgba(15,27,61,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(15,27,61,.08) 1px,transparent 1px);background-size:40px 40px;color:rgba(15,27,61,.75)}
.slide.pinkg{background-color:var(--pink)}
.content{position:absolute;inset:56px 120px 104px 120px;z-index:10;display:flex;flex-direction:column}
.nr{position:absolute;left:120px;bottom:28px;z-index:52;font-size:18px;opacity:.6}

/* --- 분위기 층(모든 장): 노이즈 49 / 스캔라인 50 / CRT 비네트 51 --- */
.grain{position:absolute;inset:0;z-index:49;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.scan{position:absolute;inset:0;z-index:50;pointer-events:none;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(10,14,39,.04) 2px 4px)}
.dark .scan{mix-blend-mode:normal;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 4px)}
.crt{position:absolute;inset:0;z-index:51;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(10,14,39,.55) 100%)}
.star{position:absolute;z-index:1;animation:twinkle 3s steps(2) infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.pt{position:absolute;z-index:1;width:8px;height:8px;opacity:.7;animation:float 8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-28px)}}
.land{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;opacity:.3}
.land i{position:absolute;bottom:0;background:var(--navy);box-shadow:inset 0 4px 0 #1d2f63}

/* --- 공통 부품 --- */
.pill{align-self:flex-start;background:var(--navy);color:var(--yellow);font:700 28px 'Space Mono',var(--kb),monospace;letter-spacing:0;padding:10px 22px}
.chip{display:inline-block;align-self:flex-start;background:var(--navy);color:var(--cyan);font:400 24px 'Space Mono',var(--kb),monospace;letter-spacing:.05em;padding:4px 12px}
.br{position:absolute;width:24px;height:24px;border:0 solid var(--cyan);z-index:3}
.br.tl{left:-8px;top:-8px;border-width:4px 0 0 4px}.br.brr{right:-8px;bottom:-8px;border-width:0 4px 4px 0}
.br.navy{border-color:var(--navy)}.br.pk{border-color:var(--pink)}
.hl{margin-top:18px;font-family:'Tektur',var(--kt),sans-serif;font-weight:400;font-size:72px;line-height:1.2;color:var(--navy)}
.hl.cy{color:var(--cyan);text-shadow:3px 3px 0 var(--navy)}
.qline{display:block;flex:none;width:60px;height:4px;background:var(--yellow);box-shadow:4px 4px 0 var(--navy)}
.badges{display:flex;gap:16px;flex-wrap:wrap}
.badge{border:2px solid var(--yellow);color:var(--yellow);font:400 28px 'Space Mono',var(--kb),monospace;letter-spacing:.1em;padding:8px 18px}
.fcard{position:relative;background:rgba(255,255,255,.35);backdrop-filter:blur(8px);border:2px solid rgba(15,27,61,.2);padding:28px}
.sblock{position:relative;background:rgba(94,220,244,.08);border:2px solid rgba(94,220,244,.2);padding:28px 32px}
.sk{font:400 26px 'Space Mono',var(--kb),monospace;color:var(--pink)}
.plus{padding-left:1.1em;text-indent:-1.1em;font-size:30px;line-height:1.65}
.plus::before{content:'+';display:inline-block;width:1.1em;text-indent:0;color:var(--cyan);font-weight:700}
.pbtn{background:var(--cyan);color:var(--navy);font:700 32px 'Tektur',var(--kb),sans-serif;letter-spacing:.04em;padding:16px 36px;box-shadow:var(--stack-cy)}
.pbtn.pink{background:var(--pink);box-shadow:var(--stack-pk)}
.pbtn:hover:not(:disabled),.pbtn:active:not(:disabled){transform:translate(2px,2px);box-shadow:var(--stack-4)}
.pbtn.pink:hover:not(:disabled),.pbtn.pink:active:not(:disabled){box-shadow:var(--stack-4p)}
.pbtn:disabled{opacity:.35}
.btns{display:flex;gap:28px}

/* --- 1. 표지(남색 격자): 라벨 알약 + 단원(작은 디스플레이) + 눈썹 + 학습 목표 픽셀 히어로(2단 글자 그림자) + 모서리 괄호 + 히어로 배지 --- */
.cover{justify-content:center;padding-bottom:40px}
.unit{margin-top:40px;font-family:'Tektur',var(--kt),sans-serif;font-size:60px;line-height:1.2;color:var(--cyan);text-shadow:3px 3px 0 var(--navy);display:flex;align-items:baseline;gap:32px}
.unit span{font:700 30px 'Tektur',sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.7);text-shadow:none}
.eyebrow{margin-top:44px;font:400 28px 'Space Mono',var(--kb),monospace;color:var(--yellow)}
.hero-wrap{position:relative;align-self:flex-start;margin-top:18px;padding:18px 32px 26px 24px}
.hero{font-family:'Tektur',var(--kt),sans-serif;font-weight:400;font-size:124px;line-height:1.22;color:var(--cyan);text-shadow:4px 4px 0 var(--yellow),8px 8px 0 var(--navy);white-space:nowrap}
.hero .gk{font-style:normal}
.cover .badges{margin-top:40px}

/* --- 2. 흐름(라벤더 격자): 기능 카드 속 측정기 그림 + 인용 선 메모 | 정의 + 점선 레일 위 사각 노드 4개(활성 = 노랑) + 픽셀 버튼 --- */
.split2{flex:1;min-height:0;margin-top:26px;display:grid;grid-template-columns:860px 1fr;gap:56px}
.figwrap{display:flex;flex-direction:column;gap:22px}
.fig{padding:18px 28px 14px;--g-ink:var(--navy);--g-acc:var(--navy);--g-stick:var(--cyan);--g-board:var(--pink);--g-ruler:#fff;--g-prot:rgba(255,255,255,.6);--g-shadow:var(--navy);--g-font:'Space Mono',var(--kb),monospace}
.fig .gauge{margin-top:6px}
.qline-row{display:flex;align-items:center;gap:28px}
.qline-row p{font-weight:500;font-size:32px;line-height:1.6;color:var(--navy)}
.side{display:flex;flex-direction:column;min-height:0}
.def{font-size:30px;line-height:1.6}
.def b{color:var(--navy)}
.tl{position:relative;margin-top:16px;display:flex;flex-direction:column;gap:14px;padding-left:64px}
.rail{position:absolute;left:10px;top:12px;bottom:12px;width:4px;background:repeating-linear-gradient(to bottom,var(--navy) 0 16px,transparent 16px 24px)}
.ev{position:relative;opacity:.45}
.ev.on{opacity:1}
.node{position:absolute;left:-64px;top:2px;width:24px;height:24px;background:var(--cyan);border:4px solid var(--navy)}
.ev.on .node{background:var(--yellow)}
.ev .chip{font-size:22px}
.ev h3{display:inline;margin-left:16px;font-family:'Tektur',var(--kt),sans-serif;font-weight:400;font-size:40px;line-height:1.25;color:var(--navy)}
.ev p{margin-top:4px;font-size:28px;line-height:1.6}
.side .btns{margin-top:auto}
.cap{margin-top:22px;min-height:48px;font-size:30px;line-height:1.6;color:var(--navy);font-weight:500}

/* --- 3. 숫자와 그래프(남색 격자): 통계 칸 4개(청록 유리 + 괄호, 숫자 남색 +3 그림자, 분홍 모노 라벨) + 세로 막대(차례로 자람) + 분홍·노랑 꺾은선 --- */
.stats{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.stats .sblock{display:flex;flex-direction:column;gap:6px;padding:22px 28px}
.sv{font-family:'Tektur',var(--kt),sans-serif;font-weight:900;font-size:64px;line-height:1.1;color:var(--cyan);text-shadow:3px 3px 0 var(--navy)}
.stats p{font-size:28px;line-height:1.5;color:rgba(255,255,255,.75)}
.stats p span{color:rgba(255,255,255,.5)}
.chartbox{flex:1;min-height:0;margin-top:26px;display:flex;flex-direction:column;gap:10px}
.lg{display:flex;align-items:center;gap:30px;font-size:26px;color:rgba(255,255,255,.75)}
.k{display:inline-block;width:22px;height:16px;margin-right:10px;vertical-align:middle}
.k.bn{background:var(--cyan)}.k.ls{background:var(--pink)}.k.lt{background:var(--yellow)}
.hb{margin-left:auto;border:2px solid var(--yellow);color:var(--yellow);font:400 24px 'Space Mono',var(--kb),monospace;padding:4px 14px}
.cv{flex:1;min-height:0;width:100%}
.cv .gl{stroke:rgba(94,220,244,.15);stroke-width:2}
.cv .base{stroke:rgba(94,220,244,.45);stroke-width:3}
.cv .ax{font:400 24px 'Space Mono',monospace;fill:rgba(255,255,255,.7)}
.cv .bn{fill:var(--cyan)}.cv .bsh{fill:var(--navy)}
.cv .bvl{font:700 26px 'Space Mono',monospace;fill:var(--navy)}
.cv .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 120ms + 300ms)}
.visible .cv .bar{transform:none}
.cv .ln polyline{fill:none;stroke-width:4}
.cv .ls polyline{stroke:var(--pink)}.cv .ls rect,.cv .ls text{fill:var(--pink)}
.cv .lt polyline{stroke:var(--yellow)}.cv .lt rect,.cv .lt text{fill:var(--yellow)}
.cv .pv{font:700 24px 'Space Mono',monospace;paint-order:stroke;stroke:var(--void);stroke-width:6px}
.src{margin-top:8px;font:400 20px 'Space Mono',var(--kb),monospace;color:rgba(255,255,255,.5)}

/* --- 4. 비교와 표(분홍 격자): 티어 카드 둘(높을 때 = 추천: 남색 + 노랑 8px + 위로) + 기능 카드 목록 / 표 + 인용(+ 인용 선) --- */
.grid4{flex:1;min-height:0;margin-top:30px;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr;gap:40px 48px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.tier{background:#fff;box-shadow:6px 6px 0 rgba(15,27,61,.15);padding:24px 28px;display:flex;flex-direction:column;gap:8px}
.tier h3{margin:6px 0 4px;font-family:'Tektur',var(--kt),sans-serif;font-weight:400;font-size:38px;line-height:1.25;color:var(--navy)}
.tier.feat{background:var(--navy);color:rgba(255,255,255,.85);box-shadow:8px 8px 0 var(--yellow);transform:translateY(-12px)}
.tier.feat h3{color:var(--cyan)}
.tier.feat .chip{background:var(--yellow);color:var(--navy)}
.lst{display:flex;flex-direction:column;gap:10px;align-self:end}
.lst .plus::before{color:var(--navy)}
.tbl{display:flex;flex-direction:column}
.pill.sm{font-size:24px;padding:6px 16px;margin-bottom:12px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;padding:12px 4px;border-bottom:2px solid rgba(15,27,61,.3);font-size:29px;line-height:1.4;color:var(--navy)}
.tr.th{background:var(--navy);color:var(--yellow);font:700 24px 'Space Mono',var(--kb),monospace;padding:10px 12px;border:0}
.qt{align-self:start;display:flex;flex-direction:column;gap:18px}
.qt p{font-weight:500;font-size:40px;line-height:1.7;color:var(--navy)}
.qt span{font:400 24px 'Space Mono',var(--kb),monospace;color:var(--navy)}

/* --- 5. 확인하기(남색 격자, CTA 성격): 통계 칸 모양 퀴즈(보기 = 청록 테두리, 정답 = 추천 티어 카드) | 빈칸(날짜 칩) + 낱말 배지 + 픽셀 지평선 --- */
.split5{flex:1;min-height:0;margin-top:28px;display:grid;grid-template-columns:1fr 760px;gap:56px;padding-bottom:30px}
.quiz{display:flex;flex-direction:column}
.q{font-family:'Tektur',var(--kt),sans-serif;font-weight:400;font-size:48px;line-height:1.3;color:var(--cyan);text-shadow:3px 3px 0 var(--navy)}
.opts{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.opt{display:flex;align-items:center;gap:22px;text-align:left;border:2px solid var(--cyan);color:#fff;font:600 32px 'Chakra Petch',var(--kb),sans-serif;padding:10px 20px}
.key{background:var(--navy);color:var(--yellow);font:700 26px 'Space Mono',monospace;padding:4px 12px;border:2px solid var(--yellow)}
.opt.right{background:var(--cyan);color:var(--navy);box-shadow:8px 8px 0 var(--yellow);transform:translateY(-12px)}
.opt.wrong{border-color:var(--pink);color:var(--pink)}
.opt:disabled:not(.right){opacity:.4}
.fb{margin-top:16px;min-height:96px;font-weight:500;font-size:30px;line-height:1.6;color:#fff}
.quiz .btns{margin-top:auto}
.blk{display:flex;flex-direction:column;gap:18px}
.bl{font-size:32px;line-height:1.6;color:rgba(255,255,255,.8)}
.blank{position:relative;min-width:200px;margin-right:12px;font-size:30px;font-weight:700;text-align:center;vertical-align:middle;color:var(--cyan)}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--yellow);color:var(--navy)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}

/* --- 내비: 오른쪽 사각 점 레일 + 아래 가운데 번호 + 오른쪽 아래 키 안내 --- */
.dk-nav{inset:0;pointer-events:none;z-index:60}
.dk-dots{position:absolute;right:36px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;pointer-events:auto}
.dk-dot{width:16px;height:16px;border:2px solid var(--cyan);background:transparent;padding:2px}
.dk-dot.on{background:var(--cyan);box-shadow:inset 0 0 0 2px var(--void)}
.dk-count{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(15,27,61,.85);color:var(--cyan);font:400 26px 'Space Mono',monospace;letter-spacing:.15em;padding:8px 20px}
.hint{position:absolute;right:36px;bottom:30px;font:400 20px 'Space Mono',monospace;letter-spacing:.1em;color:var(--cyan);opacity:.5}
[data-slide="2"] .dk-dot,[data-slide="4"] .dk-dot{border-color:var(--navy)}
[data-slide="2"] .dk-dot.on,[data-slide="4"] .dk-dot.on{background:var(--navy);box-shadow:inset 0 0 0 2px var(--lav)}
[data-slide="2"] .hint,[data-slide="4"] .hint{color:var(--navy)}
/* --- 6. 디자인 안내(라벤더 격자): 기능 카드(설명) | 통계 칸 모양 시연 3개 --- */
.split6{flex:1;min-height:0;margin-top:24px;display:grid;grid-template-columns:900px 1fr;gap:56px}
.g6{display:flex;flex-direction:column;gap:10px;padding:26px 32px}
.g6 .chip{margin-top:6px;font-size:22px}
.ab6{font-size:28px;line-height:1.55;color:var(--navy)}
.ab6 b{font-weight:700}
.sw6{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:24px;color:var(--navy)}
.sw6 i{display:inline-block;width:28px;height:28px;margin-right:8px;vertical-align:-7px;border:2px solid var(--navy)}
.ft6 p{font-size:25px;line-height:1.5;color:var(--navy)}
.ft6 b{font-weight:700}
.tip6 .plus{font-size:25px;line-height:1.5;color:var(--navy)}
.tip6 .plus::before{color:var(--navy)}
.sig6{display:flex;flex-direction:column;gap:14px;min-height:0}
.sig6 .pill.sm{margin-bottom:0}
.d6{background:rgba(15,27,61,.06);border-color:rgba(15,27,61,.25);padding:12px 22px 14px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-family:'Tektur',var(--kt),sans-serif;font-weight:400;font-size:30px;color:var(--navy)}
.d6 p{margin-top:4px;font-size:22px;line-height:1.45;color:var(--navy)}
.pbtn.sm{font-size:20px;padding:8px 16px}
.pbtn.sm[aria-pressed="true"]{transform:translate(2px,2px);box-shadow:var(--stack-4p)}
.dr{margin-top:8px;height:64px;display:flex;align-items:center;padding-left:6px}
.pbtn.demo{display:inline-block}
.pbtn.demo.play{transform:translate(2px,2px);box-shadow:var(--stack-4)}
.bars6{margin-top:8px;height:70px;display:flex;align-items:flex-end;gap:14px;border-bottom:4px solid var(--navy)}
.bars6 i{width:40px;background:var(--cyan);box-shadow:4px 0 0 var(--navy);transform-origin:50% 100%}
.bars6.play i{animation:eb-grow .7s var(--ease) both;animation-delay:calc(var(--i) * 120ms)}
@keyframes eb-grow{from{transform:scaleY(0)}to{transform:none}}
.hero6{font:900 48px/1 'Tektur',sans-serif;color:var(--cyan)}
.hero6.play{text-shadow:4px 4px 0 var(--yellow),8px 8px 0 var(--navy)}
[data-slide="6"] .dk-dot{border-color:var(--navy)}
[data-slide="6"] .dk-dot.on{background:var(--navy);box-shadow:inset 0 0 0 2px var(--lav)}
[data-slide="6"] .hint{color:var(--navy)}

/* === DECK ENGINE (slide-refs 공용, 덱 HTML에 그대로 인라인됨) ===
   window.DECK_CFG = { type: 'x' | 'y' | 'fade' | 'shift' | 'rise', dur: ms, ease: css, dist: px, wheel: bool }
   window.DECK_FX  = { enter(slide, i), step(slide, k), answer(quiz, ok, btn) }  // 템플릿별 효과 훅(선택)
   - 넘김: → ↓ Space PageDown Enter = 다음(단계가 남았으면 단계 먼저), ← ↑ PageUp = 이전, Home/End
   - 내비: .dk-dot(점) .dk-count(번호, data-pad면 01 형식) .dk-prev .dk-next
   - 단계: <section data-steps="4"> 안의 [data-s="k"] 요소가 k단계부터 .on, 현재 단계는 .now
           [data-caps='["...",...]'] 요소의 글이 단계마다 바뀜, 버튼 [data-act="step"] [data-act="reset"]
   - 퀴즈: [data-quiz data-answer data-right data-wrong] 안의 버튼 [data-opt="i"], 결과 글 [data-fb], 다시 풀기 [data-act="retry"]
   - 빈칸: [data-blank] 를 누르면 .open (답 보이기/숨기기)
   - 시연(6장 디자인 안내): 버튼 [data-demo="선택자"] 를 누르면 같은 장 안의 그 요소에 .play
       data-mode="toggle" 이면 .play 켜기/끄기(aria-pressed), 아니면 .play를 뺐다 다시 붙여 애니메이션을 처음부터 다시 재생 */
```

(끝. 사용자의 수업 내용을 받아 위 지시대로 HTML을 만드세요.)