.publish-form{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:start;gap:48px;display:grid;@media (width<=899px){grid-template-columns:minmax(0,1fr);gap:32px;& .screenshot-picker{order:-1}}}.publish-form-main{flex-direction:column;gap:24px;min-width:0;display:flex}.publish-form-footer{flex-direction:column;grid-column:1/-1;gap:16px;display:flex}.publish-form-problem{font:500 var(--text-sm) / 1.5 var(--font-ui);color:var(--fg);margin:0}.publish-submit{gap:10px;display:flex;& .btn{flex:none}}.screenshot-blur{cursor:default;flex-direction:column;align-items:center;gap:16px;max-width:100%;max-height:100%;display:flex}.screenshot-blur-canvas{cursor:crosshair;touch-action:none;user-select:none;max-width:100%;position:relative;& img{border-radius:var(--radius-md);filter:drop-shadow(0 24px 48px #00000080);max-width:min(1400px,100%);max-height:calc(100vh - 160px);display:block}}.screenshot-blur-region{pointer-events:none;outline:1px dashed #ffffffe6;position:absolute;box-shadow:0 0 0 1px #00000059}.screenshot-blur-region.is-pending{backdrop-filter:blur(12px)}.screenshot-blur-remove{border-radius:var(--radius-full);color:#111;width:20px;height:20px;box-shadow:var(--shadow-sm);cursor:pointer;pointer-events:auto;background:#fff;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:-10px;right:-10px;&:hover{background:#e8e8e8}}.screenshot-blur-bar{font:400 var(--text-sm) / 1.3 var(--font-ui);color:#ffffffd9;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex;& button{border-radius:var(--radius-full);font:500 var(--text-sm) / 1 var(--font-ui);color:#fff;cursor:pointer;background:#ffffff24;border:none;padding:8px 14px;&:hover:not(:disabled){background:#ffffff3d}&:disabled{opacity:.4;cursor:default}}& .screenshot-blur-apply,& .screenshot-blur-apply:hover:not(:disabled){color:#111;background:#fff}}.screenshot-slot{flex-direction:column;align-items:flex-start;gap:10px;min-width:0;margin:0;display:flex;& p{font:400 var(--text-sm) / 1.45 var(--font-ui);color:var(--fg-muted);text-wrap:pretty;margin:0}}.screenshot-slot-frame{aspect-ratio:16/10;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-track);width:100%;box-shadow:var(--shadow-sm);place-items:center;display:grid;position:relative;overflow:hidden;&[data-over]{border-style:dashed;border-color:var(--fg)}&[data-over] .screenshot-slot-image{opacity:.5}& .screenshot-slot-image{object-fit:cover;object-position:top center;width:100%;height:100%;position:absolute;inset:0}}.screenshot-slot-upload{text-align:center;max-width:100%;padding-inline:12px;& .btn{white-space:normal;max-width:100%;line-height:1.2}}.screenshot-slot .screenshot-slot-error{color:var(--fg);font-weight:500}.screenshot-slot-action{font:500 var(--text-sm) / 1.3 var(--font-ui);color:var(--fg);text-align:start;text-underline-offset:3px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.screenshot-slot-menu{flex:none;margin:-4px -6px -4px 0}.screenshot-slot-menu-button{border-radius:var(--radius-sm);font:400 var(--text-sm) / 1.2 var(--font-ui);color:var(--fg-muted);cursor:pointer;background:0 0;border:none;padding:4px 6px;&:hover,&.is-open{background:var(--bg-hover);color:var(--fg)}&:focus-visible{outline:2px solid var(--fg);outline-offset:2px}}.screenshot-slot-menu-list{min-width:150px}.screenshot-thumbnails{align-items:flex-start;gap:12px;margin-top:4px;display:flex}.screenshot-thumbnails-item{flex-direction:column;gap:6px;display:flex}.screenshot-thumbnails-label{font:400 var(--text-xs) / 1.2 var(--font-ui);color:var(--fg-muted)}.screenshot-thumbnails-thumb,.screenshot-thumbnails-add{aspect-ratio:16/10;border-radius:var(--radius-md);cursor:pointer;width:120px}.screenshot-thumbnails-thumb{border:1px solid var(--border);background:var(--bg-track);opacity:.7;padding:0;transition:opacity .15s,box-shadow .15s;overflow:hidden;&:hover{opacity:1}&[aria-pressed=true]{opacity:1;box-shadow:0 0 0 2px var(--bg-page), 0 0 0 4px var(--border-strong)}&:focus-visible{box-shadow:0 0 0 2px var(--bg-page), 0 0 0 4px var(--fg);outline:none}& img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}}.screenshot-thumbnails-add{border:1px dashed var(--border-strong);font:400 var(--text-xs) / 1.2 var(--font-ui);color:var(--fg-muted);background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;&:hover,&[data-over]{border-color:var(--fg-muted);color:var(--fg)}&:focus-visible{outline:2px solid var(--fg);outline-offset:2px}}.screenshot-picker{flex-direction:column;gap:8px;min-width:0;display:flex}.screenshot-picker-head{font:500 var(--text-sm) / 1.2 var(--font-ui);color:var(--fg);justify-content:space-between;align-items:baseline;gap:12px;display:flex}.screenshot-picker-blur{font:400 var(--text-sm) / 1.3 var(--font-ui);color:var(--fg);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;align-self:flex-start;margin-top:6px;padding:0;text-decoration:underline}.publish-field{flex-direction:column;gap:8px;display:flex;& input,& textarea{box-sizing:border-box;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);width:100%;font:400 var(--text-base) / 1.5 var(--font-ui);color:var(--fg);padding:11px 14px;&::placeholder{color:var(--fg-subtle)}&:focus{border-color:color-mix(in oklab, var(--fg) 25%, var(--border-strong));box-shadow:0 0 0 3px color-mix(in oklab, var(--fg) 4%, transparent);outline:none}&[aria-invalid=true]{border-color:var(--danger)}}& textarea{resize:none;overflow:hidden}}.publish-field-head{font:500 var(--text-sm) / 1.2 var(--font-ui);color:var(--fg);justify-content:space-between;align-items:baseline;gap:12px;display:flex}.publish-field-optional,.publish-field-foot{font:400 var(--text-sm) / 1.3 var(--font-ui);color:var(--fg-subtle)}.publish-field-foot{justify-content:space-between;gap:12px;display:flex}.publish-field-over{color:var(--danger)}.url-pattern-note{font:400 var(--text-sm) / 1.7 var(--font-ui);color:var(--fg-muted);margin:0}.publish-head{flex-direction:column;gap:16px;display:flex}.publish-title{text-align:left}.publish-where{flex-direction:column;gap:4px;display:flex;& .url-pattern-note{padding-left:26px}}.publish-site{font:400 var(--text-sm) / 1.3 var(--font-ui);color:var(--fg-secondary);overflow-wrap:anywhere;align-self:flex-start;align-items:center;gap:8px;display:flex}