body{display:flex;min-height:100vh;flex-direction:column}.main{flex:1;padding:58px 0 76px}.intro{max-width:960px;margin:0 auto 32px;text-align:center}.intro h1{margin:18px auto 14px;font-size:clamp(2.65rem,7vw,4.8rem)}.crumbs{margin-bottom:18px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:750}
.shadow-studio{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr);max-width:1180px;margin:auto;border:1px solid var(--border);border-radius:30px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.preview-side{min-width:0;padding:18px;background:#22263a}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 4px 12px;color:#c6cada;font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.preview-toolbar>span{display:flex;align-items:center;gap:8px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#66efbd;box-shadow:0 0 0 5px #66efbd22}.preview-actions{display:flex;gap:6px}.preview-actions button{padding:6px 9px;border:1px solid #ffffff16;border-radius:8px;color:#dfe2ed;background:#ffffff10;font-size:.66rem;font-weight:850}.preview-actions button:hover{background:#ffffff1c}
.shadow-canvas{--canvas:#ffcf4a;position:relative;display:grid;place-items:center;min-height:555px;padding:78px 54px;border:1px solid #ffffff14;border-radius:21px;background-color:var(--canvas);isolation:isolate;overflow:hidden;transition:background-color .2s}.shadow-canvas.pattern-on{background-image:linear-gradient(#ffffff1d 1px,transparent 1px),linear-gradient(90deg,#ffffff1d 1px,transparent 1px);background-size:32px 32px}.shadow-canvas:after{content:"";position:absolute;inset:auto -16% -40% 20%;z-index:-1;height:50%;border-radius:50%;background:#ffffff14;filter:blur(2px);transform:rotate(-9deg)}.canvas-kicker,.canvas-readout{position:absolute;z-index:3;color:#17233b;font-size:.64rem;font-weight:900;letter-spacing:.12em}.canvas-kicker{top:22px;left:24px}.canvas-kicker b{font-weight:900}.canvas-readout{right:24px;bottom:20px;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #17233b22;border-radius:999px;background:#ffffff2b;backdrop-filter:blur(8px)}.canvas-readout i{width:3px;height:3px;border-radius:50%;background:currentColor}.orbit{position:absolute;z-index:-1;border:1px solid #ffffff42;border-radius:50%;pointer-events:none}.orbit-one{width:250px;height:250px;top:-125px;right:-80px}.orbit-two{width:92px;height:92px;bottom:48px;left:38px;box-shadow:inset 0 0 0 14px #ffffff12}.preview-wrap{position:relative;z-index:2;width:100%;text-align:center;transition:transform .2s}.preview-text{display:inline-block;max-width:100%;font-family:Impact,'Arial Black',sans-serif;font-size:96px;font-weight:900;line-height:.88;letter-spacing:1px;overflow-wrap:anywhere;text-align:center;text-transform:uppercase;transition:color .15s,font-size .15s,text-shadow .15s;user-select:none}.preview-wrap.pop{animation:pop .55s cubic-bezier(.2,.9,.25,1.3)}
.preset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:12px}.preset{min-width:0;padding:8px 5px 7px;border:1px solid #ffffff16;border-radius:12px;color:#c9ccda;background:#ffffff08;font-size:.65rem;font-weight:800}.preset i{display:grid;place-items:center;width:100%;height:42px;margin-bottom:6px;border-radius:8px;color:var(--front);background:var(--surface);font-family:Impact,'Arial Black',sans-serif;font-size:1.25rem;font-style:normal;letter-spacing:-.06em;text-shadow:3px 3px 0 var(--back),5px 5px 0 var(--back)}.preset span{display:block;overflow:hidden;text-overflow:ellipsis}.preset:hover,.preset.active{color:#fff;border-color:#ffffff4a;background:#ffffff14}.preset.active{box-shadow:0 0 0 2px #66efbd44}.preset .prism-chip{color:#fff;background:#34276a;text-shadow:2px 2px #ff4d8d,4px 4px #ffcf4a,6px 6px #4ce1d5}
.control-panel{padding:30px;background:#fff}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}.panel-heading h2{margin:4px 0 0;font-size:1.55rem;letter-spacing:-.04em}.step-label{color:var(--primary);font-size:.66rem;font-weight:900;letter-spacing:.13em}.surprise{flex:0 0 auto;padding:9px 11px;border:1px solid #6c5ce728;border-radius:10px;color:var(--primary-dark);background:#f4f2ff;font-size:.72rem;font-weight:850}.surprise:hover{transform:translateY(-1px);background:#ece9ff}.field-label,.select-field>span,.color-field>span{display:block;margin-bottom:7px;color:#555970;font-size:.72rem;font-weight:850}.text-field{position:relative;margin-bottom:17px}.text-field input{width:100%;height:49px;padding:0 68px 0 14px;border:1px solid #dcddea;border-radius:12px;color:#17182a;background:#fafaff;font-weight:780;outline:none}.text-field input:focus,.select-field select:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6c5ce712}.text-field span{position:absolute;right:13px;top:50%;color:#999caf;font-size:.68rem;font-weight:750;transform:translateY(-50%)}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:17px}.select-field select{width:100%;height:45px;padding:0 36px 0 12px;border:1px solid #dcddea;border-radius:11px;color:#34374e;background:#fff;outline:none}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}.color-field{padding:10px;border:1px solid #e1e2ec;border-radius:11px;background:#fbfbfe}.color-control{display:flex;align-items:center;gap:8px}.color-control input{width:34px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer}.color-control input::-webkit-color-swatch-wrapper{padding:0}.color-control input::-webkit-color-swatch{border:0;border-radius:7px}.color-control output{color:#4c5066;font-family:"Courier New",monospace;font-size:.73rem;font-weight:800}.color-field.is-muted{opacity:.44}.color-field.is-muted input{pointer-events:none}
.direction-control{display:grid;grid-template-columns:94px 1fr;gap:17px;align-items:center;margin:2px 0 18px;padding:14px;border:1px solid #e1e2ec;border-radius:15px;background:#f8f8fd}.direction-dial{position:relative;width:88px;height:88px;border:1px solid #d3d4e2;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,transparent 9%),repeating-conic-gradient(from -2deg,#d5d6e2 0 1deg,transparent 1deg 15deg),#fff;box-shadow:inset 0 0 0 9px #f3f2fa;cursor:crosshair;outline:none;touch-action:none}.direction-dial:focus-visible{box-shadow:0 0 0 4px #6c5ce722,inset 0 0 0 9px #f3f2fa}.dial-line{position:absolute;left:50%;top:50%;width:37px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--primary),#ff5f79);transform:translateY(-50%) rotate(45deg);transform-origin:left center}.dial-line i{position:absolute;right:-4px;top:50%;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#ff5f79;box-shadow:0 2px 7px #4d3d9655;transform:translateY(-50%)}.dial-center{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--primary);transform:translate(-50%,-50%)}.dial-label{position:absolute;left:50%;bottom:12px;color:#8b8ea4;font-size:.48rem;font-weight:900;letter-spacing:.12em;transform:translateX(-50%)}.direction-sliders{gap:13px}.sliders{display:grid;gap:15px}.range-field>span{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:#555970;font-size:.72rem}.range-field b{font-weight:850}.range-field output{color:var(--primary-dark);font-family:"Courier New",monospace;font-weight:850}.range-field input{width:100%;height:5px;margin:0;accent-color:var(--primary);cursor:pointer}.compact-sliders{margin-bottom:21px}
.code-card{overflow:hidden;border:1px solid #252841;border-radius:14px;background:#161827}.code-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:#d7d9e7;background:#202337;font-size:.68rem;font-weight:850;letter-spacing:.08em}.code-head span{display:flex;align-items:center;gap:7px}.code-head i{width:7px;height:7px;border-radius:50%;background:#66efbd;box-shadow:0 0 0 4px #66efbd18}.code-head button{padding:6px 9px;border:1px solid #ffffff1a;border-radius:7px;color:#fff;background:#ffffff0e;font-size:.67rem;font-weight:850}.code-head button:hover{background:#ffffff1d}.code-card pre{max-height:190px;margin:0;padding:15px;overflow:auto;color:#dae0ff;font-size:.69rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}.code-card code{font-family:"Courier New",monospace}
.content{max-width:980px;text-align:center}.content>h2{margin:0 0 10px;font-size:clamp(1.7rem,4vw,2.45rem);letter-spacing:-.04em}.content>p{max-width:720px;margin:0 auto 28px;color:var(--muted);line-height:1.7}.alt{background:#ffffff6b;border-block:1px solid var(--border)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid .card{text-align:left}.feature-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:14px;color:var(--primary);background:#6c5ce712;font-size:.82rem;font-weight:900}.card h3{margin:0 0 8px}.prose-content{text-align:left}.prose-content>h2{margin:25px 0 10px;font-size:1.55rem}.prose-content>h2:first-child{margin-top:0}.prose-content>p{max-width:none;margin:0 0 16px}.prose-content code,.faq code{padding:2px 5px;border-radius:5px;color:#5142c7;background:#6c5ce710;font-family:"Courier New",monospace;font-size:.9em}.tip-box{display:flex;gap:16px;margin:26px 0;padding:22px;border:1px solid #ffcf4a66;border-radius:18px;background:#fff9dd}.tip-mark{align-self:flex-start;padding:7px 8px;border-radius:8px;color:#6a4e00;background:#ffcf4a;font-size:.65rem;font-weight:950;letter-spacing:.08em}.tip-box h3{margin:0 0 5px}.tip-box p{margin:0;color:#676b80;line-height:1.65}.faq{display:grid;gap:10px;text-align:left}.faq details{border:1px solid var(--border);border-radius:14px;background:#fff}.faq summary{padding:17px 19px;font-weight:800;cursor:pointer}.faq p{margin:0;padding:0 19px 18px;color:var(--muted);line-height:1.65}.try-card{display:flex;align-items:center;gap:14px;padding:19px;border:1px solid var(--border);border-radius:18px;background:#fff;text-align:left;box-shadow:0 10px 30px #35316e0a;transition:.22s}.try-card:hover{transform:translateY(-3px);border-color:#6c5ce740;box-shadow:0 16px 36px #35316e16}.try-icon{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:13px;color:var(--primary);background:#6c5ce710;font-size:.72rem;font-weight:900}.try-card strong,.try-card>span>span{display:block}.try-card strong{font-size:.92rem}.try-card>span>span{margin-top:4px;color:var(--muted);font-size:.77rem;line-height:1.4}.toast{position:fixed;z-index:100;left:50%;bottom:25px;padding:11px 16px;border-radius:11px;color:#fff;background:#17182a;box-shadow:0 12px 30px #17182a44;font-size:.78rem;font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.preview-side.expanded{position:fixed;z-index:90;inset:12px;padding:18px;border-radius:24px;background:#22263a;box-shadow:0 30px 100px #090a12aa}.preview-side.expanded .shadow-canvas{min-height:calc(100vh - 148px)}.preview-side.expanded .preset-row{display:none}.spark{position:absolute;z-index:8;width:8px;height:8px;border-radius:2px;background:var(--spark);pointer-events:none;animation:spark .78s ease-out forwards}
@keyframes pop{0%{transform:scale(.92) rotate(-1deg)}60%{transform:scale(1.04) rotate(.5deg)}100%{transform:none}}@keyframes spark{to{opacity:0;transform:translate(var(--x),var(--y)) rotate(240deg) scale(.2)}}
@media(max-width:1000px){.shadow-studio{grid-template-columns:1fr}.shadow-canvas{min-height:470px}.control-panel{padding:26px}.preview-side.expanded .shadow-canvas{min-height:calc(100vh - 88px)}}
@media(max-width:700px){.main{padding:40px 0 56px}.intro h1{font-size:clamp(2.55rem,13vw,4rem)}.shadow-studio{border-radius:22px}.preview-side{padding:10px}.shadow-canvas{min-height:390px;padding:70px 24px}.preview-text{font-size:74px}.preset-row{grid-template-columns:repeat(5,78px);overflow-x:auto}.preset{scroll-snap-align:start}.control-panel{padding:22px 16px}.panel-heading{align-items:center}.panel-heading h2{font-size:1.35rem}.control-grid,.color-grid{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.direction-control{grid-template-columns:84px 1fr;padding:11px;gap:12px}.direction-dial{width:80px;height:80px}.dial-line{width:33px}.tip-box{align-items:flex-start;flex-direction:column}.canvas-kicker{left:16px}.canvas-readout{right:14px}.preview-actions #togglePattern{display:none}}
@media(max-width:420px){.preview-toolbar{font-size:.62rem}.preview-text{font-size:62px}.shadow-canvas{min-height:350px}.control-grid,.color-grid{grid-template-columns:1fr}.direction-control{grid-template-columns:1fr}.direction-dial{margin:auto}.surprise{padding:8px;font-size:.66rem}.preset-row{grid-template-columns:repeat(5,70px)}}
@media(prefers-reduced-motion:reduce){.preview-wrap.pop,.spark{animation:none}.try-card,.surprise{transition:none}}
.preview-text{text-transform:none}