:root{--ink:#1B1A3A;--bg:#FAFAFF;--line:#E4E2F5;--v:#6C4DFF;--c:#D93F45;--s:#FFC233;--m:#0B8A6C;--k:#1F6FD6}
*{box-sizing:border-box}body{margin:0;font:400 16px/1.6 Sora,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit}button,input,select{font:inherit}
.w{max-width:1080px;margin:auto;padding:0 20px}
header .w{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;font-size:18px}
.logo svg{width:30px;height:30px}
nav a{margin-left:18px;text-decoration:none;font-size:14px;font-weight:600}nav a:hover{color:var(--v)}
h1{font-size:clamp(32px,5.4vw,54px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:0 0 16px}
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding:30px 0 50px}
.hero p{font-size:18px;max-width:44ch;margin:0 0 20px}
.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{border:1.5px solid var(--line);border-radius:99px;padding:4px 14px;font-size:13px;font-weight:600;background:#fff}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:78px;gap:12px}
.tile{border-radius:18px;padding:16px;text-decoration:none;color:#fff;display:flex;flex-direction:column;justify-content:space-between;transition:transform .18s,box-shadow .18s}
.tile:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 12px 24px -10px rgba(27,26,58,.45)}
.tile b{font-size:17px;line-height:1.2}.tile small{opacity:.9;font-size:12.5px;line-height:1.35}.tile i{font-style:normal;font-size:26px}
.t1{grid-column:span 4;grid-row:span 2;background:var(--v)}.t2{grid-column:span 2;grid-row:span 2;background:var(--c)}
.t3{grid-column:span 2;grid-row:span 2;background:var(--m)}.t4{grid-column:span 2;grid-row:span 2;background:var(--k)}.t5{grid-column:span 2;grid-row:span 2;background:var(--s);color:var(--ink)}
.about{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:30px 0 50px;border-top:1.5px solid var(--line)}
.about h3{margin:0 0 6px;font-size:17px}.about p{margin:0;color:#4b4a6e;font-size:15px}
.page{padding:10px 0 60px}.crumb{font-size:14px;font-weight:600;text-decoration:none;color:var(--v)}
.page h2{font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;margin:10px 0 4px}.page>.w>p{margin:0 0 22px;color:#4b4a6e}
.panel{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 18px 40px -28px rgba(27,26,58,.5)}
.drop{border:2px dashed #b9b2ee;border-radius:16px;padding:38px 16px;text-align:center;cursor:pointer;background:#F6F4FF;transition:.15s}
.drop.on,.drop:hover{border-color:var(--v);background:#EEEAFF}
.list{list-style:none;margin:14px 0;padding:0}.list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:14px;word-break:break-all}
.list small{color:#64638a}.list button,.bar button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:5px 11px;cursor:pointer;font-weight:600}
.list button:hover,.bar button:hover,.bar button.on{background:var(--v);color:#fff;border-color:var(--v)}
.btn{background:var(--v)!important;color:#fff!important;border:0!important;border-radius:12px!important;padding:12px 24px!important;font-weight:800!important;cursor:pointer}
.btn:disabled{opacity:.4;cursor:not-allowed}.btn:not(:disabled):hover{background:#5236e6!important}
label{display:block;font-size:14px;font-weight:600;margin:14px 0}label input:not([type=checkbox]),label select{display:block;width:100%;max-width:340px;margin-top:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff}
.chk{display:flex;gap:8px;align-items:center}.row{display:flex;gap:18px;flex-wrap:wrap}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0}.bar input[type=number]{width:70px;padding:6px;border:1.5px solid var(--line);border-radius:10px}.bar input[type=color]{width:38px;height:34px;border:0;background:none;padding:0}.sp{flex:1}
.stage{position:relative;overflow:auto;background:#EDEBFA;border-radius:14px;padding:12px;text-align:center}
.stage div{position:relative;display:inline-block;max-width:100%}.stage canvas{max-width:100%;height:auto;display:block}#ov{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.res{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:#E9FBF5;margin-top:8px;font-size:14px;flex-wrap:wrap}.res a{font-weight:800;color:#0a7e63}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:9;max-width:90vw}#toast.on{opacity:1}#toast.err{background:#c62b4a}
footer{border-top:1.5px solid var(--line);padding:26px 0;font-size:14px;color:#6c6b8f;text-align:center}
:focus-visible{outline:3px solid var(--k);outline-offset:2px}
@media(max-width:820px){.hero,.about{grid-template-columns:1fr}.mosaic{grid-auto-rows:70px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

header .w{flex-wrap:wrap;gap:10px}nav{display:flex;flex-wrap:wrap;gap:4px 18px}nav a{margin:0}
.doc{max-width:760px}.doc h2{font-size:24px;margin:34px 0 8px;letter-spacing:-.01em}.doc h3{font-size:18px;margin:22px 0 6px}.doc p,.doc li{color:#3c3b5c}.doc ol,.doc ul{padding-left:22px}.doc li{margin-bottom:6px}
details{border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;margin:8px 0;background:#fff}summary{cursor:pointer;font-weight:600}details p{margin:8px 0 2px}
.pg{padding:20px 0 60px}.pg h1{font-size:clamp(28px,4.4vw,42px)}.pg .lead{color:#4b4a6e;margin:0 0 22px;max-width:62ch}
footer nav{justify-content:center;margin-bottom:10px}footer nav a{font-weight:600;text-decoration:none}footer nav a:hover{color:var(--v)}
textarea{width:100%;max-width:520px;min-height:140px;margin-top:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:20px 0}.grid2 a{border:1.5px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;background:#fff;font-weight:600}.grid2 a small{display:block;font-weight:400;color:#4b4a6e}.grid2 a:hover{border-color:var(--v)}

body{background:linear-gradient(180deg,#FFF3F8 0,#F1F5FF 420px,#FAFBFF 100%)}
header{position:relative}header::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#6C4DFF,#D93F45,#FFC233,#0B8A6C,#1F6FD6)}
.about{border-top:0}.about>div{border-radius:18px;padding:20px}.about>div:nth-child(1){background:#EEEAFF}.about>div:nth-child(2){background:#FFEDEE}.about>div:nth-child(3){background:#E3F8F1}
.panel{border-top:5px solid var(--v)}.tags span{background:#FFF8E1;border-color:#F3DFA0}
.grid2 a:nth-child(4n+1){background:#F3F0FF}.grid2 a:nth-child(4n+2){background:#FFF0F0}.grid2 a:nth-child(4n+3){background:#E9FAF4}.grid2 a:nth-child(4n){background:#FFF8E1}

.hero{grid-template-columns:1fr;text-align:center;padding:36px 0 26px}.hero p{margin:0 auto 20px}.tags{justify-content:center}
.mosaic{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-auto-rows:auto;gap:14px}.tile{min-height:132px}
.c0{background:var(--v)}.c1{background:var(--c)}.c2{background:var(--s);color:var(--ink)}.c3{background:var(--m)}.c4{background:var(--k)}