:root {
  color-scheme: dark;
  --bg: #080d13;
  --panel: #0f1822;
  --panel-2: #14212c;
  --line: #263744;
  --line-strong: #3d5363;
  --text: #eef5f8;
  --muted: #8fa3af;
  --cyan: #22c7df;
  --cyan-soft: rgba(34, 199, 223, 0.14);
  --amber: #f1b44c;
  --green: #48d597;
  --red: #ff6d6d;
  --radius: 16px;
  --mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  font-family: Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -20%, #183040 0, var(--bg) 38rem); color: var(--text); -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 11px; min-height: 70px; padding: calc(10px + env(safe-area-inset-top)) 18px 10px; border-bottom: 1px solid rgba(70, 94, 109, .55); background: rgba(8, 13, 19, .94); backdrop-filter: blur(18px); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #2e5665; border-radius: 12px; background: linear-gradient(145deg, #18303c, #0a141d); }
.brand-mark svg { width: 31px; fill: none; stroke: var(--cyan); stroke-width: 1.7; }
.brand-copy { min-width: 0; flex: 1; }
.eyebrow, .step-label { margin: 0 0 3px; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.brand-copy h1 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.offline-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(72, 213, 151, .25); border-radius: 999px; color: #9cebc5; background: rgba(72, 213, 151, .08); font-size: 11px; font-weight: 700; }
.offline-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }

.install-banner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; width: min(calc(100% - 32px), 672px); margin: 14px auto 0; padding: 12px 40px 12px 12px; border: 1px solid rgba(34, 199, 223, .38); border-radius: 14px; background: linear-gradient(135deg, rgba(20, 50, 64, .98), rgba(11, 24, 34, .98)); box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }
.install-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--cyan); background: rgba(34, 199, 223, .12); }
.install-icon svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.install-copy { display: grid; gap: 2px; min-width: 0; }
.install-copy strong { font-size: 12px; }
.install-copy span { color: var(--muted); font-size: 9px; line-height: 1.35; }
.install-button { min-height: 35px; padding: 0 11px; border: 1px solid #56e4f4; border-radius: 9px; color: #061318; background: var(--cyan); font-size: 10px; font-weight: 850; }
.install-close { position: absolute; top: 3px; right: 5px; width: 28px; height: 28px; border: 0; color: var(--muted); background: transparent; font-size: 20px; line-height: 1; }

@media (display-mode: standalone) {
  .install-banner { display: none !important; }
}

main { width: min(100%, 720px); margin: 0 auto; }
.screen { padding: 22px 16px 28px; animation: enter .22s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: clamp(23px, 6vw, 31px); letter-spacing: -.04em; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.icon-button svg { width: 21px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.intro { margin: -6px 0 18px; color: var(--muted); line-height: 1.55; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 13px; border: 1px solid var(--line); border-radius: 14px; background: #0a121a; }
.segmented button { padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 750; }
.segmented button.is-active { color: #e9fcff; background: linear-gradient(180deg, #1d4654, #15313d); box-shadow: inset 0 0 0 1px rgba(34, 199, 223, .4); }
.segment-icon { margin-right: 6px; color: var(--cyan); }

.machine-card, .control-card, .code-card, .analyzer-card, .lesson-card, .quiz-card, .note-card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, rgba(20, 33, 44, .98), rgba(11, 18, 26, .98)); box-shadow: 0 16px 38px rgba(0, 0, 0, .18); }
.machine-card { overflow: hidden; margin-bottom: 13px; }
.machine-card-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.machine-card-head > div:first-child { display: grid; gap: 2px; }
.status-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.machine-card-head strong { color: #c8f8ff; font-family: var(--mono); font-size: 14px; }
.legend { display: flex; gap: 11px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-current { background: var(--cyan); }
.dot-target { border: 1px solid var(--amber); }
.machine-view { display: block; width: 100%; height: auto; max-height: 340px; }
.svg-axis { fill: #8ca1ad; font: 700 12px var(--mono); }
.svg-note { fill: #a4b4be; font: 11px var(--mono); }
.g54-marker circle { fill: #182b36; stroke: var(--amber); stroke-width: 2; }
.g54-marker path { fill: none; stroke: var(--amber); stroke-width: 1.5; }
.g54-marker text { fill: var(--amber); font: 700 11px var(--mono); }
.motion-path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 8 7; opacity: .75; }
.tool-current { fill: #b8f8ff; stroke: var(--cyan); stroke-width: 1.4; filter: url(#glow); }
.tool-target { fill: rgba(241, 180, 76, .08); stroke: var(--amber); stroke-width: 1.7; }
.z-gauge line { stroke: #536b79; stroke-width: 2; }
.z-gauge .surface-line { stroke: var(--amber); stroke-dasharray: 4 4; }
#zMarker path { fill: var(--cyan); }
#zMarker text { fill: var(--cyan); font: 700 11px var(--mono); }
.position-strip { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); background: #0a121a; }
.position-strip > div { min-width: 0; }
.position-strip > div:last-child { text-align: right; }
.position-strip span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.position-strip strong { display: block; overflow: hidden; margin-top: 3px; color: #dffbff; font: 700 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.position-arrow { color: var(--cyan) !important; font-size: 18px !important; }

.control-card { padding: 14px; margin-bottom: 13px; }
.control-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.control-title-row > div:first-child { display: grid; gap: 3px; }
.control-title-row strong { font-size: 13px; }
.motion-toggle { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #081019; }
.motion-toggle button { min-width: 48px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 800 13px var(--mono); }
.motion-toggle button.is-active { color: #051218; background: var(--cyan); }
.axis-list { display: grid; gap: 3px; padding-top: 8px; }
.axis-row { display: grid; grid-template-columns: minmax(100px, .9fr) minmax(90px, 1.2fr) minmax(92px, .75fr); gap: 9px; align-items: center; min-height: 58px; border-bottom: 1px solid rgba(38, 55, 68, .6); }
.axis-row:last-child { border-bottom: 0; }
.axis-row label { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 11px; }
.axis-row label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axis-badge { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 850 13px var(--mono); }
.axis-x { color: #82edff; background: rgba(34, 199, 223, .13); }
.axis-y { color: #9cebc5; background: rgba(72, 213, 151, .12); }
.axis-z { color: #ffc96e; background: rgba(241, 180, 76, .13); }
.axis-f { color: #d0b6ff; background: rgba(171, 125, 255, .13); }
input[type="range"] { width: 100%; height: 20px; margin: 0; accent-color: var(--cyan); }
.number-unit { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; background: #081019; }
.number-unit input { width: 54px; min-width: 0; padding: 9px 4px 9px 8px; border: 0; outline: 0; color: var(--text); background: transparent; font: 700 13px var(--mono); }
.number-unit span { display: grid; place-items: center; padding: 0 7px 0 3px; color: var(--muted); font-size: 9px; white-space: nowrap; }

.code-card { overflow: hidden; margin-bottom: 13px; }
.code-head { display: flex; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.code-head span:last-child { color: #d0b6ff; }
.code-card code { display: block; padding: 7px 14px 0; color: #e7f2f5; font: 700 14px/1.5 var(--mono); }
.code-card code:nth-of-type(1) { padding-top: 14px; color: #91a5b0; }
.line-no { color: #6f8795; }
.code-g { color: var(--cyan); }
.code-f { color: #d0b6ff; }
.code-card p { margin: 11px 14px 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.alert { display: flex; gap: 11px; align-items: center; padding: 12px 13px; margin-bottom: 13px; border: 1px solid; border-radius: 13px; }
.alert svg { flex: 0 0 auto; width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alert div { display: grid; gap: 2px; }
.alert strong { font-size: 12px; }
.alert span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.alert.is-safe { border-color: rgba(72, 213, 151, .3); color: var(--green); background: rgba(72, 213, 151, .08); }
.alert.is-work { border-color: rgba(241, 180, 76, .38); color: var(--amber); background: rgba(241, 180, 76, .09); }
.alert.is-danger { border-color: rgba(255, 109, 109, .45); color: var(--red); background: rgba(255, 109, 109, .1); }
.shake { animation: shake .35s linear; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.primary-button, .secondary-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 49px; border-radius: 12px; font-weight: 850; }
.primary-button { border: 1px solid #65eaf8; color: #041116; background: linear-gradient(180deg, #4bd9ea, #1bb9d1); box-shadow: 0 10px 25px rgba(34, 199, 223, .18); }
.primary-button:disabled { opacity: .65; }
.primary-button svg { width: 20px; fill: currentColor; }
.primary-button.is-running svg { animation: pulse .6s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.22); } }
.secondary-button { border: 1px solid rgba(34, 199, 223, .42); color: #bdf8ff; background: var(--cyan-soft); }

.analyzer-card { padding: 15px; margin-bottom: 14px; }
.analyzer-card label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.analyzer-card textarea { width: 100%; resize: vertical; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; color: #dffbff; background: #071018; font: 750 17px/1.5 var(--mono); text-transform: uppercase; }
.sample-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 13px; }
.sample-row button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #0a121a; font-size: 10px; }
.analysis-output { display: grid; gap: 9px; margin-bottom: 20px; }
.token-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(15, 24, 34, .88); }
.token-word { min-width: 53px; padding: 8px; border-radius: 8px; color: #071015; background: var(--cyan); text-align: center; font: 850 13px var(--mono); }
.token-function .token-word { background: var(--amber); }
.token-feed .token-word { background: #c0a0ff; }
.token-unknown .token-word { color: white; background: #7e5260; }
.token-card strong { font-size: 13px; }
.token-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.analysis-summary, .empty-analysis { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.lesson-card { padding: 14px; }
.lesson-card-head { display: grid; gap: 4px; margin-bottom: 10px; }
.lesson-number { color: var(--cyan); font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.program-list { display: grid; }
.program-list button { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(90px, .75fr); gap: 10px; align-items: center; padding: 12px 5px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }
.program-list code { overflow: hidden; color: #c9f9ff; font: 700 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.program-list span { color: var(--muted); font-size: 10px; text-align: right; }

.quiz-card { padding: 15px; margin-bottom: 14px; }
.quiz-progress { display: flex; justify-content: space-between; color: var(--cyan); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.quiz-card h3 { margin: 15px 0; font-size: 19px; }
.quiz-options { display: grid; gap: 8px; }
.quiz-options button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: #09121a; text-align: left; }
.quiz-options button span { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); background: #17232c; font: 800 11px var(--mono); }
.quiz-options button.is-correct { border-color: var(--green); background: rgba(72, 213, 151, .09); }
.quiz-options button.is-wrong { border-color: var(--red); background: rgba(255, 109, 109, .08); }
.quiz-feedback { padding: 11px; margin: 10px 0; border-radius: 10px; color: var(--muted); background: #09121a; font-size: 11px; line-height: 1.5; }
.quiz-feedback.is-correct { color: #a9ecca; }
.quiz-feedback.is-wrong { color: #ffc3c3; }
.reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.reference-grid article { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(15, 24, 34, .86); }
.ref-code { display: inline-block; margin-bottom: 8px; color: var(--cyan); font: 850 13px var(--mono); }
.reference-grid strong { display: block; font-size: 12px; }
.reference-grid p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.note-card { display: flex; gap: 12px; padding: 14px; border-color: rgba(241, 180, 76, .28); }
.note-card svg { flex: 0 0 auto; width: 25px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.note-card strong { color: var(--amber); font-size: 12px; }
.note-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); padding: 7px max(12px, calc((100vw - 720px) / 2)) calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(8, 13, 19, .97); backdrop-filter: blur(18px); }
.bottom-nav button { display: grid; justify-items: center; gap: 4px; min-height: 55px; padding: 6px; border: 0; border-radius: 12px; color: #748895; background: transparent; font-size: 9px; font-weight: 750; }
.bottom-nav svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav button.is-active { color: var(--cyan); background: rgba(34, 199, 223, .08); }
.toast { position: fixed; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); left: 18px; z-index: 40; max-width: 440px; margin: auto; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 11px; color: #e8f8fb; background: #13222d; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(14px); transition: .22s ease; pointer-events: none; text-align: center; font-size: 11px; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 400px) {
  .install-banner { grid-template-columns: auto minmax(0, 1fr); }
  .install-button { grid-column: 1 / -1; }
  .axis-row { grid-template-columns: minmax(84px, .8fr) minmax(66px, 1fr) 88px; gap: 6px; }
  .axis-row label { gap: 5px; font-size: 10px; }
  .axis-badge { width: 25px; height: 25px; }
  .number-unit input { width: 48px; padding-left: 6px; }
  .legend { display: none; }
  .reference-grid { grid-template-columns: 1fr; }
}

@media (min-width: 680px) {
  .screen { padding-right: 24px; padding-left: 24px; }
  .machine-view { max-height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}