:root{--bg: #05060f;--panel: rgba(13, 18, 38, .86);--panel-border: rgba(120, 150, 255, .22);--text: #dfe6f5;--text-dim: #93a0c4;--accent: #ffc94d;--accent2: #6f9bff;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}#canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0}#canvas-wrap canvas{display:block}#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(#05060fd9,#05060f00);pointer-events:none;z-index:10}#topbar h1{font-size:16px;font-weight:600;letter-spacing:1px;pointer-events:auto}#topbar .actions{display:flex;gap:8px;pointer-events:auto}button{font:inherit;color:var(--text);background:#28345f99;border:1px solid var(--panel-border);border-radius:6px;padding:5px 12px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:#465aa0b3}button.active{background:var(--accent2);border-color:var(--accent2);color:#08102a;font-weight:600}button:disabled{opacity:.4;cursor:default}#bottombar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.2fr) minmax(280px,1.2fr);gap:12px;padding:12px 16px;background:var(--panel);border-top:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10}#panel-toggle{display:none;position:absolute;top:-38px;right:12px;padding:6px 14px;border-radius:10px 10px 0 0;background:var(--panel);font-size:15px;line-height:1}.panel-group{display:flex;flex-direction:column;gap:8px;min-width:0}.panel-title{font-size:12px;color:var(--text-dim);letter-spacing:2px}.row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.stat-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px}.stat-grid .k{color:var(--text-dim);white-space:nowrap}.stat-grid .v{font-variant-numeric:tabular-nums}.stat-grid .v em{font-style:normal;color:var(--accent)}input[type=range]{flex:1;min-width:120px;accent-color:var(--accent)}.year-value{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}.slider-col{flex:1;min-width:120px;display:flex;flex-direction:column}.slider-col input[type=range]{width:100%}.month-ticks{position:relative;height:16px;margin:0 7px}.month-tick{position:absolute;top:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center}.month-tick:before{content:"";width:1px;height:4px;background:var(--text-dim);opacity:.7}.month-label{font-size:10px;color:var(--text-dim);white-space:nowrap;line-height:1.2}.month-tick:first-child{transform:translate(0);align-items:flex-start}.month-tick:last-child{transform:translate(-100%);align-items:flex-end}select{font:inherit;color:var(--text);background:#28345f99;border:1px solid var(--panel-border);border-radius:6px;padding:4px 8px}.drawer{position:absolute;top:56px;bottom:150px;width:320px;max-width:calc(100vw - 40px);background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;z-index:20;transition:transform .25s ease,opacity .25s ease}.drawer .focus-btn{width:100%;padding:8px 12px;margin-bottom:12px}#detail-drawer{left:16px}#settings-drawer{right:16px}.drawer.hidden{transform:translateY(12px);opacity:0;pointer-events:none}.drawer h2{font-size:18px;margin-bottom:4px}.drawer .symbol-big{font-size:56px;color:var(--accent);line-height:1.2}.drawer .latin{color:var(--text-dim);margin-bottom:12px}.drawer dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;margin-bottom:12px}.drawer dt{color:var(--text-dim)}.drawer p.myth{font-size:13px;line-height:1.7;color:var(--text);margin-bottom:12px}.drawer .badge{display:inline-block;font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:1px 6px;margin-bottom:8px}details.precession{font-size:12px;color:var(--text-dim);border-top:1px solid var(--panel-border);padding-top:10px}details.precession summary{cursor:pointer;color:var(--accent);margin-bottom:6px}.drawer .close-x{position:absolute;top:10px;right:12px;padding:2px 8px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px dashed rgba(120,150,255,.12)}#guide-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#03040abf;display:flex;align-items:center;justify-content:center;z-index:50}#guide-overlay.hidden{display:none}#guide-card{width:420px;max-width:calc(100vw - 40px);background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:24px}#guide-card h2{margin-bottom:14px}#guide-card ol{padding-left:20px;font-size:14px;line-height:2;color:var(--text)}#guide-card .row{justify-content:flex-end;margin-top:16px}#loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:100;transition:opacity .4s}#loading-overlay.hidden{opacity:0;pointer-events:none}#loading-bar{width:280px;height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}#loading-bar>div{height:100%;width:0%;background:var(--accent);transition:width .2s}#loading-text{color:var(--text-dim);font-size:13px}#webgl-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:100;background:var(--bg);font-size:15px;line-height:1.8}#hint{position:absolute;top:60px;left:50%;transform:translate(-50%);font-size:12px;color:var(--text-dim);background:#0d1226b3;padding:4px 12px;border-radius:12px;z-index:9;pointer-events:none;transition:opacity .3s}#hint.hidden{opacity:0}#switching-badge{position:absolute;top:92px;left:50%;transform:translate(-50%);font-size:12px;color:var(--accent);background:#0d1226d9;border:1px solid var(--accent);padding:4px 14px;border-radius:12px;z-index:30;pointer-events:none;transition:opacity .2s}#switching-badge.hidden{opacity:0}@media (max-width: 900px){#bottombar{grid-template-columns:1fr;max-height:46vh;overflow-y:auto}#bottombar.collapsed{max-height:none;overflow:visible}#bottombar.collapsed .panel-group:nth-child(2),#bottombar.collapsed .panel-group:nth-child(3){display:none}#panel-toggle{display:block}.drawer{top:50px;bottom:16px;width:calc(100vw - 32px)}#topbar h1{font-size:13px}}
