:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#243047;background:#f4f6fa;font-size:16px;--blue:#335cff;--muted:#6d788b;--line:#e2e7ef;--panel:#fff}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,.button,summary{cursor:pointer}button,.button{border:0;border-radius:8px;padding:10px 14px;font-size:.875rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}button:hover,.button:hover{filter:brightness(.97)}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--blue);color:white;box-shadow:0 2px 3px #335cff12}.quiet{color:#4c5870;background:#f0f3f8;border:1px solid var(--line)}.text-button{padding:5px 0;background:none;color:var(--blue);font-size:.8125rem}.icon-button{height:31px;width:31px;padding:0;border:1px solid var(--line);background:white;color:var(--muted);border-radius:50%}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,canvas:focus-visible,a:focus-visible,summary:focus-visible,.button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}header{background:white;border-bottom:1px solid var(--line);min-height:84px;padding:0 3%;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:10px;color:#243047;text-decoration:none;min-width:180px;font-weight:750;letter-spacing:-.4px;font-size:1.125rem}.brand small{display:block;font-size:.6rem;letter-spacing:2px;color:#8a94a5;font-weight:650;margin-top:4px}.logo{width:37px;height:37px;display:grid;place-items:center;background:var(--blue);color:white;border-radius:10px;font-size:1.5rem;position:relative}.logo span{position:absolute;right:5px;bottom:0;color:#b9c9ff}nav{display:flex;align-self:stretch;gap:25px}.nav{border-radius:0;background:none;color:#7b8495;border-bottom:3px solid transparent;padding:0 0;font-size:.875rem}.nav.active{color:var(--blue);border-bottom-color:var(--blue)}.nav span{background:#edf1fc;padding:2px 6px;border-radius:4px;font-size:.75rem}.header-actions{display:flex;align-items:center;gap:14px}.save-status{font-size:.75rem;color:#788697}.save-status:before{content:'';display:inline-block;width:6px;height:6px;background:#65a794;border-radius:50%;margin-right:6px}main{max-width:1800px;padding:32px 3% 0;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:28px}.eyebrow{font-size:.6875rem;letter-spacing:1.7px;color:var(--blue);font-weight:700;margin:0 0 11px}h1{font-size:clamp(1.5rem,2.3vw,2rem);font-weight:650;letter-spacing:-.9px;line-height:1.2;margin:0 0 9px}.page-heading p:not(.eyebrow){font-size:.9375rem;color:var(--muted);margin:0;line-height:1.5}.heading-actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:390px minmax(0,1fr);gap:24px;align-items:start}.editing-panel,.preview-panel{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0;box-shadow:0 3px 14px #18284c03}.steps{display:flex;border-bottom:1px solid var(--line);padding:0 18px;gap:8px;background:#fbfcfe}.step{flex:1;background:none;border-radius:0;border-bottom:2px solid transparent;color:#8a94a6;padding:18px 5px;gap:8px}.step b{border-radius:50%;background:#edf0f5;font-size:.6875rem;line-height:21px;width:21px;height:21px}.step.active{color:var(--blue);border-color:var(--blue)}.step.active b{color:white;background:var(--blue)}.pane{padding:23px}.pane-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}h2{font-size:1rem;margin:0;font-weight:650;letter-spacing:-.2px}h3{font-size:.875rem;margin:24px 0 12px}.muted{color:var(--muted);font-size:.875rem;line-height:1.6;margin:0 0 20px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:flex;flex-direction:column;gap:8px;font-size:.8125rem;font-weight:550;color:#526078;margin:0 0 17px}input:not([type=checkbox],[type=range]),select{width:100%;min-width:0;border:1px solid #dce2ec;border-radius:7px;background:white;color:#36435a;padding:10px 11px;font-size:.8125rem;line-height:1.3}input::placeholder,textarea::placeholder{color:#9ca5b5}input[type=checkbox]{accent-color:var(--blue);width:15px;height:15px;flex-shrink:0;margin:0}input[type=range]{width:100%;accent-color:var(--blue)}textarea{border:1px solid #dce2ec;background:#fbfcfe;border-radius:8px;resize:vertical;width:100%;color:#47546c;line-height:1.75;font-size:.8125rem;padding:15px;min-height:180px;font-family:Consolas,ui-monospace,monospace}#source{height:320px}#edited{height:370px}.area-label{flex-direction:row;justify-content:space-between;margin:5px 0 10px}.area-label span,.hint{color:var(--muted);font-size:.75rem;font-weight:400;line-height:1.6}.row{display:flex;align-items:center;gap:10px;margin-top:15px;flex-wrap:wrap}.row .button,.row label{margin:0}.end{justify-content:flex-end}.between{justify-content:space-between}.privacy{font-size:.75rem;color:#8793a7;margin:20px 0 0;text-align:center}.preview-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line);gap:16px}.preview-heading span:not(.pill){font-size:.75rem;color:var(--muted);display:block;margin-top:6px;line-height:1.5}.pill{background:#f0f3f9;color:#75839a;font-size:.625rem;font-weight:650;letter-spacing:.5px;padding:6px 8px;border-radius:5px;white-space:nowrap}.style-bar{display:flex;flex-wrap:wrap;gap:12px;padding:20px 24px 0}.style-bar label{flex:1;min-width:70px;margin:0}.style-bar label:first-child{flex:1.4}.style-bar input{max-width:90px}.preview-options{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:19px 24px}.preview-options label{flex-direction:row;align-items:center;gap:7px;margin:0;font-size:.75rem}.preview-options .opacity-label{margin-left:auto}.opacity-label input{width:85px}.opacity-label output{min-width:28px;font-size:.6875rem}.preview-stage{margin:0 24px;min-height:330px;max-height:620px;overflow:auto;padding:24px 18px;border-radius:8px;background-color:#242a35;background-image:linear-gradient(45deg,#2b323f 25%,transparent 25%),linear-gradient(-45deg,#2b323f 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2b323f 75%),linear-gradient(-45deg,transparent 75%,#2b323f 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;display:flex;align-items:flex-start}.preview-empty{margin:auto;text-align:center;color:#cad0df;padding:30px 10px}.preview-empty h3{font-size:1.1rem;color:#f1f3f9;font-weight:500;margin:15px 0 10px}.preview-empty p{font-size:.8125rem;color:#929eb4;line-height:1.6}.chat-symbol{font-family:Georgia,serif;font-size:4rem;line-height:1;color:#899bbc}.preview-stage canvas{max-width:100%;height:auto;display:block}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 24px}.preview-footer p{font-size:.75rem;color:#8994a6;line-height:1.5;margin:0}.full{width:100%}.selection-actions{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:13px}.selection-actions button{font-size:.75rem}.character-list{max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:5px 11px;margin-bottom:20px}.character-row{display:flex;justify-content:space-between;align-items:center;gap:7px;border-bottom:1px solid #f0f3f7;padding:10px 0}.character-row:last-child{border:0}.character-row label{flex-direction:row;align-items:center;gap:8px;margin:0;min-width:0}.character-row button{font-size:.6875rem}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:22px}.type-grid label{flex-direction:row;align-items:center;gap:9px;margin:0;font-size:.8125rem}details{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}summary{font-size:.8125rem;font-weight:600;color:#516078;margin-bottom:17px}.message-list{max-height:170px;overflow:auto}.message-row{display:flex;flex-direction:row;gap:8px;align-items:flex-start;font-size:.75rem;font-weight:400;line-height:1.4;overflow-wrap:anywhere}.editor-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:12px}.syntax{display:flex;flex-wrap:wrap;gap:10px;font-size:.6875rem;line-height:1.6;color:var(--muted);margin:14px 0 24px}code{background:#edf1fa;color:#586faf;padding:3px 5px;border-radius:4px}.upload-box{border:1px dashed #c7d3e9;border-radius:9px;background:#f7f9ff;text-align:center;padding:20px;cursor:pointer;align-items:center;gap:8px;margin-top:17px}.upload-box>span{font-size:1.4rem;color:var(--blue)}.upload-box strong{font-size:.8125rem;color:#4d6084}.upload-box small{font-size:.6875rem;color:#93a0b5}.composer-controls .row{margin:10px 0 18px}.composer-controls hr{border:0;border-top:1px solid var(--line);margin:22px 0}.segment-list{display:grid;gap:8px;margin:15px 0}.segment-item{display:flex;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--line);background:#fafbfd;color:#66738c;font-size:.8125rem;width:100%;white-space:normal}.segment-item.selected{border-color:#b1c2ff;background:#edf2ff;color:var(--blue)}.segment-item small{font-size:.6875rem;white-space:nowrap;color:#8a98b2}.danger-text{color:#b34555}.inline-check{display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-size:.75rem}.row .inline-check{margin-left:auto}#segment-text{min-height:160px}.composition-stage{background:#e9edf4;padding:24px;overflow:auto;min-height:360px;display:flex;align-items:center;justify-content:center}#composition{display:block;width:100%;height:auto;box-shadow:0 6px 25px #1a254a1c;touch-action:none;background:#1c2432;max-height:none}.composer-tip{padding:0 24px 22px;color:var(--muted);font-size:.8125rem;line-height:1.6}footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0;color:#94a0b3;font-size:.75rem;line-height:1.6}#toast{position:fixed;z-index:20;bottom:25px;left:50%;transform:translateX(-50%);max-width:90%;padding:13px 20px;border-radius:9px;background:#243047;color:white;box-shadow:0 4px 25px #0003;font-size:.875rem}#toast.error{background:#8d3543}dialog{border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 100px #13213d33;padding:32px;max-width:min(600px,90vw);color:#34435d}dialog::backdrop{background:#18284066;backdrop-filter:blur(3px)}dialog h2{font-size:1.5rem;margin-bottom:20px}dialog p,dialog li{font-size:.9375rem;line-height:1.7;color:#66738b}dialog li{margin-bottom:14px}dialog ol{padding-left:21px}.close{float:right;margin:-12px -12px 20px 10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(min-width:1500px){.workspace{grid-template-columns:430px minmax(0,1fr)}.preview-stage{min-height:400px}}@media(max-width:1100px){.save-status{display:none}.workspace{grid-template-columns:340px minmax(0,1fr)}header{gap:16px;padding:0 2%}nav{gap:15px}.brand{min-width:160px}.preview-options{gap:13px}.preview-options .opacity-label{margin-left:0}.pane{padding:18px}.preview-footer{flex-wrap:wrap}.preview-heading{padding:20px}.heading-actions{flex-direction:column}.style-bar{padding:16px 18px 0;gap:8px}}@media(max-width:800px){header{flex-wrap:wrap;padding:15px 5% 0;gap:15px}.header-actions{margin-left:auto}.header-actions .quiet{padding:8px;font-size:.75rem}nav{width:100%;order:3;justify-content:center;gap:30px;height:45px}.nav{font-size:.8125rem}main{padding:25px 5% 0}.page-heading{align-items:flex-start}.page-heading p:not(.eyebrow){font-size:.875rem}.heading-actions{display:none}.workspace{grid-template-columns:1fr}.preview-panel{min-height:0}.preview-stage{min-height:230px;margin:0 16px;padding:18px 10px}.composition-stage{padding:12px;min-height:200px}.pane{padding:22px}#source{height:250px}#edited{height:270px}.composer-controls{order:2}.composer-preview{order:1}.style-bar{padding:17px 16px 0}.style-bar label{min-width:65px}.preview-options{padding:18px 16px}.preview-footer{padding:18px 16px}footer{flex-direction:column;gap:5px}.pill{font-size:.6875rem}.brand small{font-size:.625rem}.syntax{font-size:.75rem}.hint{font-size:.8125rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:800px){.page-heading{flex-direction:column}.heading-actions{display:flex;flex-direction:row;flex-wrap:wrap}.heading-actions .button,.heading-actions button{font-size:.8125rem}}