:root { --ink:#11110f; --paper:#f3f1eb; --line:#d8d5cd; --muted:#77756f; --accent:#f36b3d; --lime:#d5ed68; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif; overflow:hidden; touch-action:pan-x pan-y; }
button, label { font:inherit; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; } button { border:0; cursor:pointer; touch-action:manipulation; } .app-shell { min-height:100dvh; display:grid; grid-template-rows:76px minmax(0,1fr) 105px; }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 28px; border-bottom:1px solid var(--line); background:#fbfaf7; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; font-size:19px; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#fff; background:var(--ink); font-family:Georgia,serif; font-style:italic; }
.frame-name { text-align:center; line-height:1.15; } .eyebrow { display:block; font-size:10px; letter-spacing:.14em; color:var(--muted); font-weight:800; } .frame-name strong { font-size:15px; }
.top-actions { justify-self:end; display:flex; gap:8px; }.icon-button,.close-button { display:grid; place-items:center; width:37px; height:37px; border:1px solid var(--line); background:white; border-radius:50%; font-size:21px; color:var(--ink); }.format-button,.projects-button{height:37px;padding:0 11px;border-radius:9px;background:white;border:1px solid var(--line);font-size:12px;font-weight:800;}
.workspace { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 205px; padding:20px; gap:16px; }.canvas-stage { --frame-ratio:1.7778; position:relative; width:min(100%, calc((100dvh - 215px) * var(--frame-ratio))); max-height:100%; aspect-ratio:var(--frame-ratio) / 1; align-self:center; justify-self:center; overflow:hidden; border:1px solid #c9c6bd; border-radius:16px; background:#fffefa; box-shadow:inset 0 0 0 5px rgba(245,243,237,.65); }
#drawingCanvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; transform-origin:0 0; will-change:transform; }.empty-hint { pointer-events:none; position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:7px; color:#a3a097; font-size:17px; transition:.2s; }.empty-hint small{ font-size:12px; }.stage-badge { position:absolute; top:16px; left:16px; padding:6px 9px; background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:99px; font-size:9px; font-weight:800; letter-spacing:.12em; }
.versions-panel { border:1px solid var(--line); background:#eae8e2; border-radius:16px; display:flex; min-height:0; flex-direction:column; padding:12px; }.panel-heading { display:flex; justify-content:space-between; padding:4px 3px 12px; font-size:10px; font-weight:800; letter-spacing:.12em; color:var(--muted); }.versions-list { overflow:auto; display:grid; align-content:start; gap:10px; }.version-card { position:relative; overflow:hidden; min-height:125px; padding:7px; border:1px solid transparent; border-radius:10px; background:#fff; cursor:pointer; }.version-card.selected{ border-color:var(--ink); }.version-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:5px; background:#ddd; }.version-card footer { display:flex; padding:7px 2px 1px; justify-content:space-between; align-items:center; font-size:10px; color:var(--muted); }.version-card footer>span{display:flex;align-items:center;gap:4px}.final-chip { color:#3f4c00; background:var(--lime); padding:3px 5px; border-radius:4px; font-size:8px; font-weight:900; letter-spacing:.04em; }.delete-version{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#f5e5df;color:#b8492c;font-size:15px;line-height:1}.add-version { margin-top:10px; padding:11px 3px 2px; background:transparent; color:var(--ink); font-size:12px; font-weight:800; text-align:left; }
.controls { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:12px 28px 17px; border-top:1px solid var(--line); background:#fbfaf7; }.tool-group{ display:flex; gap:5px; }.tool { display:grid; justify-items:center; gap:2px; min-width:53px; padding:7px 5px; border-radius:9px; background:transparent; color:#5f5e58; font-size:9px; font-weight:700; }.tool-icon{font-size:19px; line-height:18px; }.tool.active { color:var(--ink); background:#eceae3; }.tool.danger { color:#b95b40; }.audio-status { position:absolute; left:50%; top:10px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; white-space:nowrap; }.audio-status i { width:7px;height:7px;border-radius:50%; background:#b9b7af; }.audio-status.recording { color:#b8482a; }.audio-status.recording i { background:var(--accent); animation:pulse 1s infinite; }.primary-actions{ justify-self:end; display:flex; gap:8px; align-items:center; }.image-actions{display:flex;gap:6px;align-items:center}.image-action-button{height:41px;padding:0 11px;border-radius:9px;background:#e8e6df;color:var(--ink);font-size:11px;font-weight:800}.image-action-button.secondary{background:transparent;border:1px solid var(--line)}.mic-button { min-width:115px; display:flex; justify-content:center; align-items:center; gap:7px; padding:12px 13px; color:#fff; background:var(--ink); border-radius:10px; font-size:11px; }.mic-button span{ color:var(--accent); font-size:17px; }.mic-button.recording{ background:#b8482a; }.mic-button.recording span{ color:#fff; }.action-button { height:41px; padding:0 13px; border-radius:9px; font-size:12px; font-weight:800; }.action-button.dark{ background:#262622;color:#fff; }.action-button.accent{ background:var(--accent);color:#fff; }.action-button.board{ background:var(--lime);color:#222; }
.format-overlay,.projects-overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:30px;background:#f3f1eb;transition:.3s}.format-overlay.hidden,.projects-overlay.hidden{opacity:0;visibility:hidden}.format-picker,.projects-picker{width:min(720px,100%)}.format-picker h1,.projects-picker h1{margin:5px 0 8px;font:italic 48px Georgia,serif;letter-spacing:-.06em}.format-picker p{margin:0 0 30px;color:var(--muted);font-size:14px}.format-options{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.format-option{display:grid;justify-items:center;gap:10px;padding:18px 8px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px}.format-option:hover,.format-option.featured{border-color:var(--ink);box-shadow:0 4px 16px #0000000d}.format-option i{display:block;width:52px;height:30px;border:2px solid var(--ink);border-radius:3px}.format-option[data-format="4:3"] i{width:45px}.format-option[data-format="1:1"] i{width:34px;height:34px}.format-option[data-format="3:4"] i{width:29px;height:38px}.format-option[data-format="9:16"] i{width:22px;height:39px}.format-option small{color:var(--muted);font-size:10px}.projects-overlay{z-index:21;opacity:0;visibility:hidden}.projects-overlay.open{opacity:1;visibility:visible}.projects-picker header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:25px}.projects-list{display:grid;gap:8px}.project-card{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:11px;border:1px solid var(--line);background:#fff;text-align:left}.project-card.active{border-color:var(--ink)}.project-card b{display:block;font-size:15px}.project-card small{display:block;margin-top:3px;color:var(--muted);font-size:11px}.project-card span{font-size:11px;font-weight:800}.new-project-button{width:100%;margin-top:12px;padding:14px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800}
.board-overlay { visibility:hidden; opacity:0; position:fixed; z-index:5; inset:0; padding:5vw; background:#11110fa8; transition:.2s; }.board-overlay.open { visibility:visible;opacity:1; }.board-sheet { min-height:100%; overflow:auto; background:#f7f5f0; padding:42px; }.board-header { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:25px; }.board-header h1 { margin:3px 0 0; font:italic 42px Georgia,serif; letter-spacing:-.05em; }.board-header>div:last-child{display:flex;gap:10px}.export-button { padding:10px 14px; color:#fff;background:var(--ink);border-radius:7px;font-weight:800;font-size:12px; }.board-intro { color:var(--muted); margin:16px 0 25px; }.board-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.board-card{background:white;padding:10px;border:1px solid var(--line);cursor:pointer;transition:.15s}.board-card:hover{transform:translateY(-2px);border-color:var(--ink)}.board-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#e5e1d7;}.board-card p{margin:9px 2px 1px;font-size:11px;font-weight:800;}
.toast { position:fixed; z-index:10; left:50%; bottom:125px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; padding:10px 14px; background:var(--ink); color:#fff; border-radius:8px; font-size:12px; transition:.25s; }.toast.show{transform:translate(-50%,0);opacity:1;} @keyframes pulse{50%{transform:scale(1.7);opacity:.35}}
@media (max-width: 780px) { .app-shell{grid-template-rows:58px minmax(0,1fr) 138px}.topbar{padding:0 14px}.frame-name{display:none}.topbar{grid-template-columns:1fr auto}.workspace{grid-template-columns:minmax(0,1fr) 120px;padding:10px;gap:8px}.canvas-stage{width:min(100%,calc((100dvh - 210px) * var(--frame-ratio)))}.versions-panel{padding:7px}.version-card{min-height:auto;padding:5px}.controls{padding:35px 10px 8px;grid-template-columns:1fr auto}.drawing-tools .tool{min-width:42px}.primary-actions{gap:4px}.image-actions{gap:3px}.image-action-button{padding:0 7px;font-size:9px}.mic-button{min-width:42px;padding:12px 9px}.mic-button b{display:none}.action-button{padding:0 9px}.action-button span{font-size:15px}.board-grid{grid-template-columns:repeat(2,1fr)}.board-sheet{padding:22px}.board-header h1{font-size:32px}.format-picker h1{font-size:38px}.format-options{grid-template-columns:repeat(3,1fr)} }