/* Flapdraft · Flaptown Design v5 (FlaptownDesign/v5/STANDARD.md). Self-contained so web/ runs standalone.
   One light, top left. Instrument bar on top, plates down the sides, a well under the preview, list pockets, a raised-plate composer.
   The preview iframe and everything inside it is the person's work: never styled from here. */
@font-face{font-family:"Syne Mono";src:url(SyneMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;
 --onyx:#0e1010;--plate:#161818;--plate-hi:#1b1e1e;--pocket:#080909;--mocha:#412828;
 --clay:#a46f67;--rose:#b7958c;--oak:#c9bab0;--rose2:#b19a98;--mauve:#6a4f5c;--dusty:#937f6d;--dim:#737078;--indigo:#3e4158;
 --done:#9ea3c8;--working:#d4b07a;--failed:#e07a62;
 --ease:cubic-bezier(.45,.1,.25,1);
 --carve:0 -1px 1px #000000f2,-1px -1px 1px #000000a6,0 1px 0 #c9bab052;
 --font:"Syne Mono",ui-monospace,"DejaVu Sans Mono",monospace;
 --grain-h:repeating-linear-gradient(0deg,#c9bab003 0 1px,transparent 1px 3px);
 --grain-v:repeating-linear-gradient(90deg,#c9bab003 0 1px,transparent 1px 3px);
 --pocket-lip:inset 0 4px 10px -3px #000000e6,inset 0 2px 0 #000,inset 4px 0 8px -5px #000000b3,inset -4px 0 8px -5px #000000b3,inset 0 -1px 0 var(--mocha);
 --raised:inset 0 1px 0 #c9bab014,inset 1px 0 0 #c9bab00a,inset 0 -1px 0 #00000099,0 2px 0 #000,0 10px 24px #00000080;
 --key:36px;--bar:56px}
*,*::before,*::after{box-sizing:border-box}
html{font-synthesis:none;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--onyx);color:var(--oak);font:400 15px/25px var(--font);text-shadow:var(--carve);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;font-family:var(--font);font-weight:400;color:inherit}
h1,h2,h3,h4,strong,b{font-weight:400}
::selection{background:var(--mauve);color:var(--oak)}
a{color:var(--rose);text-decoration:underline;text-decoration-color:#a46f6799;text-underline-offset:4px}
a:hover{color:var(--oak)}
:focus-visible{outline:2px solid var(--oak);outline-offset:2px}
[hidden]{display:none!important}
img{max-width:100%}

/* ---------- keys ---------- */
button{--c:var(--dim);--f:#3e415833;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--key);padding:0 14px;border-radius:6px;cursor:pointer;
 font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--oak);text-shadow:var(--carve);
 background:var(--f);border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 3px 0 #000,0 6px 14px #00000099,inset 0 1px 0 #c9bab00f;
 transition:background-color .14s ease,border-color .14s ease,transform .08s ease,box-shadow .08s ease,opacity .2s}
button:hover{border-color:var(--c);background:color-mix(in srgb,var(--f) 100%,#c9bab0 6%)}
button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #000,inset 0 1px 0 #c9bab00a}
button:disabled{opacity:.38;cursor:default;transform:none}
.primary,button.primary{--c:var(--rose);--f:#b7958c26}
/* pressed / selected keys stay down, lit from inside */
.canvasbar .active,#inspect[aria-pressed=true]{--c:var(--rose);--f:#a46f6740;transform:translateY(2px);box-shadow:0 1px 0 #000,inset 0 1px 0 #c9bab00a,inset 0 0 10px #a46f6733;color:var(--oak)}

/* ---------- fields ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select{color:var(--oak);caret-color:var(--rose);background:var(--pocket);border:1px solid #000;border-bottom-color:var(--mocha);
 border-radius:6px;min-height:var(--key);padding:7px 10px;font-size:13px;line-height:20px;text-shadow:none;box-shadow:inset 0 3px 6px -2px #000000e6,inset 0 1px 0 #000,0 1px 0 #c9bab00f}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--dusty)}
input[type=checkbox]{accent-color:var(--clay);width:18px;height:18px;flex:none}
input[type=color]{width:52px;height:32px;padding:3px;border-radius:6px;background:var(--pocket);border:1px solid #000;border-bottom-color:var(--mocha);box-shadow:inset 0 2px 4px #000;cursor:pointer}
select{cursor:pointer}

/* ---------- instrument bar ---------- */
.masthead{position:relative;z-index:2;flex:none;min-height:var(--bar);display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;background:var(--plate) var(--grain-h);
 box-shadow:inset 0 1px 0 #c9bab014,inset 0 -1px 0 #000,0 2px 0 #000,0 6px 16px #000000a6}
/* every readout is one 36px window in the same rounded family */
.masthead .brand,.masthead .product,.masthead #saved{position:relative;display:flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;
 background:var(--onyx) linear-gradient(180deg,#c9bab012 0%,#c9bab005 40%,transparent 41%);border:1px solid var(--mocha);
 box-shadow:inset 0 1px 0 #c9bab01f,inset 0 -2px 6px #00000099,0 1px 2px #000}
.masthead .brand{gap:10px;color:var(--oak);text-decoration:none;font-size:13px;line-height:16px}
.masthead .brand:hover{color:var(--oak);border-color:#a46f6799}
.brand img{width:22px;height:22px;filter:drop-shadow(0 -1px 1px #000000f2) drop-shadow(0 1px 0 #c9bab052)}
.brand>span{display:flex;align-items:baseline;gap:8px;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.subbrand{font-size:11px;letter-spacing:.08em;color:var(--dusty)}
.product{flex:0 1 auto;gap:12px;font-size:15px;line-height:20px;color:var(--oak)}
.edition{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dusty)}
#account{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--oak);text-decoration:none;background:#b7958c26;border:1.5px solid #b7958cb3;box-shadow:0 3px 0 #000,0 6px 14px #00000099,inset 0 1px 0 #c9bab00f;transition:transform .08s ease,box-shadow .08s ease}
#account:hover{border-color:var(--rose)}
#account:active{transform:translateY(2px);box-shadow:0 1px 0 #000}

/* ---------- frame ---------- */
/* .app = app bar + workspace. Under the shared site header (.ftn, 72px above 900px) it takes the rest of the viewport. */
.app{display:flex;flex-direction:column;min-height:100vh}
.ftn~.app{min-height:calc(100vh - 72px)}
.ftn~.app .brand{display:none}
body>.ftf{margin-top:0}
.workspace{flex:1;display:grid;grid-template-columns:232px minmax(0,1fr)}
main{min-width:0;display:flex;flex-direction:column}

/* side plate, grain running down */
.sidebar{background:var(--plate) var(--grain-v);padding:20px 15px;display:flex;flex-direction:column;gap:12px;
 box-shadow:inset -1px 0 0 #000,inset -2px 0 0 #c9bab008,2px 0 0 #000;position:relative;z-index:1}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--rose);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.section-heading>span{display:flex;align-items:center;gap:10px;flex:1}
.section-heading>span::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--mocha),transparent);box-shadow:0 1px 0 #000}
/* round keys for icon actions */
.section-heading button,#clear-target,#close-inspector{width:36px;min-width:36px;height:36px;padding:0;border-radius:999px;font-size:18px;letter-spacing:0}
.search-label{font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--dusty);margin:8px 0 -4px}
#project-search{width:100%;min-width:0}
/* list pocket: rows slide under the lip */
.projects{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;min-height:60px;max-height:calc(100vh - 380px);overflow-y:auto;overscroll-behavior:contain;
 background:var(--pocket);border-radius:6px;box-shadow:inset 0 12px 12px -8px #000000f2,inset 0 2px 0 #000,inset 6px 0 10px -6px #000000b3,inset -6px 0 10px -6px #000000b3,inset 0 -12px 12px -9px #000000e6,inset 0 -1px 0 var(--mocha);
 scrollbar-width:thin;scrollbar-color:var(--mocha) transparent}
.projects button{display:block;width:100%;min-height:44px;padding:8px 12px;text-align:left;white-space:normal;overflow-wrap:anywhere;text-transform:none;letter-spacing:0;font-size:13px;line-height:20px;
 background:var(--plate);border:0;border-radius:3px;box-shadow:0 1px 0 #000,0 2px 4px #000000b3,inset 0 1px 0 #c9bab012}
.projects button:hover{background:var(--plate-hi)}
.projects button:active:not(:disabled){transform:translateY(1px);box-shadow:0 0 0 #000,inset 0 1px 0 #c9bab00a}
.projects button.active{background:#1d1a1a;box-shadow:0 1px 0 #000,0 2px 4px #000000b3,inset 0 1px 0 #c9bab012,inset 3px 0 0 var(--clay);color:var(--oak)}
.projects small{display:block;font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty);margin-top:2px}
.projects>p{font-size:13px;line-height:20px;color:var(--dusty);padding:6px 6px;margin:0}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:20px;font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty)}
.sidebar-bottom button{width:100%}
.sidebar-bottom p{margin:6px 0}
.sidebar-bottom a{font-size:12px;letter-spacing:.04em}

/* storage trouble: a lamp and words, plus the way out */
#storage-warning{display:flex;flex-wrap:wrap;gap:10px 15px;align-items:center;padding:10px 15px;background:#1a1212;font-size:13px;line-height:20px;color:var(--oak);
 box-shadow:inset 0 -1px 0 var(--mocha),inset 0 1px 0 #000}
#storage-message{flex:1 1 320px;display:flex;gap:10px;align-items:baseline}
#storage-message::before{content:"";flex:none;width:7px;height:7px;border-radius:999px;transform:translateY(-1px);background:radial-gradient(circle at 35% 35%,#f6c9b8 0%,#e07a62 55%,#a46f67 100%);box-shadow:0 0 0 1.5px #050606,0 0 6px 1px #e07a6299}
#storage-warning button{--c:var(--clay);--f:#a46f6740}

 box-shadow:inset 0 1px 0 #c9bab00d,inset 0 -1px 0 #000,0 2px 0 #000;position:relative;z-index:1}
.masthead #title{flex:0 1 260px;width:260px;min-width:0;margin-right:auto;font-size:15px}
.masthead #saved{gap:8px;padding:0 12px 0 10px;font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--rose)}
.masthead #saved::before{content:"";width:7px;height:7px;border-radius:999px;flex:none;background:radial-gradient(circle at 35% 35%,#e3e6f6 0%,#9ea3c8 55%,#3e4158 100%);box-shadow:0 0 0 1.5px #050606,0 1px 0 2px #c9bab012,0 0 6px 1px #9ea3c899}

/* ---------- studio ---------- */
.studio{flex:1;display:grid;grid-template-columns:360px minmax(0,1fr)}
.conversation{background:var(--plate) var(--grain-v);padding:30px 20px;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:20px;
 box-shadow:inset -1px 0 0 #000,2px 0 0 #000;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:var(--mocha) transparent}
.conversation>*{margin-top:0;margin-bottom:0;flex-shrink:0}
.eyebrow{display:block;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.intro h1{font-size:32px;line-height:40px;margin:15px 0}
.intro h1::first-letter{text-transform:uppercase}
.intro p{font-size:15px;line-height:25px;color:var(--rose);margin:0}
/* history: a list pocket of tiles */
.history{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--pocket);border-radius:6px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;
 box-shadow:inset 0 12px 12px -8px #000000f2,inset 0 2px 0 #000,inset 6px 0 10px -6px #000000b3,inset -6px 0 10px -6px #000000b3,inset 0 -12px 12px -9px #000000e6,inset 0 -1px 0 var(--mocha);
 scrollbar-width:thin;scrollbar-color:var(--mocha) transparent}
.history:empty{display:none}
.history article{font-size:13px;line-height:20px;padding:8px 12px;background:var(--plate);border-radius:3px;white-space:pre-wrap;overflow-wrap:anywhere;
 box-shadow:0 1px 0 #000,0 2px 4px #000000b3,inset 0 1px 0 #c9bab012}
.history small{display:block;color:var(--dusty);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px}
.history article p{margin:0}
/* target chip: what the next refinement looks at */
#target-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:10px 10px 10px 12px;background:var(--pocket);border-radius:6px;box-shadow:var(--pocket-lip);font-size:13px;line-height:20px}
#target-label{overflow-wrap:anywhere;color:var(--oak)}
#target-chip small{grid-column:1/-1;color:var(--dusty);font-size:11px;line-height:16px}
/* composer: a raised plate with a milled field */
#prompt-form{padding:15px;border-radius:12px;background:var(--plate-hi) var(--grain-h);box-shadow:var(--raised)}
#prompt-form>label:first-child{display:block;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}
#prompt{display:block;width:100%;margin-top:10px;min-height:130px;font-size:13px;line-height:20px}
.prompt-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.prompt-footer span{display:flex;align-items:center;gap:8px;font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty);overflow-wrap:anywhere}
.prompt-footer span::before{content:"";width:7px;height:7px;border-radius:999px;flex:none;background:#0a0b0b;box-shadow:0 0 0 1.5px #050606,0 1px 0 2px #c9bab012,inset 0 1px 2px #000}
/* status: a lamp and words */
#status{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:20px;color:var(--oak);white-space:pre-wrap;overflow-wrap:anywhere}
#status:empty{display:none}
#status::before{content:"";flex:none;width:7px;height:7px;border-radius:999px;transform:translateY(-1px);background:radial-gradient(circle at 35% 35%,#e3e6f6 0%,#9ea3c8 55%,#3e4158 100%);
 box-shadow:0 0 0 1.5px #050606,0 1px 0 2px #c9bab012,0 0 6px 1px #9ea3c899;animation:led-on .28s var(--ease)}
#status.working::before{background:radial-gradient(circle at 35% 35%,#fbe7c4 0%,#d4b07a 55%,#937f6d 100%);box-shadow:0 0 0 1.5px #050606,0 0 6px 1px #d4b07a99;animation:breathe 3.6s ease-in-out infinite}
#status.error{color:var(--oak)}
#status.error::before{background:radial-gradient(circle at 35% 35%,#f6c9b8 0%,#e07a62 55%,#a46f67 100%);box-shadow:0 0 0 1.5px #050606,0 1px 0 2px #c9bab012,0 0 6px 1px #e07a6299}
@keyframes led-on{0%{transform:translateY(-1px) scale(.2);opacity:0}60%{opacity:1;transform:translateY(-1px) scale(1.15)}}
@keyframes breathe{50%{opacity:.55}}
.check-label{display:flex;align-items:center;gap:10px;font-size:13px;line-height:20px;color:var(--rose);margin:10px 0 0}
.image-tools{padding-top:20px;border-top:1px solid var(--mocha);box-shadow:inset 0 1px 0 #000}
.image-tools p{font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty);margin:10px 0 0}
/* drawers in the side plate */
.conversation details{padding:0 0 0;border-top:1px solid var(--mocha);box-shadow:inset 0 1px 0 #000;font-size:13px;line-height:20px;color:var(--rose)}
.conversation summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--oak)}
.conversation summary::-webkit-details-marker{display:none}
.conversation summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--clay);border-bottom:1.5px solid var(--clay);transform:rotate(-45deg);transition:transform .2s var(--ease);flex:none}
.conversation details[open]>summary::before{transform:rotate(45deg)}
.conversation details p{font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty);overflow-wrap:anywhere}
.brand-settings label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}
.brand-settings label[for]{display:block;margin:15px 0 6px}
.brand-settings #palette-source,.brand-settings #guide-source,#style-guide{display:block;width:100%;min-width:0;margin:0 0 10px}
.brand-settings #palette-hint,.brand-settings #style-guide-hint{margin:0 0 10px}
#design-notes,#source-document{padding-bottom:10px}
#notes-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.design-note{padding:8px 12px;background:var(--pocket);border-radius:6px;box-shadow:var(--pocket-lip)}
.design-note small{display:block;font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty);overflow-wrap:anywhere}
.design-note p{white-space:pre-wrap;font-size:13px!important;line-height:20px!important;color:var(--oak)!important;letter-spacing:0!important}
.design-note button{margin:6px 6px 4px 0}
#source-details{font-size:11px;line-height:16px}
#source-details dt{color:var(--dusty);margin-top:10px;letter-spacing:.08em;text-transform:uppercase}
#source-details dd{margin:2px 0;color:var(--oak);overflow-wrap:anywhere}
#source-warnings{padding-left:18px;font-size:11px;line-height:16px}
#source-report{white-space:normal}

/* ---------- canvas: the well ---------- */
.canvas{min-width:0;display:flex;flex-direction:column;position:relative;background:var(--onyx)}
.canvasbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px;background:var(--plate) var(--grain-h);box-shadow:inset 0 -1px 0 #000,0 1px 0 #c9bab008}
.tabs,.devices{display:flex;gap:6px}
#preview-wrap{position:relative;flex:1;min-height:490px;display:flex;align-items:stretch;justify-content:center;padding:20px;overflow:auto;margin:10px;border-radius:12px;
 background:radial-gradient(120% 80% at 50% 0%,#121414 0%,#0a0b0b 60%,#060707 100%);box-shadow:inset 0 10px 24px -8px #000000f2,inset 0 2px 0 #000,inset 0 -1px 0 var(--mocha)}
/* the frame sits on the well floor; its contents are untouched */
#preview{width:100%;min-height:100%;border:0;background:#fff;box-shadow:0 2px 0 #000,0 12px 32px #000000b3;transition:width .2s var(--ease);flex-shrink:0;border-radius:2px}
#preview.phone{width:390px}
#preview.tablet{width:768px}
#empty{text-align:center;margin:auto;max-width:540px;padding:30px 10px}
#empty h2{font-size:24px;line-height:32px;margin:30px 0 10px}
#empty h2::first-letter{text-transform:uppercase}
#empty p{font-size:13px;line-height:20px;color:var(--rose)}
.paper-art{width:124px;height:153px;margin:auto;padding:14px 18px;text-align:left;transform:rotate(-7deg);color:var(--rose);text-shadow:var(--carve);border-radius:6px;
 background:var(--plate) var(--grain-h);box-shadow:var(--raised)}
.paper-art span{font-size:51px;line-height:1.1}
.paper-art i{height:2px;background:var(--mocha);box-shadow:0 1px 0 #000;display:block;margin:10px 0;width:100%}
.paper-art i:last-child{width:60%}
.starters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:25px 0 20px}
#sample{--c:var(--indigo);--f:#3e415866}
.canvasfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px;background:var(--plate) var(--grain-h);box-shadow:inset 0 1px 0 #c9bab00d,0 -1px 0 #000;font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty)}
.history-actions{display:flex;gap:6px}
.canvasfoot #revision-label{flex:1;min-width:150px}
.canvasfoot #revision-label::first-letter{text-transform:uppercase}
.canvasfoot select{max-width:180px}
.canvasfoot #delete{--c:var(--clay);--f:#a46f671f}
#code-wrap{flex:1;display:flex;flex-direction:column;gap:10px;padding:15px}
#code-wrap label{font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}
#code{width:100%;flex:1;min-height:430px;font-size:13px;line-height:20px}
.code-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* inspector: a plate strip that rises from the bottom */
#inspector{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px;background:var(--plate-hi) var(--grain-h);box-shadow:inset 0 1px 0 #c9bab014,0 -2px 0 #000,0 -8px 18px #00000080;position:relative;z-index:1}
#inspector label{display:flex;gap:8px;align-items:center;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}
#inspector input{width:72px}
#inspector input[type=color]{width:52px}
#inspector #edit-text{width:200px}
#inspector select{max-width:140px}
#selected-label{width:100%;font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--dusty);overflow-wrap:anywhere}
#selected-label::first-letter{text-transform:uppercase}
#refine-selected{--c:var(--rose);--f:#b7958c26}
#confirm-dialog .primary{--c:var(--clay);--f:#a46f6740}
#close-inspector{margin-left:auto}

/* ---------- dialogs: raised plates ---------- */
dialog{max-width:min(460px,calc(100vw - 32px));padding:30px;color:var(--oak);border:0;border-radius:12px;background:var(--plate) var(--grain-h);text-shadow:var(--carve);
 box-shadow:inset 0 1px 0 #c9bab01f,inset 1px 0 0 #c9bab00a,inset 0 -1px 0 #00000099,0 3px 0 #000,0 24px 60px #000000d9;font:400 15px/25px var(--font)}
dialog::backdrop{background:#060707cc}
dialog h2{font-size:24px;line-height:32px;margin:0 0 15px}
dialog h2::first-letter{text-transform:uppercase}
dialog p{color:var(--rose);font-size:13px;line-height:20px;overflow-wrap:anywhere}
dialog label{display:block;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);margin:15px 0 6px}
dialog form>div,.handoff-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:25px}
#image-dialog,#note-dialog{width:min(560px,calc(100vw - 32px));max-width:560px;max-height:90vh;overflow:auto}
#image-dialog canvas{display:block;width:100%;max-height:280px;object-fit:contain;background:var(--pocket);border-radius:6px;box-shadow:var(--pocket-lip)}
#image-dialog input,#image-dialog select,#note-text,#docx-path,#docx-command,#pptx-command{display:block;width:100%}
#image-dialog #image-info{color:var(--oak)}
#note-text{margin:6px 0 12px}
#note-scope{overflow-wrap:anywhere}
#pptx-dialog,#docx-dialog{width:700px;max-width:calc(100vw - 32px);max-height:90vh;overflow:auto}
#pptx-command,#docx-command{font-size:12px;margin:6px 0}

/* desktop with room: app bar + workspace fill the viewport exactly; the panes scroll inside, the page does not */
@media(min-width:951px) and (min-height:600px){
 .app{height:100vh;height:100dvh;min-height:0}
 .ftn~.app{height:calc(100vh - 72px);height:calc(100dvh - 72px);min-height:0}
 .workspace{min-height:0;grid-template-rows:minmax(0,1fr)}
 .sidebar{min-height:0;overflow:hidden}
 .projects{flex:0 1 auto;max-height:none}
 main{min-height:0}
 .studio{min-height:0;grid-template-rows:minmax(0,1fr)}
 .conversation,.canvas{min-height:0}
 #preview-wrap,#code{min-height:0}
}
@media(min-width:1700px){.studio{grid-template-columns:400px minmax(0,1fr)}.conversation{padding:40px 30px}}
@media(max-width:1200px){.workspace{grid-template-columns:200px minmax(0,1fr)}.studio{grid-template-columns:300px minmax(0,1fr)}.edition{display:none}.masthead #title{flex-basis:180px;width:180px}.canvasfoot #revision-label{order:2;flex-basis:100%}}
/* touch and small screens: keys grow to full 44px targets */
@media(max-width:900px),(pointer:coarse){:root{--key:44px}}
@media(max-width:950px){
 .workspace{grid-template-columns:1fr}
 .sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;box-shadow:inset 0 -1px 0 #000,0 2px 0 #000}
 .section-heading{flex:none;white-space:nowrap}.section-heading>span::after{display:none}
 .search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #project-search{width:170px;margin-left:auto}
 .projects{width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;min-height:0}
 .projects button{flex:none;width:auto;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .projects small{display:none}
 .sidebar-bottom{flex-direction:row;flex-wrap:wrap;margin:0;padding:0}
 .sidebar-bottom button{width:auto}
 .sidebar-bottom p,.sidebar-bottom>a{display:none}
 .studio{grid-template-columns:290px minmax(0,1fr);min-height:650px}
 .conversation{max-height:none}
 .devices{display:none}
 #preview-wrap{padding:12px;min-height:550px}
}
@media(max-width:700px){
 :root{--bar:auto}
 .masthead{min-height:56px;padding:10px;flex-wrap:wrap}
 .masthead .brand{padding:0 10px}.subbrand{display:none}
 .product{font-size:13px}
 .masthead #title{flex:1 1 100%;width:auto;margin:0;order:1}
 .masthead #saved{flex:0 1 auto;order:2}
 .masthead>button{flex:1 1 auto;padding:0 10px;order:3}
 #account{order:0;margin-left:auto}
 .studio{display:flex;flex-direction:column;min-height:0}
 .conversation{padding:20px 15px;box-shadow:inset 0 -1px 0 #000,0 2px 0 #000}
 .history{max-height:250px}
 #prompt{min-height:100px}
 .canvas{min-height:650px}
 .devices{display:flex}
 #preview-wrap{min-height:510px;max-height:700px;padding:10px;margin:8px}
 .canvasfoot>span{width:100%}
 .canvasfoot #delete{margin-left:auto}
 dialog{padding:20px}
 #pptx-command,#docx-command{height:20em}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Full-screen app on desktop: the shared footer would only add a page scroll under the workspace (it shows on phones). */
@media(min-width:951px) and (min-height:600px){body:has(.ftn) > .ftf{display:none}}