html,body{position:fixed;top:0;left:0;width:100vw;height:100%;overflow:hidden;overscroll-behavior:none;margin:0;padding:0;background-color:oklch(.12 0 0);display:flex;flex-direction:column;font-family:Bricolage Grotesque,sans-serif}.main-content{display:flex;flex-direction:row;flex-grow:1;overflow:hidden;min-height:0;width:100%}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:0 10px;height:45px;background-color:oklch(.4 0 0);color:#fff;padding-block:.6rem;user-select:none;-webkit-user-select:none;border-block-end:0;flex-shrink:0}.top-bar .title{font-weight:580;font-size:1.18rem;display:flex;align-items:center;gap:7px;background-image:linear-gradient(to right,oklch(.95 0 0),oklch(.82 0 0));-webkit-background-clip:text;background-clip:text;color:transparent}.top-bar .title svg{width:48px}.top-bar .buttons{display:flex;align-items:center;font-size:13px;font-weight:300}#collapse-bar{background-color:transparent;border:0;display:grid;place-items:center;color:#fff;transform:rotate(0);transition:transform .3s ease;cursor:pointer;height:28.4px}#collapse-bar.expand{transform:rotate(180deg)}#collapse-bar svg{fill:oklch(.8 0 0);width:14px}.top-bar .buttons button{margin-left:10px;background-color:oklch(.6 0 0);color:oklch(.985 0 0);border:2px solid oklch(.5 0 0);padding:.3rem .6rem;border-radius:5px;transition:all .3s ease;cursor:pointer;font-size:13px;font-weight:600;height:42px}.top-bar .buttons button:hover{background-color:oklch(.4 0 0)}.top-bar .font-size-container{display:flex;align-items:center;margin-left:10px}.top-bar .font-size-container label{margin-right:5px}.increase-button,.decrease-button{margin-left:0!important;user-select:none;-webkit-user-select:none}.font-size-container input{height:31px;border:2px solid oklch(.5 0 0);border-radius:4px;width:40px}.font-size-container input:focus{outline:blue}.editor-container{display:flex;flex-direction:column;flex:1;background-color:oklch(.12 0 0);color:oklch(.93 0 0);min-width:0;will-change:flex-basis,width}.editor-panel{display:flex;flex-direction:column;flex-grow:1;flex-basis:0;min-height:30px;background-color:oklch(.25 0 0);color:oklch(.9 0 0);font-weight:600;contain:size layout style;content-visibility:auto}.editor-panel>label{font-family:sans-serif;padding-inline:10px;padding-block:11px;font-weight:700;background-color:oklch(.35 0 0);cursor:row-resize;display:flex;align-items:center;user-select:none;-webkit-user-select:none;box-shadow:inset -10px 0 10px -10px oklch(.1 0 0);border-block:1px solid oklch(.5 0 0)}label[for=html-code]{display:flex;justify-content:space-between;align-items:center}.editor-panel label svg{height:20px}.editor-panel label>span{user-select:none;-webkit-user-select:none;display:flex;align-items:center;gap:5px}#open-bar{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;padding:0 5px}#html-editor-container,#css-editor-container,#js-editor-container{flex-grow:1;overflow:hidden}.cm-editor{height:100%;width:100%;font-family:monospace;font-size:14px}.resize{flex:0 0 15px;cursor:col-resize;background-color:oklch(.45 0 0);touch-action:none;transition:all .3s ease;position:relative;z-index:10}.resize:before{content:"";position:absolute;right:-10px;left:-10px;top:-10px;bottom:-10px;z-index:50;border-radius:14px;background-color:#0000;transition:all .2s ease}.resize:hover:before{background-color:#0000001a;transform:scaleX(1)}.resize:active:before{transform:scaleX(0)}.resize:after{content:"";position:absolute;inset-block:0;background-color:oklch(.45 0 0);left:50%;transform:translate(-50%);transition:all .3s ease;width:3px}.resize:active:after{background-color:oklch(.49 .3 220)}.viewport{height:30px;display:grid;place-items:center;padding-inline:1rem;background-color:#00000080;color:#fff;border-radius:4px;border-start-start-radius:0;border-end-start-radius:0;font-family:sans-serif;position:absolute;left:0;z-index:40}.viewport:not(.active){display:none}.result-container{flex:1;position:relative}#result-frame{width:100%;height:100%;border:none;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#result-frame.scale{width:200%;height:200%;border:none;background-color:#fff;position:absolute;top:0;left:50%;transform:translate(-50%,-25%) scale(.5)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{position:relative;background:#1e1e1e;color:#d4d4d4;padding:20px;border-radius:8px;border:1px solid #333;box-shadow:0 10px 30px #00000080;width:90%;max-width:600px;display:flex;flex-direction:column}#close-head-modal,#close-import-modal,#close-assets-modal{position:absolute;top:10px;right:15px;background:transparent;border:none;color:oklch(.9 0 0);font-size:24px;cursor:pointer;padding:0;line-height:1}#close-head-modal:hover,#close-import-modal:hover{color:#fff}#head-editor-container,#import-editor-container{height:300px;margin-bottom:10px}.modal-buttons{display:flex;justify-content:flex-end}.modal-buttons button{margin-left:10px}#save-head,#import-replace,#import-concatinate{background-color:oklch(.6 0 0);color:#fff;border:2px solid oklch(.5 0 0);padding:.5rem .6rem;border-radius:5px;transition:all .3s ease;cursor:pointer;font-size:13px;font-weight:600}#save-head:hover,#import-replace:hover,#import-concatinate:hover{background-color:oklch(.4 0 0)}.import-type button{border-radius:4px;color:#fff;border:1px solid oklch(.6 0 0);background-color:oklch(.4 0 0);padding:12px}.confirm-selection select{background-color:oklch(.26 0 0);color:#fff;border-radius:4px;border:1px solid oklch(.5 0 0);padding:.3rem;margin-top:3px}.legal-scroll-area::-webkit-scrollbar{width:8px}.legal-scroll-area::-webkit-scrollbar-track{background:#252526}.legal-scroll-area::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.legal-scroll-area::-webkit-scrollbar-thumb:hover{background:#555}.autorun-btn{background:transparent;border:1px solid #444;color:#666;border-radius:3px;cursor:pointer;font-size:12px;padding:2px 6px;transition:all .2s ease}.autorun-btn:hover{border-color:#666;color:#888}.autorun-btn.active{background:rgba(40,167,69,.2);border-color:#28a745;color:#28a745;text-shadow:0 0 5px rgba(40,167,69,.5)}.asset-item{display:flex;justify-content:space-between;align-items:center;background:#252526;padding:8px 12px;margin-bottom:5px;border-radius:4px;border:1px solid #333}.asset-name{font-family:monospace;color:#9cdcfe}.delete-asset{background:#d9534f;color:#fff;border:none;padding:2px 8px;border-radius:3px;cursor:pointer;font-size:12px}.top-portion{display:flex;justify-content:space-between;align-items:top;height:60px}.top-portion button{display:grid}.top-portion h2{margin-top:50px}.modal-tabs{display:flex;border-bottom:1px solid #444;margin-bottom:20px}.modal-tab{padding:10px 20px;cursor:pointer;opacity:.6;border-bottom:2px solid transparent;transition:all .2s;font-weight:500}.modal-tab:hover{opacity:1;background:rgba(255,255,255,.05)}.modal-tab.active{opacity:1;border-bottom-color:#007acc;color:#007acc}.tab-content{display:none;animation:fadeIn .2s ease}.tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}#import-file-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:10px;background:#1e1e1e;border-radius:8px;min-height:120px;max-height:250px;overflow-y:auto}.import-card{background:#2d2d2d;border:1px solid #444;border-radius:6px;padding:10px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;transition:transform .1s}.import-card:hover{background:#333;transform:translateY(-2px)}.import-card svg{width:32px;height:32px;margin-bottom:8px}.import-card .filename{font-size:12px;color:#ccc;word-break:break-all;line-height:1.2;margin-bottom:8px;max-width:100%}.import-card-actions{display:flex;gap:6px;margin-top:auto}.card-btn{background:#444;border:none;color:#fff;border-radius:4px;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}.card-btn:hover{background:#555}.card-btn.delete:hover{background:#d9534f}.card-btn.add-asset{width:auto;padding:0 8px;background:#28a745}#preview-bubble{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:70vh;background:#1e1e1e;border:1px solid #555;box-shadow:0 20px 50px #000c;z-index:10001;display:none;flex-direction:column;border-radius:8px}#preview-header{padding:10px 15px;background:#252526;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center;font-weight:700}#preview-editor{flex:1;overflow:hidden}.delay-container{display:flex;align-items:center;background:#2d2d2d;padding:2px 8px;border-radius:4px;margin-right:10px;border:1px solid #444;font-size:13px;color:#ccc}.delay-container label{margin-right:5px;font-weight:500}.delay-container input{background:transparent;border:none;color:#fff;width:50px;text-align:center;font-family:Bricolage Grotesque,sans-serif;font-size:13px}.delay-container input:focus{outline:none;background:#333}.delay-container span{opacity:.5;font-size:11px;margin-left:2px}.delay-container input::-webkit-outer-spin-button,.delay-container input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.css-label{display:flex;justify-content:space-between}.css-label button{opacity:.8;border-radius:4px;background-color:#ffffff1a;color:#fff;border:2px solid oklch(.5 0 0);padding:.2rem .5rem;font-size:12px}body.resizing,body.resizing *{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important}body.resizing .cm-editor,body.resizing iframe{contain:strict}body.resizing .editor-panel{box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:transparent!important}body.resizing .cm-scroller{overflow-anchor:none!important}.result-container iframe{pointer-events:none}.result-container:not(.resizing) iframe{pointer-events:auto}