:root{--yk-ink:#211827;--yk-muted:#766b7d;--yk-lilac:#b99ad9;--yk-purple:#79529e;--yk-pink:#e7b5d2;--yk-soft:#fbf8fd;--yk-line:#d7eeee}
.yk3d-hero{padding:58px 0 34px;background:radial-gradient(circle at 86% 12%,rgba(231,181,210,.38),transparent 28%),radial-gradient(circle at 13% 88%,rgba(185,154,217,.3),transparent 30%),linear-gradient(135deg,#fff,#fbf8fd)}
.yk3d-eyebrow,.yk3d-panel-head>span,.yk3d-preview-head>div>span{color:var(--yk-purple);font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.yk3d-hero h1{margin:8px 0 10px;color:var(--yk-ink);font-size:clamp(36px,5vw,60px);line-height:1.03}.yk3d-hero p{max-width:760px;margin:0;color:var(--yk-muted);font-size:17px;line-height:1.7}
.yk3d-template-section{padding:34px 0 8px}.yk3d-section-heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:18px}.yk3d-section-heading h2{margin:5px 0 0;color:var(--yk-ink)}.yk3d-section-heading p{max-width:480px;margin:0;color:var(--yk-muted)}
.yk3d-template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.yk3d-template{min-height:128px;padding:17px;border:1px solid var(--yk-line);border-radius:18px;background:#fff;text-align:left;cursor:pointer;transition:.18s ease;box-shadow:0 8px 24px rgba(55,34,70,.04)}.yk3d-template:hover,.yk3d-template.is-active{transform:translateY(-2px);border-color:#b99ad9;box-shadow:0 12px 28px rgba(92,59,116,.12)}.yk3d-template.is-active{background:linear-gradient(145deg,#fff,#f8f1fc)}.yk3d-template-icon{display:flex;width:46px;height:38px;align-items:center;justify-content:center;margin-bottom:10px;border-radius:10px;background:#f3eafb;color:#694687;font-size:16px;font-weight:900}.yk3d-template strong,.yk3d-template small{display:block}.yk3d-template strong{color:#3e3046}.yk3d-template small{margin-top:3px;color:var(--yk-muted)}
.yk3d-section{padding:24px 0 70px}.yk3d-app{display:grid;grid-template-columns:minmax(320px,.88fr) minmax(440px,1.12fr);gap:24px;align-items:start}.yk3d-panel,.yk3d-preview-card{border:1px solid var(--yk-line);border-radius:24px;background:#fff;box-shadow:0 18px 55px rgba(55,34,70,.08)}.yk3d-panel{padding:28px}.yk3d-preview-card{position:sticky;top:20px;overflow:hidden}
.yk3d-panel-head h2,.yk3d-preview-head h2{margin:5px 0 24px;color:var(--yk-ink);font-size:25px}.yk3d-field{margin-bottom:18px}.yk3d-field label{display:block;margin-bottom:7px;color:#4c3e55;font-size:13px;font-weight:800}.yk3d-field label em{color:#9a8ba2;font-size:11px;font-style:normal;font-weight:500}
.yk3d-field input:not([type=range]):not([type=color]):not([type=checkbox]),.yk3d-field select{box-sizing:border-box;width:100%;min-height:45px;padding:0 12px;border:1px solid #dfd3e5;border-radius:11px;outline:0;background:#fff;color:var(--yk-ink)}.yk3d-field input:focus,.yk3d-field select:focus{border-color:var(--yk-lilac);box-shadow:0 0 0 3px rgba(185,154,217,.15)}.yk3d-field small{display:block;margin-top:5px;color:var(--yk-muted);font-size:11px}
.yk3d-grid-2,.yk3d-grid-3{display:grid;gap:12px}.yk3d-grid-2{grid-template-columns:1fr 1fr}.yk3d-grid-3{grid-template-columns:repeat(3,1fr)}.yk3d-field input[type=color]{width:100%;height:45px;padding:4px;border:1px solid #dfd3e5;border-radius:11px;background:#fff;cursor:pointer}.yk3d-label-row{display:flex;justify-content:space-between;gap:10px}.yk3d-label-row output{color:var(--yk-purple);font-size:12px;font-weight:900}.yk3d-field input[type=range]{width:100%;accent-color:var(--yk-purple)}
.yk3d-switch-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 20px}.yk3d-switch-row label{display:flex;gap:8px;align-items:center;padding:11px;border:1px solid var(--yk-line);border-radius:11px;color:#5e4e67;font-size:12px;font-weight:700;cursor:pointer}.yk3d-switch-row input{accent-color:var(--yk-purple)}
.yk3d-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:7px}.yk3d-btn{min-height:47px;border:0;border-radius:12px;font-weight:900;cursor:pointer}.yk3d-btn-primary{background:linear-gradient(135deg,#8259a8,#d68fb9);color:#fff;box-shadow:0 10px 24px rgba(127,85,170,.2)}.yk3d-btn-secondary{border:1px solid var(--yk-line);background:#fff;color:#5e4b69}.yk3d-btn:disabled{opacity:.6;cursor:wait}.yk3d-message{margin-top:15px;padding:13px 14px;border-radius:11px;background:#f5eff9;color:#654878;font-size:13px;line-height:1.5}.yk3d-message.error{background:#fff0f1;color:#9a3440}
.yk3d-preview-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:26px 28px 0}.yk3d-preview-head h2{margin-bottom:0}.yk3d-status{display:flex;align-items:center;gap:7px;color:var(--yk-muted);font-size:12px;font-weight:700}.yk3d-status i{width:8px;height:8px;border-radius:50%;background:#55b879;box-shadow:0 0 0 4px rgba(85,184,121,.13)}
.yk3d-stage{display:flex;min-height:430px;align-items:center;justify-content:center;margin:24px;border:1px solid #eee4f2;border-radius:20px;background:linear-gradient(rgba(127,85,170,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(127,85,170,.045) 1px,transparent 1px),radial-gradient(circle,#fff 0,#faf6fc 100%);background-size:24px 24px,24px 24px,auto;perspective:900px;overflow:hidden}
.yk3d-keychain{position:relative;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 22px 18px rgba(56,35,69,.18));transform:rotateX(8deg) rotateZ(-2deg);transition:.2s ease}.yk3d-ring-wrap{position:absolute;z-index:0;display:flex;align-items:center}.ring-left .yk3d-ring-wrap{left:-55px;flex-direction:row}.ring-right .yk3d-ring-wrap{right:-55px;flex-direction:row-reverse}.ring-top .yk3d-ring-wrap{top:-59px;left:50%;flex-direction:column;transform:translateX(-50%)}.ring-none .yk3d-ring-wrap{display:none}.yk3d-ring{width:44px;height:44px;border:7px solid #b7adb9;border-radius:50%;box-sizing:border-box}.yk3d-connector{width:24px;height:12px;border-radius:7px;background:#b7adb9}.ring-top .yk3d-connector{width:12px;height:24px}
.yk3d-body{position:relative;z-index:1;display:flex;width:300px;height:120px;align-items:center;justify-content:center;padding:12px 22px;box-sizing:border-box;background:#b99ad9;box-shadow:inset 0 -10px 0 rgba(0,0,0,.07);transition:.2s ease}.yk3d-style-rounded{border-radius:22px}.yk3d-style-rectangle{border-radius:5px}.yk3d-style-capsule{border-radius:999px}.yk3d-style-oval{border-radius:50%}.yk3d-style-circle{border-radius:50%;aspect-ratio:1/1}.yk3d-style-shield{clip-path:polygon(8% 0,92% 0,100% 70%,50% 100%,0 70%)}.yk3d-style-bone{border-radius:34% 34% 34% 34% / 48% 48% 48% 48%}.yk3d-style-heart{clip-path:polygon(50% 94%,8% 54%,3% 30%,12% 12%,28% 5%,42% 12%,50% 24%,58% 12%,72% 5%,88% 12%,97% 30%,92% 54%)}
.yk3d-inner-border{position:absolute;inset:8px;border:2px solid rgba(255,255,255,.38);border-radius:inherit;pointer-events:none}.yk3d-body.no-border .yk3d-inner-border{display:none}.yk3d-content{position:relative;z-index:2;display:flex;max-width:100%;align-items:center;justify-content:center;gap:8px}.yk3d-text-stack{display:flex;min-width:0;flex-direction:column;align-items:center}.yk3d-text-stack strong{max-width:100%;overflow:hidden;font-size:34px;font-weight:900;line-height:1;text-align:center;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 3px 0 rgba(0,0,0,.1)}.yk3d-text-stack small{margin-top:7px;font-size:13px;font-weight:800;opacity:.92}.yk3d-preview-icon{font-size:28px;line-height:1}
.yk3d-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-top:1px solid var(--yk-line);border-bottom:1px solid var(--yk-line);background:var(--yk-line)}.yk3d-specs div{padding:18px;background:#fff;text-align:center}.yk3d-specs span,.yk3d-specs strong{display:block}.yk3d-specs span{color:var(--yk-muted);font-size:11px}.yk3d-specs strong{margin-top:4px;color:var(--yk-ink);font-size:14px}
.yk3d-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:24px;padding:18px;border:1px solid var(--yk-line);border-radius:15px;background:#fff}.yk3d-summary span,.yk3d-summary strong{display:block}.yk3d-summary span{color:var(--yk-muted);font-size:11px;text-transform:uppercase}.yk3d-summary strong{margin-top:3px;color:#493653}.yk3d-summary p{margin:4px 0 0;color:var(--yk-muted);font-size:12px}.yk3d-code-preview{padding:11px 13px;border-radius:10px;background:#f1e7f8;color:#714c91;font-size:13px;font-weight:900}
.yk3d-info{margin:24px;padding:16px 18px;border-radius:14px;background:#faf6fc;color:#604c6c}.yk3d-info strong{color:#4d385a}.yk3d-info p{margin:5px 0 0;font-size:12px;line-height:1.6}
@media(max-width:1000px){.yk3d-template-grid{grid-template-columns:repeat(2,1fr)}.yk3d-app{grid-template-columns:1fr}.yk3d-preview-card{position:static}}
@media(max-width:620px){.yk3d-section-heading{align-items:flex-start;flex-direction:column}.yk3d-template-grid{grid-template-columns:1fr 1fr}.yk3d-template{min-height:116px}.yk3d-panel{padding:20px}.yk3d-grid-2,.yk3d-grid-3,.yk3d-actions{grid-template-columns:1fr}.yk3d-switch-row{grid-template-columns:1fr}.yk3d-stage{min-height:340px;margin:16px}.yk3d-body{width:235px;height:100px}.yk3d-text-stack strong{font-size:27px}.yk3d-specs{grid-template-columns:1fr 1fr}.yk3d-preview-head{align-items:flex-start;flex-direction:column}.yk3d-summary{align-items:flex-start;flex-direction:column}}

/* CStudio identity */
:root{--teal:#00a5aa;--teal-dark:#007e84;--magenta:#d02f89;--purple:#d02f89;--purple-dark:#a91f72;--pink:#f06aaf;--ink:#183b42;--muted:#647b80;--cream:#f7fdfd;--line:#d7eeee;--shadow:0 20px 60px rgba(0,122,130,.12)}
.topbar{background:linear-gradient(100deg,#008f96,#d02f89)!important;color:#fff!important}.brand img{object-fit:contain}.site-header{border-bottom:1px solid #d7eeee}.btn-primary,button[type=submit]{background:linear-gradient(100deg,#009fa6,#d02f89)}