@charset "UTF-8";
:root{color-scheme:dark;--bg:#0c1017;--panel:#141a24;--panel2:#10161f;--line:#262e3c;--text:#f0f3f9;--muted:#929db0;--blue:#89a9ff;--focus:#adc3ff;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;color:var(--text);background:var(--bg);font-size:14px;line-height:1.5}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button,select{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}a{color:inherit;text-decoration:none}button{touch-action:manipulation}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.site-header{max-width:1180px;margin:auto;height:94px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1c2431}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:650;letter-spacing:-.35px}.brand-mark{width:40px;height:43px;display:grid;place-items:center;background:#1d293d;border:1px solid #33476c;border-radius:12px;color:#afc8ff}.brand-mark svg{height:27px;width:27px}.brand-caption{display:block;font-size:8px;letter-spacing:2.15px;color:var(--muted);font-weight:600;margin-top:1px}.header-right{display:flex;align-items:center;gap:28px;font-size:12px}.header-right a{color:#a5afc0}.header-right a:hover{color:#fff}.header-right a span{margin-left:8px}.private-pill{display:flex;align-items:center;gap:8px;border:1px solid #29323e;border-radius:30px;padding:7px 12px;color:#bec7d5;font-size:11px}.private-pill>span,.live-label>span{height:5px;width:5px;border-radius:100%;background:#8cbda6}main{max-width:1180px;margin:0 auto;padding:0 36px}.intro{padding:52px 0 34px}.eyebrow{display:flex;gap:9px;align-items:center;font-size:9px;letter-spacing:1.7px;color:#9aa9c1;font-weight:650;margin-bottom:14px}.eyebrow>span{width:6px;height:6px;border:1px solid #8faaf0;border-radius:2px;transform:rotate(45deg)}h1{font-size:42px;letter-spacing:-1.8px;line-height:1.15;margin:0 0 15px;font-weight:650}h1>span{color:#95aff5}.intro>p{font-size:14px;color:#a2aec0;line-height:1.8;margin:0}.workspace{display:grid;grid-template-columns:1.12fr 1fr;gap:22px;align-items:stretch}.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 9px 30px #00000010}.card-heading{padding:19px 22px;display:flex;align-items:center;justify-content:space-between;min-height:68px;border-bottom:1px solid #252e3c;gap:10px}.card-heading>div:first-child{display:flex;align-items:center;gap:12px}.step{font:10px ui-monospace,monospace;color:#91a1bd;border:1px solid #303b4f;border-radius:7px;padding:4px 6px;background:#1c2533}h2{font-size:14px;margin:0;font-weight:600;letter-spacing:-.15px}.history-buttons{display:flex;gap:4px}.icon-button{padding:4px 6px;border:0;background:none;display:flex;color:#9aa7bc;border-radius:6px}.icon-button:hover:not(:disabled){color:white;background:#242e3e}.icon-button svg{height:17px;width:17px}.redo svg{transform:scaleX(-1)}.editor-card{display:flex;flex-direction:column}.editor-content{padding:22px 22px 20px}.text-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.text-label label,.palette-heading h3{font-size:9px;font-weight:600;letter-spacing:1.35px;color:#a4b1c6;margin:0}.text-button{background:none;border:0;padding:0;color:#b4c6ee;font-size:10px;font-weight:500;border-radius:3px}.text-button:hover{color:white}.text-button.muted{color:#9aa5b7}.with-icon{display:flex;gap:7px;align-items:center}.with-icon svg{height:13px;width:13px}textarea{display:block;resize:vertical;width:100%;background:#0d131d;color:#dce4f2;border:1px solid #2a3548;border-radius:10px;padding:15px;outline:none;transition:border-color .15s}textarea:focus{border-color:#8198d2;box-shadow:0 0 0 3px #789aff0c}textarea::placeholder{color:#68778f}#editor{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;line-height:1.9;min-height:148px;max-height:360px}textarea::selection{background:#7599ec66;color:#fff}.editor-meta{display:flex;justify-content:space-between;gap:12px;color:#78869e;font-size:9px;margin-top:9px}.editor-meta #selection-status{color:#8ca3c9}.format-row{display:flex;align-items:center;justify-content:space-between;padding:19px 0 21px;border-bottom:1px solid #252f3e}.format-button{display:flex;gap:10px;align-items:center;background:#1d2635;border:1px solid #354157;border-radius:8px;padding:8px 11px;font-size:11px;min-height:35px}.format-button>b{font-size:17px;line-height:1}.format-button[aria-pressed=true]{color:#d8e4ff;background:#293a59;border-color:#6788ca}.format-button kbd{color:#8292ae;font:8px inherit;margin-left:8px}.toggle-label{cursor:pointer;display:flex;align-items:center;gap:9px;font-size:11px;color:#c7d0de;position:relative;white-space:nowrap}.toggle-label input{position:absolute;opacity:0;width:1px;height:1px}.switch-track{width:29px;height:17px;border-radius:30px;border:1px solid #3b475e;background:#2c374a;display:block;transition:background .15s}.switch-track:after{content:"";display:block;background:#abb7cc;border-radius:100%;height:11px;width:11px;transform:translate(2px,2px);transition:transform .15s}.toggle-label input:checked+.switch-track{background:#789ce4;border-color:#789ce4}.toggle-label input:checked+.switch-track:after{transform:translate(14px,2px);background:#fff}.toggle-label input:focus-visible+.switch-track{outline:2px solid #aec4ff;outline-offset:3px}.palette-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:19px 0 13px}.selected-color{display:flex;align-items:center;gap:7px;font-size:10px;color:#b5c0d3}.selected-color i{width:7px;height:7px;border-radius:2px;background:#fff}.selected-color code{color:#8396b7;background:#202b3d;font:9px ui-monospace,monospace;padding:2px 5px;border-radius:4px}.palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.color-swatch{height:39px;position:relative;border:1px solid #ffffff20;outline:3px solid transparent;outline-offset:3px;border-radius:8px;color:white;box-shadow:inset 0 0 0 1px #00000010;transition:transform .12s,outline-color .12s}.color-swatch:hover{transform:translateY(-2px)}.color-swatch[aria-pressed=true]{outline-color:#a7bdf0}.color-swatch>span{position:absolute;bottom:3px;left:5px;font:9px ui-monospace,monospace;opacity:.8}.color-swatch>svg{width:18px;height:18px;position:absolute;right:6px;top:6px;stroke-width:2.5}.color-swatch[aria-pressed=false]>svg{display:none}.field-hint{font-size:10px;line-height:1.65;color:#8291aa;display:flex;align-items:flex-start;gap:8px;margin:19px 0 0}.field-hint svg{margin-top:2px;height:13px;width:13px}.card-bottom{margin-top:auto;border-top:1px solid #263040;display:flex;justify-content:space-between;padding:15px 22px;background:#121924}.result-column{display:flex;flex-direction:column;gap:18px}.live-label{display:flex;align-items:center;gap:6px;color:#97b7a6;font-size:8px;letter-spacing:1.2px}.preview-scene{min-height:172px;display:flex;flex-direction:column;padding:21px 23px 15px;background-color:#0d121a;background-image:linear-gradient(#5d6f8a0a 1px,transparent 1px),linear-gradient(90deg,#5d6f8a0a 1px,transparent 1px);background-size:24px 24px}.preview-caption{font-size:8px;color:#73849e;letter-spacing:1.4px}.preview-scene #preview{flex:1;align-content:center;padding:19px 0 22px;color:#fff;font:19px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;text-shadow:1.5px 1.5px 0 #000c;max-height:250px;overflow-y:auto;min-height:100px}.preview-empty{color:#60718c!important;font-size:15px!important;font-family:inherit!important;text-shadow:none!important}.scene-bottom{font-size:8px;letter-spacing:.25px;display:flex;align-items:center;gap:6px;color:#5f7089}.tiny-square{width:5px;height:5px;border:1px solid #5f7089}.preview-foot{padding:10px 22px;display:flex;justify-content:space-between;align-items:center;color:#8392aa;font-size:9px;border-top:1px solid #232e3e;min-height:38px}.preview-font-label{font:13px Georgia,serif;color:#667c9b}.output-card{flex:1}.output-content{padding:17px 22px 16px}.prefix-select select{border-radius:6px;border:1px solid #303e54;background:#1b2637;padding:4px 7px;color:#a6b7d5;font:10px ui-monospace,monospace;cursor:pointer}#output{font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;padding:12px;min-height:83px;max-height:240px;overflow-wrap:anywhere;word-break:break-word;color:#b7c9ef;background:#0d131d;border-color:#253248}.primary-button{margin-top:13px;display:flex;justify-content:center;align-items:center;gap:8px;position:relative;width:100%;border:1px solid #9fb5ed;border-radius:9px;color:#12213b;background:#a4bcf6;font-weight:650;font-size:11px;min-height:40px;transition:background .12s,transform .12s}.primary-button svg{width:16px;height:16px;stroke-width:1.9}.primary-button:hover:not(:disabled){background:#bbcdff;transform:translateY(-1px)}.primary-button:active:not(:disabled){transform:translateY(0)}.button-arrow{position:absolute;right:15px;font-size:15px;font-weight:400}.copy-note{margin:10px 0 0;text-align:center;font-size:8px;color:#8190a8}.bottom-notes{display:grid;grid-template-columns:1.12fr 1fr;gap:22px;margin:25px 0 42px}.bottom-notes>div{display:flex;gap:12px;align-items:flex-start;padding:0 4px}.note-icon{width:28px;height:28px;background:#151e2b;border:1px solid #29364c;border-radius:8px;display:grid;place-items:center;color:#94a9cd;flex-shrink:0}.note-icon b{font-size:13px}.note-icon svg{width:16px;height:16px}.bottom-notes p{margin:0;font-size:10px;color:#7f8fa7;line-height:1.65}.bottom-notes strong{display:block;font-size:10px;font-weight:550;color:#b4bfd2;margin-bottom:2px}.bottom-notes span:not(.note-icon){display:block}.bottom-notes code{color:#acbfdc}footer{border-top:1px solid #1e2735;max-width:1108px;margin:0 auto;padding:20px 0 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;color:#677891;font-size:8px}footer>span:first-child{display:flex;align-items:center;gap:7px;font-size:10px;color:#97a6bd;font-weight:600}footer svg{height:15px;width:15px}footer p{margin:0}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:10;background:#e2eaff;color:#152441;border:1px solid #b6c9f1;border-radius:11px;box-shadow:0 10px 40px #0005;padding:12px 18px;font-size:12px;max-width:calc(100vw - 30px);text-align:center}.toast[hidden]{display:none}.noscript{position:fixed;bottom:0;left:0;right:0;background:#293951;padding:18px;text-align:center}
@media(min-width:1500px){.intro{padding-top:64px}.site-header{height:106px}}
@media(max-width:850px){.site-header{padding:0 24px;height:80px}main{padding:0 24px}.intro{padding-top:38px}.workspace{gap:16px;grid-template-columns:1.05fr 1fr}.editor-content{padding:17px}.card-heading{padding:16px 17px}.palette{gap:8px}.color-swatch{height:34px}.format-button kbd{display:none}.format-button{gap:7px}.palette-heading{flex-wrap:wrap;gap:9px}.bottom-notes{gap:16px}footer{margin:0 24px}.output-content{padding:17px}.preview-scene{padding:17px}.card-bottom{padding:14px 17px}.preview-foot{padding:10px 17px}.bottom-notes span:not(.note-icon){font-size:9px}h1{font-size:37px}}
@media(max-width:650px){.header-right>a{display:none}.site-header{padding:0 19px;height:77px}.brand{font-size:16px}.private-pill{font-size:9px;padding:6px 9px}.brand-mark{height:37px;width:35px}.brand-mark svg{height:24px;width:24px}main{padding:0 19px}.intro{padding:32px 0 26px}.eyebrow{font-size:8px;letter-spacing:1.1px}h1{font-size:33px;letter-spacing:-1.3px}.intro>p{font-size:12px}.desktop-break{display:none}.workspace{grid-template-columns:1fr;gap:18px}.result-column{gap:18px}.editor-content{padding:20px}.card-heading{padding:17px 20px}.palette-heading{flex-wrap:nowrap}.palette{gap:11px}.color-swatch{height:37px}.format-button kbd{display:inline}.editor-meta{font-size:9px}.field-hint{font-size:10px}.preview-scene{min-height:180px;padding:20px}.preview-scene #preview{font-size:19px}.output-content{padding:20px}.primary-button{min-height:44px}.bottom-notes{grid-template-columns:1fr;gap:18px;margin-bottom:30px}.bottom-notes p,.bottom-notes strong,.bottom-notes span:not(.note-icon){font-size:10px}footer{margin:0 19px;flex-wrap:wrap;gap:10px;font-size:8px}footer p{width:100%;order:3}.card-bottom{padding:15px 20px}.preview-foot{padding:12px 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
@media(min-width:900px) and (max-height:850px){.site-header{height:75px}.intro{padding:26px 0 25px}.eyebrow{margin-bottom:8px}h1{font-size:36px;margin-bottom:10px}.intro>p{line-height:1.7}.desktop-break{display:none}.card-heading{min-height:57px;padding-top:13px;padding-bottom:13px}.editor-content{padding:17px 22px}#editor{height:128px;min-height:128px}.format-row{padding:13px 0 15px}.palette-heading{margin:14px 0 12px}.color-swatch{height:34px}.field-hint{margin-top:14px}.card-bottom{padding-top:12px;padding-bottom:12px}.preview-scene{min-height:150px}.preview-scene #preview{min-height:85px}.bottom-notes{margin:22px 0 28px}.copy-note{font-size:9px}.preview-caption,.scene-bottom{font-size:9px}}