Spaces:
Running
Running
| :root { | |
| --bg: #fafafa; | |
| --fg: #1a1a1a; | |
| --muted: #666; | |
| --border: #e0e0e0; | |
| --accent: #4a6cf7; | |
| --card: #ffffff; | |
| --code-bg: #f0f0f0; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0f0f10; | |
| --fg: #e8e8e8; | |
| --muted: #9a9a9a; | |
| --border: #2a2a2c; | |
| --accent: #7c8ff0; | |
| --card: #18181a; | |
| --code-bg: #1f1f22; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; | |
| background: var(--bg); | |
| color: var(--fg); | |
| line-height: 1.7; | |
| font-size: 16px; | |
| } | |
| .container { | |
| max-width: 880px; | |
| margin: 0 auto; | |
| padding: 48px 24px 96px; | |
| } | |
| header.hero { | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 32px; | |
| margin-bottom: 40px; | |
| } | |
| header.hero h1 { | |
| font-size: 2.0rem; | |
| margin: 0 0 8px; | |
| letter-spacing: -0.01em; | |
| } | |
| header.hero .tagline { | |
| font-size: 1.05rem; | |
| color: var(--muted); | |
| margin: 0 0 16px; | |
| } | |
| .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } | |
| .badge { | |
| font-size: 0.78rem; | |
| padding: 3px 10px; | |
| border-radius: 12px; | |
| background: var(--code-bg); | |
| color: var(--fg); | |
| border: 1px solid var(--border); | |
| white-space: nowrap; | |
| } | |
| .badge.danger { background: #fde7e7; color: #a00; border-color: #f3c0c0; } | |
| @media (prefers-color-scheme: dark) { | |
| .badge.danger { background: #2a1414; color: #f0a0a0; border-color: #5a2a2a; } | |
| } | |
| section { margin-bottom: 56px; } | |
| section h2 { | |
| font-size: 1.4rem; | |
| margin: 0 0 16px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| section h3 { font-size: 1.1rem; margin: 24px 0 8px; } | |
| p { margin: 0 0 12px; } | |
| a { color: var(--accent); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| code, pre { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| background: var(--code-bg); | |
| border-radius: 4px; | |
| font-size: 0.9rem; | |
| } | |
| code { padding: 1px 6px; } | |
| pre { padding: 12px 16px; overflow-x: auto; } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.92rem; | |
| margin: 12px 0; | |
| } | |
| th, td { | |
| text-align: left; | |
| padding: 8px 10px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| th { font-weight: 600; background: var(--code-bg); } | |
| .dialog-box { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 14px 18px; | |
| margin: 12px 0 18px; | |
| font-size: 0.92rem; | |
| } | |
| .dialog-box .turn { display: flex; gap: 10px; padding: 3px 0; } | |
| .dialog-box .speaker { | |
| font-weight: 600; | |
| flex: 0 0 24px; | |
| color: var(--accent); | |
| } | |
| .audio-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin: 16px 0; | |
| } | |
| @media (max-width: 640px) { | |
| .audio-grid { grid-template-columns: 1fr; } | |
| } | |
| .audio-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 14px 16px; | |
| } | |
| .audio-card h4 { | |
| margin: 0 0 6px; | |
| font-size: 0.95rem; | |
| } | |
| .audio-card .meta { | |
| font-size: 0.8rem; | |
| color: var(--muted); | |
| margin-bottom: 8px; | |
| } | |
| .audio-card audio { width: 100%; } | |
| .curriculum-stages { | |
| list-style: none; | |
| padding: 0; | |
| margin: 16px 0 0; | |
| counter-reset: stage; | |
| } | |
| .curriculum-stages li { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 14px 18px 14px 56px; | |
| margin: 0 0 12px; | |
| position: relative; | |
| counter-increment: stage; | |
| } | |
| .curriculum-stages li::before { | |
| content: counter(stage); | |
| position: absolute; | |
| left: 16px; | |
| top: 14px; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: white; | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .curriculum-stages .stage-title { | |
| font-weight: 600; | |
| margin: 0 0 4px; | |
| } | |
| .curriculum-stages .stage-meta { | |
| font-size: 0.85rem; | |
| color: var(--muted); | |
| margin: 0; | |
| } | |
| .callout { | |
| border-left: 3px solid var(--accent); | |
| background: var(--card); | |
| padding: 12px 16px; | |
| margin: 16px 0; | |
| border-radius: 0 6px 6px 0; | |
| font-size: 0.92rem; | |
| } | |
| .callout.warning { border-left-color: #d97706; } | |
| footer { | |
| border-top: 1px solid var(--border); | |
| margin-top: 64px; | |
| padding-top: 24px; | |
| font-size: 0.85rem; | |
| color: var(--muted); | |
| } | |