:root { --ink:#14213b; --muted:#6c7484; --line:#e6e9ee; --blue:#155ec9; --canvas-scale: .58; }
@font-face { font-family:"Proxima Nova"; src:local("Proxima Nova Regular"),local("Proxima Nova"); font-weight:400; }
@font-face { font-family:"Proxima Nova"; src:local("Proxima Nova Medium"); font-weight:500; }
@font-face { font-family:"Proxima Nova"; src:local("Proxima Nova Semibold"); font-weight:600; }
@font-face { font-family:"Proxima Nova Condensed"; src:local("Proxima Nova Condensed Regular"),local("Proxima Nova Condensed"); font-weight:400; }
@font-face { font-family:"Proxima Nova A"; src:local("Proxima Nova A Regular"),local("Proxima Nova A"); font-weight:400; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#f6f7f9; }
header { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; font-size:17px; font-weight:750; letter-spacing:-.02em; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--blue); color:#fff; font-family:Georgia,serif; }
.header-actions { display:flex; gap:10px; }.button { cursor:pointer; border:1px solid transparent; border-radius:8px; height:36px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; font:600 13px inherit; }.primary { background:var(--blue); color:#fff; }.secondary { background:#fff; color:var(--ink); border-color:#d9dee7; }
main {  margin-bottom:100px;height:calc(100vh - 68px); display:grid; grid-template-columns:230px minmax(500px,1fr) 272px; overflow:auto; }.tools,.inspector { padding:25px 19px; background:#fff; border-right:1px solid var(--line); overflow:auto; }.inspector { border-right:0; border-left:1px solid var(--line); }
section { margin-bottom:27px; }.eyebrow { margin:0 0 9px; color:#8a92a1; font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }.add-button { width:100%; display:flex; align-items:center; gap:9px; padding:9px 10px; margin-top:5px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; cursor:pointer; font-weight:600; }.add-button:hover { border-color:#9ebee9; background:#f7faff; }.add-button span { color:var(--blue); font-size:20px; font-weight:400; line-height:16px; }
.section-title { display:flex; justify-content:space-between; align-items:start; }.section-title button { margin-top:-6px; border:0; background:transparent; color:#8a92a1; font-size:19px; cursor:pointer; }.layers { display:flex; flex-direction:column; gap:4px; }.layer { width:100%; display:flex; align-items:center; gap:8px; padding:8px; border:1px solid transparent; border-radius:7px; background:transparent; cursor:pointer; text-align:left; color:var(--ink); }.layer:hover { background:#f5f8fd; }.layer.selected { background:#edf4ff; border-color:#c8dcfa; color:#084eae; }.layer-icon { width:23px; height:23px; display:grid; place-items:center; background:#fff; border:1px solid #e1e5ea; border-radius:5px; font-size:12px; }.layer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.empty { color:var(--muted); font-size:12px; }.tips { margin-top:44px; border-top:1px solid var(--line); padding-top:18px; }.tip-heading { display:flex; justify-content:space-between; align-items:baseline; }.tip-heading .eyebrow { margin-bottom:9px; }.tip-heading span { color:#8a92a1; font-size:10px; font-weight:700; }.tip-carousel { min-height:138px; }.tip-slide { color:#5e6b7e; font-size:12px; line-height:1.45; }.tip-slide strong { display:block; color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.02em; }.tip-slide p { margin:5px 0; }.tip-slide ul { margin:6px 0 0; padding-left:16px; }.tip-slide li { margin:3px 0; }.tip-note { padding-top:5px; border-top:1px solid #e4e8ee; }.tip-placeholder { color:#8a92a1; font-style:italic; }.tip-identification { color:var(--ink); font-weight:650; }.tip-controls { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }.tip-controls > button { width:28px; height:26px; padding:0; border:1px solid #d9dee7; border-radius:5px; background:#fff; color:#145dab; cursor:pointer; font-size:15px; }.tip-controls > button:hover { background:#f1f6fe; }.tip-dots { display:flex; gap:5px; }.tip-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#c9d2df; cursor:pointer; }.tip-dots button[aria-selected="true"] { background:#1767c7; }
.sections { display:flex; flex-direction:column; gap:5px; }.section-row { display:grid; grid-template-columns:1fr 32px 24px 24px; align-items:center; gap:2px; padding:5px 4px 5px 8px; border:1px solid var(--line); border-radius:7px; font-size:11px; font-weight:650; }.section-row input { width:30px; margin:0; padding:3px 1px; text-align:center; font-size:10px; }.section-row button { width:23px; height:23px; padding:0; border:0; border-radius:4px; background:#f1f5fb; color:#175ba7; cursor:pointer; font-size:13px; }.section-row button:disabled { opacity:.3; cursor:default; }
.reset-layout { width:100%; margin-top:7px; padding:6px; border:1px solid #d9dee7; border-radius:6px; background:#fff; color:#526174; cursor:pointer; font:600 11px inherit; }
.workspace { min-width:0; display:flex; flex-direction:column; margin:0; }.workspace-top { height:50px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; color:#626d7f; font-size:12px; border-bottom:1px solid var(--line); }.workspace-top span:first-child { font-weight:700; color:var(--ink); }.canvas-wrap { flex:1; overflow:auto; padding:36px; display:grid; place-items:start center; background:radial-gradient(#dfe3e9 .8px, transparent .8px) 0 0/12px 12px; }.canvas { position:relative; width:648px; height:810px; flex:none; background:#fff url('picture-studio-base.png') center/100% 100% no-repeat; box-shadow:0 12px 32px #23334b24; }
.local-warning { margin:0; padding:9px 24px; background:#fff2d8; color:#754b05; font-size:12px; }.local-warning code { font-size:11px; }
.hotspots { position:absolute; inset:0; z-index:3; }.hotspot { position:absolute; border:1px dashed transparent; background:transparent; border-radius:3px; cursor:pointer; }.hotspot:hover { border-color:#1976df; background:#2586f21c; }.hotspot::after { content:attr(data-label); position:absolute; left:0; top:100%; z-index:5; display:none; padding:3px 5px; margin-top:2px; border-radius:4px; background:#0c4e9d; color:#fff; white-space:nowrap; font-size:10px; font-weight:700; }.hotspot:hover::after { display:block; }
.removed-mask { position:absolute; z-index:2; pointer-events:none; }
.section-mask { position:absolute; z-index:0; background:#fff; pointer-events:none; }.section-slice { position:absolute; z-index:1; background-repeat:no-repeat; pointer-events:none; }
.element { position:absolute; z-index:4; user-select:none; touch-action:none; cursor:move; outline:1px solid transparent; }.element.selected { outline:2px solid #2480ed; }.element.selected::before { content:""; position:absolute; inset:-5px; border:1px dashed #2480ed; pointer-events:none; }.text-element { min-width:60px; min-height:24px; white-space:pre-wrap; overflow-wrap:break-word; }.text-element .content { height:100%; box-sizing:border-box; }.image-element { overflow:hidden; background:#fff; }.image-element img { width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; }.resize-handle { position:absolute; display:none; width:12px; height:12px; right:-7px; bottom:-7px; border:2px solid #fff; background:#2480ed; border-radius:50%; cursor:nwse-resize; }.selected .resize-handle { display:block; }
.empty-state { text-align:center; padding:90px 12px; }.empty-icon { display:grid; place-items:center; height:35px; width:35px; margin:auto; border-radius:12px; background:#eaf3ff; color:#0d65d0; }.empty-state h2 { font-size:15px; margin:15px 0 5px; }.empty-state p { color:var(--muted); font-size:12px; margin:0; }.original-inspector { padding-top:2px; }.original-inspector p { margin:0 0 20px; color:var(--muted); font-size:12px; }.inspector-heading h2 { font-size:20px; margin:0 0 20px; letter-spacing:-.03em; } label { display:block; color:#657084; font-size:11px; font-weight:700; } input,select,textarea { width:100%; margin-top:5px; padding:7px 8px; border:1px solid #d9dee7; border-radius:6px; background:#fff; color:var(--ink); font:13px inherit; } input:focus,select:focus,textarea:focus { outline:2px solid #bdd9ff; border-color:#77adef; } textarea { resize:vertical; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:12px; } input[type=color] { height:34px; padding:3px; } input[type=range] { padding:0; } output { float:right; font-weight:500; color:#8a92a1; } hr { border:0; border-top:1px solid var(--line); margin:20px 0; }.image-note { padding:10px; border-radius:7px; background:#f3f7fc; color:#5a6b83; font-size:12px; }.full { width:100%; margin-top:18px; }
.check-label { display:flex; align-items:center; gap:7px; padding-top:20px; color:#657084; }.check-label input { width:15px; height:15px; margin:0; accent-color:var(--blue); }
.control-label { margin:12px 0 -2px; color:#657084; font-size:11px; font-weight:700; }
.rich-toolbar { display:flex; gap:5px; align-items:center; margin:5px 0; }.rich-toolbar button { width:29px; height:28px; border:1px solid #d9dee7; border-radius:5px; background:#fff; color:var(--ink); cursor:pointer; }.rich-toolbar select { flex:1; width:auto; margin:0; padding:4px; font-size:11px; }.rich-toolbar input[type=color] { width:32px; height:28px; margin:0; padding:2px; }.rich-text-editor { min-height:95px; padding:7px 8px; border:1px solid #d9dee7; border-radius:6px; background:#fff; color:var(--ink); font:13px/1.35 inherit; white-space:pre-wrap; overflow-wrap:break-word; outline:none; }.rich-text-editor:focus { outline:2px solid #bdd9ff; border-color:#77adef; }.text-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }.text-actions .button { height:30px; }
.export-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; }.export-modal[hidden] { display:none; }.export-modal-backdrop { position:absolute; inset:0; background:#0c1c35a6; }.export-modal-panel { position:relative; z-index:1; display:flex; flex-direction:column; width:min(760px, 100%); max-height:calc(100vh - 48px); padding:20px; border-radius:14px; background:#fff; box-shadow:0 24px 70px #09172b66; }.export-modal-header { display:flex; align-items:start; justify-content:space-between; gap:18px; }.export-modal-header .eyebrow { margin-bottom:3px; }.export-modal-header h2 { margin:0; font-size:20px; letter-spacing:-.02em; }.modal-close { width:32px; height:32px; padding:0; border:0; border-radius:7px; background:#eff4fb; color:#45556b; font-size:24px; line-height:1; cursor:pointer; }.export-modal-copy { margin:9px 0 14px; color:#657084; font-size:12px; }.export-preview { min-height:160px; overflow:auto; display:grid; place-items:start center; border:1px solid #d9dee7; border-radius:8px; background:repeating-conic-gradient(#f6f8fb 0 25%, #edf1f6 0 50%) 50%/16px 16px; }.export-preview canvas { display:block; width:min(100%, 540px); height:auto; background:#fff; box-shadow:0 5px 14px #21355522; }.export-modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:16px; }
@media (max-width: 980px) { main { grid-template-columns:190px minmax(420px,1fr); }.inspector { display:none; }.canvas-wrap { padding:22px; } }