*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:#f4f7fb;color:#172033}.progress{height:3px;position:fixed;top:0;left:0;right:0;z-index:9999}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#7c3aed,#06b6d4)}header{height:64px;position:sticky;top:0;z-index:1000;background:#fffffff2;backdrop-filter:blur(12px);border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 18px;gap:15px}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#111827;font-weight:800;font-size:20px}.brand span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;box-shadow:0 8px 20px #2563eb44}nav{display:flex;gap:4px;margin-left:auto}nav a{color:#475569;text-decoration:none;font-size:12px;font-weight:700;padding:9px;border-radius:8px}nav a:hover{background:#eef2ff;color:#2563eb}header button{border:0;background:#eef2ff;border-radius:8px;padding:9px;cursor:pointer}#menu{display:none}.layout{display:flex}.layout aside{position:fixed;top:64px;bottom:0;width:220px;background:#111827;padding:18px 12px;overflow:auto;z-index:900}.layout aside h3{color:#fff;margin:4px 9px 15px}.layout aside a,.layout aside button{display:block;width:100%;background:transparent;border:0;color:#cbd5e1;text-align:left;text-decoration:none;padding:10px 11px;border-radius:8px;cursor:pointer}.layout aside a:hover,.layout aside button:hover{background:#1e293b;color:#fff}.layout aside hr{border:0;border-top:1px solid #334155;margin:14px 8px}main{margin-left:220px;width:calc(100% - 220px);padding:25px;max-width:1600px}.hero{min-height:245px;border-radius:22px;padding:35px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(135deg,#172554,#312e81,#075985);box-shadow:0 20px 50px #17255422;overflow:hidden}.hero small{letter-spacing:2px;font-weight:800;background:#ffffff1f;padding:7px 10px;border-radius:99px}.hero h1{font-size:clamp(31px,5vw,54px);margin:17px 0 8px}.hero p{max-width:720px;line-height:1.7;color:#dbeafe}.art{display:flex;align-items:center;gap:15px}.art b{background:#fff;color:#1e3a8a;padding:22px 15px;border-radius:14px;box-shadow:0 15px 30px #0003;animation:float 4s ease-in-out infinite}.art b:last-child{animation-delay:.6s}.art strong{font-size:30px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}.stats div{text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:13px;padding:13px;color:#64748b;font-size:11px}.stats b{display:block;color:#172033;font-size:20px}.card{background:#fff;border:1px solid #e4e9f0;border-radius:16px;padding:19px;margin:15px 0;box-shadow:0 8px 25px #0f172a0a}.head{display:flex;justify-content:space-between}.head h2,.card h2{margin:0 0 5px;font-size:20px}.head p,.card>p{margin:0 0 12px;color:#64748b;font-size:13px}.head em{color:#16a34a;font-size:11px;font-style:normal;font-weight:bold}.toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:9px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:8px}.toolbar button,.toolbar select,.toolbar input{min-height:34px;border:1px solid #d6deea;background:#fff;border-radius:7px;padding:5px 8px;cursor:pointer}.toolbar input{width:38px;padding:2px}.editor{min-height:390px;border:1px solid #cfd8e3;border-radius:10px;padding:20px;line-height:1.7;outline:0}.editor:focus{box-shadow:inset 0 0 0 2px #2563eb33}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.actions button,.exports button{border:1px solid #d6deea;background:#fff;padding:10px 14px;border-radius:9px;cursor:pointer;font-weight:700}.primary{background:linear-gradient(135deg,#2563eb,#4f46e5)!important;color:#fff!important;border:0!important}.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.grid .card{margin:0}.grid textarea{width:100%;height:500px;border:1px solid #cbd5e1;border-radius:10px;background:#0f172a;color:#dbeafe;padding:14px;font:13px/1.6 Consolas,monospace;resize:vertical}.grid #preview{height:500px;overflow:auto;border:1px solid #e2e8f0;border-radius:10px;padding:20px}.exports{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.big{min-height:48px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.features article{padding:14px;border:1px solid #e5e7eb;border-radius:11px;background:#fafcff}.features p,.guide p,.guide li{font-size:13px;color:#526176;line-height:1.7}.guide h3{margin-top:23px}.guide ol{padding-left:22px}#questions{display:grid;gap:10px;margin:15px 0}.q{background:#f8fafc;border:1px solid #e1e7ef;border-radius:10px;padding:12px}.q label{display:block;margin:5px 0;font-size:13px}.q button{margin-top:6px;padding:6px 9px;border:1px solid #cbd5e1;border-radius:7px;background:#fff}.result{font-weight:700;margin-left:8px}details{padding:12px;border-bottom:1px solid #e5e7eb}summary{cursor:pointer;font-weight:700}footer{text-align:center;color:#64748b;font-size:12px;padding:28px}footer a{color:#2563eb}.dark{background:#0b1220;color:#e5e7eb}.dark header,.dark .card,.dark .stats div,.dark #preview,.dark .editor{background:#111827;color:#e5e7eb}.dark .toolbar{background:#0f172a}.dark .toolbar button,.dark .toolbar select{background:#111827;color:#fff}.fullscreen{position:fixed!important;inset:75px 15px 15px;z-index:3000;background:#fff;padding:15px;box-shadow:0 20px 60px #0005}.fullscreen .editor{height:calc(100vh - 160px);overflow:auto}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@media(max-width:900px){#menu{display:block}nav{display:none;position:absolute;top:60px;left:10px;right:10px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px;flex-direction:column}nav.open{display:flex}.layout aside{transform:translateX(-100%);transition:.25s}.layout aside.open{transform:translateX(0)}main{margin-left:0;width:100%;padding:14px}.art{display:none}.grid{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,1fr)}.exports{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){main{padding:8px}.card{padding:13px}.hero{padding:24px}.hero h1{font-size:32px}.stats{grid-template-columns:repeat(2,1fr);gap:7px}.features,.exports{grid-template-columns:1fr}.toolbar{gap:4px}.toolbar button,.toolbar select{font-size:12px}.editor{min-height:320px;padding:14px}.grid textarea,.grid #preview{height:380px}}