.homepage{--g:#f6cd63;--p:#c4afff;--line:#3f3a52;--mut:#bdb7cf;padding-top:6px}
.hm-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--g);margin-bottom:12px}
.hm-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:center;min-height:560px;padding:20px 0 30px}
.hm-hero::before{content:"";position:absolute;inset:-30px 0 0;z-index:-1;background:radial-gradient(closest-side,#8052ca4d,transparent) 100% 50%/56% 100% no-repeat}
.hm-hero h1{font-size:clamp(46px,6.6vw,92px);line-height:.98;letter-spacing:-.05em;font-weight:800;margin:0 0 22px;color:#fff}
.hm-hero h1 em{font-style:normal;background:linear-gradient(95deg,#c9b2ff,#f6cd63);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-copy>p{font-size:18px;line-height:1.6;color:var(--mut);max-width:560px;margin:0}
.homepage .hm-search{margin-top:28px;max-width:620px;position:relative}
.homepage .hm-search label{font-size:14px}
.homepage .hm-search>div{padding:7px;border:1px solid #7a6a9c;border-radius:16px;background:#0f0e18;box-shadow:0 16px 44px #0007,0 0 0 5px #8052ca22}
.homepage .hm-search input{font-size:17px;padding:13px 14px}
.homepage .hm-search button{font-size:15px;padding:13px 20px;border-radius:11px;background:var(--g);color:#231a08}
.homepage .hm-search button:hover{background:#ffdc85;color:#231a08}
.hm-tasks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-width:640px}
.homepage .hm-tasks a{padding:7px 13px;border:1px solid #514a66;border-radius:999px;color:#e6dff3;font-size:14px;background:#ffffff08}
.homepage .hm-tasks a:hover{border-color:var(--p);color:#fff}
.hm-orbit{position:relative;width:min(100%,500px);aspect-ratio:1;margin:auto}
.hm-core{position:absolute;left:50%;top:50%;width:30%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 34px #a97bff99)}
.hm-ring{position:absolute;border-radius:50%;border:1px dashed #6f5f92;inset:9%}
.hm-ring-b{inset:27%;border-color:#f6cd6333}
.hm-spin{position:absolute;inset:0;animation:hm-turn 70s linear infinite}
.hm-orbit:hover .hm-spin,.hm-orbit:hover .hm-spin span{animation-play-state:paused}
.hm-spin a{position:absolute;left:50%;top:50%;width:17%;margin:-8.5%;transform:rotate(calc(var(--i)*360deg/var(--n))) translateY(-245%) rotate(calc(var(--i)*-360deg/var(--n)))}
.hm-spin span{display:block;animation:hm-turn 70s linear infinite reverse;transition:scale .2s}
.hm-spin a:hover span,.hm-spin a:focus-visible span{scale:1.18}
.hm-spin .tool-icon{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:22%;box-shadow:0 10px 26px #0009}
@keyframes hm-turn{to{transform:rotate(360deg)}}
.hm-recent{margin:6px 0 34px}
.hm-recent h2{font-size:18px;margin:0 0 12px;color:#f1eef9}
.hm-recent ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hm-recent a{display:flex;flex-direction:column;gap:3px;height:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#201e2c}
.hm-recent a:hover{border-color:var(--p)}
.hm-recent strong{color:#f1eef9;font-size:14px}.hm-recent small{color:#aaa5b9;font-size:12px}
.hm-try{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:34px;align-items:center;padding:36px;border-radius:26px;background:linear-gradient(120deg,#33245a,#1d1a2c 70%);border:1px solid #5a4a80}
.hm-try h2,.hm-head h2,.hm-guide h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;line-height:1.12;margin:0;color:#fff}
.hm-try-intro p{color:var(--mut);font-size:16px;line-height:1.6;margin:12px 0 18px}
.hm-try-tabs{display:flex;flex-wrap:wrap;gap:8px}
.hm-try-tabs button{padding:9px 15px;border-radius:999px;border:1px solid #6a5a8e;background:transparent;color:#e6dff3;font:600 14px inherit;cursor:pointer}
.hm-try-tabs button[aria-selected=true]{background:var(--g);border-color:var(--g);color:#231a08}
.hm-try-box{padding:20px;border-radius:18px;background:#0f0e18;border:1px solid #453c5c;min-width:0}
.hm-try-box label{display:block;font-size:13px;font-weight:600;color:#d8d0e6;margin-bottom:7px}
.hm-try-box textarea{display:block;width:100%!important;height:96px!important;box-sizing:border-box;padding:11px;border-radius:10px;background:#1a1826;border:1px solid #4d4663;color:#f4f0ff;font:15px/1.5 inherit;resize:vertical}
.homepage .hm-try-box>div>a{display:inline-block;margin-top:13px;color:var(--p);font-size:14px;font-weight:600}
#hmCounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0 0}
#hmCounts div{padding:9px;border-radius:10px;background:#211e30;text-align:center}
#hmCounts dt{font-size:12px;color:#aaa5b9}#hmCounts dd{margin:0;font-size:24px;font-weight:800;color:#fff}
.hm-case{display:grid;gap:6px;margin-top:11px}
.hm-case p{margin:0;padding:8px 11px;border-radius:9px;background:#211e30;color:#f1edf9;font-size:14px;overflow-wrap:anywhere}
.hm-case b{display:block;font-size:11px;color:#aaa5b9;font-weight:600}
.hm-pct{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;color:#e6dff3;font-size:18px}
.hm-pct input{width:96px!important;padding:9px;border-radius:9px;background:#1a1826;border:1px solid #4d4663;color:#fff;font-size:18px;text-align:center}
#hmPctOut{display:block;font-size:52px;font-weight:800;color:var(--g);line-height:1.2;margin-top:8px}
.hm-section{margin-top:58px}
.hm-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}
.homepage .hm-head a{color:var(--p);font-weight:600;font-size:14px;white-space:nowrap}
.hm-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.hm-tile{grid-column:span 3;padding:18px;border-radius:18px;border:1px solid color-mix(in srgb,var(--a) 34%,#2d2a3c);background:linear-gradient(150deg,color-mix(in srgb,var(--a) 17%,#1c1a28),#1b1926 62%);transition:border-color .18s,translate .18s;min-width:0}
.hm-tile:hover{border-color:var(--a);translate:0 -2px}
.hm-mid{grid-column:span 4}.hm-wide{grid-column:span 5}
.hm-tile-head{display:flex;align-items:center;gap:12px}
.hm-tile .tool-icon{width:50px;height:50px;border-radius:13px;flex:none}
.hm-wide .tool-icon{width:72px;height:72px;border-radius:18px}
.hm-tile-head span{display:flex;flex-direction:column;gap:2px;min-width:0}
.hm-tile strong{font-size:17px;line-height:1.2;color:#fff}.hm-wide strong{font-size:24px}
.hm-tile small{font-size:13px;color:var(--a)}
.hm-tile ul{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:1px}
.hm-tile li{margin:0}
.homepage .hm-tile li a{display:block;padding:5px 0;font-size:14px;color:#d9d3e5}
.homepage .hm-tile li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hm-studio{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:12px;padding:24px 28px;border-radius:20px;border:1px solid #6e5a2e;background:linear-gradient(100deg,#34290f,#1d1a26 70%);transition:border-color .18s}
.hm-studio:hover{border-color:var(--g)}
.hm-studio-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.hm-studio-copy .hm-kicker{margin:0}
.hm-studio strong{font-size:25px;color:#fff;letter-spacing:-.02em}.hm-studio small{font-size:15px;color:var(--mut)}
.hm-studio-icons{display:flex;flex:none}
.hm-studio-icons .tool-icon{width:58px;height:58px;border-radius:14px;margin-left:-9px;box-shadow:0 7px 16px #0008}
.homepage .tool-card-grid .tool-card-link{min-height:0}
.hm-guide{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:58px 0 26px;padding:34px 38px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(ellipse at right,#a175df26,transparent 60%),#1f1d2b}
.hm-guide p{color:var(--mut);font-size:16px;line-height:1.6;margin:10px 0 18px}
.homepage .hm-guide p a{color:var(--p);text-decoration:underline}
.homepage .hm-btn{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--g);color:#231a08;font-weight:700;font-size:14px}
.hm-guide-art{display:flex;gap:10px;flex:none}
.hm-guide-art .tool-icon{width:70px;height:70px;border-radius:17px}
.hm-guide-art .tool-icon:first-child{rotate:-8deg}.hm-guide-art .tool-icon:last-child{rotate:8deg}
@media(max-width:1000px){.hm-hero{grid-template-columns:1fr;min-height:0}.hm-orbit{display:none}.hm-try{grid-template-columns:1fr}.hm-tile,.hm-mid{grid-column:span 6}.hm-wide{grid-column:span 12}.hm-recent ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hm-hero{padding-top:8px}.hm-copy>p{font-size:16px}.homepage .hm-search>div{flex-wrap:wrap}.homepage .hm-search input{font-size:16px}.homepage .hm-search button{width:100%}.hm-try{padding:20px 16px;border-radius:20px}.hm-try-box{padding:14px}#hmCounts{grid-template-columns:repeat(2,1fr)}.hm-tile,.hm-mid,.hm-wide{grid-column:span 12}.hm-studio{flex-direction:column;align-items:flex-start;padding:20px}.hm-studio-icons{padding-left:9px}.hm-studio-icons .tool-icon{width:44px;height:44px}.hm-guide{padding:24px 20px}.hm-guide-art{display:none}.hm-head{flex-direction:column;align-items:flex-start;gap:8px}.hm-section{margin-top:42px}}
@media(prefers-reduced-motion:reduce){.hm-spin,.hm-spin span{animation:none}.hm-tile{transition:none}}