:root{--ink:#14213d;--paper:#eef2fb;--blue:#3a4de0;--mint:#1fa37a;--mut:#5b6785;--line:#d5dcf0}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
h1,h2,h3{font-family:Georgia,"Iowan Old Style",serif;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.1rem)}h2{font-size:clamp(1.6rem,3.5vw,2.3rem)}
a{color:var(--blue)}.w{max-width:1060px;margin:auto;padding:0 20px}.s{padding:54px 0}.mut{color:var(--mut)}
.bar{background:var(--ink);color:#fff;text-align:center;padding:8px 12px;font-size:.9rem}.bar a{color:#aebaff}
nav{display:flex;align-items:center;gap:22px;padding:18px 0;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none}nav .logo{font:700 1.5rem Georgia,serif;margin-right:auto}
.logo span{display:inline-block;width:.8em;height:.8em;border:2px solid var(--blue);border-radius:50%;margin-right:6px;position:relative;top:1px}
.btn{display:inline-block;background:var(--blue);color:#fff!important;border:0;border-radius:8px;padding:12px 20px;font:600 1rem system-ui,sans-serif;cursor:pointer;text-decoration:none}
.btn.o{background:none;color:var(--ink)!important;border:1.5px solid var(--ink)}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:center;padding:40px 0 64px}
.hero p{font-size:1.15rem;max-width:34em}.hero .btn{margin:6px 10px 0 0}
.orb{position:relative;aspect-ratio:1;width:100%;max-width:380px;margin:auto}
.orb i{position:absolute;border:1.5px solid var(--blue);border-radius:50%;opacity:.4}
.orb i:nth-child(1){inset:0}.orb i:nth-child(2){inset:16%}.orb i:nth-child(3){inset:32%}
.orb u{position:absolute;inset:41%;background:var(--blue);border-radius:50%}
.orb b{position:absolute;inset:0;animation:sp 16s linear infinite}
.orb b:after{content:"";position:absolute;top:-8px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:var(--mint)}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.orb b{animation:none}}
.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{font-size:1.25rem}.ic{font-size:1.6rem;color:var(--blue)}
.tag{display:inline-block;background:#dff5ec;color:#117a58;border-radius:99px;padding:2px 12px;font-size:.85rem;font-weight:600}
.price{font:700 3.2rem Georgia,serif}
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
form.f{max-width:420px;margin:auto}
label{display:block;font-weight:600;margin:14px 0 4px}
input,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff}
input:focus,textarea:focus,.btn:focus,a:focus,summary:focus{outline:3px solid #9fb0ff;outline-offset:2px}
.flash{background:#fff;border-left:4px solid var(--blue);padding:12px 16px;border-radius:6px;margin:0}
.err{background:#fde8e4;border-left:4px solid #d6401f;padding:12px 16px;border-radius:6px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
td,th{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:.95rem}
.sc{overflow-x:auto}
footer{background:var(--ink);color:#c8d0ea;padding:44px 0 30px;margin-top:40px}
footer a{color:#fff}footer h3{color:#fff}footer form{display:flex;gap:8px;max-width:420px}
.del{background:none;border:0;color:#d6401f;cursor:pointer;font:inherit;padding:0}
@media(max-width:760px){.hero{grid-template-columns:1fr}.orb{max-width:240px}}
/* dark tool theme */
:root{--ink:#f2f2f7;--paper:#0a0a0e;--card:#14141b;--blue:#ff2d95;--mut:#8f8fa6;--line:#25252f}
.card,details,input,textarea,select,table,.flash{background:var(--card);color:var(--ink)}
.bar{background:#ff2d95;color:#fff}.bar a{color:#fff;font-weight:700}
footer{background:#050508}.tag{background:#12301f;color:#5cf0a8}.err{background:#3a1218;color:#ffb4b4}
select{padding:8px;border:1.5px solid var(--line);border-radius:8px;font:inherit}
.tg{display:grid;grid-template-columns:1fr 350px;gap:18px;align-items:start}
.stage,.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.view{aspect-ratio:16/9;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:conic-gradient(#1d1d26 25%,#15151c 0 50%,#1d1d26 0 75%,#15151c 0) 0 0/24px 24px}
.view canvas{max-width:100%;max-height:100%;touch-action:none}
.tb{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}.tb select{width:auto}
.tabs,.seg{display:flex;gap:5px;background:#0d0d13;border-radius:10px;padding:4px;margin-bottom:12px;flex-wrap:wrap}
.tabs button,.seg button{flex:1;border:0;border-radius:7px;background:none;color:var(--mut);padding:8px 6px;font:600 .82rem system-ui,sans-serif;cursor:pointer}
.tabs .on,.seg .on{background:#fff;color:#111}
.panel [data-pane]{display:none}.panel .show{display:block}
.sw{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.sw button{aspect-ratio:1;border:2px solid transparent;border-radius:8px;cursor:pointer}.sw .on{border-color:#fff}
.ck{background:conic-gradient(#888 25%,#ccc 0 50%,#888 0 75%,#ccc 0) 0 0/10px 10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:.9rem;flex-wrap:wrap}
.row input[type=range]{flex:1;padding:0;accent-color:var(--blue)}.row select{width:auto}
label.ck,.row label{display:flex;gap:6px;align-items:center;margin:0;font-weight:500;background:none}
input[type=checkbox]{width:auto;accent-color:var(--blue)}input[type=color]{height:42px;padding:3px}
.bl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:300px;overflow:auto}
.bl button{background:#0d0d13;border:2px solid transparent;border-radius:8px;padding:5px;cursor:pointer;color:var(--mut);font-size:.62rem}
.bl img{width:100%;image-rendering:pixelated;display:block}.bl .on{border-color:var(--blue)}
@media(max-width:900px){.tg{grid-template-columns:1fr}}