.stakly-demo{--sd-border:#24282d;position:relative;overflow:hidden;border:1px solid #34363a;border-radius:11px;background:#0b0c0e;color:#f0f1f3;box-shadow:0 24px 65px #0007;font:13px/1.4 Arial,system-ui,sans-serif;text-align:left}.stakly-demo *{box-sizing:border-box}.stakly-demo button,.stakly-demo textarea{font:inherit;color:inherit}.stakly-demo svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.sd-shell{display:grid;grid-template-columns:20.7% minmax(0,1fr);aspect-ratio:1.89}.sd-sidebar{display:flex;flex-direction:column;min-width:0;background:#111518;border-right:1px solid #26292d;padding:1.5% 7% 0}.sd-brand{height:30px;display:flex;align-items:center;gap:10px;font-size:15px;white-space:nowrap}.sd-brand img{width:20px;height:20px;object-fit:contain}.sd-brand strong{font-weight:650}.sd-collapse{margin-left:auto;color:#bdc5cf}.sd-collapse svg{width:16px;height:16px}.sd-modes{margin:15px 0 20px;padding:3px;background:#1b1f23;border-radius:9px;display:flex;gap:2px}.sd-mode{border:0;background:none;border-radius:6px;min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:7px 1px;font-size:11px!important;cursor:default;white-space:nowrap}.sd-mode svg{width:13px;height:13px}.sd-mode.sd-active{background:#30343a}.sd-nav{display:grid;gap:0;font-size:12px}.sd-nav>div{display:flex;align-items:center;gap:10px;padding:7px 0;white-space:nowrap}.sd-nav svg{width:15px;height:15px}.sd-nav .sd-new{padding:4px 0 21px 10px}.sd-divider{height:1px;background:#292b2d;margin:11px 0 5px}.sd-list{position:relative;text-align:center;color:#dfe3e7;font-size:11px;padding:9px 0}.sd-list svg{position:absolute;left:0;top:11px;width:11px;height:11px}.sd-account{border-top:1px solid #292c30;margin:auto -8% 0;padding:12px 8%;display:flex;align-items:center;gap:8px;font-size:12px}.sd-avatar{display:grid;place-items:center;width:30px;height:30px;background:#303b4d;border-radius:50%;font-size:11px;color:#d7e0ed}.sd-account strong{font-weight:600}.sd-account-icons{margin-left:auto;display:flex;gap:12px;color:#d5d9df}.sd-account-icons svg{width:17px;height:17px}.sd-content{min-width:0;display:flex;align-items:center;justify-content:center;padding:24px 4%;background:#0a0b0d}.sd-inner{width:min(100%,760px);transform:translateY(-2px)}.sd-greeting{margin:0 0 65px!important;color:#e9e9ee!important;text-align:center;font-family:Georgia,serif;font-weight:400;font-size:clamp(24px,3.1vw,43px)!important;line-height:1.15!important}.sd-composer{position:relative;border:1px solid #20242a;border-radius:19px;background:#1b1e23;padding:14px 16px 11px}.sd-composer textarea{display:block;width:100%;height:38px;resize:none;background:transparent;border:0;outline:0;color:#f5f5f5;font-size:15px;line-height:1.5}.sd-composer textarea::placeholder{color:#7c838f}.sd-toolbar,.sd-tools{display:flex;align-items:center}.sd-toolbar{justify-content:space-between}.sd-tools{gap:9px}.sd-composer button{cursor:pointer;border:0;background:transparent}.sd-composer button:focus-visible,.sd-mode:focus-visible{outline:2px solid #b0a3ff;outline-offset:2px}.sd-plus,.sd-icon{width:26px;height:26px;padding:4px;color:#d6d9de!important}.sd-plus svg,.sd-icon svg{width:100%;height:100%}.sd-icon{width:24px;height:24px;cursor:default!important}.sd-model{display:flex;align-items:center;gap:4px;padding:8px 4px;color:#e7e9ee!important;font-size:11px!important;white-space:nowrap}.sd-model strong{font-weight:500}.sd-model svg{width:10px;height:10px}.sd-pop-wrap{position:relative}.sd-menu{position:absolute;bottom:calc(100% + 12px);z-index:5;min-width:220px;padding:9px;background:#1d2026;border:1px solid #3b3e46;border-radius:11px;box-shadow:0 14px 35px #0009}.sd-menu[hidden]{display:none}.sd-add-menu{left:0}.sd-effort-menu{right:0;width:245px}.sd-menu p{margin:3px 7px 7px!important;color:#aaaeba!important;font:11px/1.3 Arial,system-ui,sans-serif!important}.sd-menu button{padding:8px;border-radius:6px;text-align:left;white-space:nowrap;font-size:11px!important}.sd-menu button:hover,.sd-menu button:focus-visible{background:#363943}.sd-add-menu button{display:block;width:100%}.sd-menu button[aria-pressed=true]{background:#363b44}.sd-menu small{display:block;color:#9a9ca5;font-size:10px;line-height:1.4}.sd-add-menu small{padding:8px}.sd-model-option{position:relative;padding:6px 8px;font-size:11px}.sd-model-option small{margin-top:2px}.sd-model-option.selected b{position:absolute;right:8px;top:8px}.sd-menu-divider{height:1px;background:#3b3d43;margin:8px 0}.sd-effort-options{display:flex;justify-content:space-between;gap:2px}.sd-effort-options button{flex:1;padding:7px 2px;text-align:center;font-size:10px!important}.sd-under{display:flex;justify-content:space-between;gap:8px;margin:8px 6px 0;color:#858791;font-size:10px}.sd-feedback{min-height:16px;margin:6px!important;color:#aaa6bd!important;text-align:center;font-size:11px!important}.sd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:850px){.sd-shell{grid-template-columns:165px minmax(0,1fr);aspect-ratio:auto;height:390px}.sd-sidebar{padding:14px 11px 0}.sd-nav{font-size:11px}.sd-nav>div{padding:5px 0}.sd-nav .sd-new{padding-bottom:14px}.sd-greeting{margin-bottom:35px!important}.sd-list{padding:6px 0}.sd-list svg{top:8px}}@media(max-width:500px){.sd-shell{grid-template-columns:58px minmax(0,1fr);height:340px}.sd-sidebar{padding:12px 8px 0}.sd-brand{justify-content:center}.sd-brand strong,.sd-collapse,.sd-mode span,.sd-nav span,.sd-list,.sd-account strong,.sd-account-icons{display:none}.sd-modes{flex-direction:column;margin:15px 0 9px}.sd-mode{padding:5px}.sd-nav>div,.sd-nav .sd-new{justify-content:center;padding:7px 0}.sd-account{justify-content:center}.sd-content{padding:12px}.sd-greeting{font-size:22px!important;margin-bottom:28px!important}.sd-composer{padding:12px;border-radius:14px}.sd-model{font-size:10px!important}.sd-model span:first-child{display:none}.sd-tools{gap:2px}.sd-under{font-size:9px}.sd-effort-menu{width:220px}}
/* Presentation-only shell of the real Stakly composer: no account or media APIs. */
.sd-nav>button{display:flex;align-items:center;gap:10px;padding:7px 0;border:0;background:none;text-align:left;white-space:nowrap;width:100%;cursor:pointer}
.sd-nav>button:hover{color:#fff;background:#ffffff07;border-radius:6px}
.sd-mode,.sd-icon{cursor:pointer!important}.sd-mode:active,.sd-icon:active{transform:scale(.96)}
.sd-menu{max-height:255px;overflow:auto;scrollbar-width:thin}.sd-menu button{white-space:normal}
.sd-add-menu{min-width:225px}.sd-add-menu button{display:flex;align-items:center;gap:10px}.sd-add-menu svg{width:17px;height:17px}.sd-add-menu button:first-child{font-weight:600}.sd-add-menu button:nth-child(6){border-top:1px solid #ffffff12;border-radius:0;margin-top:5px;padding-top:11px}
.sd-model-option{display:block;width:100%;text-align:left;line-height:1.3}.sd-model-option small{font-size:9px}.sd-effort-menu{padding:10px 12px 15px}
.sd-effort-container{padding:4px 6px 0}.sd-effort-pill{position:relative;height:25px;border-radius:999px;background:rgba(130,140,151,.18);border:1px solid rgba(160,170,180,.14);cursor:ew-resize;touch-action:none;overflow:hidden;user-select:none}
.sd-effort-fill{position:absolute;inset:0 auto 0 0;width:var(--effort-progress);border-radius:inherit;background:#3da0eb;transition:width .14s cubic-bezier(.22,1,.36,1)}
.sd-effort-glow{position:absolute;inset:0 auto 0 var(--effort-progress);width:12px;transform:translateX(-50%);background:#ffffff47;filter:blur(5px);pointer-events:none}
.sd-effort-thumb{position:absolute;top:50%;left:clamp(12px,var(--effort-progress),calc(100% - 12px));width:25px;height:25px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:1px solid #bfc3ca;box-shadow:0 2px 7px #0003;pointer-events:none;transition:left .14s cubic-bezier(.22,1,.36,1)}
.sd-effort-levels{display:grid;grid-template-columns:repeat(4,1fr);margin-top:7px;gap:3px}.sd-effort-levels button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0!important;background:none!important;color:#8b8f95;font-size:8.5px!important}.sd-effort-levels button b{font-weight:500}.sd-effort-levels i{display:block;width:1px;height:4px;background:#b9bec4}.sd-effort-levels button[aria-pressed=true]{color:#3da0eb}.sd-effort-levels button[aria-pressed=true] i{background:#3da0eb}
.sd-waveform{position:absolute;left:18px;right:18px;top:13px;height:34px;display:flex;align-items:center;justify-content:center;gap:4px;pointer-events:none}.sd-waveform[hidden]{display:none}.sd-waveform i{width:3px;height:24px;border-radius:5px;background:#bdacfa;animation:sd-wave .8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -73ms)}
.sd-voice-active textarea{opacity:0;pointer-events:none}.sd-voice-active .sd-icon[aria-pressed=true]{color:#bdacfa!important}.sd-voice-active{box-shadow:0 0 0 1px #a992eb44,0 0 28px #a992eb16}
@keyframes sd-wave{0%{transform:scaleY(.15)}100%{transform:scaleY(1)}}
@media(max-width:850px){.sd-nav>button{padding:5px 0}}
@media(max-width:500px){.sd-nav>button,.sd-nav .sd-new{justify-content:center;padding:7px 0}.sd-add-menu{min-width:200px}.sd-menu{max-height:210px}.sd-effort-menu{width:210px}.sd-waveform{gap:3px}}
@media(prefers-color-scheme:light){.stakly-demo{--sd-border:#e2e5e9;color:#20242b;background:#fff;border-color:#d6d9de}.sd-sidebar{background:#f6f7f8;border-color:#e3e5e9}.sd-content{background:#fff}.sd-modes{background:#eceef1}.sd-mode.sd-active{background:#fff;box-shadow:0 1px 3px #0001}.sd-collapse,.sd-account-icons,.sd-list{color:#666e78}.sd-divider{background:#e3e5e9}.sd-account{border-color:#e3e5e9}.sd-avatar{background:#e3e8f1;color:#536079}.sd-greeting{color:#22262c!important}.sd-composer{background:#f1f2f5;border-color:#e4e6eb}.sd-composer textarea{color:#25282f}.sd-plus,.sd-icon,.sd-model{color:#343b45!important}.sd-menu{background:#fff;border-color:#e0e2e7;box-shadow:0 12px 35px #0002}.sd-menu p,.sd-menu small{color:#81868f!important}.sd-menu button:hover,.sd-menu button:focus-visible{background:#f1f2f5}.sd-menu-divider,.sd-add-menu button:nth-child(6){border-color:#e5e7eb;background:none}.sd-menu-divider{background:#e5e7eb}.sd-nav>button:hover{color:#131820;background:#00000005}.sd-waveform i{background:#8670c3}}
@media(prefers-reduced-motion:reduce){.sd-waveform i{animation:none;transform:scaleY(.55)}.sd-effort-fill,.sd-effort-thumb{transition:none}}
