:root{--bg:#f5f8fb;--panel:#ffffff;--panel-2:#f3f7fb;--ink:#1b2733;--ink2:#5c6b7a;--line:#e6ecf3;--accent:#3a9fd6;--accent-ink:#1f7fb4;--accent-soft:#eaf5fc;--good:#2fae6b;--warn:#d99a1f;--bad:#e0574f;--shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);--rainbow:linear-gradient(90deg,#ff9aa2,#ffd6a5,#c9f2c7,#a5d8ff,#d5c6ff)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:radial-gradient(900px 600px at 8% -5%,rgba(112,214,255,.1),transparent),radial-gradient(800px 560px at 100% 0%,rgba(255,122,188,.08),transparent),var(--bg)}input[type=range]{accent-color:var(--accent)}header{position:sticky;top:0;z-index:10;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}header:before{content:"";display:block;height:3px;background:var(--rainbow);opacity:.7}.wrap{max-width:1140px;margin:0 auto;padding:14px 18px}.title{display:flex;align-items:center;gap:14px}.logo{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px #1018281f}h1{font-weight:700;letter-spacing:.2px;margin:0;font-size:1.5rem}.subtitle{color:var(--ink2);font-weight:400;font-size:.95rem;max-width:70ch}main{max-width:1140px;margin:20px auto;padding:0 18px 44px}.grid{display:grid;grid-template-columns:1fr;gap:18px}@media (min-width:980px){.grid{grid-template-columns:1.2fr .8fr}}@media (min-width:980px){.span-2{grid-column:1 / -1}}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.card>h2,.card>h3{margin:0;padding:15px 20px;font-size:1.05rem;font-weight:650;color:var(--ink);background:var(--panel-2);border-bottom:1px solid var(--line)}.card h4{margin:0 0 12px;font-size:1rem;font-weight:650;color:var(--ink)}.card h5{margin:0 0 8px;font-size:.92rem;font-weight:650;color:var(--ink)}.card .body,.card .stack{padding:20px}.card .controls{padding:16px 20px;border-top:1px solid var(--line)}.card p{margin:0 0 14px;line-height:1.6;color:var(--ink)}.card p:last-child{margin-bottom:0}.card ul{margin:0 0 14px;padding-left:22px;line-height:1.6}.card li{margin-bottom:6px;color:var(--ink)}.card li:last-child{margin-bottom:0}.card .card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0;box-shadow:none}.card .card>h4:first-child{margin-top:0}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.pill{background:var(--panel-2);border:1px solid var(--line);padding:7px 12px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;font-size:.9rem}.pill input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}input[type=file]{display:none}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-weight:600;font-size:.9rem;transition:background .15s ease,border-color .15s ease}.btn:hover{background:var(--panel-2);border-color:#d6dfea}.btn.primary{background:var(--accent);color:#fff;border-color:transparent}.btn.primary:hover{background:var(--accent-ink)}.btn.ghost{background:#fff}.btn.small{padding:7px 12px;font-size:.85rem}.stack{display:flex;flex-direction:column;gap:14px}.row{display:flex;gap:12px;align-items:center}.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:start;margin-bottom:14px}.kv:last-child{margin-bottom:0}.kv .label{color:var(--ink2);font-size:.9rem;font-weight:500;padding-top:2px}canvas,video,img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}.sim-wrap{position:relative}.sim3d{background:linear-gradient(#eafaff,#fff0f8);border:1px solid var(--line);border-radius:12px;overflow:hidden;line-height:0}.tag,.badge{font-size:.75rem;padding:4px 10px;border-radius:999px;background:var(--accent-soft);border:1px solid #cfe8f6;color:var(--accent-ink)}.notice{font-size:.9rem;color:var(--ink2);background:var(--accent-soft);border:1px solid #d5ebf8;padding:12px 14px;border-radius:10px;margin:14px 0;line-height:1.55}.notice strong{color:var(--ink)}.small{font-size:.85rem}.footer{margin-top:14px;font-size:.9rem;color:var(--ink2);padding:14px 20px;border-top:1px solid var(--line);line-height:1.55}.err{color:var(--bad)}.ok{color:var(--good)}code,.eq{background:var(--panel-2);padding:3px 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}.eq{display:inline-block;margin:4px 0}.drawer{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.drawer+.drawer{margin-top:10px}.drawer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;font-weight:600;color:var(--ink);-webkit-user-select:none;user-select:none}.drawer>summary::-webkit-details-marker{display:none}.drawer>summary:hover{background:var(--panel-2)}.drawer>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.drawer-chevron{transition:transform .2s ease;color:var(--ink2);font-size:.85rem}.drawer[open]>summary .drawer-chevron{transform:rotate(90deg)}.drawer[open]>summary{border-bottom:1px solid var(--line)}.drawer-body{padding:16px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#10182880;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.modal-content{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px #10182840;width:min(720px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--panel-2)}.modal-header h2{margin:0;font-size:1.1rem;font-weight:650}.close-btn{border:none;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink2);padding:0 6px;border-radius:8px}.close-btn:hover{background:var(--line);color:var(--ink)}.modal-body{padding:20px;overflow:auto}.modal-footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}@media (max-width:600px){.wrap{padding:12px 14px}main{margin:14px auto;padding:0 12px 32px}h1{font-size:1.25rem}.card>h2,.card>h3{padding:14px 16px;font-size:1rem}.card .body,.card .stack,.card .controls{padding:16px}.pill,.btn{font-size:.85rem}.kv{grid-template-columns:1fr;gap:2px 0}.kv .label{padding-top:8px}}