:root{
 --bg:#f7f9fc;--card:#fff;--text:#102036;--muted:#6f7d90;--line:#e4e9f0;--accent:#1278ff;--teal:#18b6a4;--soft:#eef5ff;--soft2:#f1fbf8;--shadow:0 18px 48px rgba(28,49,78,.10);--shadow-sm:0 8px 26px rgba(28,49,78,.06)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.45}body.dark{--bg:#0c1420;--card:#121e2e;--text:#f3f7fc;--muted:#9aabc0;--line:#26364b;--soft:#182b44;--soft2:#143029;--shadow:0 18px 48px rgba(0,0,0,.28);--shadow-sm:0 8px 26px rgba(0,0,0,.18)}button,input,select,textarea{font:inherit}button{color:inherit}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{max-width:1220px;margin:auto;min-height:92px;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;min-width:0}.brand img{width:312px;height:74px;display:block;object-fit:contain;object-position:left center}.site-header nav{display:flex;align-items:center;gap:22px}.site-header nav a{font-size:14px;font-weight:760;color:var(--muted);text-decoration:none}.site-header nav a:hover{color:var(--text)}.theme-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:18px}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 22% 0%,rgba(22,181,164,.15),transparent 31%),radial-gradient(circle at 83% 5%,rgba(76,104,255,.13),transparent 28%),linear-gradient(180deg,color-mix(in srgb,var(--card) 68%,transparent),transparent)}.hero:after{content:"";position:absolute;inset:auto -120px -220px auto;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,48,.10),transparent 66%);pointer-events:none}.hero-inner{max-width:920px;margin:auto;text-align:center;padding:82px 20px 74px}.eyebrow{display:inline-flex;padding:8px 13px;border:1px solid color-mix(in srgb,var(--teal) 25%,var(--line));border-radius:999px;background:var(--soft2);color:#137e73;font-size:11px;font-weight:850;letter-spacing:1.25px}.dark .eyebrow{color:#77ddcf}.hero h1{font-size:clamp(46px,7vw,78px);line-height:.98;letter-spacing:-4px;margin:22px auto 18px;max-width:850px}.hero h1 .accent-word{background:linear-gradient(100deg,#0d78ff,#19bca2 62%,#6d61ff);background-clip:text;-webkit-background-clip:text;color:transparent}.hero p{max-width:735px;margin:0 auto 29px;font-size:18px;color:var(--muted)}
.search-wrap{max-width:760px;margin:auto;position:relative}.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:19px;padding:6px 12px 6px 16px;box-shadow:var(--shadow)}.search-icon{font-size:29px;color:var(--muted);line-height:1}.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);padding:15px 8px;font-size:16px}.search kbd{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:3px 7px;color:var(--muted);font-size:12px}.results{position:absolute;z-index:25;left:0;right:0;top:68px;border-radius:15px;overflow:hidden;box-shadow:var(--shadow);text-align:left}.results button{display:block;width:100%;padding:13px 16px;border:0;border-bottom:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--text);text-align:left}.results button:hover{background:var(--soft)}.results small{color:var(--muted);display:block;margin-top:2px}.hero-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}.hero-chips button{border:1px solid var(--line);background:color-mix(in srgb,var(--card) 92%,transparent);border-radius:999px;padding:9px 13px;font-weight:650;font-size:13px;cursor:pointer}.hero-chips button:hover{border-color:#a4c9fb;transform:translateY(-1px)}.trust-row{margin-top:22px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:12px}
.wrap{max-width:1220px;margin:auto;padding:58px 20px}.sectionhead{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.sectionhead small,.why-brand small{font-weight:850;color:#168c7d;letter-spacing:1.3px}.sectionhead h2,.why-brand h2{font-size:32px;letter-spacing:-1.1px;margin:5px 0 0}.sectionhead>span{color:var(--muted);font-size:13px}
.toolgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tool{display:flex;align-items:center;gap:14px;min-height:84px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.2s}.tool:hover,.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}.tool-ico,.cat-ico{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,var(--soft),var(--soft2));font-size:22px}.tool b{font-size:14px}.tool small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.category-section{padding-top:46px}.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.cat{background:var(--card);border:1px solid var(--line);border-radius:21px;padding:21px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.2s}.cat h3{margin:14px 0 6px;font-size:17px}.cat p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;min-height:39px}.cat strong{display:block;margin-top:14px;color:#168b7c;font-size:12px}
.workspace-wrap{padding-top:45px}.tool-browser{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}.tool-tabs{position:sticky;top:110px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:10px;box-shadow:var(--shadow-sm);max-height:calc(100vh - 135px);overflow:auto}.tool-tabs button{width:100%;display:flex;align-items:center;gap:9px;text-align:left;border:0;background:transparent;color:var(--muted);padding:10px 11px;border-radius:11px;cursor:pointer;font-size:13px;font-weight:680}.tool-tabs button:hover{background:var(--soft);color:var(--text)}.tool-tabs button.active{background:linear-gradient(100deg,#0f7aff,#18b8a3);color:white}.workspace{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-sm);min-height:390px}.workspace-title{display:flex;align-items:center;gap:13px;margin-bottom:7px}.workspace-title .big-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,var(--soft),var(--soft2));font-size:24px}.workspace h3{font-size:27px;letter-spacing:-.5px;margin:0}.workspace .desc{color:var(--muted);margin:0 0 23px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:13px;font-weight:760}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:12px;padding:12px;outline:none}.field textarea{min-height:180px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#78aef4;box-shadow:0 0 0 3px rgba(18,120,255,.08)}.wide{grid-column:1/-1}.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.primary,.secondary{border-radius:12px;padding:12px 18px;cursor:pointer;font-weight:780;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary{border:0;background:linear-gradient(100deg,#0d79ff,#18b9a2);color:#fff}.secondary{border:1px solid var(--line);background:var(--card);color:var(--text)}.output{margin-top:19px;border:1px solid var(--line);background:var(--bg);border-radius:15px;padding:16px;min-height:62px;overflow-wrap:anywhere}.output strong{font-size:19px}.output small{display:block;color:var(--muted);margin-top:5px}.output pre{white-space:pre-wrap;margin:0;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.image-preview{display:block;max-width:100%;max-height:370px;border-radius:14px;margin:14px auto 0;border:1px solid var(--line)}
.why{padding-top:28px}.why-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}.why-brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 8px 15px rgba(18,100,160,.15))}.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.promise div{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:20px}.promise b,.promise span{display:block}.promise span{font-size:12px;line-height:1.5;color:var(--muted);margin-top:5px}
footer{border-top:1px solid var(--line);margin-top:38px;background:color-mix(in srgb,var(--card) 58%,transparent)}.footer-inner{max-width:1220px;margin:auto;padding:24px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:46px;height:46px;object-fit:contain}.footer-brand b{color:var(--text)}.footer-brand p{margin:2px 0 0;color:var(--muted);font-size:12px}.footer-inner>span{color:var(--muted);font-size:12px}
@media(max-width:980px){.toolgrid,.catgrid{grid-template-columns:repeat(2,1fr)}.tool-browser{grid-template-columns:1fr}.tool-tabs{position:static;max-height:none;display:flex;overflow:auto;white-space:nowrap;padding:8px}.tool-tabs button{width:auto;flex:0 0 auto}.brand img{width:265px;height:66px}.site-header nav a{display:none}}
@media(max-width:640px){html{scroll-padding-top:78px}.header-inner{min-height:76px;padding:5px 14px}.brand img{width:218px;height:58px}.theme-btn{width:38px;height:38px}.hero-inner{padding:62px 16px 58px}.hero h1{font-size:46px;letter-spacing:-2.7px}.hero p{font-size:16px}.search kbd{display:none}.wrap{padding:45px 15px}.sectionhead{align-items:flex-start}.sectionhead h2,.why-brand h2{font-size:27px}.sectionhead>span{display:none}.toolgrid,.catgrid{grid-template-columns:1fr 1fr;gap:10px}.tool{align-items:flex-start;min-height:110px;flex-direction:column;gap:9px}.cat{padding:16px}.cat p{display:none}.cat h3{font-size:15px}.workspace{padding:19px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.promise{grid-template-columns:1fr 1fr}.why-brand img{width:50px;height:50px}.footer-inner{align-items:flex-start}.footer-inner>span{text-align:right}}
@media(max-width:410px){.brand img{width:195px}.toolgrid,.catgrid{grid-template-columns:1fr}.tool{min-height:auto;flex-direction:row}.promise{grid-template-columns:1fr}}
/* Build 4 controls */
.subtools{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.subtools .secondary.active{background:linear-gradient(100deg,#0d79ff,#18b9a2);color:#fff;border-color:transparent}.inline{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px}.check{display:flex!important;flex-direction:row!important;align-items:center;gap:9px!important;font-weight:650!important}.check input{width:auto!important}.field input[type="range"]{padding:0;border:0;box-shadow:none;background:transparent;accent-color:#138ee4}.field input:disabled{opacity:.55;cursor:not-allowed}.output>.action-row{margin-top:12px}
@media(max-width:640px){.inline{grid-template-columns:minmax(0,1fr) 82px}.subtools{gap:6px}.subtools .secondary{padding:10px 12px;font-size:12px}}

/* Build 5 - animated random number cube + dice roller */
.number-die-card,.dice-card{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,var(--card),var(--soft));box-shadow:var(--shadow-sm)}
.number-die-stage{min-height:230px;display:grid;place-items:center;perspective:900px;overflow:visible}
.number-cube{position:relative;width:132px;height:132px;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(18deg);transition:transform .45s cubic-bezier(.2,.75,.3,1)}
.number-cube.number-rolling{animation:numberCubeRoll .9s cubic-bezier(.18,.72,.28,1) both}
.cube-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:22px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(145deg,#0d79ff,#18b9a2 62%,#6d61ff);color:#fff;font-weight:900;font-size:36px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px rgba(16,76,148,.20);backface-visibility:hidden;text-shadow:0 2px 10px rgba(0,0,0,.18);overflow:hidden;padding:10px;text-align:center}
.cube-front{transform:translateZ(66px)}.cube-back{transform:rotateY(180deg) translateZ(66px)}.cube-right{transform:rotateY(90deg) translateZ(66px)}.cube-left{transform:rotateY(-90deg) translateZ(66px)}.cube-top{transform:rotateX(90deg) translateZ(66px)}.cube-bottom{transform:rotateX(-90deg) translateZ(66px)}
.number-die-caption{text-align:center;color:var(--muted);font-weight:700}.number-die-caption strong{color:var(--text);font-size:1.25rem}
@keyframes numberCubeRoll{0%{transform:rotateX(-12deg) rotateY(18deg) translateY(0) scale(1)}20%{transform:rotateX(150deg) rotateY(160deg) translateY(-18px) scale(1.06)}48%{transform:rotateX(330deg) rotateY(405deg) translateY(7px) scale(.97)}76%{transform:rotateX(520deg) rotateY(615deg) translateY(-8px) scale(1.03)}100%{transform:rotateX(708deg) rotateY(738deg) translateY(0) scale(1)}}
.dice-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.dice-head>div{display:grid;gap:4px}.dice-head small{color:var(--muted)}
.dice-stage{min-height:180px;display:grid;place-items:center;perspective:700px}.dice{position:relative;width:112px;height:112px;border-radius:24px;background:linear-gradient(145deg,#fff,#eef2f7);box-shadow:0 18px 35px rgba(15,23,42,.20),inset 0 1px 0 rgba(255,255,255,.9);border:1px solid rgba(15,23,42,.08);transition:transform .18s ease}.dark .dice{background:linear-gradient(145deg,#edf4ff,#cbd7e8)}.dice.rolling{animation:diceRoll .7s cubic-bezier(.22,.75,.32,1) both}
.pip{position:absolute;width:18px;height:18px;border-radius:50%;background:#172033;box-shadow:inset 0 2px 2px rgba(255,255,255,.15)}.p1{left:20px;top:20px}.p3{right:20px;top:20px}.p4{left:20px;top:47px}.p5{left:47px;top:47px}.p6{right:20px;top:47px}.p7{left:20px;bottom:20px}.p9{right:20px;bottom:20px}.dice-result{text-align:center;font-size:1.05rem;font-weight:700}.dice-result strong{font-size:1.45rem}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}20%{transform:rotate(90deg) scale(1.08) translateY(-8px)}45%{transform:rotate(210deg) scale(.98) translateY(5px)}70%{transform:rotate(330deg) scale(1.06) translateY(-4px)}100%{transform:rotate(360deg) scale(1)}}
.primary:disabled,.secondary:disabled{opacity:.6;cursor:wait}
@media(max-width:560px){.number-die-stage{min-height:200px}.number-cube{width:108px;height:108px}.cube-face{font-size:30px;border-radius:18px}.cube-front{transform:translateZ(54px)}.cube-back{transform:rotateY(180deg) translateZ(54px)}.cube-right{transform:rotateY(90deg) translateZ(54px)}.cube-left{transform:rotateY(-90deg) translateZ(54px)}.cube-top{transform:rotateX(90deg) translateZ(54px)}.cube-bottom{transform:rotateX(-90deg) translateZ(54px)}.dice{width:96px;height:96px;border-radius:21px}.pip{width:15px;height:15px}.p1{left:17px;top:17px}.p3{right:17px;top:17px}.p4{left:17px;top:40px}.p5{left:40px;top:40px}.p6{right:17px;top:40px}.p7{left:17px;bottom:17px}.p9{right:17px;bottom:17px}}

/* Build 6 — Image tools + playful hero buddy */
.hero-title-wrap{position:relative;display:inline-block;max-width:900px}
.hero-title-wrap h1{position:relative;z-index:1}
.hop-target{position:relative}
.hero-buddy-mover{position:absolute;left:0;top:0;width:118px;height:118px;z-index:3;pointer-events:none;will-change:left,top,transform;transform-origin:50% 78%}
.hero-buddy{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 12px rgba(18,120,255,.22));transform-origin:50% 78%;animation:buddyIdle 2.6s ease-in-out infinite}
.hero-buddy-shadow{position:absolute;z-index:1;left:24%;right:24%;bottom:8px;height:12px;border-radius:50%;background:rgba(10,28,52,.22);filter:blur(5px);transform:scaleX(.88);transform-origin:center;opacity:.38;will-change:transform,opacity}
@keyframes buddyIdle{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}46%{transform:translateY(-2px) rotate(1.5deg) scale(1.005)}52%{transform:translateY(-3px) rotate(2deg) scale(.995,1.01)}58%{transform:translateY(-1px) rotate(0deg) scale(1.01,.99)}}
.color-picker-stage{margin-top:16px;border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--bg);overflow:auto}.color-picker-stage canvas{display:block;max-width:100%;height:auto;margin:auto;border-radius:10px;cursor:crosshair}.batch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.batch-row:last-child{border-bottom:0}
@media(max-width:640px){.hero-buddy-mover{width:86px;height:86px}.batch-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.hero-buddy{animation:none}}

/* Build 6: Image category quick window */
.category-modal[hidden]{display:none}
.category-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(8,18,34,.38);backdrop-filter:blur(8px)}
.category-modal-card{width:min(760px,100%);max-height:min(72vh,680px);overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 28px 90px rgba(11,31,61,.24);display:flex;flex-direction:column}
.category-modal-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.category-modal-title{display:flex;align-items:center;gap:12px;min-width:0}.category-modal-title .big-ico{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,var(--soft),var(--soft2));font-size:24px}.category-modal-title h3{margin:0;font-size:22px;letter-spacing:-.5px}.category-modal-title p{margin:2px 0 0;color:var(--muted);font-size:12px}.category-modal-close{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer;font-size:22px;line-height:1}.category-modal-close:hover{transform:rotate(5deg);background:var(--soft)}
.category-tool-list{padding:18px;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.category-tool-btn{display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--bg);cursor:pointer;min-height:64px;transition:.18s}.category-tool-btn:hover{transform:translateY(-2px);background:var(--soft);border-color:color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:var(--shadow-sm)}.category-tool-btn .mini-ico{width:36px;height:36px;border-radius:11px;background:var(--card);display:grid;place-items:center;flex:0 0 auto;font-size:18px;border:1px solid var(--line)}.category-tool-btn b{display:block;font-size:13px;line-height:1.15}.category-tool-btn small{display:block;color:var(--muted);font-size:10px;margin-top:3px;line-height:1.25}
body.modal-open{overflow:hidden}
@media(max-width:760px){.category-tool-list{grid-template-columns:repeat(2,minmax(0,1fr))}.category-modal-card{max-height:78vh}.category-modal-head{padding:16px}.category-tool-list{padding:12px}}
@media(max-width:480px){.category-tool-list{grid-template-columns:1fr}.category-modal{padding:10px}.category-modal-title h3{font-size:19px}.category-tool-btn{min-height:58px}}

/* Build 6 image category hover menu */
.image-hover-menu{position:fixed;z-index:80;width:min(660px,calc(100vw - 28px));max-height:min(520px,72vh);overflow:auto;background:color-mix(in srgb,var(--card,#fff) 84%,transparent);-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);border:1px solid color-mix(in srgb,var(--line,#e4eaf2) 78%,transparent);border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.16);padding:14px;opacity:0;transform:translateY(8px) scale(.985);transition:opacity .16s ease,transform .16s ease}.image-hover-menu.show{opacity:1;transform:none}.image-hover-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 6px 12px}.image-hover-head div{display:flex;flex-direction:column}.image-hover-head b{font-size:17px}.image-hover-head small{color:var(--muted,#64748b);margin-top:2px}.image-hover-head a{font-weight:800;text-decoration:none;color:#2563eb}.image-hover-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.image-hover-list a{display:flex;align-items:center;gap:9px;padding:10px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid transparent}.image-hover-list a:hover{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.14);transform:translateY(-1px)}.image-hover-list .mini-ico{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(37,99,235,.08);font-weight:800;flex:0 0 auto}.image-hover-list span:last-child{min-width:0}.image-hover-list b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-hover-list small{display:none}.cat[data-category="Image"]{cursor:pointer}.cat[data-category="Image"]:after{content:'Hover for tools';position:absolute;right:12px;top:12px;font-size:10px;font-weight:800;padding:5px 7px;border-radius:999px;background:rgba(37,99,235,.08);color:#2563eb}.cat{position:relative}@media(max-width:760px){.image-hover-menu{position:fixed!important;left:14px!important;right:14px!important;top:auto!important;bottom:14px!important;width:auto;max-height:72vh}.image-hover-list{grid-template-columns:repeat(2,minmax(0,1fr))}.cat[data-category="Image"]:after{content:'Tap for tools'}}

/* Build 6 polish — spring headline + animated Image category */
.spring-word{display:inline-block;white-space:nowrap}.spring-letter{display:inline-block;position:relative;transform-origin:50% 100%;will-change:transform}.headline-punct{display:inline-block}.hero-title-wrap h1{overflow:visible}
.cat[data-category="Image"]{overflow:hidden;transition:transform .22s cubic-bezier(.2,.9,.25,1),box-shadow .22s,border-color .22s}.cat[data-category="Image"]:before{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.65) 48%,transparent 61%);transform:translateX(-70%) rotate(6deg);transition:transform .55s ease;pointer-events:none}.cat[data-category="Image"]:hover{transform:translateY(-5px) scale(1.012);box-shadow:0 18px 40px rgba(37,99,235,.15);border-color:rgba(37,99,235,.25)}.cat[data-category="Image"]:hover:before{transform:translateX(72%) rotate(6deg)}.cat[data-category="Image"] .cat-ico,.cat[data-category="Image"] .ico{transition:transform .24s cubic-bezier(.2,.9,.25,1)}.cat[data-category="Image"]:hover .cat-ico,.cat[data-category="Image"]:hover .ico{transform:rotate(-7deg) scale(1.09)}.cat[data-category="Image"].image-click-pop{animation:imageCatClick .34s cubic-bezier(.2,.9,.25,1)}
.image-hover-menu{transform-origin:top left}.image-hover-menu.show{animation:imageMenuSpring .24s cubic-bezier(.2,.9,.25,1)}.image-hover-list a{transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}.image-hover-list a:hover{box-shadow:0 7px 16px rgba(37,99,235,.09)}.image-hover-list a:active{transform:translateY(1px) scale(.97)}.image-hover-list a.tool-clicked{animation:toolClickPop .28s ease-out}
@keyframes imageCatClick{0%{transform:scale(1)}35%{transform:scale(.965)}70%{transform:scale(1.025)}100%{transform:scale(1)}}@keyframes imageMenuSpring{0%{opacity:0;transform:translateY(10px) scale(.97)}65%{opacity:1;transform:translateY(-2px) scale(1.008)}100%{opacity:1;transform:none}}@keyframes toolClickPop{0%{transform:scale(1)}45%{transform:scale(.95)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.spring-letter,.cat[data-category="Image"],.image-hover-menu.show{animation:none!important;transition:none!important}}

/* Build 6 hero contact + accent visibility fix */
.hero h1 .accent-word{background:none!important;background-clip:initial!important;-webkit-background-clip:initial!important;color:inherit!important}
.hero h1 .accent-word .spring-letter{background:none!important;-webkit-text-fill-color:currentColor}
.hero h1 .accent-word .spring-word:first-child .spring-letter:nth-child(1){color:#0d78ff}
.hero h1 .accent-word .spring-word:first-child .spring-letter:nth-child(2){color:#149cf1}
.hero h1 .accent-word .spring-word:nth-child(2) .spring-letter:nth-child(1){color:#18bca8}
.hero h1 .accent-word .spring-word:nth-child(2) .spring-letter:nth-child(2){color:#20b4b7}
.hero h1 .accent-word .spring-word:nth-child(2) .spring-letter:nth-child(3){color:#3b95df}
.hero h1 .accent-word .spring-word:nth-child(2) .spring-letter:nth-child(4){color:#6d61ff}
.hero-buddy{animation:none}
.hero-buddy-mover{transform-origin:50% 72%;}
@media(max-width:640px){.hero-buddy-mover{width:82px;height:82px}}

/* Build 7 PDF category mirrors Image category interactions */
.cat[data-category="PDF & Document"]{cursor:pointer}
.cat[data-category="PDF & Document"]:after{content:'Hover for tools';position:absolute;right:12px;top:12px;font-size:10px;font-weight:800;padding:5px 7px;border-radius:999px;background:rgba(37,99,235,.08);color:#2563eb}
@media(max-width:760px){.cat[data-category="PDF & Document"]:after{content:'Tap for tools'}}

/* Build 7 PDF hover polish — exactly mirrors Image Tools interaction */
.cat[data-category="PDF & Document"]{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.9,.25,1),box-shadow .22s,border-color .22s;
}
.cat[data-category="PDF & Document"]:before{
  content:'';
  position:absolute;
  inset:-40%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.65) 48%,transparent 61%);
  transform:translateX(-70%) rotate(6deg);
  transition:transform .55s ease;
  pointer-events:none;
}
.cat[data-category="PDF & Document"]:hover,
.cat[data-category="PDF & Document"]:focus-visible{
  transform:translateY(-5px) scale(1.012);
  box-shadow:0 18px 40px rgba(37,99,235,.15);
  border-color:rgba(37,99,235,.25);
  outline:none;
}
.cat[data-category="PDF & Document"]:hover:before,
.cat[data-category="PDF & Document"]:focus-visible:before{
  transform:translateX(72%) rotate(6deg);
}
.cat[data-category="PDF & Document"] .cat-ico,
.cat[data-category="PDF & Document"] .ico{
  transition:transform .24s cubic-bezier(.2,.9,.25,1);
}
.cat[data-category="PDF & Document"]:hover .cat-ico,
.cat[data-category="PDF & Document"]:hover .ico,
.cat[data-category="PDF & Document"]:focus-visible .cat-ico,
.cat[data-category="PDF & Document"]:focus-visible .ico{
  transform:rotate(-7deg) scale(1.09);
}
.cat[data-category="PDF & Document"].image-click-pop{
  animation:imageCatClick .34s cubic-bezier(.2,.9,.25,1);
}
.pdf-hover-menu{
  transform-origin:top left;
}
.pdf-hover-menu.show{
  animation:imageMenuSpring .24s cubic-bezier(.2,.9,.25,1);
}
.pdf-hover-menu .image-hover-head{
  position:sticky;
  top:-14px;
  z-index:2;
  margin:-14px -14px 6px;
  padding:14px 20px 12px;
  background:color-mix(in srgb,var(--card,#fff) 96%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line,#e4eaf2);
}
.pdf-hover-menu .image-hover-list a:hover{
  background:rgba(37,99,235,.07);
  border-color:rgba(37,99,235,.14);
  box-shadow:0 7px 16px rgba(37,99,235,.09);
}
@media(prefers-reduced-motion:reduce){
  .cat[data-category="PDF & Document"],
  .pdf-hover-menu.show{animation:none!important;transition:none!important}
}

/* Build 7 global branded color picker */
.global-color-orb{position:relative}.global-color-btn{width:100%;min-height:42px;border:1px solid #d8e3f1;border-radius:13px;background:linear-gradient(135deg,#fff,#f8fbff);display:flex;align-items:center;gap:9px;padding:7px 10px;cursor:pointer}.global-color-btn>span{width:27px;height:27px;border-radius:9px;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1}.global-color-btn em{margin-left:auto;font-style:normal}.global-color-pop{position:absolute;z-index:90;top:calc(100% + 7px);left:0;width:215px;padding:10px;background:#fff;border:1px solid #dbe5f2;border-radius:15px;box-shadow:0 18px 44px rgba(15,23,42,.18);display:grid;grid-template-columns:repeat(5,32px);gap:8px}.global-color-pop[hidden]{display:none}.global-color-pop>button,.global-color-pop>label{width:32px;height:32px;border-radius:10px;border:2px solid #fff;box-shadow:0 0 0 1px #d1d9e6;background:var(--c);cursor:pointer}.global-color-pop>label{display:grid;place-items:center;position:relative;background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ef4444);color:#fff;font-weight:900}.global-color-pop input[type=color]{position:absolute;inset:0;opacity:0}

/* DoKitly Build 1 — brand system */
:root{
  --dk-navy:#0b3e82;
  --dk-blue:#0f67c8;
  --dk-teal:#08a6b5;
  --dk-cyan:#12d5c4;
  --dk-gradient:linear-gradient(112deg,var(--dk-navy) 0%,var(--dk-blue) 42%,var(--dk-teal) 72%,var(--dk-cyan) 100%);
}
.site-header{background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(18px)}
.brand img{width:210px;height:auto;max-height:56px;object-fit:contain}
.hero{background:radial-gradient(circle at 20% 0%,rgba(18,213,196,.16),transparent 32%),radial-gradient(circle at 84% 0%,rgba(15,103,200,.15),transparent 30%),linear-gradient(180deg,color-mix(in srgb,var(--card) 72%,transparent),transparent)}
.hero-inner{max-width:1080px;padding-top:76px}
.hero-title-wrap{max-width:1040px}
.hero h1{max-width:1000px;font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-3.2px}
.hero h1 .accent-word .spring-letter{background:var(--dk-gradient)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.hero-buddy{filter:drop-shadow(0 12px 22px rgba(11,62,130,.20))}
.eyebrow{border-color:rgba(8,166,181,.25);color:#087f8d;background:rgba(18,213,196,.08)}
.search:focus-within{border-color:rgba(8,166,181,.55);box-shadow:0 18px 50px rgba(11,62,130,.12),0 0 0 4px rgba(18,213,196,.08)}
.primary,.tool-tabs button.active{background:var(--dk-gradient)!important}
.footer-brand img,.why-brand img{filter:drop-shadow(0 8px 18px rgba(11,62,130,.16))}
@media(max-width:640px){.brand img{width:170px;max-height:48px}.hero h1{font-size:40px;letter-spacing:-2px}.hero-inner{padding-top:54px}}

/* DoKitly Build 2 — final brand asset hardening */
.brand img{background:transparent!important;object-fit:contain;object-position:left center;filter:none}
.hero-buddy,.why-brand img,.footer-brand img{background:transparent!important}
.hero-buddy{border-radius:22%;}


/* DoKitly Build 2 — universal category interaction polish */
.cat{position:relative;overflow:hidden;isolation:isolate;transition:transform .22s cubic-bezier(.2,.9,.25,1),box-shadow .22s,border-color .22s}
.cat:before{content:'';position:absolute;z-index:-1;inset:-45%;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.68) 48%,transparent 62%);transform:translateX(-74%) rotate(6deg);transition:transform .55s ease;pointer-events:none}
.cat:hover,.cat:focus-visible{transform:translateY(-5px) scale(1.012);box-shadow:0 18px 40px rgba(37,99,235,.14);border-color:rgba(37,99,235,.25)}
.cat:hover:before,.cat:focus-visible:before{transform:translateX(72%) rotate(6deg)}
.cat .cat-ico{transition:transform .24s cubic-bezier(.2,.9,.25,1),box-shadow .2s}.cat:hover .cat-ico,.cat:focus-visible .cat-ico{transform:rotate(-6deg) scale(1.09);box-shadow:0 8px 18px rgba(37,99,235,.12)}
.cat h3{transition:color .18s,transform .18s}.cat:hover h3,.cat:focus-visible h3{color:#168b7c;transform:translateX(2px)}
.cat:not([data-category="Image"]):not([data-category="PDF & Document"]):after{content:'Hover for tools';position:absolute;right:12px;top:12px;font-size:10px;font-weight:800;padding:5px 7px;border-radius:999px;background:rgba(20,184,166,.09);color:#0f8f83}
.category-hover-menu{z-index:94}.category-hover-menu .image-hover-head>div{display:flex;align-items:center;gap:9px}.category-hover-menu .image-hover-head>div>span:first-child{font-size:19px}.category-hover-menu .image-hover-head small{display:block}
@media(max-width:760px){.cat:not([data-category="Image"]):not([data-category="PDF & Document"]):after{content:'Tap for tools'}}
@media(prefers-reduced-motion:reduce){.cat,.cat:before,.cat .cat-ico,.cat h3{transition:none!important}}

/* Build 2 refinement: compact category hover + desktop phone QR */
/* Build 2 hover glass refinement */
.image-hover-menu,.category-hover-menu,.pdf-hover-menu{background:color-mix(in srgb,var(--card,#fff) 84%,transparent);-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);border-color:color-mix(in srgb,var(--line,#e4eaf2) 76%,transparent)}
.image-hover-head{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(20,184,166,.025));border-radius:14px}
.image-hover-list a{background:rgba(255,255,255,.025);border-color:rgba(148,163,184,.08)}
.image-hover-list a:hover{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(20,184,166,.09));border-color:rgba(20,184,166,.18)}
[data-theme="dark"] .image-hover-menu,[data-theme="dark"] .category-hover-menu,[data-theme="dark"] .pdf-hover-menu{background:rgba(11,24,42,.82);border-color:rgba(148,163,184,.16)}
@media(max-width:760px){.image-hover-menu,.category-hover-menu,.pdf-hover-menu{background:color-mix(in srgb,var(--card,#fff) 94%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}}

.image-hover-menu{width:min(590px,calc(100vw - 28px));max-height:430px}
.image-hover-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.image-hover-head a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 11px;border-radius:10px;background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(20,184,166,.10));border:1px solid rgba(20,184,166,.14);transition:.18s}
.image-hover-head a:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(20,184,166,.16))}
.desktop-phone-strip{display:block;padding:18px 20px 4px}.phone-strip-inner{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:24px 28px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(120deg,color-mix(in srgb,var(--soft) 78%,var(--card)),color-mix(in srgb,var(--soft2) 82%,var(--card)));box-shadow:var(--shadow-sm);overflow:hidden;position:relative}.phone-strip-inner:after{content:'';position:absolute;right:-90px;top:-140px;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.16),transparent 68%);pointer-events:none}.phone-strip-copy{max-width:650px;position:relative;z-index:1}.phone-strip-kicker{font-size:10px;font-weight:900;letter-spacing:1.3px;color:#0f8f83}.phone-strip-copy h2{margin:5px 0 6px;font-size:28px;letter-spacing:-1px}.phone-strip-copy p{margin:0 0 14px;color:var(--muted)}.phone-strip-copy button{border:0;border-radius:12px;padding:10px 14px;background:linear-gradient(135deg,#1769ff,#16b6a4);color:#fff;font-weight:850;cursor:pointer;box-shadow:0 8px 22px rgba(24,112,220,.18)}.phone-qr-card{position:relative;z-index:1;display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 14px 10px 10px;box-shadow:var(--shadow-sm)}.phone-qr-card img{width:92px;height:92px;border-radius:10px;background:white;padding:4px}.phone-qr-card b,.phone-qr-card small{display:block}.phone-qr-card small{margin-top:4px;color:var(--muted);font-size:10px;max-width:180px;overflow:hidden;text-overflow:ellipsis}.cat strong{transition:color .18s,transform .18s}.cat:hover strong,.cat:focus-visible strong{color:#0f8f83;transform:translateX(2px)}
@media(max-width:900px){.desktop-phone-strip{display:none}.image-hover-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Build 2 standalone tool embed mode */
html.embed-mode,html.embed-mode body{background:transparent!important;min-height:0!important}
html.embed-mode body>.site-header,html.embed-mode body>.desktop-phone-strip,html.embed-mode body>footer,html.embed-mode body>.image-hover-menu{display:none!important}
html.embed-mode main>section:not(#workspace){display:none!important}
html.embed-mode #workspace{display:block!important;max-width:none!important;margin:0!important;padding:0!important}
html.embed-mode #workspace>.sectionhead,html.embed-mode .tool-tabs{display:none!important}
html.embed-mode .tool-browser{display:block!important}
html.embed-mode .workspace{border:0!important;box-shadow:none!important;border-radius:0!important;min-height:0!important;padding:18px 8px 8px!important;background:transparent!important}
html.embed-mode .workspace-title{margin-top:0}
html.embed-mode body.dark .workspace{background:transparent!important}

/* Dedicated tool pages are now the public tool experience. Keep the legacy workspace only as the embedded engine. */
html:not(.embed-mode) #workspace{display:none!important}

/* DoKitly Build 2 — production UI / SEO refinement */
html:not(.embed-mode) .embed-workspace{display:none!important}
html.embed-mode .embed-workspace{display:block!important;margin:0!important;padding:0!important;max-width:none!important}
html.embed-mode .tool-browser{border:0!important;box-shadow:none!important;background:transparent!important}
.brand img{background:transparent!important;filter:none!important;width:220px;height:58px;object-fit:contain;object-position:left center}
body.dark .brand img,.dark .brand img{filter:drop-shadow(0 2px 8px rgba(27,202,186,.12))!important}
.header-inner{min-height:76px;padding-top:7px;padding-bottom:7px}.site-header nav{gap:16px}.site-header nav a{white-space:nowrap}.hero-inner{padding-top:70px}.hero-title-static{position:relative;display:inline-block;max-width:900px}.hero-title-static h1{position:relative;z-index:2}.hero-buddy-static{position:absolute;right:-46px;top:-8px;width:54px;height:54px;z-index:1;animation:dkHeroFloat 3.8s ease-in-out infinite}.hero-buddy-static img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 15px rgba(12,91,148,.18))}@keyframes dkHeroFloat{50%{transform:translateY(-7px) rotate(2deg)}}
.toolgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool{color:inherit;text-decoration:none}.cat{text-decoration:none;color:inherit}.cat strong{display:inline-flex}
/* compact hover cards: reveal options without covering the page */
.image-hover-menu,.category-hover-menu,.pdf-hover-menu{width:min(440px,calc(100vw - 28px));max-height:350px;padding:10px;border-radius:16px;background:color-mix(in srgb,var(--card,#fff) 72%,transparent);-webkit-backdrop-filter:blur(12px) saturate(125%);backdrop-filter:blur(12px) saturate(125%);box-shadow:0 18px 48px rgba(15,23,42,.13)}
.image-hover-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.image-hover-list a{padding:8px;min-height:47px}.image-hover-list .mini-ico{width:28px;height:28px}.image-hover-head{padding:4px 4px 8px}.image-hover-head b{font-size:15px}.image-hover-head small{font-size:10px}.image-hover-head a{min-height:32px;padding:0 9px;font-size:12px}.cat[data-category="Image"]:after,.cat[data-category="PDF & Document"]:after{content:'Quick view';font-size:9px;padding:4px 6px}
body.dark .image-hover-menu,body.dark .category-hover-menu,body.dark .pdf-hover-menu{background:rgba(11,24,42,.72);border-color:rgba(148,163,184,.16)}
/* account / guest wallet */
.account-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 88%,transparent);border-radius:13px;padding:6px 9px;cursor:pointer;color:var(--text)}.account-btn>span:last-child{display:grid;text-align:left;line-height:1.05}.account-btn b{font-size:11px}.account-btn small{font-size:9px;color:var(--muted);margin-top:3px}.account-dot{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:white;font-weight:900;background:linear-gradient(135deg,#1769ff,#14b8a6);box-shadow:0 5px 14px rgba(23,105,255,.2)}
.account-modal[hidden]{display:none}.account-modal{position:fixed;inset:0;z-index:200;background:rgba(3,12,24,.42);backdrop-filter:blur(7px);display:grid;place-items:center;padding:18px}.account-card{width:min(470px,100%);position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 32px 100px rgba(4,18,38,.28)}.account-card h2{font-size:30px;margin:10px 0 8px}.account-card p{color:var(--muted);line-height:1.6}.account-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:1px solid var(--line);border-radius:11px;background:var(--bg);cursor:pointer;font-size:22px}.account-badge{display:inline-flex;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em;color:#0f766e;background:var(--soft2)}.account-balance{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}.account-balance span{color:var(--muted);font-size:12px}.account-balance b span{color:inherit;font-size:inherit}.account-cta{display:block;text-align:center;text-decoration:none;color:white;font-weight:900;padding:12px 14px;border-radius:13px;background:linear-gradient(135deg,#1769ff,#14b8a6);margin-bottom:10px}.account-card>small{display:block;color:var(--muted);text-align:center}
/* production footer */
.site-footer{border-top:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,var(--bg)),var(--card));padding:44px 20px 16px}.footer-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px}.footer-grid>div:not(.footer-about){display:flex;flex-direction:column;gap:9px}.footer-grid>div>b{font-size:13px;margin-bottom:4px}.footer-grid a{text-decoration:none;color:var(--muted);font-size:13px}.footer-grid a:hover{color:var(--text)}.footer-about>p{max-width:420px;color:var(--muted);font-size:13px;line-height:1.6}.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:42px;height:42px;object-fit:contain}.footer-brand b{font-size:20px}.footer-brand p{margin:2px 0 0;color:var(--muted);font-size:12px}.footer-bottom{max-width:1180px;margin:30px auto 0;padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:11px}
@media(max-width:960px){.site-header nav a:nth-of-type(1),.site-header nav a:nth-of-type(2){display:none}.brand img{width:190px;height:50px}.toolgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.hero-buddy-static{right:-20px;opacity:.85}}
@media(max-width:700px){.header-inner{min-height:68px;padding:6px 12px}.brand img{width:146px;height:43px}.site-header nav{gap:7px}.site-header nav a{display:none!important}.account-btn>span:last-child{display:none}.account-btn{padding:6px}.account-dot{width:30px;height:30px}.theme-btn{width:40px;height:40px}.hero-inner{padding-top:54px}.hero h1{font-size:clamp(40px,12vw,60px);letter-spacing:-2.5px}.hero-buddy-static{width:44px;height:44px;right:-8px;top:-16px}.toolgrid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-about{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column}.image-hover-menu,.category-hover-menu,.pdf-hover-menu{left:10px!important;right:10px!important;width:auto;max-height:58vh;background:color-mix(in srgb,var(--card,#fff) 94%,transparent)}}

/* DoKitly Build 2 — utility-first compact refinement */
html.embed-mode .workspace-title,
html.embed-mode .workspace>.desc{display:none!important}
html.embed-mode .workspace{padding:8px 8px 6px!important}
html.embed-mode .field textarea{min-height:128px}
html.embed-mode .form-grid{gap:10px}
html.embed-mode .action-row{margin-top:10px}
html.embed-mode .output{margin-top:10px;padding:12px 14px;min-height:50px}
html.embed-mode .field input,html.embed-mode .field select,html.embed-mode .field textarea{padding:10px 11px}
html.embed-mode .subtools{margin-bottom:10px}

.converter-type-row{display:flex;align-items:center;gap:10px;margin:0 0 10px}.converter-type-row label{font-size:12px;font-weight:900;color:var(--muted)}.converter-type-row select{width:min(220px,100%);border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:11px;padding:9px 11px;font:inherit;font-weight:750}
.converter-panel{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);align-items:stretch;gap:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--card),var(--soft));box-shadow:0 12px 35px rgba(15,23,42,.06);overflow:visible;position:relative}
.converter-side{padding:16px 18px;min-width:0}.converter-side:first-child{border-radius:19px 0 0 19px}.converter-side:last-child{border-radius:0 19px 19px 0}.converter-label{display:block;font-size:10px;letter-spacing:.13em;font-weight:950;color:var(--muted);margin-bottom:8px}.converter-side input{width:100%;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:clamp(24px,3.1vw,38px)!important;font-weight:900;color:var(--text);outline:0}.converter-side input[readonly]{color:#087f8d}.converter-side select{width:100%;margin-top:10px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--text);border-radius:11px;padding:9px 10px;font:inherit;font-weight:780;outline:0}.dark .converter-side select{background:rgba(15,23,42,.72)}
.swap-orb{align-self:center;justify-self:center;z-index:3;width:42px;height:42px;border-radius:50%;border:4px solid var(--card);background:linear-gradient(135deg,#1769ff,#14b8a6);color:#fff;font-size:21px;font-weight:950;cursor:pointer;box-shadow:0 10px 25px rgba(23,105,255,.26);display:grid;place-items:center;transition:transform .2s ease,filter .2s ease}.swap-orb:hover{filter:brightness(1.04);transform:scale(1.06)}.swap-orb.spin{animation:dkSwap .34s ease}.conversion-hint{margin:8px 4px 0;color:var(--muted);font-size:12px;text-align:center;min-height:18px}@keyframes dkSwap{50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg)}}
@media(max-width:620px){.converter-panel{grid-template-columns:1fr;gap:0}.converter-side{padding:14px 15px}.converter-side:first-child{border-radius:19px 19px 0 0}.converter-side:last-child{border-radius:0 0 19px 19px}.swap-orb{margin:-6px auto;width:40px;height:40px;transform:rotate(90deg)}.swap-orb:hover{transform:rotate(90deg) scale(1.04)}.swap-orb.spin{animation:dkSwapMobile .34s ease}.converter-side input{font-size:28px!important}@keyframes dkSwapMobile{50%{transform:rotate(270deg) scale(1.08)}100%{transform:rotate(450deg)}}}

/* =========================================================
   DoKitly Build 2 — FINAL utility-first refinement
   Compact first viewport, working category navigation,
   richer hero motion, repeat-use tools, shared 3D dice.
   ========================================================= */
@media(min-width:861px){
  .header-inner{min-height:60px!important;height:60px!important;padding:4px 18px!important;max-width:1240px!important}
  .brand img{width:184px!important;height:48px!important;max-height:48px!important}
  .site-header nav{gap:12px!important}.site-header nav a{font-size:12px!important;padding:7px 8px;border-radius:9px}.site-header nav a:hover{background:var(--soft)}
  .account-btn{padding:4px 7px!important}.account-dot{width:26px!important;height:26px!important}.theme-btn{width:36px!important;height:36px!important;border-radius:11px!important}
}
.hero{min-height:0!important}.hero-inner{max-width:1000px!important;padding:32px 20px 28px!important}.eyebrow{padding:6px 10px!important;font-size:9px!important;letter-spacing:1.1px!important}
.hero-title-wrap{position:relative!important;display:inline-block!important;max-width:930px!important;margin-top:8px!important}.hero h1{font-size:clamp(38px,5.3vw,58px)!important;line-height:1.02!important;letter-spacing:-2.7px!important;margin:8px auto 9px!important;max-width:930px!important}.spring-word{display:inline-flex;white-space:nowrap}.spring-letter{display:inline-block;transform-origin:50% 88%}.title-punct{display:inline-block;color:var(--muted)}
.hero p{max-width:760px!important;margin:0 auto 15px!important;font-size:14px!important;line-height:1.45!important}.hero-buddy-mover{width:66px!important;height:66px!important;z-index:4!important}.hero-buddy-shadow{bottom:2px!important;height:8px!important}.hero-buddy{width:100%!important;height:100%!important}
.search-wrap{max-width:790px!important}.search{min-height:52px!important;border-radius:16px!important;padding:4px 10px 4px 14px!important;box-shadow:0 14px 38px rgba(15,50,90,.10)!important}.search-icon{width:23px;height:23px;display:grid;place-items:center!important;flex:0 0 23px!important;font-size:0!important}.search-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.search input{padding:10px 5px!important;font-size:15px!important}.results{top:58px!important}.results a,.results button{display:block;width:100%;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--text);text-align:left;text-decoration:none}.results a:hover,.results button:hover{background:var(--soft)}.results small{color:var(--muted);display:block;margin-top:2px}
.hero-chips{margin-top:11px!important;gap:7px!important}.hero-chips a,.hero-chips button{display:inline-flex;align-items:center;text-decoration:none;color:var(--text);border:1px solid var(--line);background:color-mix(in srgb,var(--card) 94%,transparent);border-radius:999px;padding:6px 10px!important;font-weight:760;font-size:11px!important;cursor:pointer;transition:.16s}.hero-chips a:first-child,.hero-chips a:nth-child(2){border-color:rgba(20,184,166,.28);background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(20,184,166,.08))}.hero-chips a:hover,.hero-chips button:hover{border-color:#9bc8ef;transform:translateY(-1px)}.trust-row{margin-top:10px!important;gap:13px!important;font-size:10px!important}
#popular.wrap{padding-top:25px!important;padding-bottom:34px!important}#categories.wrap{padding-top:26px!important}.sectionhead{margin-bottom:14px!important}.sectionhead h2,.why-brand h2{font-size:26px!important;margin-top:2px!important}.sectionhead small,.why-brand small{font-size:9px!important}.tool{min-height:76px!important;padding:13px!important}.toolgrid{gap:11px!important}.catgrid{gap:12px!important}.cat{padding:16px!important;border-radius:17px!important}.cat h3{margin:10px 0 4px!important}.cat p{font-size:12px!important}.cat strong{margin-top:10px!important}
@media(max-width:860px){.hero-inner{padding:26px 14px 24px!important}.hero h1{font-size:clamp(34px,9.5vw,50px)!important;letter-spacing:-2px!important}.hero p{font-size:13px!important}.hero-buddy-mover{width:52px!important;height:52px!important}.hero-chips{justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:3px!important}.hero-chips a{white-space:nowrap!important}.trust-row{display:none!important}.search{min-height:50px!important}.header-inner{min-height:58px!important;height:58px!important}.brand img{width:145px!important;height:42px!important}.account-btn>span:last-child{display:none!important}.site-header nav a{display:none!important}.theme-btn{width:36px!important;height:36px!important}}

/* Shared DoKitly true-3D dice. The Randomizer tool uses the DoKitly 3D dice engine. */
.do-dice-3d.dice{position:relative!important;display:grid!important;place-items:center!important;width:112px!important;height:112px!important;margin:6px auto!important;background:transparent!important;border:0!important;box-shadow:none!important;perspective:520px!important;overflow:visible!important}.do-dice-3d.dice:after{content:"";position:absolute;left:50%;bottom:4px;width:70px;height:15px;border-radius:50%;background:rgba(5,35,55,.22);filter:blur(8px);transform:translateX(-50%);z-index:-1}.do-dice-3d .dice-cube3d{position:relative;width:78px;height:78px;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(8px 10px 8px rgba(0,24,38,.20))}.do-dice-3d .die-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;padding:10px;border-radius:16px;border:1px solid rgba(13,80,110,.18);backface-visibility:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset -8px -10px 18px rgba(7,81,107,.08)}.do-dice-3d .die-front{transform:translateZ(39px);background:linear-gradient(145deg,#fff,#e7f5f7)}.do-dice-3d .die-back{transform:rotateY(180deg) translateZ(39px);background:linear-gradient(145deg,#edf8fa,#cde5ea)}.do-dice-3d .die-right{transform:rotateY(90deg) translateZ(39px);background:linear-gradient(145deg,#e5f3f7,#c6dde5)}.do-dice-3d .die-left{transform:rotateY(-90deg) translateZ(39px);background:linear-gradient(145deg,#f4f9ff,#d7e5f2)}.do-dice-3d .die-top{transform:rotateX(90deg) translateZ(39px);background:linear-gradient(145deg,#fff,#f0fbfb)}.do-dice-3d .die-bottom{transform:rotateX(-90deg) translateZ(39px);background:linear-gradient(145deg,#d8eaef,#b5d1db)}.do-dice-3d .die-pip3{width:12px;height:12px;border-radius:50%;background:#103c52;box-shadow:inset 0 2px 2px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.16);opacity:0}.do-dice-3d .die-pip3.on{opacity:1}

/* Actual coin feel */
.coin-flip-stage{display:grid;place-items:center;min-height:190px;perspective:800px;margin-top:4px}.coin3d{position:relative;width:118px;height:118px;border-radius:50%;transform-style:preserve-3d;transition:transform .2s;filter:drop-shadow(0 18px 13px rgba(15,23,42,.25))}.coin3d:before{content:"";position:absolute;inset:-5px;border-radius:50%;background:repeating-linear-gradient(90deg,#8b6418 0 2px,#e5bb52 2px 4px);transform:translateZ(-3px);box-shadow:inset 0 0 0 3px #77520f}.coin-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;text-align:center;backface-visibility:hidden;border:5px solid #d6a93d;box-shadow:inset 0 0 0 3px #f6db83,inset 0 0 30px rgba(120,75,0,.25)}.coin-face b{font-size:18px;letter-spacing:.05em}.coin-face span{display:block;font-size:39px;line-height:1}.coin-heads{transform:translateZ(4px);background:radial-gradient(circle at 35% 28%,#fff0a2,#ddb344 50%,#a37417 100%);color:#6b4a0e}.coin-tails{transform:rotateY(180deg) translateZ(4px);background:radial-gradient(circle at 35% 28%,#fff3b6,#e7bd52 52%,#936515 100%);color:#60420d}.coin3d.flipping{animation:dkCoinFlip 1.05s cubic-bezier(.18,.75,.24,1)}.coin3d.land-heads{transform:rotateX(10deg) rotateY(0deg)}.coin3d.land-tails{transform:rotateX(10deg) rotateY(180deg)}@keyframes dkCoinFlip{0%{transform:translateY(0) rotateX(0) rotateY(0) scale(1)}38%{transform:translateY(-72px) rotateX(360deg) rotateY(540deg) scale(1.08)}72%{transform:translateY(-18px) rotateX(720deg) rotateY(980deg) scale(1.02)}88%{transform:translateY(3px) rotateX(790deg) rotateY(1080deg) scale(.98)}100%{transform:translateY(0) rotateX(800deg) rotateY(1080deg) scale(1)}}
.coin-result{text-align:center;font-weight:850;color:var(--muted);min-height:24px}.coin-result strong{color:var(--text);font-size:18px}

/* Passphrase/password modes and repeat-use utility polish */
.mode-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}.mode-tabs button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:850;cursor:pointer}.mode-tabs button.active{background:var(--dk-gradient);color:#fff;border-color:transparent}.range-value{font-variant-numeric:tabular-nums;color:#087f8d}.list-detect{font-size:11px;color:var(--muted);margin-top:5px}.saved-note{display:inline-flex;margin-top:7px;padding:5px 8px;border-radius:999px;background:var(--soft2);color:#0f766e;font-size:10px;font-weight:800}
.ai-status{display:flex;align-items:center;gap:7px;margin:7px 0 0;color:var(--muted);font-size:11px}.ai-status i{width:7px;height:7px;border-radius:50%;background:#14b8a6}.tag-cloud{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.tag-cloud button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 9px;font-size:11px;cursor:pointer}.study-list{display:grid;gap:8px;margin-top:9px}.study-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:9px 11px}.study-row small{display:block;color:var(--muted);margin-top:2px}.study-row button{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:6px 8px;cursor:pointer}.flash-card{min-height:132px;display:grid;place-items:center;text-align:center;padding:20px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,var(--card),var(--soft));cursor:pointer}.flash-card strong{font-size:20px}.flash-actions{display:flex;justify-content:center;gap:7px;margin-top:8px}.timer-display{text-align:center;font-size:clamp(42px,8vw,70px);font-weight:950;letter-spacing:-2px;font-variant-numeric:tabular-nums;margin:6px 0}.timer-progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden}.timer-progress i{display:block;height:100%;width:0;background:var(--dk-gradient)}

/* Shared dice polish: Randomizer uses the shared DoKitly dice engine. */
.do-dice-3d.dice{perspective:620px!important;perspective-origin:50% 42%!important}.do-dice-3d .dice-cube3d{transform-style:preserve-3d!important;transition:filter .16s}.do-dice-3d.dice.dice-is-rolling .dice-cube3d{filter:drop-shadow(12px 18px 10px rgba(0,25,40,.20))}.do-dice-3d.dice.dice-is-rolling:after{width:48px!important;opacity:.62!important;filter:blur(10px)!important}

/* DoKitly Build 2 final workflow-suite polish */
.hero + .wrap{padding-top:24px!important}
.suite-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 13px}.suite-tabs button{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:8px 11px;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.suite-tabs button.active{border-color:transparent;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;box-shadow:0 7px 18px rgba(37,99,235,.16)}
.suite-panel[hidden]{display:none!important}.suite-panel{margin-top:10px}.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.metric-grid>div{border:1px solid var(--line);border-radius:14px;padding:11px 8px;background:var(--soft);text-align:center}.metric-grid b{display:block;font-size:20px}.metric-grid small{color:var(--muted);font-size:10px}.color-edit-row{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:center}.color-edit-row input[type=color]{width:54px;height:44px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.contrast-sample{margin:12px 0;border:1px solid var(--line);border-radius:14px;padding:24px;text-align:center;font-size:20px;font-weight:850}.gradient-preview{height:125px;border-radius:18px;border:1px solid var(--line);margin:12px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}.serp-preview{margin:12px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);display:grid;gap:5px}.serp-preview>small{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--muted)}.serp-preview>b{font-size:18px;color:#1a0dab;font-weight:500}.serp-preview>span{font-size:12px;color:#188038}.serp-preview>p{margin:0;color:var(--muted);line-height:1.45;font-size:13px}
@media(max-width:700px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid>div:last-child{grid-column:1/-1}.suite-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.suite-tabs button{white-space:nowrap}.color-edit-row{grid-template-columns:48px 1fr}}


/* DoKitly utility fixes — true 3D dice + synchronized coin */
.premium-dice-stage,.dice-stage{min-height:205px;display:grid;place-items:center;perspective:1000px!important;perspective-origin:50% 40%}
.do-dice-3d.dice{width:142px!important;height:142px!important;perspective:1000px!important;overflow:visible!important}
.do-dice-3d .dice-cube3d{width:92px!important;height:92px!important;transform-style:preserve-3d!important;filter:drop-shadow(11px 16px 10px rgba(3,32,48,.24))!important}
.do-dice-3d .die-face{inset:0!important;padding:12px!important;border-radius:18px!important;border:1px solid rgba(7,65,88,.2)!important;box-shadow:inset 3px 3px 8px rgba(255,255,255,.88),inset -8px -10px 18px rgba(4,67,92,.12)!important}
.do-dice-3d .die-front{transform:translateZ(46px)!important}.do-dice-3d .die-back{transform:rotateY(180deg) translateZ(46px)!important}.do-dice-3d .die-right{transform:rotateY(90deg) translateZ(46px)!important}.do-dice-3d .die-left{transform:rotateY(-90deg) translateZ(46px)!important}.do-dice-3d .die-top{transform:rotateX(90deg) translateZ(46px)!important}.do-dice-3d .die-bottom{transform:rotateX(-90deg) translateZ(46px)!important}.do-dice-3d .die-pip3{width:13px!important;height:13px!important}
.do-dice-3d.dice:after{bottom:5px!important;width:78px!important;height:18px!important;filter:blur(9px)!important}
.coin3d.flipping{animation:dkCoinTumble 1.1s cubic-bezier(.17,.78,.2,1)!important}.coin3d.land-heads{transform:rotateX(8deg) rotateY(0deg)!important}.coin3d.land-tails{transform:rotateX(8deg) rotateY(180deg)!important}.coin-tails>div{transform:rotateY(180deg)}
@keyframes dkCoinTumble{0%{transform:translateY(0) rotateX(0) rotateY(0)}35%{transform:translateY(-82px) rotateX(410deg) rotateY(720deg) scale(1.08)}70%{transform:translateY(-18px) rotateX(760deg) rotateY(1260deg) scale(1.02)}88%{transform:translateY(4px) rotateX(880deg) rotateY(1570deg) scale(.98)}100%{transform:translateY(0) rotateX(900deg) rotateY(1620deg) scale(1)}}
.suite-note{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin:6px 0 10px}
/* Coin result visibility lock: final visible face must always match the reported result. */
.coin-face{-webkit-backface-visibility:hidden!important;backface-visibility:hidden!important}
.coin3d.land-heads:not(.flipping) .coin-tails{visibility:hidden!important}
.coin3d.land-tails:not(.flipping) .coin-heads{visibility:hidden!important}
.coin3d.land-heads:not(.flipping) .coin-heads,.coin3d.land-tails:not(.flipping) .coin-tails{visibility:visible!important}
.coin-tails>div{transform:none!important}
/* Build 12 premium category icon polish */
.cat-ico{width:50px!important;height:50px!important;padding:0!important;background:transparent!important;border-radius:15px!important;overflow:visible!important}.cat-ico img{width:50px;height:50px;display:block;filter:drop-shadow(0 8px 14px rgba(24,72,120,.14))}.cat:hover .cat-ico img,.cat:focus-visible .cat-ico img{filter:drop-shadow(0 11px 20px rgba(24,72,120,.20))}.cat{background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 92%,#eefdff 8%))!important}.cat:focus-visible{outline:3px solid rgba(23,105,255,.18);outline-offset:3px}