:root{
 --bg:#07101b;
 --bg2:#0d1726;
 --panel:#0c1421;
 --panel2:#101b2d;
 --line:rgba(120,150,210,.18);
 --text:#ecf3ff;
 --muted:#9fb3d7;
 --accent:#76d1ff;
 --accent2:#8ee144;
 --danger:#ff8e8e;
 --shadow:0 22px 60px rgba(0,0,0,.32);
 --radius:22px;
 }
 *{box-sizing:border-box}
 html,body{height:100%;margin:0}
 body{
 font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
 color:var(--text);
 background:
 radial-gradient(circle at 18% 0%, rgba(70,104,170,.22), transparent 30%),
 radial-gradient(circle at 82% 10%, rgba(122,214,255,.14), transparent 28%),
 linear-gradient(180deg,#08111d 0%, #07101a 30%, #040810 100%);
 }
 .app{
 display:grid;
 grid-template-columns:minmax(0,1fr) 400px;
 gap:16px;
 height:100%;
 padding:16px;
 }
 .panel{
 background:linear-gradient(180deg,rgba(14,24,40,.96),rgba(8,13,24,.96));
 border:1px solid var(--line);
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 overflow:hidden;
 min-height:0;
 }
 .stage{position:relative;min-height:0}
 #view{display:block;width:100%;height:100%}
 .head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 padding:16px 18px;
 border-bottom:1px solid rgba(120,150,210,.12);
 background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
 }
 .head h1,.head h2,.head h3{margin:0}
 .head h1{font-size:16px;line-height:1.2}
 .head small{color:var(--muted);display:block;margin-top:4px}
 .view-wrap{position:relative;height:calc(100% - 76px)}
 .overlay{
 position:absolute;
 left:18px;
 right:18px;
 bottom:18px;
 display:flex;
 flex-wrap:wrap;
 gap:8px;
 pointer-events:none;
 }
 .chip{
 padding:8px 12px;
 font-size:12px;
 border-radius:999px;
 background:rgba(8,14,24,.72);
 border:1px solid rgba(132,172,235,.18);
 color:#dce8ff;
 backdrop-filter:blur(10px);
 }
 .sidebar{display:flex;flex-direction:column;min-height:0}
 .scroll{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:14px}
 .section{
 background:linear-gradient(180deg,rgba(11,18,31,.96),rgba(8,13,24,.96));
 border:1px solid rgba(132,172,235,.13);
 border-radius:18px;
 padding:14px;
 }
 .section h3{margin:0 0 10px;font-size:13px}
 .section p{margin:0;color:#dbe6ff;line-height:1.45;font-size:13px}
 .muted{color:var(--muted)!important}
 .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
 .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
 label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
 input,select,button,textarea{
 width:100%;
 font:inherit;
 color:var(--text);
 background:#0a1322;
 border:1px solid rgba(115,150,212,.22);
 border-radius:12px;
 padding:9px 10px;
 outline:none;
 }
 input[type="range"]{padding:0}
 input[type="color"]{padding:4px;height:42px}
 button{
 cursor:pointer;
 background:linear-gradient(180deg,#13223e,#0c1830);
 transition:.16s ease;
 }
 button:hover{transform:translateY(-1px);border-color:rgba(149,212,255,.44)}
 button.secondary{background:linear-gradient(180deg,#17311b,#102313)}
 button.ghost{background:#0a1322}
 button.danger{background:linear-gradient(180deg,#38181d,#241013);border-color:rgba(255,116,142,.26)}
 .check{
 display:flex;
 align-items:center;
 gap:10px;
 padding:10px 12px;
 border-radius:14px;
 background:#0a1322;
 border:1px solid rgba(115,150,212,.16);
 color:#dce6fb;
 font-size:12px;
 }
 .check input{width:auto;margin:0}
 .note{
 font-size:12px;
 line-height:1.45;
 color:#d5e5ff;
 border:1px solid rgba(125,211,252,.18);
 background:rgba(125,211,252,.06);
 padding:11px 12px;
 border-radius:14px;
 }
 .list{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto;padding-right:2px}
 .card{
 border:1px dashed rgba(132,172,235,.18);
 background:rgba(8,12,22,.62);
 border-radius:14px;
 padding:10px;
 }
 .card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
 .card-top strong{font-size:12px}
 .tiny{font-size:11px;color:var(--muted)}
 .legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
 .legend-item{
 display:flex;align-items:center;gap:8px;
 font-size:12px;color:#dce6fb;
 padding:8px 10px;border-radius:999px;
 border:1px solid rgba(132,172,235,.14);
 background:rgba(7,12,21,.7);
 cursor:pointer;user-select:none;
 }
 .legend-item--off{opacity:.46}
 .legend-check{accent-color:#7ab7ff;cursor:pointer}
 .swatch{width:12px;height:12px;border-radius:999px;border:1px solid rgba(255,255,255,.15)}
 .footer-note{font-size:11px;color:var(--muted);line-height:1.45}
 .pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
 .pill{font-size:11px;border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(115,150,212,.16);color:#dce6fb}
 .phase-ruler{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
 .phase-step{
 padding:10px 8px;
 border-radius:16px;
 text-align:center;
 font-weight:700;
 letter-spacing:.01em;
 background:linear-gradient(180deg,#0f1d34,#0a1425);
 border:1px solid rgba(115,150,212,.18);
 color:#dce6fb;
 }
 .phase-step.active{
 background:linear-gradient(180deg,rgba(113,78,214,.28),rgba(38,63,145,.18));
 border-color:rgba(150,205,255,.62);
 box-shadow:0 0 0 1px rgba(121,187,255,.14) inset, 0 10px 28px rgba(49,82,169,.22);
 }
 .phase-caption{margin-top:8px;text-align:center;font-size:11px;color:var(--muted);line-height:1.35}

 .guide-card{border:1px solid rgba(130,171,236,.18);background:linear-gradient(180deg,rgba(17,26,47,.82),rgba(8,12,22,.72));box-shadow:0 18px 42px rgba(0,0,0,.22)}
 .guide-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9dc5ff;margin-bottom:8px}
 .guide-heading{font-size:18px;line-height:1.15;margin:0 0 8px;font-weight:800}
 .guide-text{font-size:12px;line-height:1.6;color:#dce6fb}
 .guide-text p{margin:0 0 10px}
 .guide-text p:last-child{margin-bottom:0}
 .guide-callout{margin-top:10px;padding:11px 12px;border-radius:14px;background:rgba(79,120,219,.10);border:1px solid rgba(140,196,255,.20);color:#e8f1ff}
 .guide-callout strong{color:#ffffff}
 .guide-mini{margin-top:10px;font-size:11px;line-height:1.5;color:#9fc3ff}
 .guide-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:12px 0 0}
 .guide-step{padding:8px 0;border-radius:12px;border:1px solid rgba(115,150,212,.16);background:linear-gradient(180deg,#0f1d34,#0a1425);color:#dce6fb;font-weight:800;font-size:12px;text-align:center;cursor:pointer}
 .guide-step.active{background:linear-gradient(180deg,rgba(113,78,214,.30),rgba(38,63,145,.20));border-color:rgba(150,205,255,.7);box-shadow:0 0 0 1px rgba(121,187,255,.14) inset, 0 10px 24px rgba(49,82,169,.20)}
 .guide-nav-top{display:flex;justify-content:flex-start;margin-top:14px}
 .tutorialStepTag{display:inline-flex;align-items:center;min-width:86px;padding:10px 14px;border-radius:20px;background:linear-gradient(180deg,rgba(32,49,90,.92),rgba(20,30,56,.92));border:1px solid rgba(145,187,255,.28);box-shadow:0 14px 34px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.03);font-size:13px;font-weight:800;color:#eef5ff;line-height:1.05;text-align:left}
 .tutorialActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
 .tbtn{width:100%;padding:13px 14px;border-radius:16px;border:1px solid rgba(120,160,230,.18);font-weight:800;font-size:13px;letter-spacing:-.01em;color:#eaf2ff;background:linear-gradient(180deg,#13223e,#0c1830);box-shadow:0 10px 24px rgba(0,0,0,.18);display:inline-flex;align-items:center;justify-content:center;gap:8px}
 .tbtn:hover{transform:translateY(-1px);border-color:rgba(149,212,255,.44)}
 .tbtn.ghost{background:linear-gradient(180deg,#101d34,#0a1426)}
 .tbtn.primary{background:linear-gradient(180deg,#79f0ff,#6e7dff);color:#07101b;border-color:rgba(188,240,255,.72);box-shadow:0 14px 28px rgba(84,124,255,.24)}
 .tbtn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
 .guide-float{position:absolute;left:18px;top:18px;max-width:360px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(14,23,42,.92),rgba(9,14,26,.84));border:1px solid rgba(148,197,255,.20);box-shadow:0 18px 44px rgba(0,0,0,.34);backdrop-filter:blur(10px);pointer-events:none}
 .guide-float-step{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#9dc5ff;margin-bottom:6px}
 .guide-float-title{font-size:16px;font-weight:800;line-height:1.15;color:#f4f8ff}
 .guide-float-text{margin-top:6px;font-size:12px;line-height:1.45;color:#dbe7fb}

 .stage>.head,.guide-float,.overlay,.advanced-only{display:none!important}
 .hidden-panel{display:none!important}
 .stage>.view-wrap{height:100%!important}
 .reference-figure{width:100%;display:block;border-radius:18px;border:1px solid rgba(133,173,235,.18);box-shadow:0 18px 44px rgba(0,0,0,.22);margin-top:10px}
 .reference-caption{margin-top:8px;font-size:11px;line-height:1.5;color:var(--muted)}
 .head small,.section p,.note,.guide-text,.guide-text p,.guide-callout,.guide-mini,.phase-caption,.footer-note,.reference-caption,.guide-float-text,#sceneDescription{ text-align:justify; text-justify:inter-word; hyphens:auto; }

 @media (max-width:1120px){
 .app{grid-template-columns:1fr;grid-template-rows:minmax(56vh,1fr) auto;height:auto}
 .view-wrap{height:58vh}
 }