.shadow-tool-wrapper{display:flex;flex-direction:column;gap:16px;max-width:840px;margin:24px auto;padding:0}.shadow-left-column{display:flex;flex-direction:column;gap:16px;order:2}.shadow-right-column{order:1}@media(min-width:768px){.shadow-tool-wrapper{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start;margin:32px auto}.shadow-left-column{order:unset}.shadow-right-column{order:unset;position:sticky;top:24px}}.shadow-preview{border-radius:var(--r-lg);padding:24px 24px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}.shadow-preview__bg-btns{display:flex;gap:8px}.shadow-preview__bg-btn{width:44px;height:44px;border-radius:var(--r-sm);font-size:20px;border:2px solid transparent;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,background-color .15s ease}.shadow-preview__bg-btn--active{border-color:var(--color-primary);background:#fff3}.shadow-preview__card{width:120px;height:120px;background:#fff;border-radius:16px;transition:box-shadow .1s ease}.shadow-layer{background:var(--swp-surface);border:1px solid var(--swp-border);border-radius:var(--r-md);overflow:hidden}.shadow-layer__header{display:flex;align-items:center;background:var(--swp-paper-2);border-bottom:1px solid var(--swp-border)}.shadow-layer--closed .shadow-layer__header{border-bottom:none}.shadow-layer__toggle{flex:1;display:flex;align-items:center;gap:8px;padding:12px 12px 12px 14px;background:transparent;border:none;cursor:pointer;min-height:48px;text-align:left;font-family:var(--font-sans)}.shadow-layer__toggle:hover{background:var(--swp-border)}.shadow-layer__chevron{display:inline-block;width:16px;height:16px;flex-shrink:0;color:var(--swp-ink-2);transition:transform .2s ease;transform:rotate(0);font-size:11px;line-height:16px;text-align:center}.shadow-layer__chevron--closed{transform:rotate(-90deg)}.shadow-layer__title{font-size:14px;font-weight:700;color:var(--swp-ink)}.shadow-layer__delete{min-height:44px;padding:0 12px;border-radius:var(--r-sm);margin:0 8px;font-size:12px;font-weight:700;font-family:var(--font-sans);color:var(--swp-ink-3);background:transparent;border:1px solid var(--swp-border);cursor:pointer;white-space:nowrap;transition:color .15s ease,border-color .15s ease;flex-shrink:0}.shadow-layer__delete:hover{color:var(--color-error);border-color:var(--color-error)}.shadow-layer__content{padding:16px;display:flex;flex-direction:column;gap:14px;max-height:600px;opacity:1;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}.shadow-layer__content--closed{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.shadow-slider-row{display:flex;flex-direction:column;gap:4px}.shadow-slider-header{display:flex;justify-content:space-between;align-items:baseline}.shadow-slider-label{font-size:12px;font-weight:700;color:var(--swp-ink-2)}.shadow-slider-value{font-size:13px;font-weight:700;font-family:var(--font-mono);color:var(--swp-ink);min-width:48px;text-align:right}.shadow-slider-input{width:100%;height:20px;accent-color:var(--color-primary);cursor:pointer}.shadow-color-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px}.shadow-color-picker-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}.shadow-color-picker{width:36px;height:36px;border-radius:var(--r-sm);border:2px solid var(--swp-border);cursor:pointer;padding:2px;background:none;-webkit-appearance:none;appearance:none;overflow:hidden}.shadow-color-picker::-webkit-color-swatch-wrapper{padding:0}.shadow-color-picker::-webkit-color-swatch{border:none;border-radius:calc(var(--r-sm) - 2px)}.shadow-color-picker::-moz-color-swatch{border:none}.shadow-color-hex{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--swp-ink)}.shadow-opacity-wrap{display:flex;align-items:center;gap:6px}.shadow-opacity-label{font-size:12px;font-weight:700;color:var(--swp-ink-2);flex-shrink:0}.shadow-opacity-slider{flex:1;height:20px;accent-color:var(--color-primary);cursor:pointer}.shadow-opacity-value{font-size:13px;font-weight:700;font-family:var(--font-mono);color:var(--swp-ink);min-width:44px;text-align:right}.shadow-inset-label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:14px;font-weight:700;color:var(--swp-ink);user-select:none}.shadow-inset-checkbox{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}.shadow-add-btn{width:100%;min-height:48px;border-radius:var(--r-md);background:transparent;border:2px dashed var(--swp-border);color:var(--swp-ink-2);font-size:14px;font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:border-color .15s ease,color .15s ease;display:flex;align-items:center;justify-content:center;gap:6px}.shadow-add-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.shadow-snippet{display:flex;flex-direction:column;gap:12px}.shadow-snippet__code{position:relative;background:#1e1e1e;border-radius:var(--r-md);overflow:hidden}.shadow-snippet__code:before{content:"CSS";position:absolute;top:.4rem;left:.75rem;font-size:.7rem;font-weight:700;color:#5eead4;letter-spacing:.05em;pointer-events:none;z-index:1;font-family:var(--font-mono)}.shadow-snippet__pre{margin:0;padding:2rem 1.2rem 1.2rem;overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:#d4d4d4;background:transparent}.shadow-snippet__pre code{font-family:inherit;font-size:inherit;color:inherit}.shadow-snippet__actions{display:flex;gap:8px;flex-wrap:wrap}.shadow-snippet__copy,.shadow-snippet__reset{min-height:44px;padding:8px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:700;font-family:var(--font-sans);cursor:pointer;display:flex;align-items:center;gap:6px;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.shadow-snippet__copy{background:var(--color-primary);color:var(--color-primary-content);border:none}.shadow-snippet__copy:hover{opacity:.9}.shadow-snippet__copy--done{background:var(--color-success)}.shadow-snippet__reset{background:transparent;color:var(--swp-ink-2);border:1px solid var(--swp-border)}.shadow-snippet__reset:hover{background:var(--swp-paper-2);border-color:var(--swp-ink-3)}.shadow-page-header{padding:24px 16px 0;max-width:840px;margin:0 auto}@media(min-width:768px){.shadow-page-header{padding:32px 24px 0}}.shadow-page-subtitle{font-size:14px;color:var(--swp-ink-2);margin-top:8px;margin-bottom:0}.shadow-how-to{max-width:840px;margin:0 auto;padding:0 16px}@media(min-width:768px){.shadow-how-to{padding:0 24px}}.shadow-steps{counter-reset:shadow-step;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}.shadow-steps li{counter-increment:shadow-step;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--swp-ink);line-height:1.7}.shadow-steps li:before{content:counter(shadow-step);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:var(--color-primary-content);font-size:13px;font-weight:800;margin-top:2px}.shadow-section{max-width:840px;margin:0 auto;padding:0 16px}@media(min-width:768px){.shadow-section{padding:0 24px}}.shadow-section-title{font-size:20px;font-weight:800;color:var(--swp-ink);border-left:4px solid var(--color-primary);padding-left:12px;margin-bottom:16px;margin-top:0}.shadow-related-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}.shadow-related-tools{display:flex;flex-direction:column;gap:12px}.shadow-related-link{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--swp-surface);border:1px solid var(--swp-border);border-radius:var(--r-md);color:var(--color-primary);text-decoration:none;font-size:15px;font-weight:700;transition:background-color .15s ease,border-color .15s ease}.shadow-related-link:hover{background:var(--swp-paper-2);border-color:var(--color-primary)}.shadow-related-link--disabled{color:var(--swp-ink-3);cursor:default;pointer-events:none}.shadow-related-link--disabled:hover{background:var(--swp-surface);border-color:var(--swp-border)}@media(prefers-reduced-motion:reduce){.shadow-preview__card,.shadow-layer__content,.shadow-layer__content--closed,.shadow-layer__chevron,.shadow-preview__bg-btn,.shadow-layer__toggle,.shadow-layer__delete,.shadow-add-btn,.shadow-snippet__copy,.shadow-snippet__reset{transition:none}}