:root { --gravity-accent: #8b5cf6; --gravity-bright: #c4b5fd; --gravity-panel: rgba(12, 19, 45, .82); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: #f8fafc; }
.gravity-shell { width: min(1120px, calc(100% - 32px)); margin: 42px auto 54px; }
.gravity-heading, .card-heading, .result-card, .explanation-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.eyebrow, .section-label { display: block; color: #c4b5fd; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.gravity-heading { margin-bottom: 24px; align-items: flex-end; }
.gravity-heading h1, h2 { margin: 7px 0 0; color: #fff; font-weight: 900; }
.gravity-heading h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.12; }
.gravity-heading p { max-width: 650px; margin: 12px 0 0; color: #d8dcef; line-height: 1.75; }
.model-badge { flex: 0 0 auto; padding: 9px 13px; border: 1px solid rgba(196,181,253,.38); border-radius: 999px; background: rgba(139,92,246,.14); color: #e9ddff; font-size: 13px; font-weight: 800; }
.gravity-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); gap: 20px; }
.panel-card { border: 1px solid rgba(180, 193, 235, .2); border-radius: 26px; background: var(--gravity-panel); box-shadow: 0 20px 48px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.pendulum-card, .control-card { padding: 24px; }
h2 { font-size: 23px; }
.motion-button, .reset-button { border: 1px solid rgba(196,181,253,.4); border-radius: 11px; background: rgba(139,92,246,.18); color: #f3efff; padding: 10px 13px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.motion-button:hover, .reset-button:hover { background: rgba(139,92,246,.35); }
.pendulum-stage { position: relative; height: 395px; margin-top: 20px; overflow: hidden; border: 1px solid rgba(173, 196, 255, .18); border-radius: 18px; background: radial-gradient(ellipse at 50% 8%, rgba(139,92,246,.2), transparent 40%), linear-gradient(180deg, #111d42, #080f26); }
.stage-glow { position: absolute; width: 250px; height: 250px; left: 50%; top: 40%; translate: -50% -50%; border-radius: 50%; background: rgba(103,232,249,.08); filter: blur(35px); }
.support { position: absolute; left: 50%; top: 31px; width: 190px; height: 17px; translate: -50%; display: flex; gap: 8px; justify-content: center; border-radius: 4px; background: linear-gradient(#dfe6ff, #7582aa); box-shadow: 0 5px 8px rgba(0,0,0,.25); }
.support i { width: 13px; height: 100%; border-left: 1px solid rgba(30,41,59,.55); }
.pivot { position: absolute; z-index: 3; left: 50%; top: 43px; width: 22px; height: 22px; translate: -50%; border: 5px solid #e7edff; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 0 5px rgba(139,92,246,.18); }
.pivot span { display:block; width:100%; height:100%; border-radius:50%; background:#352263; }
.pendulum-arm { position: absolute; z-index: 2; left: 50%; top: 54px; width: 0; height: 250px; transform-origin: top center; }
.string { position: absolute; left: -2px; top: 0; width: 4px; height: var(--string-length, 250px); border-radius: 3px; background: linear-gradient(90deg, #7483ad, #edf1ff 45%, #7381aa); box-shadow: 2px 0 5px rgba(0,0,0,.25); }
.bob { position: absolute; left: 0; top: var(--string-length, 250px); width: 42px; height: 42px; translate: -50% -8%; border: 3px solid #ddd6fe; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #f2edff, #9a7df5 31%, #5b35bb 70%); box-shadow: 0 11px 18px rgba(0,0,0,.35), 0 0 22px rgba(167,139,250,.55); }
.bob span { position:absolute; top:7px; left:9px; width:10px; height:7px; border-radius:50%; background:rgba(255,255,255,.75); }
.pendulum-arm.is-detached .bob { visibility: hidden; }
.flying-bob { position:absolute; z-index:5; width:42px; height:42px; border:3px solid #ddd6fe; border-radius:50%; background:radial-gradient(circle at 32% 25%, #f2edff, #9a7df5 31%, #5b35bb 70%); box-shadow:0 11px 18px rgba(0,0,0,.35), 0 0 28px rgba(167,139,250,.85); pointer-events:none; }
.flying-bob span { position:absolute; top:7px; left:9px; width:10px; height:7px; border-radius:50%; background:rgba(255,255,255,.75); }
.ground-line { position:absolute; right: 28px; bottom:55px; left:50px; height:1px; background:linear-gradient(90deg, transparent, rgba(196,181,253,.7), transparent); }
.ruler { position:absolute; top:76px; bottom:55px; display:flex; flex-direction:column; justify-content:space-between; color:#c5d1f2; font-size:11px; opacity:.75; }
.ruler-left { left:17px; padding-left:9px; border-left:1px dashed rgba(197,209,242,.5); }
.angle-guide { position:absolute; top:55px; left:50%; width: 125px; height: 245px; border-top: 1px dashed rgba(196,181,253,.2); transform-origin: top left; }
.angle-guide--left { transform: rotate(24deg); }.angle-guide--right { transform: rotate(-24deg); }
.stage-readout { position:absolute; right:17px; top:17px; padding:8px 11px; border:1px solid rgba(196,181,253,.24); border-radius:10px; background:rgba(12,19,45,.62); color:#d9d2ff; font-size:12px; }.stage-readout strong { margin-left:6px; color:#fff; }
.visual-note, .control-group p { margin:13px 0 0; color:#bac5df; font-size:13px; line-height:1.6; }
.control-card { display:flex; flex-direction:column; }.control-group { margin-top:28px; }.control-group label { display:flex; justify-content:space-between; gap:12px; font-weight:800; }.control-group output { color:#ddd6fe; }.control-group input[type=range] { width:100%; margin:14px 0 10px; accent-color:#a78bfa; }.number-input { display:flex; align-items:center; border:1px solid rgba(196,181,253,.28); border-radius:10px; background:rgba(3,7,20,.3); overflow:hidden; }.number-input input { width:100%; border:0; outline:0; background:transparent; color:#fff; padding:10px 12px; font:inherit; font-weight:700; }.number-input span { padding:10px 12px; border-left:1px solid rgba(196,181,253,.18); color:#c4b5fd; font-weight:800; }.reset-button { width:100%; margin-top:auto; padding:12px; }
.result-card { margin-top:20px; padding:24px 28px; }.result-intro h2 { margin-top:5px; }.result-intro p { margin:9px 0 0; color:#c4cce0; font-size:14px; }.result-value { text-align:right; white-space:nowrap; }.result-value strong { color:#f4f0ff; font-size:clamp(42px,6vw,64px); letter-spacing:-.06em; }.result-value span { margin-left:9px; color:#c4b5fd; font-weight:800; }.formula-box { display:flex; align-items:center; justify-content:center; gap:9px; min-width:190px; color:#d8d0fa; font-family:Georgia, serif; font-size:18px; }.fraction { display:inline-flex; flex-direction:column; align-items:center; line-height:1.08; }.fraction b:first-child { border-bottom:1px solid #d8d0fa; padding:0 4px 2px; }.formula-box strong { font-family:inherit; }.comparison { padding-left:21px; border-left:1px solid rgba(196,181,253,.24); color:#c4cce0; font-size:13px; }.comparison strong { display:block; margin-top:6px; color:#fff; font-size:16px; }
.explanation-card { margin-top:20px; padding:22px 28px; align-items:flex-start; }.explanation-card p { max-width:700px; margin:0; color:#d2d9eb; line-height:1.8; }
@media (max-width: 850px) { .gravity-heading, .result-card { align-items:flex-start; flex-direction:column; }.gravity-grid { grid-template-columns:1fr; }.result-value { text-align:left; }.formula-box { justify-content:flex-start; }.comparison { padding-left:0; border-left:0; }.explanation-card { flex-direction:column; gap:12px; } }
@media (max-width: 540px) { .gravity-shell { width:min(100% - 20px, 1120px); margin-top:24px; }.pendulum-card,.control-card { padding:17px; }.pendulum-stage { height:345px; }.support { top:26px; }.pivot { top:38px; }.pendulum-arm { top:49px; }.ruler { display:none; }.result-card,.explanation-card { padding:20px; }.result-value strong { font-size:50px; } }
html[data-graphics-quality="low"] .panel-card { backdrop-filter:none; box-shadow:none; } html[data-graphics-quality="low"] .stage-glow { display:none; }

html[data-site-theme="light"] .gravity-shell { color: #172033; }
html[data-site-theme="light"] .gravity-heading h1,
html[data-site-theme="light"] h2 { color: #111827; }
html[data-site-theme="light"] .gravity-heading p { color: #475569; }
html[data-site-theme="light"] .eyebrow,
html[data-site-theme="light"] .section-label { color: #5b21b6; }
html[data-site-theme="light"] .model-badge { border-color: #c4b5fd; background: #f3f0ff; color: #4c1d95; }
html[data-site-theme="light"] .panel-card { background: rgba(255, 255, 255, .96); border-color: #d6dfed; box-shadow: 0 16px 38px rgba(15, 23, 42, .08); }
html[data-site-theme="light"] .motion-button,
html[data-site-theme="light"] .reset-button { border-color: #8b5cf6; background: #6d28d9; color: #fff; }
html[data-site-theme="light"] .motion-button:hover,
html[data-site-theme="light"] .reset-button:hover { background: #5b21b6; }
html[data-site-theme="light"] .visual-note,
html[data-site-theme="light"] .control-group p { color: #475569; }
html[data-site-theme="light"] .control-group label { color: #1e293b; }
html[data-site-theme="light"] .control-group output { color: #5b21b6; }
html[data-site-theme="light"] .number-input { border-color: #cbd5e1; background: #f8fafc; }
html[data-site-theme="light"] .number-input input { color: #0f172a; }
html[data-site-theme="light"] .number-input span { border-color: #dbe4f0; color: #5b21b6; }
html[data-site-theme="light"] .result-intro p,
html[data-site-theme="light"] .comparison { color: #475569; }
html[data-site-theme="light"] .result-value strong { color: #3b1677; }
html[data-site-theme="light"] .result-value span { color: #5b21b6; }
html[data-site-theme="light"] .formula-box { color: #312e81; }
html[data-site-theme="light"] .fraction b:first-child { border-color: #312e81; }
html[data-site-theme="light"] .comparison { border-color: #d8e2ef; }
html[data-site-theme="light"] .comparison strong { color: #1e293b; }
html[data-site-theme="light"] .explanation-card p { color: #334155; }