: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;--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}@font-face{font-family:JetBrains Mono;src:url(/SomMark-Playground/assets/JetBrainsMono-Regular-8W0DXcRc.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:JetBrains Mono;src:url(/SomMark-Playground/assets/JetBrainsMono-Bold-DLhjZX5R.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:JetBrains Mono;src:url(/SomMark-Playground/assets/JetBrainsMono-Italic-BF2YSGCb.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:JetBrains Mono;src:url(/SomMark-Playground/assets/JetBrainsMono-BoldItalic-C7-J3-tE.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}#app{display:flex;flex-direction:column;height:100%;padding:var(--gap);gap:var(--gap);max-width:1920px;margin:0 auto;width:100%;min-height:0}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}.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)}.header-logo{height:38px;width:auto;transition:transform .3s ease}.header-logo:hover{transform:scale(1.05) rotate(-5deg)}.controls{display:flex;align-items:center;gap:12px}.custom-select-container{position:relative;font-family:var(--font-ui);-webkit-user-select:none;user-select:none;width:140px}.custom-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)}.custom-select-container.open .custom-select-trigger{border-color:var(--accent-primary);background:#ffffff1a;box-shadow:0 0 0 2px #ccddff1a}.custom-select-trigger:hover{background:#ffffff14;border-color:#fff3}.custom-select-trigger .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}.custom-select-container.open .arrow{transform:rotate(180deg);border-top-color:var(--accent-primary)}.custom-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}.custom-options.open{opacity:1;visibility:visible;transform:translateY(0)}.custom-option{padding:10px 16px;font-size:.9rem;color:var(--subtext0);cursor:pointer;transition:all .2s ease}.custom-option:hover{color:var(--text);background:#ffffff0d;padding-left:20px}.custom-option.selected{color:var(--accent-primary);background:#ccddff0d;font-weight:600}.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)}.reset-btn:hover{background:#ffffff14;border-color:#fff3;color:var(--text)}.reset-btn:active{transform:scale(.95)}.reset-btn svg{transition:transform .5s ease}.reset-btn:hover svg{transform:rotate(-180deg)}.playground{display:flex;flex:1;gap:var(--gap);min-height:0}.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}.pane:hover,.pane:focus-within{border-color:#cdf3;box-shadow:0 10px 30px -5px #0000004d}.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}.custom-editor{flex:1;overflow:auto;font-family:var(--font-mono);font-size:14px;line-height:1.6;background-color:transparent!important}.editor-element{min-height:100%;padding:20px;font-family:inherit;outline:none;tab-size:2;color:var(--text)}.output-viewer{flex:1;display:flex;flex-direction:column;overflow:hidden}.tabs-container{display:flex;flex-direction:column;height:100%}.tabs-header{display:flex;gap:12px;padding:10px 20px;background-color:transparent;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}.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}.tab-btn:hover{color:var(--text);background-color:#ffffff0d}.tab-btn.active{background-color:#ccddff1a;color:var(--accent-primary);font-weight:600;border-color:#ccddff26;box-shadow:0 0 15px #ccddff0d}.tab-content{display:none;flex:1;overflow:hidden;position:relative}.tab-content.active{display:flex;flex-direction:column}.sub-tabs{padding:8px 16px;border-bottom:1px dashed var(--surface1);justify-content:center}.sub-tabs .tab-btn{font-size:.8rem;padding:4px 10px}.sub-tabs .tab-btn.active{background-color:var(--accent-secondary);color:var(--mantle)}.preview-frame{width:100%;height:100%;border:none;background-color:#fff}.output-content{padding:16px;overflow:auto;font-family:var(--font-mono);font-size:13px;color:var(--text);white-space:pre-wrap;height:100%}::-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)}@media(max-width:768px){#app{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));gap:10px}header{padding:5px 15px;height:54px}.header-logo{height:30px}.reset-btn span{display:none}.reset-btn{padding:8px}.mobile-view-switcher{display:flex;flex-shrink:0}.playground{position:relative;overflow:hidden}.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}.playground.show-editor .editor-pane{transform:translate(0);opacity:1;pointer-events:all;visibility:visible}.playground.show-editor .output-pane{transform:translate(100%)}.playground.show-output .output-pane{transform:translate(0);opacity:1;pointer-events:all;visibility:visible}.playground.show-output .editor-pane{transform:translate(-100%)}.custom-select-container{width:110px}.custom-select-trigger{padding:8px 12px;font-size:.8rem}.pane-header{padding:10px 15px;font-size:.7rem}.tabs-header{padding:8px 15px;gap:8px}.tab-btn{padding:4px 12px;font-size:.75rem}}.token-keyword{color:var(--pink);font-weight:700}.token-function{color:var(--blue)}.token-string{color:var(--green)}.token-variable{color:var(--text)}.token-comment{color:var(--overlay0);font-style:italic}.token-operator{color:var(--sky)}.token-value{color:var(--peach)}.token-identifier{color:var(--blue)}.token-text{color:var(--text)}.error-container{background:#101014;border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--red);color:var(--text);padding:16px;font-family:JetBrains Mono,monospace!important;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;border-radius:8px;font-size:13px;margin:20px;box-shadow:0 4px 16px #0006;line-height:1.5}.error-container *{font-family:JetBrains Mono,monospace!important}