.studio-main{max-width:none;padding:35px 3% 55px}.studio-heading,.studio-actions,.studio-toolbar,.studio-toolbar>div,.studio-bottom,.studio-bottom>div{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.studio-heading{margin-bottom:25px}.studio-heading h1{font-size:48px;letter-spacing:-2px;margin:8px 0}.studio-actions #save-state{font-size:11px;color:#6e7965;max-width:260px}.studio-message{padding:14px 18px;margin:15px 0;background:#e7eedf;border:1px solid #d2ddc7;border-radius:6px}.studio-message.error{color:#942f20;background:#fff1eb;border-color:#f0c9bc}.studio-message a{text-decoration:underline}.project-details{border:1px solid #dbdfd3;border-radius:8px;padding:16px 20px;background:#fff;margin-bottom:22px}.project-details summary{cursor:pointer;font-weight:700;font-size:13px}.project-details summary span{font-size:11px;color:#7a826f;margin-left:15px;font-weight:400}.project-fields{display:grid;grid-template-columns:2fr 1fr;gap:12px 20px;margin-top:16px}.project-fields label,.account-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}.project-fields .wide{grid-column:1/-1}.project-fields input,.project-fields textarea,.project-fields select,.account-form input,.account-form textarea{width:100%;padding:10px 12px;border:1px solid #d6ddcd;border-radius:5px;background:#fafbf7;min-width:0}.check{display:flex;align-items:center;gap:8px;font-size:12px}.project-fields .check{flex-direction:row}.check input{width:16px;height:16px;flex:none}.project-details>p{font-size:11px;color:#747d69;margin:13px 0 0}.studio-editors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#3c4437;border:1px solid #31382d;border-radius:8px;overflow:hidden}.code-pane{min-width:0;background:#20271f;color:#e4e8db}.code-pane>div{display:flex;justify-content:space-between;padding:13px 17px;background:#293027;border-bottom:1px solid #394131;font:12px monospace}.code-pane b span{color:#b0c795;margin-right:9px}.code-pane small{font-size:10px;color:#939d89}.code-pane textarea{display:block;resize:vertical;width:100%;height:350px;min-height:200px;padding:17px;border:0;border-radius:0;color:#dbe8c7;background:#20271f;font:13px/1.75 Consolas,monospace;tab-size:4;outline-offset:-3px}.code-switch{display:none}.studio-toolbar{margin:20px 0 12px}.studio-toolbar>div:last-child button{font-size:11px;padding:7px 10px;border-radius:5px}.studio-toolbar button.active{background:#e5ebdc}.studio-preview{background:#e9ece4;min-height:400px;border:1px solid #d7ddcd;border-radius:7px;display:flex;justify-content:center;overflow:auto}.studio-preview iframe{display:block;width:100%;height:460px;min-width:0;border:0;background:#fff}.studio-toolbar #run-state{font:11px monospace;color:#68785c}.console-panel{position:relative;margin-top:12px;background:#232a21;color:#dde6d5;padding:12px 18px;border-radius:6px;font:12px monospace}.console-panel summary{cursor:pointer}.console-panel>button{position:absolute;right:15px;top:8px;color:#c1d3af;font:11px monospace}.console-panel #console-count{color:#9cbb81}.console-panel #console-log{max-height:200px;overflow:auto}.console-panel #console-log p{white-space:pre-wrap;overflow-wrap:anywhere;border-top:1px solid #46513c;margin:0;padding:8px 0}.console-panel #console-log p.error{color:#ffb19b}.studio-bottom{margin-top:20px;font-size:11px;color:#77836b}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.portal-main{max-width:1440px;padding:50px 4.5% 80px;min-height:65vh}.portal-hero{padding:20px 0 35px;border-bottom:1px solid #dce1d4;margin-bottom:30px}.portal-hero h1{font-size:clamp(38px,5vw,64px);letter-spacing:-2.5px;margin:20px 0}.portal-hero>p{max-width:740px;color:#707c63;font-size:16px}.portal-hero .btn{margin-top:14px}.portal-filters{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.portal-filters input,.portal-filters select{padding:10px 14px;background:#fff;border:1px solid #d3dcc9;border-radius:5px}.portal-filters input{flex:1;min-width:180px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.project-card{border:1px solid #d8dfcf;border-radius:9px;background:#fff;overflow:hidden}.project-art{display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:center;min-height:170px;padding:25px;background:#e9efdf;background-image:radial-gradient(#b8c8a5 .8px,transparent .8px);background-size:17px 17px;color:#3f5930}.project-art>span{font:40px monospace;color:#ec5c2c}.project-art b{font-size:22px;line-height:1.2;overflow-wrap:anywhere}.project-card>div{padding:22px}.project-card h2{font-size:20px;line-height:1.3;margin:7px 0 12px}.project-card p{font-size:13px;color:#78846b;min-height:44px}.author{font:11px monospace;color:#71855e}.project-foot{display:flex;justify-content:space-between;border-top:1px solid #e6e9df;padding-top:13px;font:10px monospace;color:#7b866e}.empty-state{padding:40px;border:1px dashed #c5d1b7;border-radius:8px;grid-column:1/-1}.empty-state h2{font-size:24px}.account-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;max-width:1000px;margin:20px auto}.account-form{padding:30px;border:1px solid #d7dfcd;border-radius:8px;background:#fff}.account-form h2{font-size:28px;margin:0 0 20px}.account-form label{margin:14px 0}.account-form .check{flex-direction:row;align-items:flex-start;font-size:11px}.account-form small{display:block;color:#7d8870;margin-top:15px}.account-form a{text-decoration:underline}.account-form .btn{margin-top:10px}.account-panel{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:25px;flex-wrap:wrap}.my-project{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid #d7dfcf}.my-project h3{margin:0 0 5px}.my-project small{font-size:11px;color:#7e896f}.my-project>div:last-child{display:flex;gap:8px}.page-links{display:flex;gap:8px;margin:30px 0;flex-wrap:wrap}.page-links a{padding:6px 12px;border:1px solid #d4ddc8;border-radius:4px}.page-links a.active{background:#304229;color:#fff}.breadcrumbs{display:flex;gap:7px;flex-wrap:wrap;font-size:11px;color:#7b866e;margin:8px 0 25px}.breadcrumbs a{text-decoration:underline}.project-view{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px}.project-view h1{font-size:clamp(34px,4vw,54px);letter-spacing:-2px;overflow-wrap:anywhere}.project-view .description{white-space:pre-wrap;overflow-wrap:anywhere;color:#647455}.project-view aside{padding:25px;border:1px solid #d4deca;border-radius:8px;align-self:start;background:#eef3e7;position:sticky;top:20px}.project-view aside .btn{width:100%;margin-bottom:10px}.project-view aside p{font-size:12px}.project-code{max-width:100%;overflow:hidden;margin-top:30px}.project-code pre,.effect-code pre{max-height:450px;overflow:auto;padding:22px;background:#232a20;color:#dce8cd;border-radius:7px;font:12px/1.8 monospace;white-space:pre}.project-code summary{cursor:pointer;padding:12px 0;font-weight:700}.project-view iframe,.effect-preview iframe{width:100%;height:420px;border:1px solid #d9dfd1;background:#fff;border-radius:7px}.project-view .preview-placeholder{display:grid;place-items:center;min-height:220px;background:#eaf0e2;border:1px solid #d6dfca;border-radius:7px;text-align:center;padding:30px}.effect-guide{max-width:850px;font-size:16px}.effect-guide h2{margin-top:35px;font-size:28px;letter-spacing:-.7px}.effect-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:25px 0}.effect-links a{padding:20px;background:#fff;border:1px solid #d9dfd1;border-radius:6px;font-size:13px}.home-studio{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;padding:50px 0;border-block:1px solid #dde2d5;margin:35px 0}.home-studio h2{font-size:40px;letter-spacing:-1.8px;line-height:1.15;margin:15px 0}.home-studio p{color:#78846b;max-width:560px}.home-studio .studio-small{background:#263022;padding:25px;border-radius:8px;color:#b7d397;font:13px/2 monospace}.seo-links{padding:35px 0}.seo-links>div{display:flex;gap:10px;flex-wrap:wrap}.seo-links a{font-size:12px;background:#e9eedf;padding:8px 12px;border-radius:5px}.portal-page header nav{gap:20px}.portal-page header nav a{font-size:12px}.portal-page footer{flex-wrap:wrap;gap:20px}.portal-page header nav .blog-active{color:inherit}.portal-page .tag-list{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:#6c7c5b;margin:20px 0}.portal-page .tag-list span{padding:5px 10px;background:#e9efdf;border-radius:4px}.report-form{margin-top:15px}.report-form textarea{width:100%;min-height:75px;padding:8px;border:1px solid #c7d5b9;background:#fff}.report-form button{font-size:12px;text-decoration:underline}.moderation-table{width:100%;border-collapse:collapse;font-size:12px}.moderation-table td,.moderation-table th{text-align:left;padding:12px;border-bottom:1px solid #d9e0cf;vertical-align:top}.moderation-table .btn{min-height:30px;padding:5px 10px;margin:2px}.moderation-scroll{overflow:auto}.info-content{max-width:850px}.info-content h2{margin-top:35px}.info-content p,.info-content li{color:#68795a}.portal-page header{height:auto;min-height:88px;flex-wrap:wrap;padding-block:18px}.portal-page header nav{flex-wrap:wrap}.portal-page header nav a{display:inline-block}
@media(max-width:1000px){.studio-actions{gap:7px}.studio-actions .btn{padding:8px 12px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-view{grid-template-columns:minmax(0,1fr) 240px;gap:25px}.portal-page header nav{gap:12px}.portal-page header .header-cta{display:none}}
@media(max-width:760px){.studio-main{padding:25px 4%}.studio-heading{align-items:flex-start}.studio-actions #save-state{flex-basis:100%;max-width:none}.studio-actions .btn{font-size:11px;min-height:35px}.studio-heading h1{font-size:40px}.project-fields{grid-template-columns:1fr}.project-fields .wide{grid-column:auto}.studio-editors{grid-template-columns:1fr}.code-pane{display:none}.code-pane.active{display:block}.code-switch{display:flex;gap:8px;margin:15px 0 10px}.code-switch button{padding:7px 16px;border:1px solid #d2dbc5;border-radius:5px;font-size:12px}.code-switch button.active{background:#30432a;color:#fff}.code-pane textarea{height:300px}.studio-toolbar{gap:15px}.studio-toolbar .check{font-size:11px}.studio-preview iframe{height:380px}.studio-bottom>span{display:none}.studio-bottom .btn{font-size:10px}.portal-main{padding-top:25px}.portal-hero h1{font-size:42px}.project-view{grid-template-columns:1fr}.project-view aside{position:static}.effect-links{grid-template-columns:repeat(2,minmax(0,1fr))}.account-layout{grid-template-columns:1fr}.home-studio{grid-template-columns:1fr;gap:20px}.home-studio h2{font-size:33px}.my-project{align-items:flex-start;flex-wrap:wrap}.portal-page header nav{width:100%;justify-content:space-between;gap:8px}.portal-page header nav a{font-size:10px}}
@media(max-width:480px){.project-grid{grid-template-columns:1fr}.effect-links{grid-template-columns:1fr}.studio-toolbar>div{gap:7px}.studio-toolbar #run-state{width:100%}.portal-hero h1{font-size:36px}.account-form{padding:22px}.project-art{min-height:150px}.studio-heading .eyebrow{font-size:8px}}
.cm-s-jquery.CodeMirror{height:350px;min-height:200px;background:#20271f;color:#dce8cc;font:13px/1.8 Consolas,monospace}.cm-s-jquery .CodeMirror-gutters{background:#20271f;border:0}.cm-s-jquery .CodeMirror-linenumber{color:#66735d;padding:0 12px}.cm-s-jquery .CodeMirror-cursor{border-left-color:#e1edcf}.cm-s-jquery .CodeMirror-selected{background:#45563c}.cm-s-jquery .cm-tag{color:#b9d597}.cm-s-jquery .cm-attribute{color:#e0c382}.cm-s-jquery .cm-string{color:#c8d795}.cm-s-jquery .cm-keyword{color:#edaa8e}.cm-s-jquery .cm-number,.cm-s-jquery .cm-atom{color:#c6b2e4}.cm-s-jquery .cm-def,.cm-s-jquery .cm-variable-2{color:#a6ccda}.cm-s-jquery .cm-property{color:#d6dcb7}.cm-s-jquery .cm-comment{color:#84977a}.cm-s-jquery .cm-error{background:#783e30;color:#fff}.cm-s-jquery .CodeMirror-activeline-background{background:#2e3828}.CodeMirror-hints{font:12px monospace}.CodeMirror-dialog{background:#eaf0df;color:#25311c}.effect-links h2{font-size:19px;line-height:1.35}.effect-links p{font-size:13px;color:#718061}.effect-links b{font-size:11px}.tag-list a{padding:5px 10px;background:#e8eede;border-radius:4px}.home-studio .studio-small{overflow-wrap:anywhere}.seo-links>div{margin:12px 0}.hero-actions{flex-wrap:wrap}body:not(.portal-page) header{height:auto;min-height:88px;padding-block:18px;flex-wrap:wrap}body:not(.portal-page) header nav{gap:15px;flex-wrap:wrap}body:not(.portal-page) header nav a{font-size:12px}.editor-bottom>div{flex-wrap:wrap;justify-content:flex-end}.editor-bottom{gap:15px}.editor-bottom>div .btn{font-size:10px;padding-inline:12px}@media(max-width:760px){.cm-s-jquery.CodeMirror{height:300px}body:not(.portal-page) header nav{width:100%;gap:9px;justify-content:space-between}body:not(.portal-page) header nav a{display:inline-flex;font-size:10px}body:not(.portal-page) header .header-cta{display:none}}

.effect-code pre,.project-code pre{position:relative;padding-top:45px}.effect-code .copy-code,.project-code .copy-code{position:absolute;right:12px;top:10px;padding:4px 9px;color:#c8ddb6;border:1px solid #536448;border-radius:4px;font:10px monospace;background:#2a3623}