:root{--ink:#242037;--page:#f4f1f8;--focus:#663bbc;--violet:#5d36aa;--line:#e3dced;--muted:#625973}
.app-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px clamp(14px,4vw,52px);background:#fff;border-bottom:1px solid var(--line)}
.logo{font-size:22px;letter-spacing:-.07em;font-weight:700;display:flex;align-items:center;gap:7px}
.logo span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#5e36b2;color:white;font-size:19px}
.crumb{font-size:13px;color:var(--muted)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#eaddfa;color:#492983;font-weight:700;font-size:11px}
main{max-width:1430px;margin:auto;padding:clamp(19px,4vw,49px) clamp(14px,4vw,52px) 16px}
.project-head{display:flex;justify-content:space-between;align-items:end;gap:13px;margin-bottom:21px}
.project-head .kicker{color:var(--violet)}
h1{font-size:clamp(34px,6.2vw,76px);line-height:1.04;letter-spacing:-.08em;margin:4px 0 8px}
.project-head p:last-child{color:var(--muted)}
.approval{display:flex;gap:8px;align-items:center;white-space:nowrap}
.approval span{font-size:12px;color:#4c3277;background:#ede2fc;border:1px solid #d9c6f2;border-radius:40px;padding:5px 8px}
.approval span.approved{color:#205d46;background:#e1f4e9;border-color:#c4e7d3}
.approval button,#comment-form button{border:1px solid var(--violet);border-radius:6px;background:var(--violet);color:white;padding:7px 10px;font-size:13px;font-weight:600}
.approval button:hover,#comment-form button:hover{background:#472383}
.workbench{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(275px,1fr);gap:10px;align-items:start}
.asset-panel,.feedback{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.asset-panel header,.feedback header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line)}
h2{font-size:16px;letter-spacing:-.035em}
header p,.asset-foot,.local-status{font-size:12px;color:var(--muted)}
.version{display:flex;background:#f3effa;padding:3px;border-radius:6px;gap:4px}
.version button,.quiet,#add-pin{border:1px solid transparent;border-radius:5px;background:transparent;font-size:12px;padding:5px 8px}
.version button[aria-pressed=true],#add-pin[aria-pressed=true],.quiet[aria-pressed=true]{background:#eaddfa;border-color:#d6c3ef;color:#452381}
.canvas{display:grid;place-items:center;padding:clamp(14px,4vw,42px);background-color:#211a33;background-image:radial-gradient(#82719b66 1px,transparent 1px);background-size:14px 14px}
.artwork{position:relative;width:min(100%,330px);aspect-ratio:4/5;box-shadow:0 12px 28px #100d1abb;container-type:inline-size}
.artwork.placing{cursor:crosshair}
.poster{height:100%;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:6%;background:#cbd99a;color:#1f2118}
.artwork[data-version="1"] .poster{background:#eee6d9;color:#331b4b}
.poster-top,.poster-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;font:bold 3.2cqw/1.15 ui-monospace,monospace}
.poster-top span:last-child{text-align:right}
.poster-bottom{padding-top:5%;border-top:1px solid currentColor}
.poster-type{font-size:25.5cqw;font-weight:800;line-height:.77;letter-spacing:-.105em;z-index:1;position:relative;transform:rotate(-7deg)}
.poster-type span{color:#973718}
.artwork[data-version="1"] .poster-type{transform:rotate(0);font-size:22cqw}
.rings{position:absolute;top:14%;right:-24%;width:123%;height:68%;transform:rotate(-34deg);border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 8px,#3f5024aa 9px 10px,transparent 11px 13px);opacity:.67}
.artwork[data-version="1"] .rings{background:repeating-radial-gradient(ellipse at center,transparent 0 7px,#b186d0b0 8px 9px,transparent 10px 12px);transform:rotate(28deg);right:-11%}
.pins{position:absolute;inset:0;pointer-events:none;z-index:2}
.pin{position:absolute;display:grid;place-items:center;pointer-events:auto;transform:translate(-50%,-50%);width:29px;height:29px;border:2px solid white;border-radius:50% 50% 50% 15%;background:#5934a6;color:white;box-shadow:0 2px 9px #100d1a88;font-size:11px;font-weight:700}
.pin.draft{z-index:3;pointer-events:none;background:#8b3b16}
.asset-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}
.quiet,#add-pin{border-color:var(--line);white-space:nowrap}
.comments{min-height:110px;max-height:330px;overflow:auto;padding:0 14px}
.comment{padding:12px 0;border-bottom:1px solid var(--line);outline-offset:-2px;overflow-wrap:anywhere}
.comment h3{font-size:13px;display:flex;align-items:center;gap:6px}
.comment h3 span{color:var(--violet);font:11px ui-monospace,monospace}
.comment p{margin:5px 0;font-size:13px;white-space:pre-wrap}
.comment button{background:none;border:0;padding:2px 0;color:var(--violet);font-size:12px;text-decoration:underline}
.empty{padding:14px 0;color:var(--muted);font-size:13px}
#comment-form{display:grid;gap:7px;padding:13px 14px}
#comment-form label{font-size:13px;font-weight:600}
#comment-form textarea{resize:vertical;min-height:62px;background:#fbf9fe;border:1px solid #cfc2dd;border-radius:6px;padding:7px;font-size:13px}
#comment-form div{display:flex;justify-content:space-between;align-items:center;gap:6px}
#pin-hint{font-size:11px;color:var(--muted)}
.local-status:not(:empty){padding:0 14px 11px}
footer{display:flex;justify-content:space-between;gap:8px;padding:13px 0;color:var(--muted);font-size:12px}
footer a{text-decoration:underline}
@media(max-width:700px){.workbench{grid-template-columns:1fr}.project-head{flex-direction:column;align-items:start}.canvas{padding:16px}.artwork{max-width:270px}.crumb{display:none}}
.artwork[data-version="1"] .poster-top span:last-child{position:absolute;right:3%;top:20cqw}