:root{--studio-background:#f1f0ec;--panel:#1e1e1e;--panel-control:#272727;--panel-control-hover:#2c2c2c;--panel-muted:#858585;--panel-text:#f4f4f2}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--studio-background);width:100%;height:100%;margin:0;overflow:hidden}body,button,input,select{font-family:Helvetica Neue,Inter,Segoe UI,Arial,sans-serif}button,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline-offset:2px;outline:2px solid #7d6cff}.studio{color:#111;background:var(--studio-background);width:100vw;height:100svh;transition:background .18s;position:relative;overflow:hidden}.field-canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.field-canvas.is-dragging{cursor:grabbing}.control-panel{z-index:2;overscroll-behavior:contain;width:min(338px,100vw - 28px);max-height:calc(100svh - 28px);color:var(--panel-text);background:linear-gradient(145deg, #ffffff05, transparent 30%), var(--panel);scrollbar-width:none;opacity:1;border:1px solid #ffffff0a;border-radius:24px;padding:21px 16px 16px;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .22s;position:absolute;top:14px;left:14px;overflow:auto;transform:translate(0);box-shadow:0 32px 68px #0000003d,0 5px 18px #00000024,inset 0 1px #ffffff0d}.control-panel::-webkit-scrollbar{display:none}.control-panel.is-closed{pointer-events:none;opacity:0;transform:translate(calc(-100% - 28px))}.panel-header{justify-content:space-between;align-items:center;min-height:27px;padding:0 5px 11px;display:flex}.brand{color:#d4d4d1;letter-spacing:.18em;align-items:center;gap:9px;font-size:11px;font-weight:500;display:flex}.brand-mark{background:#f5f4ef;border-radius:50%;flex:none;width:6px;height:6px;display:inline-block;box-shadow:0 0 8px #fff9}.panel-reset{color:#7c7c7a;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;padding:4px 6px;font-size:10px;transition:color .16s}.panel-reset:hover{color:#f2f2ef}.controls{gap:7px;display:grid}.source-card{background:radial-gradient(circle at 88% 0,#5b4cff26,#0000 42%),#242424;border:1px solid #ffffff0d;border-radius:11px;gap:9px;padding:13px;display:grid}.source-heading{color:#92928f;letter-spacing:.11em;text-transform:uppercase;justify-content:space-between;align-items:center;font-size:9px;font-weight:600;display:flex}.point-count{color:#b5afa9;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:none}.source-tabs{background:#191919;border:1px solid #ffffff08;border-radius:8px;grid-template-columns:1fr 1fr;padding:3px;display:grid}.source-tabs button{color:#797977;cursor:pointer;background:0 0;border:0;border-radius:6px;height:31px;padding:0 12px;font-size:11px;transition:color .16s,background .16s,box-shadow .16s}.source-tabs button:hover{color:#d5d5d1}.source-tabs button.is-active{color:#f3f3f0;background:#303030;box-shadow:0 1px 4px #0000003d,inset 0 1px #ffffff0a}.text-source{gap:6px;display:grid}.text-source>span{color:#8e8e8b;letter-spacing:.08em;text-transform:uppercase;font-size:9px}.text-source input{color:#f4f4ef;letter-spacing:-.025em;caret-color:#7768ff;background:#181818;border:1px solid #ffffff0f;border-radius:8px;width:100%;height:47px;padding:0 14px;font-size:23px;font-weight:700}.text-source input::placeholder{color:#555552}.upload-source{background:#181818;border:1px dashed #ffffff21;border-radius:8px;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:62px;padding:8px;transition:background .16s,border-color .16s;display:grid;position:relative}.upload-source.is-dragging{background:#5b4cff1a;border-color:#7568ff}.upload-source>input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}.upload-glyph,.upload-preview{color:#aaa9a5;background-color:#2c2c2c;background-position:50%;background-size:cover;border:1px solid #ffffff12;border-radius:6px;place-items:center;width:38px;height:38px;font-size:18px;display:grid;overflow:hidden}.upload-copy{gap:3px;min-width:0;display:grid}.upload-copy b{color:#dcdcd8;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:500;overflow:hidden}.upload-copy small{color:#6f6f6c;text-overflow:ellipsis;white-space:nowrap;font-size:8px;overflow:hidden}.upload-source button{color:#d9d8d5;cursor:pointer;background:#333;border:1px solid #ffffff0d;border-radius:6px;height:28px;padding:0 9px;font-size:9px}.upload-source button:hover{background:#404040}.source-help,.source-error{color:#6f6f6c;min-height:11px;margin:0;font-size:8px;line-height:1.4}.source-error{color:#ff8d91}.control{background:var(--panel-control);border:1px solid #ffffff04;border-radius:8px;align-items:center;min-height:53px;padding:0 16px;transition:background .16s;display:flex;position:relative;overflow:hidden}.control:hover,.control:focus-within{background:var(--panel-control-hover)}.control-label{z-index:2;color:#efefed;letter-spacing:-.01em;pointer-events:none;flex:none;font-size:13px;font-weight:400;position:relative}.slider-control{--slider-fill:50%;isolation:isolate;justify-content:space-between}.slider-control:before{z-index:1;content:"";pointer-events:none;background:radial-gradient(circle,#ffffff2e 0 1.35px,#0000 1.55px) 0/27px 6px repeat-x;height:6px;position:absolute;left:17px;right:17px}.slider-control:after{z-index:0;width:var(--slider-fill);content:"";pointer-events:none;background:#ffffff12;border-radius:8px;position:absolute;inset:0 auto 0 0;box-shadow:inset -1px 0 #ffffff05}.slider-control input[type=range]{z-index:5;appearance:none;cursor:ew-resize;background:0 0;width:calc(100% - 32px);height:100%;margin:0;position:absolute;inset:0 16px}.slider-control input[type=range]::-webkit-slider-runnable-track{background:0 0;height:100%}.slider-control input[type=range]::-webkit-slider-thumb{z-index:4;appearance:none;background:#f4f4ef;border:0;border-radius:999px;width:4px;height:28px;margin-top:12px;position:relative;box-shadow:0 0 7px #ffffff57,0 0 0 1px #ffffff17}.slider-control input[type=range]::-moz-range-track{background:0 0;height:100%}.slider-control input[type=range]::-moz-range-thumb{background:#f4f4ef;border:0;border-radius:999px;width:4px;height:28px;box-shadow:0 0 7px #ffffff57}.slider-control output{z-index:4;color:#e7e7e3;font-variant-numeric:tabular-nums;text-align:right;pointer-events:none;flex:0 0 36px;font-size:13px;position:relative}.slider-control .control-label{z-index:4}.toggle-control{cursor:pointer;justify-content:space-between}.toggle-control input{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.toggle-track{background:#515151;border:1px solid #ffffff0d;border-radius:999px;flex:none;width:42px;height:24px;transition:background .18s;display:block;position:relative}.toggle-thumb{background:#f8f8f5;border-radius:50%;width:16px;height:16px;transition:transform .2s cubic-bezier(.22,1,.36,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #00000052}.toggle-control input:checked+.toggle-track{background:#5b4cff}.toggle-control input:checked+.toggle-track .toggle-thumb{transform:translate(18px)}.toggle-control input:focus-visible+.toggle-track{outline-offset:2px;outline:2px solid #7d6cff}.select-block{color:var(--panel-muted);letter-spacing:.02em;font-size:11px;display:block}.select-block>span:first-child{padding:2px 5px 6px;display:block}.select-wrap{display:block;position:relative}.select-wrap select{color:#efefed;letter-spacing:-.01em;appearance:none;background:var(--panel-control);cursor:pointer;border:1px solid #ffffff04;border-radius:8px;width:100%;height:53px;padding:0 46px 0 16px;font-size:13px}.select-wrap select:hover{background:var(--panel-control-hover)}.select-chevron{pointer-events:none;border-bottom:1.5px solid #cfcfcb;border-right:1.5px solid #cfcfcb;width:8px;height:8px;position:absolute;top:21px;right:18px;transform:rotate(45deg)}.color-grid{grid-template-columns:1fr 1fr;gap:10px;padding:3px 5px 1px;display:grid}.color-control{color:var(--panel-muted);letter-spacing:.08em;text-transform:uppercase;gap:7px;font-size:10px;display:grid}.color-control-secondary{grid-column:2}.color-swatch{background:var(--swatch-color);border:1px solid #ffffff24;border-radius:7px;height:31px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #0000001f}.color-swatch input{opacity:0;cursor:pointer;width:calc(100% + 16px);height:calc(100% + 16px);position:absolute;inset:-8px}.close-button{z-index:3;color:#f5f4ef;cursor:pointer;background:#202020;border:1px solid #ffffff0f;border-radius:50%;place-items:center;width:46px;height:46px;padding:0 0 3px;font-size:26px;font-weight:200;transition:transform .18s,background .18s;display:grid;position:absolute;top:14px;right:14px;box-shadow:0 8px 20px #00000026}.close-button:hover{background:#080808;transform:rotate(5deg)}.show-controls{z-index:2;color:#eee;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:#202020;border:1px solid #ffffff0f;border-radius:999px;align-items:center;gap:9px;height:42px;padding:0 17px;font-size:11px;animation:.26s both reveal;display:flex;position:absolute;top:16px;left:16px;box-shadow:0 8px 20px #00000026}.interaction-hint{z-index:1;color:#c8c8c5;white-space:nowrap;background:#202020;border:1px solid #ffffff0f;border-radius:999px;align-items:center;gap:8px;height:38px;padding:0 18px;font-size:11px;display:flex;position:absolute;bottom:13px;left:50%;transform:translate(-50%);box-shadow:0 8px 20px #0000001f}.interaction-hint span{gap:3px;display:inline-flex}.interaction-hint b{color:#f5f5f2;font-weight:500}.interaction-hint i{background:#737371;border-radius:50%;width:2px;height:2px}@keyframes reveal{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media (max-height:850px) and (min-width:741px){.control-panel{border-radius:20px;width:316px;padding-top:16px}.control{min-height:46px}.select-wrap select{height:46px}.select-chevron{top:17px}}@media (max-width:740px){.control-panel{border-radius:22px;width:auto;max-height:min(66svh,680px);padding:17px 13px 13px;inset:auto 10px 10px;transform:translateY(0)}.control-panel.is-closed{transform:translateY(calc(100% + 24px))}.control{min-height:49px}.interaction-hint{max-width:calc(100vw - 76px);height:38px;padding:0 14px;top:14px;bottom:auto;left:12px;overflow:hidden;transform:none}.interaction-hint span:nth-of-type(n+3),.interaction-hint i:nth-of-type(n+2){display:none}.show-controls{top:auto;bottom:14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}