@import url('../site-shell.css');
:root{--bg:var(--suite-bg);--panel:var(--suite-panel);--line:var(--suite-border);--muted:var(--suite-muted);--text:var(--suite-text);--accent:var(--suite-violet)}
body{font-family:var(--suite-font);font-size:16px;line-height:1.65}header.suite-header{width:min(1340px,calc(100% - 48px));margin:auto;padding:20px 0}.suite-header .suite-mark i{background:var(--suite-violet)}.suite-header .suite-brand{font-size:27px;letter-spacing:-.8px}.tool-byline{display:block;color:var(--suite-muted);font-size:11px;font-weight:400;letter-spacing:0;line-height:1.4;margin-top:2px}.tool-byline b{font-weight:500;color:var(--suite-mint)}main{padding-top:32px}.heading h1{font-size:clamp(25px,3vw,34px);font-weight:720;letter-spacing:-.04em}.eyebrow{font:11px/1.5 ui-monospace,monospace;letter-spacing:1.6px;margin-bottom:9px}.intro{max-width:920px;font-size:15px;line-height:1.8;margin-bottom:22px}.intro p{margin:0}.panel{border-radius:10px;padding:23px;box-shadow:0 10px 24px #00000012}.section-title h2{font-size:17px}.hint{font-size:13px;line-height:1.75}.meta{font-size:12px}.drop{background:#1b202b;border-color:#50576e;min-height:170px}.drop:hover,.drop.over{background:#292638;border-color:var(--accent)}.drop strong{font-size:18px}.drop span:not(.upload-icon),.drop small{font-size:13px}.segmented{background:#191e27}.segmented button.active{background:#c4b5fd18;color:var(--accent)}button{background:#293140;border-color:var(--suite-border);font-size:14px;border-radius:6px}button:hover:not(:disabled){background:#364053}input[type=number],select{background:#191e27;border-color:#4a5265}input[type=number]{font-size:20px}input[type=checkbox]{accent-color:var(--accent)}.primary{background:var(--accent);border-color:var(--accent);color:#211c35;font-size:16px;padding:14px 16px}.primary:hover:not(:disabled){background:#d6caff}.fit{background:#c4b5fd10;border-color:#c4b5fd55;color:var(--accent)}.fit:hover:not(:disabled){background:#c4b5fd20}.checker{background-color:#343c49;background-image:conic-gradient(#414b5a 25%,#343c49 0 50%,#414b5a 0 75%,#343c49 0);background-size:20px 20px;background-position:0 0}.stage span{color:#c7d2e2;background:#1c222de8}.stage{border-color:#465064;height:230px}.result-stats strong{font-size:27px}.limits{padding:14px 17px;border:1px solid var(--line);border-radius:8px;background:#ffffff02;font-size:13px;margin-bottom:20px}.limits summary{font-size:14px}.limits div p:last-child{margin-bottom:0}.workspace-actions{margin-bottom:16px}.sequence-panel{min-height:330px}.sequence-tools{gap:9px}.selection-tools{gap:8px}.canvas-option{background:#191e2755}.canvas-anchors button[aria-pressed=true]{color:#211c35}.danger,.asset-delete{color:#ffd0cc;background:#5b3539;border-color:#90575d}.danger:hover:not(:disabled),.asset-delete:hover:not(:disabled){background:#70424a}.download{background:#c4b5fd08;color:var(--accent)}.tool-footer-note{font-size:11px;color:var(--suite-muted)}.workspace>aside{min-width:0}.preview-controls{justify-content:space-between}.pixel-option{margin-left:0;font-size:13px}.preview-dimensions{margin-bottom:13px}.suite-footer{font-size:12px}.suite-footer span{display:inline}.tool-backup-note{font-size:12px;padding:10px 0;color:var(--suite-muted)}
@media(max-width:1000px){.panel{padding:19px}.workspace{gap:18px}}@media(max-width:760px){header.suite-header{width:calc(100% - 30px);padding:16px 0}.suite-header .suite-brand{font-size:25px}.panel{padding:20px}.stage{height:230px}.workspace{gap:0}.intro{font-size:14px}.heading h1{font-size:27px}.hint{font-size:13px}.suite-footer{gap:13px}.limits{padding:13px 14px}}@media(max-width:400px){header.suite-header{gap:9px}.suite-header .suite-brand{font-size:23px;gap:9px}.suite-header .suite-back{font-size:11px;padding:7px 8px}.panel{padding:16px}.section-title{gap:7px;flex-wrap:wrap}.section-title h2{font-size:16px}.sequence-tools button{padding:8px 10px;font-size:12px}.selection-tools button{font-size:13px}.fields{gap:9px;grid-template-columns:1fr 1.2fr}select{font-size:12px}.canvas-option{padding:11px}.intro{font-size:14px}}

/* Individual holds stay folded until needed. */
.frame-timing-editor{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.frame-timing-editor summary{cursor:pointer;font-size:13px;color:var(--muted)}.frame-timing-editor[open] summary{color:var(--accent);margin-bottom:12px}.frame-duration-fields{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.frame-duration-fields label{margin:0!important;font-size:13px!important}.frame-duration-fields input{width:100px;font-size:16px;padding:7px 8px}.frame-duration-fields span{font-size:12px;color:var(--muted)}.frame-duration-fields button{padding:7px 10px;font-size:13px}.settings .segmented button{font-size:13px;padding:9px 6px}.frame-timing-editor .hint{font-size:12px;margin-bottom:0}
@media(max-width:400px){.settings .segmented button{font-size:11px;padding:8px 4px}.drop strong{font-size:16px}.frame-duration-fields{gap:5px}}

.workspace-actions{justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.edit-history-actions{display:flex;gap:6px}.edit-history-actions button{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:8px 10px}.edit-history-actions svg{width:16px;height:16px;flex:none}.workspace-actions #reset{margin-left:auto}
@media(max-width:400px){.edit-history-actions button,.workspace-actions #reset{font-size:12px;padding:7px 8px}}

.frame-duration-buttons{display:flex;gap:6px;flex-wrap:wrap;max-width:100%;min-width:0}

.edit-in-pixeee{display:flex;justify-content:space-between;align-items:center;width:100%;margin:9px 0 12px;padding:12px 15px;border-color:var(--suite-mint);color:var(--suite-mint);font-size:14px}.edit-in-pixeee:hover{background:#a1e7c410}.settings #outputName{display:block;width:100%;min-width:0;color:var(--text);background:#151e29;border:1px solid var(--line);border-radius:7px;padding:10px 12px;font-size:16px;margin-bottom:12px}

.stage{display:block;overflow:auto}.preview-surface{display:grid;place-items:center;min-width:100%;min-height:100%}.stage img{max-width:none;max-height:none;object-fit:initial}.preview-zoom-controls{display:flex;align-items:center;gap:6px;margin:10px 0 12px}.preview-zoom-controls button{padding:6px 9px;font-size:13px}.preview-zoom-controls .meta{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}.preview-zoom-controls #previewFit{margin-left:auto;white-space:nowrap}.sequence{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.frame .num{align-items:center;gap:4px}.frame-time{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}

.preview-timing-summary{display:grid;gap:8px;margin:18px 0;border-top:1px solid var(--line);padding-top:16px;}
.preview-timing-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:13px;color:var(--muted);}
.preview-timing-field{display:flex;align-items:center;justify-content:flex-end;gap:7px;font-size:12px;}
.preview-timing-value{font:14px ui-monospace,monospace;min-width:54px;text-align:right;color:var(--text);}.preview-timing-label{display:flex;align-items:center;gap:8px;min-width:0;}.preview-beat-note{font-size:10px;color:var(--muted);white-space:nowrap;}#timingNote:empty{display:none;}
.timing-apply-status{font-size:13px;color:#ff939e;margin:12px 0 16px;}.timing-apply-status.is-applied{color:var(--suite-lime);}
.timing-apply{margin-top:12px;color:var(--accent);border-color:#c4b5fd66;min-height:38px;}
.frame-total-setting+.frame-total-setting{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
@media(max-width:580px){.preview-timing-row{font-size:12px;}.preview-timing-value{font-size:13px;}.preview-beat-note{font-size:9px;}}

.canvas-anchors button{font-size:20px;}

/* Keep the familiar layout; use Pixeee-like typography and quieter surfaces. */
button,input,select{font-family:var(--suite-font)}
.panel{border-radius:6px;box-shadow:none}
button{border-radius:5px}
.drop,.stage,.limits,.canvas-option{border-radius:5px}
.eyebrow{font-family:var(--suite-font);letter-spacing:.6px;font-weight:500}
.section-title h2>span{font-family:var(--suite-font);font-variant-numeric:tabular-nums}
.preview-timing-value{font-family:var(--suite-font);font-variant-numeric:tabular-nums}
#message{font:12px/1.6 var(--suite-font);padding:9px 14px;border:1px solid #a1e7c344;border-radius:5px;background:#283c35;color:#d8f5e8;box-shadow:0 4px 18px #0005}
#message.error{background:#4b2b35;color:#ffe2e7;border-color:#c8788a}

/* Keep import feedback in the drop target without shifting the layout. */
.drop{position:relative}
.drop[aria-busy=true]{cursor:wait}
.drop[aria-busy=true]>:not(.import-loading){visibility:hidden}
.drop .import-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.drop .import-loading img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;flex:none}
.drop .import-loading>span{font:13px var(--suite-font);color:var(--suite-text);white-space:nowrap}

/* Confirm leaving the in-memory editing session before staging a handoff. */
.handoff-confirm{padding:0;width:460px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);border:1px solid #535e71;border-radius:8px;background:var(--suite-panel);color:var(--suite-text);font-family:var(--suite-font);overflow:auto;box-shadow:0 12px 60px #0008}
.handoff-confirm::backdrop{background:#10151bcc}
.handoff-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--suite-border);background:#252d38;position:sticky;top:0}
.handoff-heading h2{font-size:17px;margin:0}
.handoff-close{width:32px;min-width:32px;height:32px;padding:0;font-size:22px;line-height:1;color:var(--suite-muted);background:transparent}
.handoff-body{padding:5px 18px 18px}
.handoff-body p{font-size:13px;line-height:1.8;color:var(--suite-muted);margin:13px 0}
.handoff-body .handoff-save{color:var(--suite-text)}
.handoff-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:21px}
.handoff-actions button{font-size:13px;min-height:36px}
.handoff-actions .handoff-edit{color:#142b21;background:var(--suite-mint);border-color:var(--suite-mint)}
html:has(#editInPixeeeDialog[open]){overflow:hidden}
@media(max-width:400px){.handoff-heading{padding:12px 14px}.handoff-heading h2{font-size:16px}.handoff-body{padding-inline:14px}}

/* Compact heading and readable beat conversions, including narrow screens. */
.heading h1{font-size:clamp(20px,2vw,25px);font-weight:650;letter-spacing:-.02em}
.preview-timing-summary .preview-beat-note{font-size:13px;color:var(--text);white-space:normal;text-align:right}
.preview-timing-field{flex-wrap:wrap;column-gap:7px;row-gap:0;min-width:0}
.preview-timing-row>span:first-child{flex:none}
#previewLoopBpmRow{align-items:baseline}
#downloadInfo{overflow-wrap:anywhere}
.button-loading{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-size:13px}
.button-loading img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated;flex:none}
button.is-processing:disabled{opacity:1;cursor:wait}
@media(max-width:400px){.preview-timing-row{gap:8px}.preview-timing-field{column-gap:5px}.preview-timing-value{min-width:38px}}