@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap');
:root{--purple:#7152d6;--ink:#242335;--muted:#777584;--line:#e9e7ef}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:#fcfbfe;color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:15px}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #b19be9;outline-offset:4px}header,main,footer{max-width:1160px;margin:auto}header{height:96px;display:flex;align-items:center;gap:64px;border-bottom:1px solid var(--line)}.brand{font:900 31px system-ui;letter-spacing:-1.8px;display:inline-flex;align-items:center}.brand span{color:var(--purple)}.brand i{font-size:24px;font-style:normal;color:var(--purple);margin-left:5px}nav{display:flex;gap:32px;font-size:14px}nav a:hover{color:var(--purple)}.free{margin-left:auto;font-size:12px;color:var(--muted)}.free b{color:#51a386;font-size:10px;margin-right:6px}.hero{position:relative;padding:67px 0 35px;min-height:490px}.eyebrow{font:600 10px system-ui;letter-spacing:2px;color:var(--muted)}.eyebrow span{color:var(--purple);font-size:18px;margin-right:7px}h1{font-size:66px;line-height:1.25;letter-spacing:-2.5px;margin:23px 0 20px;font-weight:900}.purple{color:var(--purple)}.spark{color:#d8a741;font-size:56px;margin-left:16px;font-weight:400}.hero p{line-height:1.9;color:var(--muted);margin-bottom:25px}.primary{display:inline-flex;justify-content:center;gap:36px;align-items:center;background:var(--purple);color:#fff;border:0;border-radius:12px;padding:14px 25px;font-weight:600}.primary:hover{background:#5c3dbb}.hero-note{margin-top:34px;color:#85818f;font-size:11px;display:flex;gap:25px}.hero-art{position:absolute;right:25px;top:55px;width:430px;height:360px}.orbit{position:absolute;inset:10px 10px 0;background:radial-gradient(ellipse,#eee6fc,transparent 70%);border:1px dashed #ddd2ec;border-radius:50%;transform:rotate(-20deg)}.mini-wheel{position:absolute;width:245px;height:245px;border-radius:50%;background:conic-gradient(#a796eb 0 45deg,#f5d393 45deg 90deg,#e4b3ce 90deg 135deg,#b8d9cd 135deg 180deg,#b8b6e9 180deg 225deg,#f0c9a0 225deg 270deg,#c7bbea 270deg 315deg,#edd9b5 315deg);border:9px solid white;box-shadow:0 15px 45px #65508b20;left:85px;top:55px;transform:rotate(-12deg)}.mini-wheel:before{content:'▼';position:absolute;top:-30px;left:100px;color:#6850b3;font-size:38px;text-shadow:0 3px white}.hub{position:absolute;inset:85px;border:5px solid #fff;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--purple);font-size:32px}.dice-art{position:absolute;right:7px;bottom:10px;font:100px system-ui;background:white;border-radius:25px;color:#8e76cc;transform:rotate(15deg);line-height:1.1;padding:0 8px;box-shadow:0 12px 25px #66518515}.float-tag{position:absolute;background:#fff;padding:10px 18px;border:1px solid var(--line);border-radius:12px;font-size:12px;box-shadow:0 6px 15px #34254508;z-index:2}.tag-top{right:0;top:25px;transform:rotate(7deg)}.tag-bottom{left:10px;bottom:25px;transform:rotate(-7deg)}.art-star{position:absolute;left:24px;top:25px;font-size:48px;color:#b9a2de}#tools{padding-top:25px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2{font-size:27px;margin:9px 0 26px;letter-spacing:-.7px}.section-title>span{color:var(--muted);font-size:12px}.toolbar{display:flex;justify-content:space-between;gap:15px;margin-bottom:25px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filters button{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:9px;padding:9px 14px;font-size:12px}.filters button.active{background:#eee9fa;color:var(--purple);border-color:#e4dcf5}.filters small{margin-left:6px}.search{border:1px solid var(--line);border-radius:9px;background:white;display:flex;align-items:center;padding:0 12px;gap:10px}.search input{border:0;background:transparent;outline:none;min-width:0;width:160px;padding:10px 0;font-size:12px}.search:focus-within{outline:2px solid #b19be9}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tool{background:#fff;border:1px solid var(--line);border-radius:17px;padding:23px;transition:transform .2s,box-shadow .2s}.tool:hover{transform:translateY(-4px);box-shadow:0 10px 30px #4d397b10;border-color:#cfc0ed}.card-top{display:flex;align-items:center;justify-content:space-between}.icon{width:53px;height:53px;border-radius:15px;display:grid;place-items:center;font-size:28px;background:#f0eafd}.color-1 .icon{background:#fff0e2}.color-2 .icon{background:#e9f2ff}.color-3 .icon{background:#e7f4ef}.color-4 .icon{background:#fbeaf0}.color-5 .icon{background:#fff5d9}.badge{font-size:9px;background:#f4efff;color:var(--purple);padding:4px 8px;border-radius:5px}.tool h3{font-size:17px;margin:19px 0 7px}.tool p{font-size:12px;color:var(--muted);margin:0}.card-link{display:flex;justify-content:space-between;margin-top:25px;font-size:11px;color:#8e879a}.card-link b{color:var(--purple);font-size:17px;font-weight:400}.bottom-note{display:flex;align-items:center;gap:25px;background:#f1edf8;border:1px solid #e8e1f3;border-radius:18px;margin:48px 0;padding:28px 32px}.bottom-note>span{font-size:46px;color:#9576c9}.bottom-note h2{font-size:18px;margin:0 0 7px}.bottom-note p{font-size:12px;color:var(--muted);line-height:1.9;margin:0}.bottom-note a{margin-left:auto;font-size:12px;color:var(--purple);white-space:nowrap}footer{border-top:1px solid var(--line);padding:26px 0 35px;display:flex;align-items:center;gap:30px}footer .brand{font-size:24px}footer>span,footer small{font-size:11px;color:var(--muted)}footer small{margin-left:auto}dialog{border:1px solid var(--line);border-radius:23px;padding:28px;width:580px;max-width:calc(100% - 28px);max-height:90dvh;color:var(--ink);box-shadow:0 30px 100px #24153f33}dialog::backdrop{background:#24203580;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;color:var(--purple);font-size:10px;letter-spacing:2px}.dialog-head button{border:0;background:#f2eff7;border-radius:50%;width:34px;height:34px}dialog h2{margin:15px 0 4px}dialog p{color:var(--muted);font-size:13px}#fields label{display:block;font-size:13px;margin:15px 0}#fields input:not([type=checkbox]),#fields textarea,#fields select{display:block;border:1px solid #dcd7e7;border-radius:10px;padding:11px;width:100%;margin-top:6px;background:#fff;color:var(--ink)}#fields textarea{height:155px;resize:vertical}.row{display:flex;gap:15px}.row>label{flex:1;min-width:0}form .primary{width:100%;margin-top:10px}#result{padding:24px 18px;border-radius:12px;margin-top:20px;background:#f4f0fb;color:#5d40a4;text-align:center;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere;max-height:270px;overflow:auto}#result.error{color:#a52740;background:#fff0f1}.result-actions{display:flex;gap:12px;align-items:center;font-size:12px;margin-top:10px}.result-actions button{border:1px solid #ded6ed;border-radius:8px;background:white;padding:7px 12px;color:var(--purple)}.privacy{text-align:center;font-size:10px!important}.live-wheel{display:block;margin:15px auto;max-width:100%;width:240px;height:240px}.swatch{height:80px;border-radius:10px;margin-bottom:12px}[hidden]{display:none!important}@media(max-width:1200px){header,main,footer{margin-left:35px;margin-right:35px}}@media(max-width:850px){.grid{grid-template-columns:repeat(3,1fr)}.hero-art{right:0;transform:scale(.75);transform-origin:right center}.hero h1{font-size:55px}.hero p{font-size:13px}.toolbar{flex-wrap:wrap}header{gap:30px}.free{display:none}.hero-art{opacity:.75}.hero-note{gap:12px}.hero{min-height:460px}}@media(max-width:600px){header,main,footer{margin-left:20px;margin-right:20px}header{height:75px;justify-content:space-between}.brand{font-size:27px}nav{gap:18px;font-size:12px}.hero{padding-top:35px;min-height:0}.hero h1{font-size:48px}.hero-art{position:relative;right:auto;top:auto;width:100%;height:290px;transform:scale(.85);transform-origin:center;opacity:1;margin-top:-5px}.mini-wheel{left:calc(50% - 122px);top:25px}.tag-top{top:5px}.tag-bottom{bottom:5px}.dice-art{bottom:-10px}.hero p br{display:none}.hero-note{font-size:9px;flex-wrap:wrap;margin-top:15px;gap:10px}.section-title>span{display:none}.section-title h2{font-size:24px}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.tool{padding:16px}.tool h3{font-size:15px}.tool p{font-size:11px}.badge{font-size:8px;padding:3px 5px}.icon{width:43px;height:43px;font-size:25px}.filters button{padding:8px 9px;font-size:11px}.search{width:100%}.search input{width:100%}.bottom-note{padding:22px;gap:14px;flex-wrap:wrap;margin:30px 0}.bottom-note>span{font-size:30px}.bottom-note h2{font-size:15px}.bottom-note a{margin-left:44px}.bottom-note p br{display:none}footer{flex-wrap:wrap;gap:12px}footer>span{font-size:10px}footer small{margin-left:0;width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}