.wt-shadow{--sh-ink:#17231f;--sh-muted:#70807b;--sh-line:#dfe9e5;--sh-soft:#f6faf8;max-width:1260px}
.wt-shadow-hero{position:relative;overflow:hidden;padding:38px;border-radius:32px;background:radial-gradient(circle at 8% 15%,rgba(14,142,124,.13),transparent 28%),linear-gradient(135deg,#fff,#f6fbf9 62%,#edf8f4);border:1px solid #deebe7;box-shadow:var(--wt-shadow)}
.wt-shadow-hero:after{content:"";position:absolute;left:-65px;bottom:-85px;width:250px;height:250px;border-radius:50%;border:34px solid rgba(14,142,124,.045)}
.wt-shadow-hero>*{position:relative;z-index:1}.wt-shadow-hero h1{margin:13px 0 10px;color:var(--sh-ink);font-size:clamp(28px,4vw,43px);line-height:1.3}.wt-shadow-hero p{max-width:850px;margin:0;color:#62766f;line-height:2;font-size:14px}.wt-shadow-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.wt-shadow-badges span{padding:7px 10px;border:1px solid #d8e9e3;background:rgba(255,255,255,.72);border-radius:999px;font-size:10px;font-weight:900;color:#527068}
.wt-shadow-layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:18px;margin-top:20px;align-items:start}.wt-shadow-main{display:grid;gap:18px}.wt-shadow-side{display:grid;gap:14px;position:sticky;top:18px}.wt-shadow-card{background:#fff;border:1px solid var(--sh-line);border-radius:26px;padding:22px;box-shadow:0 12px 40px rgba(15,55,46,.055)}
.wt-shadow-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.wt-shadow-card-head>div:first-child{display:flex;gap:11px;align-items:flex-start}.wt-shadow-step{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:10px;background:#e9f7f3;color:#087d6b;font-size:10px;font-weight:950}.wt-shadow-card h2{margin:0;color:var(--sh-ink);font-size:18px}.wt-shadow-card-head p,.wt-shadow-output-card>p{margin:4px 0 0;color:var(--sh-muted);font-size:11px;line-height:1.8}.wt-shadow-card code{direction:ltr}
.wt-shadow-view-switch{display:flex!important;gap:3px!important;padding:3px;border-radius:11px;background:#f0f4f2}.wt-shadow-view-switch button{border:0;background:transparent;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:900;color:#6f817b;cursor:pointer}.wt-shadow-view-switch button.is-active{background:#fff;color:#0b7969;box-shadow:0 2px 8px rgba(20,55,48,.09)}
.wt-shadow-stage{height:390px;border:1px solid #dfe8e5;border-radius:22px;display:grid;place-items:center;overflow:hidden;transition:.2s;background:#f3f6f5}.wt-shadow-stage.is-dark{background:#17221f}.wt-shadow-stage.is-light{background:#eef3f1}.wt-shadow-stage.is-checker{background-color:#fff;background-image:linear-gradient(45deg,#e8eeec 25%,transparent 25%),linear-gradient(-45deg,#e8eeec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8eeec 75%),linear-gradient(-45deg,transparent 75%,#e8eeec 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.wt-shadow-object{width:300px;height:190px;border-radius:28px;background:#fff;display:grid;place-items:center;transition:width .18s,height .18s,border-radius .18s,background .18s,box-shadow .1s;max-width:85%;max-height:80%}.wt-shadow-object span{font-size:11px;font-weight:950;letter-spacing:.18em;color:#7d8f89;user-select:none}
.wt-shadow-object-controls{display:grid;grid-template-columns:150px repeat(3,1fr);gap:12px;margin-top:16px}.wt-shadow-object-controls label{font-size:10px;font-weight:900;color:#526760}.wt-shadow-object-controls label>span{display:flex;align-items:center;gap:8px;margin-top:8px}.wt-shadow-object-controls input[type=range]{width:100%;accent-color:#0e8e7c}.wt-shadow-object-controls output{font-size:9px;color:#82928d;min-width:38px;text-align:left;direction:ltr}.wt-shadow-object-controls input[type=color]{display:block;width:100%;height:36px;margin-top:8px;border:1px solid #dce7e3;padding:3px;border-radius:10px;background:#fff}
.wt-shadow-add{border:1px solid #cfe2dc;background:#eff9f6;color:#087965;border-radius:12px;padding:9px 12px;font-size:10px;font-weight:950;cursor:pointer}.wt-shadow-add:disabled{opacity:.4;cursor:not-allowed}.wt-shadow-layers{display:grid;gap:10px}.wt-shadow-layer{border:1px solid #e1ebe7;border-radius:18px;background:#fbfdfc;overflow:hidden}.wt-shadow-layer.is-disabled{opacity:.57}.wt-shadow-layer-head{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid #e8efed;background:#fff}.wt-shadow-layer-grip{color:#9aaaa5;cursor:default}.wt-shadow-layer-title{font-size:11px;font-weight:950;color:#2d433d;flex:1}.wt-shadow-layer-actions{display:flex;gap:4px}.wt-shadow-icon-btn{width:28px;height:28px;border:1px solid #e1e9e7;background:#fff;border-radius:8px;color:#637771;cursor:pointer;font-weight:900}.wt-shadow-icon-btn:hover{background:#f1f8f5}.wt-shadow-layer-toggle{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:900;color:#60746e;cursor:pointer}.wt-shadow-layer-toggle input{accent-color:#0e8e7c}.wt-shadow-layer-body{padding:13px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.wt-shadow-control{min-width:0}.wt-shadow-control label{display:flex;justify-content:space-between;gap:6px;font-size:9px;font-weight:900;color:#566b65;margin-bottom:7px}.wt-shadow-control label output{direction:ltr;color:#8b9995;font-weight:700}.wt-shadow-control input[type=range]{width:100%;accent-color:#0e8e7c}.wt-shadow-control input[type=color]{width:100%;height:32px;border:1px solid #dae5e1;border-radius:9px;background:#fff;padding:3px}.wt-shadow-inset-wrap{display:flex;align-items:center;justify-content:center}.wt-shadow-inset{display:flex!important;align-items:center;gap:7px;margin:0!important;padding:9px 10px;border:1px solid #dfe8e5;border-radius:10px;background:#fff;cursor:pointer}.wt-shadow-inset input{accent-color:#0e8e7c}
.wt-shadow-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.wt-shadow-preset{border:1px solid #e0eae7;background:#fff;border-radius:16px;padding:11px;cursor:pointer;text-align:right;transition:.18s}.wt-shadow-preset:hover{transform:translateY(-2px);border-color:#bcd9d1;box-shadow:0 8px 22px rgba(14,64,53,.08)}.wt-shadow-preset-preview{height:70px;border-radius:11px;background:#fff;display:grid;place-items:center;margin-bottom:9px}.wt-shadow-preset-preview i{width:38px;height:28px;border-radius:8px;background:#fff;display:block}.wt-shadow-preset b{display:block;font-size:10px;color:#30453f}.wt-shadow-preset span{display:block;font-size:8px;color:#8b9a95;margin-top:3px}
.wt-shadow-import{width:100%;border:1px solid #d8e5e1;background:#fbfdfc;border-radius:14px;padding:14px;outline:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.8;resize:vertical}.wt-shadow-import:focus{border-color:#0e8e7c;box-shadow:0 0 0 4px rgba(14,142,124,.09);background:#fff}.wt-shadow-import-actions{display:flex;align-items:center;gap:10px;margin-top:10px}.wt-shadow-import-actions span{font-size:10px;color:#6b7d77}.wt-shadow-import-actions span.is-error{color:#b3473e}.wt-shadow-import-actions span.is-ok{color:#087965}
.wt-shadow-output-card h2{margin:7px 0 0;font-size:22px}.wt-shadow-code{margin:15px 0 0;min-height:140px;max-height:310px;overflow:auto;padding:15px;border-radius:15px;background:#102b26;color:#d9f4ec;border:1px solid #1d443c;font-size:10.5px;line-height:1.85;white-space:pre-wrap;word-break:break-word;text-align:left}.wt-shadow-output-actions{display:grid;gap:8px;margin-top:10px}.wt-shadow-output-actions .wt-btn{width:100%;font-size:10px}.wt-shadow-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.wt-shadow-metrics>div{padding:10px 6px;border-radius:12px;background:#f5f9f7;text-align:center}.wt-shadow-metrics strong{display:block;color:#17332c;font-size:21px;direction:ltr}.wt-shadow-metrics span{font-size:8px;color:#81918c}.wt-shadow-note{margin-top:10px;padding:10px 11px;border-radius:12px;background:#fff9e9;border:1px solid #f1e0ba;color:#746749;font-size:9.5px;line-height:1.8}.wt-shadow-help h3{margin:0 0 10px;color:#263b35;font-size:13px}.wt-shadow-help dl{margin:0;display:grid;gap:8px}.wt-shadow-help dl div{display:grid;grid-template-columns:55px 1fr;gap:7px}.wt-shadow-help dt{font-size:9px;font-weight:950;color:#0b7e6c}.wt-shadow-help dd{margin:0;font-size:9px;line-height:1.7;color:#74857f}.wt-shadow-reset{width:100%;border:1px solid #e1e9e6;background:transparent;border-radius:13px;padding:10px;color:#71827d;font-size:10px;font-weight:900;cursor:pointer}
@media(max-width:980px){.wt-shadow-layout{grid-template-columns:1fr}.wt-shadow-side{position:static;grid-template-columns:1fr 1fr}.wt-shadow-output-card{grid-row:span 2}.wt-shadow-object-controls{grid-template-columns:1fr 1fr}.wt-shadow-presets{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.wt-shadow{padding-inline:10px}.wt-shadow-hero{padding:27px 20px}.wt-shadow-card{padding:16px}.wt-shadow-card-head{flex-direction:column}.wt-shadow-view-switch{align-self:stretch}.wt-shadow-view-switch button{flex:1}.wt-shadow-stage{height:310px}.wt-shadow-object-controls,.wt-shadow-layer-body,.wt-shadow-side{grid-template-columns:1fr}.wt-shadow-presets{grid-template-columns:1fr 1fr}.wt-shadow-output-card{grid-row:auto}.wt-shadow-layer-head{flex-wrap:wrap}.wt-shadow-layer-title{min-width:120px}}

/* v4.16 — bounded workspace cleanup */
.wt-shadow-workspace{display:grid;grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr);gap:20px;align-items:start;margin-top:20px}
.wt-shadow-workspace>.wt-shadow-card:first-child{position:sticky;top:18px;align-self:start;z-index:4;box-shadow:0 18px 55px rgba(15,55,46,.10)}
.wt-shadow-workspace>.wt-shadow-card:first-child:before{content:"LIVE CANVAS";display:inline-flex;margin-bottom:12px;padding:5px 9px;border-radius:999px;background:#e9f7f3;color:#087d6b;font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.wt-shadow-controls{display:grid;gap:18px;min-width:0}
.wt-shadow-output-card{margin-top:20px}
.wt-shadow-output-card .wt-shadow-output-actions{display:flex;flex-wrap:wrap}
.wt-shadow-output-card .wt-shadow-output-actions .wt-btn{width:auto;min-width:150px}
@media(max-width:1100px){.wt-shadow-workspace{grid-template-columns:1fr}.wt-shadow-workspace>.wt-shadow-card:first-child{position:static}.wt-shadow-output-card .wt-shadow-output-actions{display:grid}.wt-shadow-output-card .wt-shadow-output-actions .wt-btn{width:100%}}