*{box-sizing:border-box} :root{font-family:Inter,Segoe UI,sans-serif;color:#24243b;background:#f4f2f0;font-synthesis:none}body{margin:0}button,input,textarea,select{font:inherit}button,.button{cursor:pointer;border:1px solid #d8d5df;background:white;border-radius:9px;padding:10px 13px;color:#37334a;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}button:hover,.button:hover{border-color:#8e79be;background:#f6f2ff}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #b49adf;outline-offset:3px}.primary{background:#7255aa;border-color:#7255aa;color:white}.primary:hover{background:#614694;color:white}.quiet{background:transparent;border-color:transparent}header{height:85px;background:#fff;border-bottom:1px solid #e4e1e8;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:#282339;font-family:Georgia,serif;font-size:26px}.brand small{display:block;font:9px Segoe UI,sans-serif;letter-spacing:1.8px;margin-top:4px}.mark{background:#efe8f7;border:1px solid #d8cbea;border-radius:12px;padding:7px 14px;color:#74559a}.filebar{display:flex;align-items:center;gap:9px}.filebar>span{font-size:11px;color:#87818e}.dot{width:6px;height:6px;background:#81a18a;border-radius:50%}main{display:grid;grid-template-columns:230px minmax(380px,1fr) 272px;min-height:calc(100vh - 126px)}aside{background:#fbfaf9;padding:27px 21px}.library{border-right:1px solid #e4e1e8}.eyebrow{font-size:10px;letter-spacing:2px;color:#92829f;font-weight:700}h2{font-family:Georgia,serif;font-size:22px;font-weight:400;line-height:1.3;margin:13px 0}p.muted{font-size:12px;color:#8a8491;line-height:1.6}.characters{display:grid;gap:9px;margin-top:23px}.character{display:flex;align-items:center;text-align:left;gap:12px;padding:7px;background:#fff;border:1px solid #e5e1e9;border-radius:11px;white-space:normal}.character img{width:45px;height:61px;object-fit:cover;object-position:top;border-radius:6px;background:white}.character b{font-size:12px;display:block}.character small{display:block;color:#99919f;font-size:10px;margin-top:5px}.character.active{border-color:#9676ba;background:#f2edf8;box-shadow:0 0 0 1px #9676ba}.note{margin-top:30px;border-top:1px solid #e4e1e8;padding-top:20px;color:#958c9c;font-size:11px;line-height:1.7}.note b{color:#706477}.note p{margin:6px 0}.workspace{padding:28px 32px 15px;background:radial-gradient(#ded9df .7px,transparent .7px) 0 0/12px 12px;min-width:0}.workspace-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}h1{font-family:Georgia,serif;font-size:29px;font-weight:400;margin:8px 0 0;letter-spacing:-.6px}.pill{background:#ebe6ee;color:#827489;font-size:10px;padding:7px 10px;border-radius:20px}.canvas-wrap{padding:15px;background:#fff;border:1px solid #e7e0e7;box-shadow:0 16px 50px #38304712;border-radius:4px}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.canvas-footer{display:flex;align-items:center;justify-content:space-between;margin-top:13px;gap:8px;color:#918697;font-size:10px}#status{min-height:20px;color:#785c99;font-size:12px}.inspector{border-left:1px solid #e4e1e8}.inspector>.eyebrow{margin-bottom:23px}label{display:block;font-size:11px;font-weight:600;color:#6e6379;margin:15px 0 0}input:not([type=range]),textarea,select{display:block;width:100%;border:1px solid #ded9e3;border-radius:8px;background:white;color:#3c3548;font-size:12px;padding:11px;margin-top:8px;outline:none}textarea{line-height:1.7;resize:vertical}input[type=range]{width:100%;accent-color:#8b68b4;margin-top:12px;display:block}.hint{display:block;font-size:10px;color:#a296aa;line-height:1.7;margin-top:8px}.divider{border-top:1px solid #e5dfe8;margin-top:22px}.segmented{display:flex;background:#ece7f0;padding:3px;border-radius:8px;margin-top:20px}.segmented button{flex:1;font-size:11px;padding:8px 4px;border:0;background:transparent}.segmented button[aria-pressed=true]{background:#fff;box-shadow:0 2px 5px #30263810}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}output{float:right;color:#9c8aab;font-weight:400}.wide{width:100%;margin-top:18px}footer{background:#fff;border-top:1px solid #e4e1e8;padding:14px 28px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#9c919f}footer span{letter-spacing:0}@media(min-width:1600px){.workspace{padding:35px 65px}.canvas-wrap{max-width:1100px;margin:auto}}@media(max-width:1050px){main{grid-template-columns:180px 1fr}.inspector{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px}.inspector>.eyebrow,.divider{display:none}aside{padding:22px 14px}.workspace{padding:25px 20px}.filebar>span{display:none}}@media(max-width:640px){header{height:auto;min-height:90px;flex-wrap:wrap;padding:16px;gap:14px}.filebar{flex-wrap:wrap;gap:5px}.brand{font-size:23px}main{display:flex;flex-direction:column}.library h2,.library .muted,.note{display:none}.library{padding:15px}.characters{display:flex;overflow:auto;margin-top:10px;padding:2px}.character{min-width:130px}.character img{width:32px;height:45px}.workspace{padding:20px 12px}.inspector{display:grid;grid-template-columns:1fr 1fr;padding:20px}.canvas-footer{align-items:start}h1{font-size:25px}.canvas-wrap{padding:8px}footer{padding:14px;gap:20px}}
[hidden]{display:none!important}.filebar label.button{margin:0;display:inline-flex;align-items:center;font-size:12px;color:#37334a}

/* Language control; keep controls usable when translations are longer. */
header{height:auto;min-height:85px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.filebar{flex-wrap:wrap}.language-control{display:flex;align-items:center;gap:8px;margin:0}
.language-control select{width:auto;margin:0;padding:8px}
.brand small{font-size:11px;letter-spacing:.6px}
label,button,.button,input:not([type=range]),textarea,select{font-size:13px}
.hint,.character small,.note,.canvas-footer{font-size:12px}

/* Multipage beta: local iteration */
.beta{font:600 11px Segoe UI,sans-serif;color:#74559a}
.page-list{display:grid;gap:7px;margin-top:14px;max-height:255px;overflow:auto}
.page-tab{display:flex;align-items:center;text-align:left;gap:9px;white-space:normal}
.page-tab.active,.panel-list button.active{background:#efe7fb;border-color:#8362af}
.page-tab small{color:#71677a;display:block;font-size:11px;margin-top:3px}
.page-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}.page-actions button{white-space:normal;padding:9px 5px;font-size:11px}
.cast-heading{margin-top:22px}.layout-bar{display:flex;gap:20px;align-items:end;flex-wrap:wrap}.layout-bar label{margin:0;min-width:190px}
.panel-list{display:flex;gap:7px;margin-top:8px}.panel-list button{min-width:38px}
.presets{display:flex;flex-wrap:wrap;gap:4px}.presets button{font-size:11px;padding:8px}
.canvas-wrap{position:relative}.canvas-wrap #selection{position:absolute;pointer-events:none;border:3px solid #9764d4;box-shadow:0 0 0 2px #fff8;border-radius:1px}
.workspace .canvas-wrap{max-width:770px;margin:20px auto 0}
.library .characters{margin-top:12px}
@media(max-width:1050px){.inspector{display:block}.inspector{grid-column:auto}.library{grid-column:1}.workspace{grid-column:2;grid-row:1 / span 2}.inspector{grid-column:1;grid-row:2}.library .note{display:none}.canvas-footer{flex-wrap:wrap}}
@media(max-width:640px){.library .page-list{display:flex;max-height:none;overflow:auto}.page-tab{min-width:125px}.library .page-actions{grid-template-columns:repeat(4,1fr)}.library .wide{margin-top:10px}.inspector{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inspector .eyebrow,.inspector .segmented,.inspector .framing{grid-column:1/-1}.workspace-head{margin-bottom:12px}.library .characters{display:flex}.layout-bar{gap:10px}.canvas-wrap #selection{border-width:2px}}

.layout-picker{width:100%}.layout-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px;margin-top:10px}
.layout-tile{padding:6px;height:90px;background:#fff}.layout-tile svg{display:block;width:100%;height:100%}.layout-tile rect{fill:#eee7f5;stroke:#9c87b5;stroke-width:26}.layout-tile text{fill:#665274;font-size:160px;text-anchor:middle;dominant-baseline:middle}.layout-tile[aria-pressed=true]{border:2px solid #7956a6;background:#ede3fa}.layout-tile[aria-pressed=true] rect{fill:#d6c3ed}

.library-shell{max-width:1100px;margin:auto;padding:30px}.library-tabs{max-width:500px;margin-bottom:25px}
.story-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.story-card{background:#fff;border:1px solid #ddd2e6;border-radius:14px;padding:22px}.story-card h2{margin-top:0}.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.reader-shell{max-width:1000px;margin:auto;padding:25px}.reader-shell h1{margin-bottom:14px}
#readPages img,#readPages canvas{display:block;width:100%;height:auto;margin:20px auto;background:#fff;box-shadow:0 6px 24px #30213915;cursor:default;touch-action:auto}
dialog{border:1px solid #cbbadb;border-radius:14px;max-width:500px;width:90%;padding:25px}dialog::backdrop{background:#30213966}

.story-cover{height:200px;margin-bottom:18px;background:#f2edf5;border-radius:8px;overflow:hidden}.story-cover canvas{width:150px;height:200px;margin:auto;cursor:default;touch-action:auto}

#tailHandle{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);border:3px solid #fff;background:#8650c7;border-radius:50%;box-shadow:0 0 0 2px #8650c7;pointer-events:none}
.bubble-styles{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.bubble-styles button{font-size:11px;padding:8px}.bubble-styles button[aria-pressed=true],#bubbleList button[aria-pressed=true]{background:#e6d8f5;border-color:#8056ae}
@media(max-width:640px){.bubble-toolbar{grid-column:1/-1}}

.inspector-tabs{margin-bottom:18px}.inspector section[hidden]{display:none!important}.inspector .layout-bar{display:block}#undo:not(:disabled),#redo:not(:disabled){border-color:#8650c7;background:#eee4fa}@media(max-width:640px){.inspector{display:block}.inspector-tabs{display:flex}}

.brand-icon{width:40px;height:40px;object-fit:contain;border-radius:10px}.expression-picker{margin:16px 0}#expressionList button[aria-pressed=true]{background:#e6d8f5;border-color:#8056ae}

#localDraftsSection{margin:24px 0 36px;padding-bottom:24px;border-bottom:1px solid #ded3e7}

/* Alberto UX direction: dark workspace, purple identity, yellow accents, white comic paper. */
:root{color-scheme:dark;color:#f0eafa;background:#141020;--surface:#20182f;--border:#493857;--muted:#bdb0cb;--yellow:#ffe07a}
header,footer,aside{background:#1c1529;border-color:var(--border)}header{height:auto;min-height:85px;padding:18px 26px;flex-wrap:wrap}.brand{color:#fff}.brand small{font-size:11px;letter-spacing:.6px}.filebar{flex-wrap:wrap}.filebar>span{color:var(--muted)}a{color:var(--yellow)}button,.button{font-size:14px;background:#30233f;color:#f6edff;border-color:#59446e;white-space:normal}button:hover,.button:hover{background:#433056;border-color:#a783d4}.primary{background:#ffe07a;color:#281832;border-color:#ffe07a}.primary:hover{background:#ffecaa;color:#281832}.quiet{background:transparent}.brand .beta{color:#ffe07a}.eyebrow{color:#c3a9e3;font-size:12px;letter-spacing:1.4px}label,.hint,.canvas-footer,output{color:var(--muted);font-size:14px}.hint{line-height:1.55}.workspace{background:radial-gradient(#443252 .8px,transparent .8px) 0 0/14px 14px;background-color:#161020}.canvas-wrap{background:#fff;border-color:#665372;box-shadow:0 15px 50px #0005}.pill{background:#3d2e4c;color:#edddff;font-size:12px}.inspector{border-color:var(--border)}input:not([type=range]),textarea,select{background:#17111f;color:#fff;border-color:#675178;font-size:14px}input[type=range]{accent-color:#cfacfa}.segmented{background:#17111f}.segmented button{font-size:14px}.segmented button[aria-pressed=true]{background:#63438a;color:#fff}.character,.story-card{background:#281d36;border-color:#51405f}.character.active{background:#49305f;border-color:#c8a1f6}.character b{font-size:14px}.character small{font-size:12px;color:#c8b7d6}.character img{background:#ece5f4}.page-tab{color:#eee}.page-tab.active,.panel-list button.active{background:#583977;color:#fff}.page-tab small{color:#c6b7d4}.divider{border-color:var(--border)}#status,#libraryStatus,#readStatus{color:#ffe07a;font-size:14px}footer{font-size:12px}.layout-tile{background:#281d36}.layout-tile[aria-pressed=true]{background:#513369;border-color:#e7cbff}.layout-tile text{fill:#392248}.bubble-styles button{font-size:13px}.bubble-styles button[aria-pressed=true],#bubbleList button[aria-pressed=true],#expressionList button[aria-pressed=true]{background:#654389;color:#fff;border-color:#dab6ff}#undo:not(:disabled),#redo:not(:disabled){background:#50356b;color:#fff}.story-cover{background:#15101d}.control-group{border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:14px}.control-group summary{cursor:pointer;font-weight:650;font-size:15px;color:#f3e8ff;list-style-position:inside}.control-group summary:focus-visible{outline:3px solid #ffe07a}.control-group .card-actions{margin-top:12px}.advanced summary{font-size:14px;color:#c4b2d4}.danger{margin-top:16px;color:#ffc4d0}dialog{background:#261b33;color:#fff;border-color:#77568f}.inspector{display:block}.inspector-tabs{margin-top:0}.control-group .expression-picker{margin-top:14px}#resizeHandle{position:absolute;width:14px;height:14px;background:#ffe07a;border:2px solid #37204d;transform:translate(-50%,-50%);pointer-events:none}#inlineDialogue{position:absolute;margin:0;border:3px solid #9264c0;background:#fffefa;color:#3d304b;z-index:5;font-size:16px;line-height:1.35;max-width:calc(100% - 24px);padding:12px}.context-menu{position:fixed;z-index:30;width:220px;padding:6px;border:1px solid #87669c;background:#20172d;box-shadow:0 10px 40px #0009;border-radius:12px}.context-menu button{display:block;width:100%;text-align:left;border:0;background:transparent}.context-menu button:hover{background:#493159}
.home-shell{display:block;max-width:1240px;min-height:calc(100vh - 164px);margin:auto;padding:42px 32px 70px}.home-intro{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px 42px;margin-bottom:40px;border:1px solid #73529a;border-radius:24px;background:radial-gradient(ellipse at top right,#68408a66,transparent 60%),linear-gradient(120deg,#332044,#21182e)}.home-intro h1{max-width:620px;font-family:Georgia,serif;font-size:clamp(34px,4vw,58px);line-height:1.12;margin:16px 0}.home-intro p{font-size:18px;color:#d4c4e1}.home-intro .button{padding:13px 20px}.home-mark{width:160px;transform:rotate(5deg);border-radius:28px;box-shadow:0 20px 50px #09051188}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 20px}.section-heading h2{font:600 22px Segoe UI,sans-serif}.recent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.recent-card,.all-stories-tile{border:1px solid #5d4376;border-radius:16px;overflow:hidden;text-decoration:none;background:#291d38;color:#fff;min-height:330px}.recent-card:hover,.all-stories-tile:hover{border-color:#ffe07a;transform:translateY(-3px);transition:transform .15s}.recent-cover{height:260px;display:flex;justify-content:center;align-items:center;background:#100c17;overflow:hidden}.recent-cover canvas{width:195px;height:260px;cursor:pointer;touch-action:auto}.recent-card h3{font-size:16px;line-height:1.4;padding:16px;margin:0;overflow-wrap:anywhere}.all-stories-tile{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;color:#ffe07a}.tile-plus{font-size:38px}.account-menu{position:relative}.account-menu>summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px}.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#7951a5;color:#fff0b0;font-weight:700}.account-popover{position:absolute;right:0;top:55px;width:240px;z-index:20;padding:20px;background:#2b1e39;border:1px solid #72548e;border-radius:14px;box-shadow:0 10px 35px #0006}.account-popover .language-control{display:block}.home-page footer{max-width:none}.home-page [aria-current=page]{color:#ffe07a}
@media(max-width:1100px){.recent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inspector{display:block}.home-mark{width:120px}}@media(max-width:640px){header{padding:14px}.home-shell{padding:24px 16px}.home-intro{padding:25px;margin-bottom:25px}.home-mark{display:none}.home-intro p{font-size:16px}.section-heading{align-items:start;flex-direction:column;gap:0}.recent-grid{grid-template-columns:1fr 1fr;gap:12px}.recent-cover{height:180px}.recent-cover canvas{width:135px;height:180px}.recent-card,.all-stories-tile{min-height:250px}.recent-card h3{font-size:14px;padding:12px}.inspector{display:block}.home-page header .filebar{gap:4px}.account-menu summary>span:last-child{display:none}main{min-width:0}.library-shell{padding:20px 14px}.story-cards{grid-template-columns:minmax(0,1fr)}}
