:root {
  --paper: #f4efe4;
  --panel: #fffdf8;
  --ink: #14211d;
  --muted: #68766f;
  --line: #d5d8cf;
  --green: #05a77a;
  --green-dark: #087357;
  --green-soft: #dcf5eb;
  --blue: #3f73f1;
  --blue-dark: #2857b8;
  --blue-soft: #e5edff;
  --coral: #f36c52;
  --coral-dark: #b74432;
  --coral-soft: #ffe0d7;
  --yellow: #f4c64e;
  --yellow-dark: #846110;
  --yellow-soft: #fff1c4;
  --violet: #7650dd;
  --violet-soft: #eee8ff;
  --shadow: 0 24px 64px rgb(31 42 36 / 12%);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 0 4%, rgb(5 167 122 / 14%), transparent 24%),
    radial-gradient(circle at 100% 5%, rgb(243 108 82 / 16%), transparent 28%),
    var(--paper);
  font-family: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 4px solid rgb(63 115 241 / 24%);
  outline-offset: 3px;
}
.page { width: min(1560px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 44px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, .75fr);
  align-items: end;
  gap: 12px 28px;
  padding: 0 4px 24px;
}
.hero-title { grid-column: 1 / -1; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; color: var(--green-dark); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.eyebrow i { position: relative; width: 29px; height: 21px; border: 2px solid currentColor; border-radius: 4px; }
.eyebrow i::before { position: absolute; top: 8px; right: -10px; width: 17px; height: 3px; background: var(--coral); border-radius: 3px; content: ""; }
.eyebrow i::after { position: absolute; top: 5px; right: -12px; width: 8px; height: 8px; border-top: 3px solid var(--coral); border-right: 3px solid var(--coral); rotate: 45deg; content: ""; }
h1 { margin: 0; font-family: "Arial Black", Inter, sans-serif; font-size: clamp(50px, 6vw, 90px); line-height: .95; letter-spacing: normal; }
h1 span { color: var(--coral-dark); }
.lead { margin: 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 23px); font-weight: 800; line-height: 1.5; }
.lead strong { color: var(--ink); }
.hero-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.support-badge, .utility-button { display: inline-flex; align-items: center; min-height: 44px; border-radius: 13px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.support-badge { gap: 8px; padding: 0 14px; color: var(--green-dark); background: var(--green-soft); border: 1px solid #98d9c4; }
.support-badge i { width: 9px; height: 9px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px rgb(5 167 122 / 13%); }
.utility-button { justify-content: center; padding: 0 15px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.utility-button--dark { color: #fff; background: var(--ink); border-color: var(--ink); }

.main-lab { display: grid; grid-template-columns: minmax(390px, .82fr) minmax(0, 1.18fr); gap: 18px; align-items: stretch; }
.form-card, .payload-card, .concept-card, .quiz-card, .code-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow); }
.form-card, .payload-card { min-width: 0; }
.panel-head { display: flex; align-items: center; min-height: 78px; gap: 12px; padding: 16px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.panel-head > div { min-width: 0; }
.panel-head p, .code-head span, .quiz-title p { margin: 0 0 3px; color: var(--coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.panel-head h2, .code-head h2, .quiz-title h2 { margin: 0; font-size: clamp(18px, 1.45vw, 25px); line-height: 1.15; }
.section-mark { display: grid; flex: 0 0 47px; width: 47px; height: 47px; place-items: center; color: #fff; border-radius: 15px; font-size: 11px; font-weight: 900; }
.section-mark--green { background: var(--green); }
.section-mark--blue { background: var(--blue); }
.section-mark--coral { background: var(--coral); }

.form-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #f0f1ec; border-bottom: 1px solid var(--line); }
.form-toolbar > div:first-child { display: grid; gap: 2px; }
.form-toolbar span { color: var(--green-dark); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.form-toolbar b { font-size: 13px; }
.payload-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 150px; padding: 4px; background: #e1e3dd; border: 1px solid #c9cdc5; border-radius: 12px; }
.payload-switch button { z-index: 1; min-height: 34px; padding: 0 12px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 900; }
.payload-switch i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; border-radius: 8px; box-shadow: 0 3px 8px rgb(31 42 36 / 10%); transition: translate .35s var(--ease); }
.payload-switch button[data-payload-mode="on"][aria-pressed="true"] ~ i { translate: 100% 0; }

.browser-frame { margin: 18px; overflow: hidden; background: #f7f8f4; border: 1px solid var(--line); border-radius: 18px; }
.browser-bar { display: flex; align-items: center; gap: 5px; height: 31px; padding: 0 11px; background: #e7e7e1; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 7px; height: 7px; background: var(--coral); border-radius: 50%; }
.browser-bar i:nth-child(2) { background: var(--yellow); }
.browser-bar i:nth-child(3) { background: var(--green); }
.browser-bar span { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 800; }
#projectForm { display: grid; gap: 12px; padding: 17px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#projectForm label:not(.check-field) { display: grid; gap: 6px; }
#projectForm label > span { font-size: 11px; font-weight: 900; }
#projectForm input:not([type="checkbox"]), #projectForm select { width: 100%; min-height: 43px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid #bfc5bd; border-radius: 11px; font-size: 12px; }
#projectForm select { appearance: none; padding-right: 3em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2314211d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 1em center; background-repeat: no-repeat; background-size: 1em auto; }
.check-field { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; background: var(--green-soft); border: 1px solid #a3dcc9; border-radius: 12px; }
.check-field input { flex: 0 0 19px; width: 19px; height: 19px; margin: 0; accent-color: var(--green); }
.check-field span { display: grid; gap: 2px; }
.check-field b { font-size: 11px; }
.check-field small { color: var(--green-dark); font-size: 10px; font-weight: 700; }
.submit-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.submit-button { position: relative; display: grid; min-width: 0; min-height: 80px; place-items: center; align-content: center; gap: 3px; padding: 9px 5px; border: 1px solid; border-radius: 13px; cursor: pointer; transition: translate .2s var(--ease), box-shadow .2s, filter .2s; }
.submit-button:hover { translate: 0 -2px; box-shadow: 0 8px 16px rgb(31 42 36 / 10%); }
.submit-button i { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid currentColor; border-radius: 8px; font-size: 11px; font-style: normal; font-weight: 900; }
.submit-button span { overflow: hidden; max-width: 100%; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.submit-button small { font-size: 10px; font-weight: 800; white-space: nowrap; }
.submit-button--save { color: var(--green-dark); background: var(--green-soft); border-color: #84ceb6; }
.submit-button--preview { color: var(--blue-dark); background: var(--blue-soft); border-color: #a7bbf2; }
.submit-button--publish { color: #fff; background: var(--ink); border-color: var(--ink); }
.submit-button[data-pressed="true"] { filter: saturate(1.25); box-shadow: 0 0 0 4px rgb(244 198 78 / 45%), 0 12px 24px rgb(31 42 36 / 16%); translate: 0 -3px; }
.form-card[data-payload-mode="off"] .submit-button small { opacity: .42; text-decoration: line-through; }

.payload-count { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; padding: 8px 11px; color: var(--blue-dark); background: var(--blue-soft); border-radius: 999px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.payload-count b { font-size: 16px; }
.payload-stage { min-height: 370px; padding: 22px; background-image: linear-gradient(#e7e8e2 1px, transparent 1px), linear-gradient(90deg, #e7e8e2 1px, transparent 1px); background-size: 24px 24px; }
.request-line { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.request-line i { height: 2px; flex: 1; background: #cbd0c9; border-radius: 2px; }
.request-line span { color: var(--blue-dark); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.payload-terminal { overflow: hidden; background: #101a16; border: 1px solid #101a16; border-radius: 18px; box-shadow: 10px 12px 0 rgb(20 33 29 / 10%); }
.terminal-top { display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 0 15px; color: #fff; border-bottom: 1px solid rgb(255 255 255 / 13%); }
.terminal-top span { padding: 6px 8px; color: #092b21; background: #8ee0c5; border-radius: 8px; font-size: 10px; font-weight: 900; }
.terminal-top code { font: 800 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.terminal-top b { margin-left: auto; color: #aab9b1; font-size: 10px; }
.payload-rows { display: grid; min-height: 225px; padding: 10px; }
.payload-row { display: grid; grid-template-columns: minmax(90px, .44fr) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 42px; padding: 8px 10px; color: #d8e2dd; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.payload-row:last-child { border-bottom: 0; }
.payload-row code { overflow: hidden; font: 800 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.payload-row span { overflow: hidden; color: #fff; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.payload-row--submitter { margin-top: 5px; color: #fff; background: linear-gradient(90deg, rgb(63 115 241 / 38%), rgb(118 80 221 / 28%)); border: 1px solid #708fe4; border-radius: 10px; animation: payloadIn .52s var(--ease) both; }
.payload-row--submitter code::before { margin-right: 7px; color: #9bb4ff; content: "PRESSED"; font-family: Inter, sans-serif; font-size: 10px; }
.payload-row--missing { margin-top: 5px; color: #d6ada3; background: rgb(243 108 82 / 12%); border: 1px dashed #955141; border-radius: 10px; }
.payload-message { display: flex; align-items: center; gap: 13px; margin-top: 17px; padding: 13px 15px; background: rgb(255 253 248 / 96%); border: 1px solid var(--line); border-radius: 13px; }
.payload-message > span { flex: 0 0 auto; color: var(--green-dark); font-size: 10px; font-weight: 900; }
.payload-message p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.55; }
.payload-message strong { color: var(--ink); }
.submitter-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 17px; }
.submitter-strip > div { display: flex; min-width: 0; min-height: 58px; align-items: end; justify-content: space-between; gap: 7px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.submitter-strip span { color: var(--blue-dark); font-size: 10px; font-weight: 900; }
.submitter-strip b { overflow: hidden; font-size: clamp(11px, 1vw, 15px); text-align: right; text-overflow: ellipsis; }
.payload-card[data-state="sent"] .payload-terminal { animation: terminalPulse .55s var(--ease); }

.concept-card { margin-top: 18px; }
.panel-head--compact { min-height: 73px; }
.same-name-badge { margin-left: auto; padding: 8px 11px; color: var(--coral-dark); background: var(--coral-soft); border-radius: 999px; font: 900 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.concept-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px; }
.concept-flow article { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px; background: #f4f5f1; border: 1px solid var(--line); border-radius: 14px; }
.concept-flow article > span { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: var(--green-dark); background: var(--green-soft); border-radius: 11px; font-size: 10px; font-weight: 900; }
.concept-flow article div { display: grid; gap: 4px; }
.concept-flow b { font-size: 13px; }
.concept-flow small { color: var(--muted); font-size: 10px; font-weight: 700; }
.concept-flow > i { color: var(--coral); font-size: 22px; font-style: normal; font-weight: 900; }
.concept-flow .concept-result { color: #fff; background: var(--ink); border-color: var(--ink); }
.concept-flow .concept-result > span { color: #fff; background: var(--blue); }
.concept-flow .concept-result small { color: #b9c5bf; }

.quiz-card { position: relative; margin-top: 18px; background: #17152a; border-color: #17152a; }
.quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 86px; padding: 16px 20px; color: #fff; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.quiz-title { display: flex; align-items: center; gap: 12px; }
.quiz-title p { color: #f9cf67; }
.bonus-mark { display: grid; flex: 0 0 49px; width: 49px; height: 49px; place-items: center; color: #342102; background: var(--yellow); border-radius: 15px; font-size: 20px; }
.quiz-score { display: flex; align-items: baseline; gap: 4px; padding: 10px 13px; color: #c9d4ff; background: #252442; border: 1px solid #3a3960; border-radius: 13px; }
.quiz-score span { margin-right: 6px; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.quiz-score b { color: #fff; font-size: 22px; }
.quiz-score small { font-size: 11px; font-weight: 800; }
.quiz-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .55fr); gap: 14px; padding: 16px; }
.quiz-game { min-width: 0; padding: 18px; color: var(--ink); background: var(--panel); border-radius: 18px; }
.quiz-progress { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz-progress > span { color: var(--violet); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
#quizDots { display: flex; gap: 6px; }
#quizDots i { width: 22px; height: 6px; background: #dad8e2; border-radius: 999px; }
#quizDots i[data-state="current"] { background: var(--violet); }
#quizDots i[data-state="correct"] { background: var(--green); }
#quizDots i[data-state="wrong"] { background: var(--coral); }
.quiz-question { min-height: 94px; padding: 22px 0 16px; }
.quiz-question span { color: var(--green-dark); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.quiz-question h3 { max-width: 760px; margin: 8px 0 0; font-size: clamp(19px, 1.8vw, 29px); line-height: 1.35; }
.quiz-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.quiz-choice { position: relative; display: grid; min-height: 96px; align-content: center; gap: 7px; padding: 13px; text-align: left; background: #f3f2f7; border: 2px solid #dddbe5; border-radius: 15px; cursor: pointer; transition: translate .2s var(--ease), border-color .2s, background .2s; }
.quiz-choice:hover { translate: 0 -2px; border-color: #9d8de0; }
.quiz-choice > span { display: grid; width: 26px; height: 26px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 8px; font-size: 10px; font-weight: 900; }
.quiz-choice b { font-size: 12px; line-height: 1.35; }
.quiz-choice small { color: var(--muted); font-size: 10px; font-weight: 800; }
.quiz-choice[data-result="correct"] { background: var(--green-soft); border-color: var(--green); }
.quiz-choice[data-result="wrong"] { background: var(--coral-soft); border-color: var(--coral); }
.quiz-choice:disabled { cursor: default; opacity: 1; }
.quiz-feedback { display: flex; align-items: center; gap: 13px; min-height: 57px; margin-top: 11px; padding: 10px 13px; background: var(--yellow-soft); border: 1px solid #e7c563; border-radius: 13px; }
.quiz-feedback span { flex: 0 0 auto; color: var(--yellow-dark); font-size: 10px; font-weight: 900; }
.quiz-feedback p { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.45; }
.quiz-payload { position: relative; overflow: hidden; min-height: 340px; padding: 20px; color: #fff; background: linear-gradient(155deg, #2e2759, #1d1b38 68%); border: 1px solid #464173; border-radius: 18px; }
.arcade-orbit { position: relative; width: 120px; height: 120px; margin: 4px auto 24px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; }
.arcade-orbit::before, .arcade-orbit::after { position: absolute; inset: 20px; border: 1px dashed rgb(255 255 255 / 19%); border-radius: 50%; content: ""; }
.arcade-orbit::after { inset: 39px; border-style: solid; }
.arcade-orbit i { position: absolute; width: 12px; height: 12px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 18px currentColor; }
.arcade-orbit i:nth-child(1) { top: 8px; left: 53px; }
.arcade-orbit i:nth-child(2) { right: 11px; bottom: 27px; background: var(--green); }
.arcade-orbit i:nth-child(3) { bottom: 20px; left: 14px; background: var(--yellow); }
.arcade-orbit b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; }
.quiz-payload > span { color: #b7c6ff; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.quiz-payload h3 { overflow: hidden; margin: 8px 0 10px; color: #fff; font: 900 clamp(18px, 1.5vw, 24px) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; }
.quiz-payload > p { margin: 0; color: #bcb9d3; font-size: 11px; font-weight: 700; line-height: 1.6; }
.quiz-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 19px; }
.quiz-stats span { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; padding: 10px; color: #aaa6cb; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 10%); border-radius: 10px; font-size: 10px; font-weight: 900; }
.quiz-stats b { color: #fff; font-size: 16px; }
#quizRestart { width: 100%; min-height: 43px; margin-top: 12px; color: #271a02; background: var(--yellow); border: 0; border-radius: 11px; cursor: pointer; font-size: 11px; font-weight: 900; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: 42%; left: 70%; width: 9px; height: 15px; background: var(--yellow); border-radius: 3px; animation: confetti 850ms var(--ease) both; }
.confetti i:nth-child(3n) { background: var(--coral); }
.confetti i:nth-child(3n + 1) { background: var(--green); }

.code-card { margin-top: 18px; color: #f8fbf9; background: #101a16; border-color: #101a16; }
.code-head { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 14px; padding: 15px 19px; border-bottom: 1px solid rgb(255 255 255 / 13%); }
.code-head span { color: var(--yellow); }
.code-head button { min-height: 41px; padding: 0 14px; color: #fff; background: var(--coral); border: 0; border-radius: 11px; cursor: pointer; font-size: 10px; font-weight: 900; }
.code-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 14px; padding: 15px; }
.code-layout > pre { min-height: 330px; margin: 0; overflow: auto; padding: 18px; background: #07100c; border: 1px solid rgb(255 255 255 / 12%); border-radius: 15px; }
.code-layout code { color: #e4eee8; font: 700 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.code-layout aside { padding: 19px; background: #1c273f; border: 1px solid #35466c; border-radius: 15px; }
.code-layout aside > span { color: #9db6ff; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.code-layout aside h3 { margin: 10px 0 14px; font-size: 23px; line-height: 1.22; }
.code-result { display: grid; gap: 7px; margin-bottom: 14px; }
.code-result code { overflow: hidden; padding: 9px 10px; color: #bcc9c2; background: #101728; border-radius: 9px; font-size: 10px; text-overflow: ellipsis; }
.code-result .code-result--active { color: #fff; background: #294ea5; border: 1px solid #5479dc; }
.code-layout aside p { margin: 0; color: #b8c3bd; font-size: 10px; font-weight: 700; line-height: 1.6; }
.toast { position: fixed; z-index: 30; right: 22px; bottom: 22px; padding: 12px 16px; color: #fff; background: var(--ink); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; translate: 0 12px; pointer-events: none; font-size: 11px; font-weight: 900; transition: .25s var(--ease); }
.toast[data-visible="true"] { opacity: 1; translate: 0 0; }

@keyframes payloadIn { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes terminalPulse { 45% { box-shadow: 0 0 0 5px rgb(63 115 241 / 22%), 10px 12px 0 rgb(20 33 29 / 10%); } }
@keyframes confetti {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; scale: .5; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: var(--tx, 60px) var(--ty, -120px); rotate: 270deg; scale: 1; }
}

@media (max-width: 1050px) {
  .main-lab { grid-template-columns: 1fr; }
  .payload-stage { min-height: 0; }
  .quiz-layout { grid-template-columns: 1fr; }
  .quiz-payload { min-height: 0; }
  .arcade-orbit { float: right; width: 92px; height: 92px; margin: 0 0 12px 18px; }
  .code-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .page { width: min(100% - 20px, 620px); padding: 17px 0 28px; }
  .hero { grid-template-columns: 1fr; padding: 0 4px 18px; }
  .hero-title { grid-column: auto; }
  h1 { font-size: clamp(42px, 13vw, 62px); }
  .hero-actions { justify-content: stretch; flex-wrap: wrap; }
  .support-badge { display: none; }
  .utility-button { flex: 1; }
  .panel-head { min-height: 73px; padding: 14px; }
  .section-mark { flex-basis: 43px; width: 43px; height: 43px; }
  .form-toolbar { align-items: stretch; flex-direction: column; }
  .payload-switch { width: 100%; }
  .browser-frame { margin: 14px; }
  .field-grid { grid-template-columns: 1fr; }
  .submit-actions { grid-template-columns: 1fr; }
  .submit-button { grid-template-columns: 30px 1fr auto; min-height: 58px; text-align: left; }
  .submit-button span { justify-self: start; }
  .payload-stage { padding: 14px; }
  .payload-message { align-items: flex-start; flex-direction: column; gap: 5px; }
  .submitter-strip { grid-template-columns: 1fr 1fr; padding: 14px; }
  .concept-flow { grid-template-columns: 1fr; }
  .concept-flow > i { rotate: 90deg; justify-self: center; }
  .same-name-badge { display: none; }
  .quiz-head { align-items: flex-start; padding: 14px; }
  .quiz-score span { display: none; }
  .quiz-layout { padding: 10px; }
  .quiz-game { padding: 14px; }
  .quiz-choices { grid-template-columns: 1fr; }
  .quiz-choice { grid-template-columns: 30px 1fr; min-height: 66px; }
  .quiz-choice small { grid-column: 2; }
  .quiz-feedback { align-items: flex-start; flex-direction: column; gap: 5px; }
  .arcade-orbit { display: none; }
  .code-head { padding: 14px; }
  .code-layout { padding: 10px; }
}

@media (max-width: 410px) {
  .panel-head h2, .quiz-title h2 { font-size: 17px; }
  .payload-count { padding: 7px 8px; }
  .payload-count b { font-size: 14px; }
  .payload-row { grid-template-columns: 78px minmax(0, 1fr); }
  .quiz-score { padding: 8px 10px; }
}

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