:root{--base: #1a1a1e;--mantle: #181818;--crust: #0a0a0a;--text: #e0e0e0;--subtext0: #a0a0a0;--subtext1: #707070;--surface0: #1f1f1f;--surface1: #2d2d2d;--surface2: #3d3d3d;--overlay0: #4f4f4f;--red: #e03131;--red-dim: #c92a2a;--red-light: #ff6b6b;--maroon: #a61e4d;--blue: #4dabf7;--lavender: #748ffc;--sapphire: #3bc9db;--sky: #63e6be;--teal: #20c997;--green: #69db7c;--yellow: #fcc419;--peach: #ff922b;--smoke: #cdf;--pink: #f06595;--soft-green: #cfd;--one-blue: #61afef;--one-orange: #d19a66;--one-purple: #c678dd;--one-red: #e06c75;--one-green: #98c379;--one-grey: #5c6370;--one-white: #abb2bf;--bg-app: var(--base);--bg-panel: var(--surface0);--bg-panel-transparent: #15151a;--border-color: var(--surface1);--accent-primary: var(--smoke);--accent-secondary: var(--soft-green);--gap: 16px;--radius: 12px;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-ui: "Inter", system-ui, sans-serif;--card-bg: var(--surface0);--card-border: var(--surface1);--card-shadow: 0 4px 20px rgba(0, 0, 0, .2);--alert-info-bg: rgba(77, 171, 247, .1);--alert-info-border: var(--blue);--alert-warning-bg: rgba(252, 196, 25, .1);--alert-warning-border: var(--yellow);--alert-error-bg: rgba(224, 49, 49, .1);--alert-error-border: var(--red);--alert-success-bg: rgba(105, 219, 124, .1);--alert-success-border: var(--green)}@font-face{font-family:JetBrains Mono;src:url(../fonts/JetBrainsMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:JetBrains Mono;src:url(../fonts/JetBrainsMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:JetBrains Mono;src:url(../fonts/JetBrainsMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:JetBrains Mono;src:url(../fonts/JetBrainsMono-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);background:radial-gradient(circle at top center,#23232a 0%,var(--bg-app) 80%);color:var(--text);font-family:var(--font-ui);overflow:hidden;height:100vh;height:100dvh;width:100vw}.sm-playground-root{display:flex;flex-direction:column;height:100%;padding:var(--gap);gap:var(--gap);max-width:1920px;margin:0 auto;width:100%;min-height:0}.sm-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;height:60px;background:#1e1e2399;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:0 4px 20px #0003;z-index:10;flex-shrink:0}.sm-mobile-view-switcher{display:none;background:#1e1e2399;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:4px;gap:4px}.view-btn{flex:1;background:transparent;border:none;color:var(--subtext0);padding:8px;border-radius:calc(var(--radius) - 4px);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.view-btn.active{background:#ccddff1a;color:var(--accent-primary)}.sm-header-logo{height:38px;width:auto;transition:transform .3s ease}.sm-header-logo:hover{transform:scale(1.05) rotate(-5deg)}.sm-controls{display:flex;align-items:center;gap:12px}.sm-format-select{position:relative;font-family:var(--font-ui);-webkit-user-select:none;user-select:none;width:140px}.sm-select-trigger{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--text);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:99px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.sm-format-select.sm-open .sm-select-trigger{border-color:var(--accent-primary);background:#ffffff1a;box-shadow:0 0 0 2px #ccddff1a}.sm-select-trigger:hover{background:#ffffff14;border-color:#fff3}.sm-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--subtext0);margin-left:10px;transition:transform .3s ease}.sm-format-select.sm-open .sm-select-arrow{transform:rotate(180deg);border-top-color:var(--accent-primary)}.sm-select-options{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#1e1e23e6;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 4px 20px #0000004d;z-index:100;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden}.sm-select-options.sm-visible{opacity:1;visibility:visible;transform:translateY(0)}.sm-select-option{padding:10px 16px;font-size:.9rem;color:var(--subtext0);cursor:pointer;transition:all .2s ease}.sm-select-option:hover{color:var(--text);background:#ffffff0d;padding-left:20px}.sm-select-option.sm-active{color:var(--accent-primary);background:#ccddff0d;font-weight:600}.sm-reset-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--subtext0);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:99px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-ui)}.sm-reset-btn:hover{background:#ffffff14;border-color:#fff3;color:var(--text)}.sm-reset-btn:active{transform:scale(.95)}.sm-reset-btn svg{transition:transform .5s ease}.sm-reset-btn:hover svg{transform:rotate(-180deg)}.sm-playground{display:flex;flex:1;gap:var(--gap);min-height:0}.sm-pane{flex:1;display:flex;flex-direction:column;background-color:var(--bg-panel-transparent);border-radius:var(--radius);border:1px solid rgba(255,255,255,.05);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s ease}.sm-pane:hover,.sm-pane:focus-within{border-color:#cdf3;box-shadow:0 10px 30px -5px #0000004d}.sm-pane-header{padding:14px 20px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent-secondary);border-bottom:1px solid rgba(255,255,255,.05);background-color:#0003;display:flex;align-items:center}.sm-editor-container{flex:1;overflow:auto;font-family:var(--font-mono);font-size:14px;line-height:1.6;background-color:transparent!important}.sm-editor-element{min-height:100%;padding:20px;font-family:inherit;outline:none;-moz-tab-size:2;tab-size:2;color:var(--text)}.sm-output-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.sm-tabs-container{display:flex;flex-direction:column;height:100%}.sm-tabs-header{display:flex;gap:12px;padding:10px 20px;background-color:transparent;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}.sm-tab-btn{background:transparent;border:1px solid transparent;color:var(--subtext0);padding:6px 16px;border-radius:99px;font-size:.85rem;cursor:pointer;font-family:var(--font-ui);font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.sm-tab-btn:hover{color:var(--text);background-color:#ffffff0d}.sm-tab-btn.sm-active{background-color:#ccddff1a;color:var(--accent-primary);font-weight:600;border-color:#ccddff26;box-shadow:0 0 15px #ccddff0d}.sm-tab-content{display:none;flex:1;overflow:hidden;position:relative}.sm-tab-content.sm-active{display:flex;flex-direction:column}.sm-sub-tabs{padding:8px 16px;border-bottom:1px dashed var(--surface1);justify-content:center}.sm-sub-tabs .sm-tab-btn{font-size:.8rem;padding:4px 10px}.sm-sub-tabs .sm-tab-btn.sm-active{background-color:var(--accent-secondary);color:var(--mantle)}.sm-preview-frame{width:100%;height:100%;border:none;background-color:#fff}.sm-output-content{padding:16px;overflow:auto;font-family:var(--font-mono);font-size:13px;color:var(--text);white-space:pre-wrap;height:100%}.sm-hidden{display:none!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--surface2)}code[class*=language-],pre[class*=language-],.sm-editor-element,.sm-output-content,.token-comment,.token-prolog,.token-doctype,.token-cdata,.token-punctuation,.token-namespace,.token-deleted,.token-italic,.token-bold,.token-inserted,.token-keyword,.token-keyword-control,.token-variable,.token-property,.token-atrule,.token-attr-value,.token-function,.token-regex,.token-important,.token-entity,.token-operator,.token-url,.token-string,.token-char,.token-selector,.token-attr-name,.token-boolean,.token-number,.token-constant,.token-symbol,.token-class-name,.token-maybe-class-name,.token-parameter,.token-interpolation,.token-interpolation-punctuation,.token-template-string,.token-template-punctuation,.token-script{font-family:var(--font-mono)!important}@media(max-width:768px){.sm-playground-root{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));gap:10px}.sm-header{padding:5px 15px;height:54px;display:flex;justify-content:space-between;align-items:center}.sm-header-logo{height:30px}.sm-header-brand{display:flex;justify-content:center;align-items:center;gap:10px}.sm-github-link{align-items:center;gap:10px}a svg{display:flex;justify-content:center;align-items:center}.sm-reset-btn span{display:none}.sm-reset-btn{padding:8px}.sm-mobile-view-switcher{display:flex;flex-shrink:0}.sm-playground{position:relative;overflow:hidden}.sm-pane{position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0;pointer-events:none;visibility:hidden}.sm-playground.sm-show-editor .sm-editor-pane{transform:translate(0);opacity:1;pointer-events:all;visibility:visible}.sm-playground.sm-show-editor .sm-output-pane{transform:translate(100%)}.sm-playground.sm-show-output .sm-output-pane{transform:translate(0);opacity:1;pointer-events:all;visibility:visible}.sm-playground.sm-show-output .sm-editor-pane{transform:translate(-100%)}.sm-format-select{width:110px}.sm-select-trigger{padding:8px 12px;font-size:.8rem}.sm-pane-header{padding:10px 15px;font-size:.7rem}.sm-tabs-header{padding:8px 15px;gap:8px}.sm-tab-btn{padding:4px 12px;font-size:.75rem}}.token-tag-name{color:var(--one-blue);font-weight:700}.token-attr-name{color:var(--one-orange)}.token-keyword{color:var(--one-purple);font-weight:700}.token-string-quoted{color:var(--one-red)}.token-value-primitive{color:var(--one-green)}.token-string-unquoted,.token-text-value{color:var(--one-white)}.token-comment{color:var(--one-grey);font-style:italic}.token-operator{color:var(--one-white);opacity:.6}.sm-output-content .token.comment,.sm-output-content .token.prolog,.sm-output-content .token.doctype,.sm-output-content .token.cdata{color:var(--one-grey)}.sm-output-content .token.punctuation{color:var(--one-white);opacity:.6}.sm-output-content .token.property,.sm-output-content .token.tag,.sm-output-content .token.boolean,.sm-output-content .token.number,.sm-output-content .token.constant,.sm-output-content .token.symbol,.sm-output-content .token.deleted{color:var(--one-green)}.sm-output-content .token.selector,.sm-output-content .token.attr-name,.sm-output-content .token.string,.sm-output-content .token.char,.sm-output-content .token.builtin,.sm-output-content .token.inserted{color:var(--one-red)}.sm-output-content .token.operator,.sm-output-content .token.entity,.sm-output-content .token.url,.language-css .token.string,.style .token.string{color:var(--one-blue)}.sm-output-content .token.atrule,.sm-output-content .token.attr-value,.sm-output-content .token.keyword{color:var(--one-purple)}.sm-output-content .token.function,.sm-output-content .token.class-name{color:var(--one-blue)}.sm-output-content .token.regex,.sm-output-content .token.important,.sm-output-content .token.variable{color:var(--one-orange)}.sm-premium-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:20px;margin:16px 0;box-shadow:var(--card-shadow);transition:transform .2s ease,box-shadow .2s ease}.sm-premium-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px #0000004d;border-color:var(--accent-primary)}.sm-premium-alert{padding:16px 20px;border-radius:8px;margin:16px 0;border-left:4px solid transparent;display:flex;gap:12px;align-items:flex-start}.sm-premium-alert-info{background:var(--alert-info-bg);border-left-color:var(--alert-info-border);color:var(--blue)}.sm-premium-alert-warning{background:var(--alert-warning-bg);border-left-color:var(--alert-warning-border);color:var(--yellow)}.sm-premium-alert-error{background:var(--alert-error-bg);border-left-color:var(--alert-error-border);color:var(--red)}.sm-premium-alert-success{background:var(--alert-success-bg);border-left-color:var(--alert-success-border);color:var(--green)}.sm-premium-badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--surface1);color:var(--text)}.sm-premium-btn{display:inline-block;padding:10px 24px;border-radius:8px;background:var(--accent-primary);color:var(--mantle);font-weight:600;cursor:pointer;transition:all .2s ease;border:none;font-family:var(--font-ui)}.sm-premium-btn:hover{opacity:.9;transform:scale(1.02)}.error-container{background:#19191ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,85,85,.2);border-left:4px solid #ff5555;color:var(--text);padding:24px;margin:20px;border-radius:12px;box-shadow:0 10px 40px #0006;font-family:var(--font-mono)!important;position:relative;overflow:hidden}.error-container:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#ff5555,transparent);opacity:.5}.error-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#f55;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.85rem}.error-message{white-space:pre-wrap;line-height:1.6;font-size:.95rem;color:var(--text-dim)}.error-location{display:inline-block;margin-top:12px;padding:4px 10px;background:#ff55551a;border-radius:4px;color:#f88;font-size:.8rem;font-weight:600}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}