.cvl-page {
  --cvl-ink:#15333a; --cvl-muted:#60777a; --cvl-deep:#042936; --cvl-teal:#079d91; --cvl-mint:#51dfc0;
  --cvl-cyan:#43d5e6; --cvl-coral:#ff795f; --cvl-yellow:#ffd65d; --cvl-line:rgba(10,95,94,.14);
  color:var(--cvl-ink); container:cylinder-volume / inline-size;
}
.cvl-page *, .cvl-page *::before, .cvl-page *::after { box-sizing:border-box; }
.cvl-page button, .cvl-page input { font:inherit; }
.cvl-page button { cursor:pointer; }
.cvl-page button:disabled { cursor:default; }
.cvl-page img, .cvl-page svg { display:block; max-width:100%; }
.cvl-page button:focus-visible, .cvl-page input:focus-visible, .cvl-page [tabindex]:focus-visible { outline:4px solid rgba(255,214,93,.92); outline-offset:3px; }

.cvl-hero { position:relative; min-height:calc(100svh - var(--topbar) - 38px); overflow:hidden; border:1px solid rgba(255,255,255,.55); border-radius:36px; color:#fff; background:var(--cvl-deep); box-shadow:0 28px 78px rgba(2,45,48,.25); isolation:isolate; }
.cvl-hero-bg, .cvl-hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.cvl-hero-bg { object-fit:cover; object-position:center; }
.cvl-hero-shade { z-index:1; background:linear-gradient(90deg,rgba(3,28,39,.98) 0%,rgba(3,38,49,.94) 48%,rgba(3,38,49,.45) 78%,rgba(3,38,49,.12)),linear-gradient(0deg,rgba(2,26,35,.6),transparent 52%); }
.cvl-game-shell { position:relative; z-index:2; width:min(1050px,94%); padding:clamp(18px,2.2vw,31px); }
.cvl-game-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:11px; }
.cvl-game-heading > div > span { display:inline-flex; padding:5px 11px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#fff0a5; background:rgba(255,255,255,.09); font-size:10px; font-weight:900; letter-spacing:.08em; }
.cvl-game-heading h1 { margin:7px 0 4px; color:#fff; font-size:clamp(34px,4vw,58px); line-height:1; letter-spacing:-.05em; text-shadow:0 6px 18px rgba(0,0,0,.25); }
.cvl-game-heading p { margin:0; color:rgba(255,255,255,.82); font-size:clamp(12px,1.2vw,16px); line-height:1.5; }
.cvl-game-heading > button { flex:0 0 auto; min-height:43px; padding:0 15px; border:1px solid rgba(255,255,255,.2); border-radius:14px; color:#fff; background:rgba(255,255,255,.1); font-size:10px; font-weight:850; backdrop-filter:blur(10px); }
.cvl-hud { display:grid; grid-template-columns:.7fr 1.25fr 1fr .7fr .8fr; gap:6px; margin-bottom:8px; }
.cvl-hud span { min-width:0; padding:7px 9px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(3,25,35,.62); backdrop-filter:blur(10px); }
.cvl-hud small, .cvl-hud b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cvl-hud small { color:#93b7b8; font-size:8px; font-weight:850; letter-spacing:.07em; }
.cvl-hud b { margin-top:2px; color:#fff; font-size:14px; font-variant-numeric:tabular-nums; }
#cvl-enemy-hp { color:#ff9a84; } #cvl-player-hp { color:#68ead2; } #cvl-combo { color:var(--cvl-yellow); }
.cvl-game-grid { display:grid; grid-template-columns:minmax(420px,1.38fr) minmax(285px,.62fr); gap:9px; }
.cvl-arena, .cvl-console { min-width:0; border:1px solid rgba(255,255,255,.14); border-radius:23px; background:rgba(2,25,36,.77); backdrop-filter:blur(15px); }
.cvl-arena { padding:7px 10px 9px; overflow:hidden; }
#cvl-battle-svg { width:100%; max-height:405px; }
.cvl-arena-floor { fill:rgba(8,79,82,.5); stroke:rgba(91,237,213,.2); stroke-width:2; }
.cvl-foe circle { fill:rgba(255,121,95,.14); stroke:#ff8065; stroke-width:3; stroke-dasharray:7 7; }
.cvl-foe text { font-size:50px; text-anchor:middle; }
.cvl-foe path { fill:none; stroke:rgba(255,121,95,.5); stroke-width:7; stroke-dasharray:10 13; animation:cvl-flow 1.3s linear infinite; }
.cvl-cylinder .glass { fill:url(#cvl-glass); stroke:#63e5e2; stroke-width:4; }
.cvl-cylinder .rim { fill:rgba(223,255,255,.72); stroke:#84f4e9; stroke-width:4; }
.cvl-cylinder .liquid { fill:url(#cvl-liquid); opacity:.82; filter:url(#cvl-glow); }
.cvl-cylinder .liquid-top { fill:#fff37b; stroke:#fff9b5; stroke-width:2; opacity:.93; }
.cvl-cylinder .base { fill:rgba(32,187,181,.7); stroke:#63e5e2; stroke-width:4; }
.cvl-cylinder .layer-line { fill:none; stroke:rgba(255,255,255,.56); stroke-width:2; }
.cvl-cylinder .radius-mark, .cvl-cylinder .height-mark { stroke:#fff; stroke-width:2; stroke-dasharray:5 5; }
.cvl-cylinder .mark-label { fill:#fff; font-size:14px; font-weight:900; paint-order:stroke; stroke:#063948; stroke-width:5; text-anchor:middle; }
.cvl-energy-shot { opacity:0; }
.cvl-energy-shot path { fill:none; stroke:#55e5d0; stroke-width:12; stroke-linecap:round; }
.cvl-energy-shot circle { fill:#fff16b; }
.shot .cvl-energy-shot { animation:cvl-shot .7s ease; }
.hit #cvl-battle-can { transform-origin:center; animation:cvl-hit .45s ease; }
.victory #cvl-battle-can { transform-origin:center; animation:cvl-win .8s ease infinite alternate; }
.cvl-arena-rule { fill:#c9fff2; font-size:17px; font-weight:900; text-anchor:middle; }
.cvl-part-key { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 13px; color:#9dbbbc; font-size:9px; }
.cvl-part-key span { display:inline-flex; align-items:center; gap:4px; }
.cvl-part-key i { width:9px; height:9px; border-radius:50%; }
.cvl-part-key .side { background:var(--cvl-mint); } .cvl-part-key .lid { background:var(--cvl-yellow); } .cvl-part-key .base { background:var(--cvl-cyan); }
.cvl-console { padding:12px; }
.cvl-enemy-card { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:8px; padding:8px 10px; border-radius:15px; background:rgba(255,121,95,.1); }
.cvl-enemy-card > span { font-size:28px; } .cvl-enemy-card small { color:#ffad99; font-size:8px; font-weight:900; } .cvl-enemy-card h2 { margin:2px 0 0; color:#fff; font-size:14px; }
.cvl-size-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:7px 0; }
.cvl-size-cards span { padding:7px 4px; border:1px solid rgba(255,255,255,.1); border-radius:11px; text-align:center; background:rgba(255,255,255,.06); }
.cvl-size-cards small, .cvl-size-cards b { display:block; } .cvl-size-cards small { color:#96b8ba; font-size:8px; } .cvl-size-cards b { margin-top:2px; color:#fff; font-size:12px; }
.cvl-mission { padding:8px 10px; border:1px solid rgba(81,223,192,.14); border-radius:13px; text-align:center; background:rgba(16,112,101,.24); }
.cvl-mission span, .cvl-mission strong { display:block; } .cvl-mission span { color:#afd0cf; font-size:9px; } .cvl-mission strong { margin-top:3px; color:#fff; font-size:13px; }
.cvl-timer { display:flex; align-items:center; gap:8px; margin:7px 1px; } .cvl-timer span { color:#9ababb; font-size:8px; } .cvl-timer i { flex:1; height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); } .cvl-timer b { display:block; width:100%; height:100%; background:linear-gradient(90deg,#ff8062,#ffe06d,#4ce5c4); }
.cvl-answer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cvl-answer-grid button { min-height:57px; display:grid; place-content:center; gap:2px; border:1px solid rgba(255,255,255,.14); border-radius:13px; color:#fff; background:rgba(255,255,255,.07); transition:.18s; }
.cvl-answer-grid button:hover:not(:disabled) { transform:translateY(-2px); background:rgba(255,255,255,.14); }
.cvl-answer-grid kbd { color:#82a6a8; font:700 8px/1 sans-serif; } .cvl-answer-grid b { font-size:16px; } .cvl-answer-grid small { color:#92b1b2; font-size:7px; }
.cvl-answer-grid button.correct { color:#07373a; background:#64e4c6; } .cvl-answer-grid button.wrong { color:#ffb3a2; border-color:#ff8062; background:rgba(255,105,75,.15); }
.cvl-formula-tip { margin:6px 0 0; color:#96b4b5; font-size:9px; text-align:center; } .cvl-formula-tip b { color:#ffe58d; }
.cvl-feedback { min-height:54px; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:7px; margin-top:6px; padding:7px 9px; border-radius:13px; color:#bdd2d1; background:rgba(255,255,255,.07); }
.cvl-feedback > span { font-size:23px; text-align:center; } .cvl-feedback p { margin:0; font-size:9px; line-height:1.45; } .cvl-feedback b { display:block; color:#fff; font-size:10px; } .cvl-feedback.success { color:#c6f9eb; background:rgba(43,198,154,.18); } .cvl-feedback.danger { color:#ffd3c9; background:rgba(242,99,72,.17); }
.cvl-restart { width:100%; min-height:41px; margin-top:7px; border:0; border-radius:13px; color:#15393a; background:linear-gradient(135deg,#ffe266,#ffbc54); font-size:11px; font-weight:900; }
@keyframes cvl-flow { to { stroke-dashoffset:-46; } } @keyframes cvl-shot { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0;transform:translate(-100px,-70px)} } @keyframes cvl-hit { 30%{transform:translateX(-9px)} 60%{transform:translateX(8px)} } @keyframes cvl-win { to{transform:translateY(-5px) scale(1.02);filter:brightness(1.15)} }

.cvl-route { position:sticky; z-index:7; top:calc(var(--topbar) + 7px); display:flex; align-items:center; gap:6px; margin:13px auto 0; padding:7px; overflow-x:auto; border:1px solid var(--cvl-line); border-radius:17px; background:rgba(255,253,247,.93); box-shadow:0 9px 26px rgba(8,67,67,.09); backdrop-filter:blur(15px); scrollbar-width:none; }
.cvl-route::-webkit-scrollbar { display:none; } .cvl-route > span { flex:0 0 auto; padding:0 9px; color:var(--cvl-muted); font-size:9px; font-weight:800; } .cvl-route button { flex:0 0 auto; min-height:38px; padding:0 12px; border:1px solid transparent; border-radius:11px; color:#235d5c; background:transparent; font-size:10px; font-weight:850; }
.cvl-section { scroll-margin-top:calc(var(--topbar) + 76px); margin-top:20px; padding:clamp(28px,4.6vw,58px); overflow:hidden; border:1px solid var(--cvl-line); border-radius:34px; background:rgba(255,255,255,.95); box-shadow:0 20px 55px rgba(6,65,66,.08); }
.cvl-section-head { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr); align-items:end; gap:25px; margin-bottom:27px; }
.cvl-section-head > span { grid-column:1/-1; color:var(--cvl-teal); font-size:10px; font-weight:950; letter-spacing:.15em; }
.cvl-section-head h2 { margin:-14px 0 0; font-size:clamp(32px,4.4vw,54px); line-height:1.04; letter-spacing:-.045em; }
.cvl-section-head p { margin:0; color:var(--cvl-muted); font-size:14px; line-height:1.75; } .cvl-section-head strong { color:var(--cvl-teal); }

.cvl-meaning { background:radial-gradient(circle at 91% 6%,rgba(67,213,230,.18),transparent 24rem),linear-gradient(145deg,#fffefa,#ebfbf6); }
.cvl-part-lab { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; }
.cvl-part-model, .cvl-part-buttons { min-width:0; padding:20px; border:1px solid var(--cvl-line); border-radius:24px; background:rgba(255,255,255,.8); }
.cvl-part-model svg { width:100%; max-height:390px; }
.cvl-part-model ellipse, .cvl-part-model path { stroke:#0b6e72; stroke-width:3; transition:.25s; }
.cvl-part-model .side { fill:#5cdcc2; } .cvl-part-model .top { fill:#ffe176; } .cvl-part-model .base { fill:#54cfe0; } .cvl-part-model .top-line { fill:none; }
.cvl-part-model text { fill:#123f46; font-size:15px; font-weight:900; text-anchor:middle; paint-order:stroke; stroke:rgba(255,255,255,.8); stroke-width:5; }
.cvl-part-model:not(.show-side) .side, .cvl-part-model:not(.show-top) .top, .cvl-part-model:not(.show-base) .base { opacity:.24; filter:grayscale(.5); }
.cvl-part-model p { margin:7px 0 0; color:#356b69; font-size:11px; text-align:center; }
.cvl-part-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cvl-part-buttons button { min-width:0; padding:12px 6px; border:1px solid var(--cvl-line); border-radius:16px; color:var(--cvl-ink); background:#fff; }
.cvl-part-buttons button i { display:grid; width:30px; height:30px; margin:0 auto 7px; place-items:center; border-radius:50%; color:#fff; background:#91aaa9; font-style:normal; font-weight:900; }
.cvl-part-buttons button b, .cvl-part-buttons button small { display:block; } .cvl-part-buttons button b { font-size:11px; } .cvl-part-buttons button small { margin-top:4px; color:var(--cvl-muted); font-size:8px; line-height:1.35; }
.cvl-part-buttons button.active { border-color:var(--cvl-teal); background:#e8faf4; } .cvl-part-buttons button.active i { background:var(--cvl-teal); }
.cvl-part-buttons article { grid-column:1/-1; padding:15px; border-radius:16px; color:#73502b; background:#fff2d8; } .cvl-part-buttons article b { font-size:13px; } .cvl-part-buttons article p { margin:5px 0 0; font-size:10px; line-height:1.6; }

.cvl-history { color:#fff; background:radial-gradient(circle at 8% 8%,rgba(81,223,192,.16),transparent 24rem),linear-gradient(145deg,#083d46,#052831); border-color:rgba(255,255,255,.1); }
.cvl-history .cvl-section-head > span { color:#73e7ca; } .cvl-history .cvl-section-head p { color:#b1cecc; }
.cvl-history figure, .cvl-strategy figure { position:relative; margin:0; overflow:hidden; border-radius:27px; box-shadow:0 22px 52px rgba(0,0,0,.21); }
.cvl-history figure img, .cvl-strategy figure img { width:100%; aspect-ratio:16/8.2; object-fit:cover; object-position:center top; }
.cvl-history figcaption, .cvl-strategy figcaption { position:absolute; inset:auto 14px 14px; padding:12px 15px; border:1px solid rgba(255,255,255,.15); border-radius:15px; color:#fff; background:rgba(3,30,37,.8); backdrop-filter:blur(12px); font-size:11px; line-height:1.6; }
.cvl-timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:14px; } .cvl-timeline article { padding:19px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(255,255,255,.06); } .cvl-timeline article.featured { border-color:rgba(255,214,93,.3); background:rgba(255,214,93,.09); }
.cvl-timeline i { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:rgba(255,255,255,.1); font-size:22px; font-style:normal; } .cvl-timeline small { display:block; margin-top:12px; color:#70e2c7; font-size:9px; font-weight:900; } .cvl-timeline h3 { margin:5px 0 6px; color:#fff; font-size:16px; } .cvl-timeline p { margin:0; color:#afccca; font-size:10px; line-height:1.7; }
.cvl-source { margin:13px 2px 0; color:#8faeac; font-size:9px; } .cvl-source a { color:#91f0da; }

.cvl-unfold { background:linear-gradient(145deg,#fffdf7,#eefbf8); }
.cvl-unfold-lab, .cvl-calc-lab { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr); gap:13px; }
.cvl-unfold-stage, .cvl-unfold-lab aside, .cvl-calc-stage, .cvl-calc-lab aside { min-width:0; padding:14px; border:1px solid var(--cvl-line); border-radius:24px; background:rgba(255,255,255,.84); }
.cvl-lab-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:12px; color:#356b69; background:#ecf9f6; font-size:10px; font-weight:850; }
#cvl-unfold-svg, #cvl-calc-svg { width:100%; max-height:420px; }
.u-cylinder path, .u-cylinder ellipse { fill:#53cdbb; stroke:#0c7280; stroke-width:3; } .u-cylinder ellipse:first-of-type { fill:#ffdd72; } .u-cylinder line { stroke:#ff755e; stroke-width:4; stroke-dasharray:7 6; }
.u-rect rect, .net-rect rect { fill:#5bd7c2; stroke:#0b7580; stroke-width:3; } .u-rect text, .u-circles text, .net-rect text, .net-circle text { fill:#255f61; font-size:13px; font-weight:850; text-anchor:middle; }
.u-circles circle, .moving-circle, .net-circle circle { fill:#ffe079; stroke:#c88628; stroke-width:3; } .cut-arrow { fill:none; stroke:#ff775f; stroke-width:4; stroke-dasharray:7 6; } .cut-copy { fill:#d95a43; font-size:12px; font-weight:900; text-anchor:middle; }
.cvl-unfold-stage > p { margin:5px 4px 0; color:#4f7777; font-size:10px; text-align:center; }
.cvl-unfold-lab aside > small { color:var(--cvl-teal); font-size:9px; font-weight:900; } .cvl-unfold-lab aside h3 { margin:4px 0 12px; font-size:21px; }
.cvl-step-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; } .cvl-step-buttons button, .cvl-calc-lab fieldset button, .cvl-growth-buttons button { min-height:42px; border:1px solid var(--cvl-line); border-radius:12px; color:#276665; background:#fff; font-size:10px; font-weight:850; } .cvl-step-buttons button.active, .cvl-calc-lab fieldset button.active { color:#fff; border-color:transparent; background:var(--cvl-teal); }
.cvl-unfold-equation { display:grid; gap:7px; margin-top:12px; padding:13px; border-radius:16px; background:#e9f8f4; } .cvl-unfold-equation span { display:flex; justify-content:space-between; gap:8px; } .cvl-unfold-equation small { color:var(--cvl-muted); } .cvl-unfold-equation b { color:#087568; font-size:11px; } .cvl-unfold-equation strong { padding-top:8px; border-top:1px solid var(--cvl-line); color:#ad6729; font-size:12px; }
.cvl-unfold-lab blockquote { margin:12px 0 0; padding:12px; border-left:4px solid var(--cvl-yellow); border-radius:0 13px 13px 0; color:#735c2c; background:#fff5cf; font-size:11px; line-height:1.6; }

.cvl-formula { background:radial-gradient(circle at 100% 0,rgba(255,214,93,.16),transparent 22rem),#fffefa; }
.cvl-formula-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; } .cvl-formula-steps article { min-height:145px; padding:18px; border:1px solid var(--cvl-line); border-radius:20px; background:#fff; } .cvl-formula-steps i { display:grid; width:35px; height:35px; place-items:center; border-radius:11px; color:#fff; background:var(--cvl-teal); font-style:normal; font-weight:900; } .cvl-formula-steps small { display:block; margin-top:9px; color:var(--cvl-teal); font-size:8px; font-weight:900; } .cvl-formula-steps h3 { margin:4px 0 6px; font-size:17px; } .cvl-formula-steps p { margin:0; color:var(--cvl-muted); font-size:10px; line-height:1.6; }
.cvl-calc-lab aside label { display:flex; justify-content:space-between; align-items:center; margin:8px 0 3px; color:#315f5d; font-size:11px; font-weight:850; } .cvl-calc-lab output { padding:4px 8px; border-radius:8px; color:#08745d; background:#e6f8f2; font-size:10px; } .cvl-calc-lab input { width:100%; accent-color:var(--cvl-teal); }
.cvl-calc-lab fieldset { margin:14px 0 0; padding:0; border:0; } .cvl-calc-lab legend { margin-bottom:6px; color:#315f5d; font-size:10px; font-weight:850; } .cvl-calc-lab fieldset div { display:grid; gap:5px; } .cvl-calc-lab fieldset button { min-height:36px; }
.cvl-live-equation { margin-top:12px; padding:14px; border-radius:17px; color:#fff; background:linear-gradient(140deg,#0a7168,#07515b); } .cvl-live-equation small { color:#95ead8; font-size:8px; font-weight:900; } .cvl-live-equation p { margin:5px 0; color:#d1eee9; font-size:10px; } .cvl-live-equation strong { display:block; margin-top:7px; color:#ffe67f; font-size:17px; }
.cvl-warning { display:grid; grid-template-columns:48px 1fr; align-items:center; gap:12px; margin-top:14px; padding:13px 16px; border-radius:17px; color:#6e542c; background:#fff2c9; } .cvl-warning span { font-size:31px; } .cvl-warning p { margin:0; font-size:11px; line-height:1.7; }

.cvl-strategy { color:#fff; background:radial-gradient(circle at 92% 8%,rgba(255,214,93,.15),transparent 25rem),linear-gradient(145deg,#093541,#05242e); border-color:rgba(255,255,255,.1); }
.cvl-strategy .cvl-section-head > span { color:#70e4c6; } .cvl-strategy .cvl-section-head p { color:#afcbca; } .cvl-strategy figure { margin-bottom:14px; }
.cvl-strategy-game { display:grid; grid-template-columns:.9fr 1.1fr; gap:12px; } .cvl-material-board, .cvl-strategy-game > aside { min-width:0; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:23px; background:rgba(255,255,255,.06); }
.cvl-material-board { display:flex; min-height:380px; flex-direction:column; } .cvl-material-top { display:flex; justify-content:space-between; gap:8px; } .cvl-material-top span { padding:7px 9px; border-radius:10px; color:#b3cecc; background:rgba(255,255,255,.07); font-size:9px; } .cvl-material-top b { color:#ffe17b; }
.cvl-material-roll { position:relative; height:43px; margin:24px 5px 13px; overflow:hidden; border:2px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(255,255,255,.06); } .cvl-material-roll::before { content:'40π 材料'; position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:900; } #cvl-material-used { width:0; height:100%; background:linear-gradient(90deg,#32c7ae,#ffe16e,#ff8266); transition:width .35s; }
.cvl-build-preview { display:grid; flex:1; place-content:center; text-align:center; } .cvl-build-preview span { font-size:70px; } .cvl-build-preview p { margin:5px 0 0; color:#d6eeeb; font-size:13px; font-weight:850; } .cvl-material-board > p { margin:0; padding:11px; border-radius:13px; color:#bed1d0; background:rgba(255,255,255,.07); font-size:10px; line-height:1.55; }
.cvl-material-board[data-result="best"] { border-color:rgba(80,226,192,.45); box-shadow:0 0 26px rgba(80,226,192,.12); }
.cvl-strategy-game aside > small { color:#70e3c7; font-size:9px; font-weight:900; } .cvl-strategy-game aside h3 { margin:4px 0 12px; color:#fff; font-size:22px; }
.cvl-strategy-game aside > div[role="group"] { display:grid; gap:7px; } .cvl-strategy-game aside > div[role="group"] button { min-height:59px; padding:9px 12px; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#fff; background:rgba(255,255,255,.07); text-align:left; } .cvl-strategy-game aside button b, .cvl-strategy-game aside button small { display:block; } .cvl-strategy-game aside button b { font-size:12px; } .cvl-strategy-game aside button small { margin-top:3px; color:#a9c2c1; font-size:9px; } .cvl-strategy-game aside button.active { border-color:#63e2c5; background:rgba(44,200,163,.17); }
.cvl-strategy-game aside article { min-height:73px; margin:10px 0; padding:11px 13px; border-radius:14px; color:#bad1cf; background:rgba(255,255,255,.07); } .cvl-strategy-game aside article b { color:#fff0a2; font-size:11px; } .cvl-strategy-game aside article p { margin:4px 0 0; font-size:10px; line-height:1.5; } .cvl-strategy-game aside ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; } .cvl-strategy-game aside li { padding-left:9px; border-left:3px solid rgba(83,220,189,.45); color:#adc8c6; font-size:9px; line-height:1.55; } .cvl-strategy-game aside li b { margin-right:5px; color:#6be2c5; }
.cvl-life-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:13px; } .cvl-life-grid article { padding:16px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.06); } .cvl-life-grid span { font-size:27px; } .cvl-life-grid h3 { margin:6px 0 4px; color:#fff; font-size:13px; } .cvl-life-grid p { margin:0; color:#aac6c4; font-size:9px; line-height:1.6; }

.cvl-boss { display:grid; grid-template-columns:minmax(250px,.66fr) minmax(0,1.34fr); gap:clamp(20px,4vw,50px); color:#fff; background:radial-gradient(circle at 0 100%,rgba(61,215,179,.24),transparent 24rem),linear-gradient(135deg,#086a67,#073a4b); border-color:transparent; }
.cvl-boss-intro { align-self:center; } .cvl-boss-intro > span { color:#ffe47b; font-size:10px; font-weight:950; letter-spacing:.17em; } .cvl-boss-intro h2 { margin:8px 0; color:#fff; font-size:clamp(31px,4vw,49px); line-height:1.04; } .cvl-boss-intro p { margin:0; color:#bde3df; font-size:11px; line-height:1.7; }
#cvl-boss-stars { display:flex; gap:8px; margin-top:16px; } #cvl-boss-stars i { color:rgba(255,255,255,.25); font-size:31px; font-style:normal; } #cvl-boss-stars i.earned { color:#ffe26c; filter:drop-shadow(0 0 9px rgba(255,226,108,.6)); }
#cvl-boss-shell { min-height:340px; padding:22px; border:1px solid rgba(255,255,255,.12); border-radius:25px; background:rgba(255,255,255,.08); }
.cvl-question > small { color:#7ce9d1; font-size:9px; font-weight:900; } .cvl-question h3 { margin:7px 0 15px; color:#fff; font-size:clamp(20px,2.4vw,29px); line-height:1.25; } .cvl-question > div { display:grid; gap:8px; } .cvl-question > div button { min-height:58px; display:grid; grid-template-columns:36px 1fr; align-items:center; gap:8px; padding:8px; border:1px solid rgba(255,255,255,.13); border-radius:14px; color:#fff; background:rgba(255,255,255,.07); text-align:left; } .cvl-question button i { display:grid; width:31px; height:31px; place-items:center; border-radius:10px; background:rgba(255,255,255,.1); font-style:normal; font-weight:900; } .cvl-question button.correct { color:#073b3b; background:#64e2c4; } .cvl-question button.wrong { color:#ffd0c5; border-color:#ff8065; background:rgba(255,108,77,.15); }
#cvl-quiz-feedback { min-height:39px; margin:10px 0; padding:9px 11px; border-radius:12px; color:#c2ddda; background:rgba(255,255,255,.07); font-size:10px; line-height:1.55; } #cvl-quiz-feedback.success { color:#c9faed; background:rgba(65,205,169,.16); } #cvl-quiz-feedback.wrong { color:#ffd0c6; background:rgba(255,108,77,.14); }
#cvl-next-question { width:100%; min-height:43px; border:0; border-radius:13px; color:#12413d; background:#ffe272; font-size:11px; font-weight:900; }
.cvl-quiz-complete { display:grid; min-height:290px; place-content:center; text-align:center; } .cvl-quiz-complete > span { font-size:66px; } .cvl-quiz-complete small { color:#ffe579; font-size:9px; font-weight:900; letter-spacing:.14em; } .cvl-quiz-complete h3 { margin:6px 0; color:#fff; font-size:27px; } .cvl-quiz-complete p { max-width:420px; margin:0 auto 14px; color:#c2e1de; font-size:11px; line-height:1.65; } .cvl-quiz-complete button { min-height:42px; border:0; border-radius:13px; color:#13413d; background:#ffe274; font-size:10px; font-weight:900; }
.cvl-home { display:grid; grid-template-columns:65px 1fr auto; align-items:center; gap:18px; margin-top:20px; padding:25px; border-radius:26px; color:#4e4323; background:linear-gradient(135deg,#fff3bf,#ffe6a5); } .cvl-home > span { font-size:45px; } .cvl-home small { color:#a06c22; font-size:9px; font-weight:900; } .cvl-home h2 { margin:4px 0; font-size:22px; } .cvl-home p { margin:0; font-size:10px; line-height:1.6; } .cvl-home > b { padding:12px 15px; border-radius:15px; color:#fff; background:#0b8f80; font-size:18px; }
.cvl-complete { display:flex; justify-content:center; margin-top:15px; } .cvl-complete .complete-button { min-width:260px; }
.cvl-footer { margin-top:17px; }

/* Cylinder volume: precise fill and layer models. */
.cvl-meaning { background:radial-gradient(circle at 91% 6%,rgba(67,213,230,.18),transparent 24rem),linear-gradient(145deg,#fffefa,#ebfbf6); }
.cvl-volume-lab { display:grid; grid-template-columns:1.05fr .95fr; gap:14px; }
.cvl-volume-model, .cvl-concept-cards { min-width:0; padding:20px; border:1px solid var(--cvl-line); border-radius:24px; background:rgba(255,255,255,.82); }
.cvl-volume-model svg { width:100%; max-height:410px; }
.cvl-volume-model .cvl-cylinder .mark-label { stroke:#fff; fill:#176266; }
.cvl-volume-model p { margin:5px 0 0; color:#3d7070; font-size:11px; text-align:center; }
.cvl-concept-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.cvl-concept-cards button { min-height:145px; display:grid; place-content:center; gap:5px; border:1px solid var(--cvl-line); border-radius:17px; color:var(--cvl-ink); background:#fff; }
.cvl-concept-cards button > span { font-size:40px; } .cvl-concept-cards button b, .cvl-concept-cards button small { display:block; } .cvl-concept-cards button b { font-size:13px; } .cvl-concept-cards button small { color:var(--cvl-muted); font-size:9px; }
.cvl-concept-cards button.active { border-color:var(--cvl-teal); background:#e8faf4; } .cvl-concept-cards button.correct { color:#08745d; } .cvl-concept-cards button.explain { border-color:var(--cvl-coral); background:#fff2ed; }
.cvl-concept-cards > p { grid-column:1/-1; margin:0; padding:10px 12px; border-radius:13px; color:#376b69; background:#edf8f5; font-size:10px; line-height:1.55; }
.cvl-concept-cards article { grid-column:1/-1; padding:14px; border-radius:15px; color:#6c542c; background:#fff2ce; } .cvl-concept-cards article b { font-size:12px; } .cvl-concept-cards article p { margin:4px 0 0; font-size:10px; line-height:1.6; }

.cvl-layers { background:linear-gradient(145deg,#fffdf7,#eefbf8); }
.cvl-layers-lab { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr); gap:13px; }
.cvl-layer-stage, .cvl-layers-lab aside { min-width:0; padding:14px; border:1px solid var(--cvl-line); border-radius:24px; background:rgba(255,255,255,.84); }
#cvl-layer-svg { width:100%; max-height:420px; }
.cvl-layer-stage .cvl-cylinder .mark-label, .cvl-calc-stage .cvl-cylinder .mark-label { fill:#176266; stroke:#fff; }
.cvl-layer-stage > p { margin:5px 4px 0; color:#4f7777; font-size:10px; text-align:center; }
.cvl-layers-lab aside > small { color:var(--cvl-teal); font-size:9px; font-weight:900; } .cvl-layers-lab aside h3 { margin:4px 0 12px; font-size:21px; }
.cvl-layer-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.cvl-layer-buttons button { min-height:43px; border:1px solid var(--cvl-line); border-radius:12px; color:#276665; background:#fff; font-size:10px; font-weight:850; } .cvl-layer-buttons button.active { color:#fff; border-color:transparent; background:var(--cvl-teal); }
.cvl-layer-equation { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; margin-top:12px; padding:13px; border-radius:16px; background:#e9f8f4; }
.cvl-layer-equation span { text-align:center; } .cvl-layer-equation small, .cvl-layer-equation b { display:block; } .cvl-layer-equation small { color:var(--cvl-muted); font-size:8px; } .cvl-layer-equation b { color:#087568; font-size:11px; } .cvl-layer-equation i { color:#83aaa5; font-style:normal; } .cvl-layer-equation strong { color:#ad6729; font-size:13px; }
.cvl-layers-lab ol { display:grid; gap:7px; margin:13px 0 0; padding:0; list-style:none; } .cvl-layers-lab li { display:grid; grid-template-columns:29px 1fr; gap:8px; align-items:center; } .cvl-layers-lab li > i { display:grid; width:27px; height:27px; place-items:center; border-radius:9px; color:#fff; background:var(--cvl-teal); font-size:10px; font-style:normal; font-weight:900; } .cvl-layers-lab li p { margin:0; } .cvl-layers-lab li b, .cvl-layers-lab li span { display:block; } .cvl-layers-lab li b { font-size:10px; } .cvl-layers-lab li span { color:var(--cvl-muted); font-size:8px; }
.cvl-layers-lab blockquote { margin:12px 0 0; padding:12px; border-left:4px solid var(--cvl-yellow); border-radius:0 13px 13px 0; color:#735c2c; background:#fff5cf; font-size:12px; font-weight:900; }

.cvl-growth-lab { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(320px,1.3fr); gap:12px; align-items:center; margin-top:14px; padding:18px; border:1px solid var(--cvl-line); border-radius:20px; background:#eef9f5; }
.cvl-growth-lab small { color:var(--cvl-teal); font-size:8px; font-weight:900; } .cvl-growth-lab h3 { margin:4px 0 0; font-size:17px; }
.cvl-growth-lab > div[role="group"] { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cvl-growth-lab button { min-height:43px; border:1px solid var(--cvl-line); border-radius:12px; color:#276665; background:#fff; font-size:9px; font-weight:850; } .cvl-growth-lab button.active { color:#fff; border-color:transparent; background:var(--cvl-teal); }
.cvl-growth-lab > p { grid-column:1/-1; margin:0; padding:10px 12px; border-radius:13px; color:#356b68; background:#fff; font-size:10px; line-height:1.55; }

.cvl-capacity-board { display:flex; min-height:380px; flex-direction:column; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:23px; background:rgba(255,255,255,.06); }
.cvl-capacity-top { display:flex; justify-content:space-between; gap:8px; } .cvl-capacity-top span { padding:7px 9px; border-radius:10px; color:#b3cecc; background:rgba(255,255,255,.07); font-size:9px; } .cvl-capacity-top b { color:#ffe17b; }
.cvl-tank-preview { display:grid; flex:1; place-content:center; text-align:center; } .cvl-tank-preview span { font-size:70px; } .cvl-tank-preview p { margin:5px 0 0; color:#d6eeeb; font-size:13px; font-weight:850; }
.cvl-capacity-meter { position:relative; height:43px; margin:0 3px 13px; overflow:hidden; border:2px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(255,255,255,.06); } .cvl-capacity-meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,#37c8b0,#ffe16e,#ff8266); transition:width .35s; } .cvl-capacity-meter b { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:10px; }
.cvl-capacity-board > p { margin:0; padding:11px; border-radius:13px; color:#bed1d0; background:rgba(255,255,255,.07); font-size:10px; line-height:1.55; }
.cvl-capacity-board[data-result="small"] { border-color:rgba(255,121,95,.45); } .cvl-capacity-board[data-result="exact"] { border-color:rgba(80,226,192,.55); box-shadow:0 0 26px rgba(80,226,192,.12); }

@container cylinder-volume (max-width: 1000px) {
  .cvl-volume-lab, .cvl-strategy-game { grid-template-columns:1fr; }
  .cvl-capacity-board { min-height:300px; }
}

@container cylinder-volume (max-width: 1000px) {
  .cvl-game-grid { grid-template-columns:minmax(375px,1.2fr) minmax(270px,.8fr); }
  #cvl-battle-svg { max-height:345px; }
  .cvl-section-head { grid-template-columns:1fr; } .cvl-section-head h2 { margin:-14px 0 0; } .cvl-section-head p { max-width:760px; }
  .cvl-part-lab, .cvl-strategy-game { grid-template-columns:1fr; }
  .cvl-material-board { min-height:300px; }
}
@container cylinder-volume (max-width: 760px) {
  .cvl-hero { min-height:calc(100svh - var(--topbar) - 12px); border-radius:25px; }
  .cvl-hero-bg { object-position:64% center; } .cvl-hero-shade { background:linear-gradient(0deg,rgba(3,28,39,.98) 0%,rgba(3,34,44,.9) 65%,rgba(3,34,44,.42)); }
  .cvl-game-shell { width:100%; padding:12px; }
  .cvl-game-heading { align-items:start; margin-bottom:7px; } .cvl-game-heading h1 { font-size:31px; } .cvl-game-heading p { font-size:10px; } .cvl-game-heading > button { min-height:36px; padding:0 9px; font-size:8px; }
  .cvl-hud { gap:4px; margin-bottom:5px; } .cvl-hud span { padding:5px 6px; } .cvl-hud b { font-size:11px; }
  .cvl-game-grid { grid-template-columns:1fr; gap:5px; } .cvl-arena { padding:3px 6px; border-radius:17px; } #cvl-battle-svg { height:min(25svh,205px); max-height:none; } .cvl-part-key { display:none; }
  .cvl-console { padding:7px; border-radius:17px; } .cvl-enemy-card { grid-template-columns:30px 1fr; padding:5px 7px; } .cvl-enemy-card > span { font-size:20px; } .cvl-enemy-card h2 { font-size:11px; }
  .cvl-size-cards { margin:4px 0; } .cvl-size-cards span { padding:4px 3px; } .cvl-size-cards b { font-size:10px; } .cvl-mission { padding:5px 7px; } .cvl-mission strong { font-size:11px; }
  .cvl-timer { margin:4px 1px; } .cvl-answer-grid button { min-height:43px; } .cvl-answer-grid b { font-size:13px; } .cvl-answer-grid small, .cvl-formula-tip { display:none; } .cvl-feedback { min-height:41px; margin-top:4px; padding:4px 6px; } .cvl-feedback p { font-size:8px; } .cvl-feedback > span { font-size:18px; }
  .cvl-route { top:calc(var(--topbar) + 4px); margin-top:8px; } .cvl-route > span { display:none; }
  .cvl-section { margin-top:12px; padding:25px 17px; border-radius:25px; } .cvl-section-head { margin-bottom:20px; } .cvl-section-head h2 { font-size:31px; } .cvl-section-head p { font-size:12px; }
  .cvl-layers-lab, .cvl-calc-lab, .cvl-boss { grid-template-columns:1fr; } .cvl-history figure img, .cvl-strategy figure img { aspect-ratio:4/3; } .cvl-timeline { grid-template-columns:1fr; } .cvl-formula-steps { grid-template-columns:1fr; } .cvl-formula-steps article { min-height:0; }
  .cvl-growth-lab { grid-template-columns:1fr; } .cvl-growth-lab > p { grid-column:auto; }
  .cvl-life-grid { grid-template-columns:repeat(2,1fr); } .cvl-home { grid-template-columns:52px 1fr; padding:18px; } .cvl-home > b { grid-column:1/-1; text-align:center; }
}
@container cylinder-volume (max-width: 480px) {
  .cvl-game-heading p { max-width:100%; } .cvl-hud span:nth-child(5) { display:none; } .cvl-hud { grid-template-columns:repeat(4,1fr); } #cvl-battle-svg { height:min(23svh,180px); }
  .cvl-volume-lab { grid-template-columns:1fr; } .cvl-volume-model, .cvl-concept-cards { padding:13px; } .cvl-concept-cards { grid-template-columns:1fr; } .cvl-concept-cards > p, .cvl-concept-cards article { grid-column:auto; }
  .cvl-history figcaption, .cvl-strategy figcaption { position:static; border-radius:0; } #cvl-layer-svg, #cvl-calc-svg { min-height:250px; }
  .cvl-growth-lab > div[role="group"] { grid-template-columns:1fr; }
  .cvl-strategy-game { grid-template-columns:1fr; } .cvl-life-grid { grid-template-columns:1fr; } .cvl-capacity-board { min-height:260px; } .cvl-home { grid-template-columns:1fr; text-align:center; } .cvl-home > b { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) { .cvl-page *, .cvl-page *::before, .cvl-page *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }