.published{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}}.published-main{min-width:0;font:400 var(--text-sm) / 1.5 var(--font-ui);color:var(--fg-muted);flex-direction:column;gap:28px;display:flex;& p{text-wrap:pretty;margin:0}}.published-head{flex-direction:column;gap:14px;display:flex;& h1{font:700 var(--text-2xl) / 1.1 var(--font-display);letter-spacing:-.02em;color:var(--fg);text-wrap:balance;overflow-wrap:anywhere;margin:0}& p{font-size:var(--text-base);color:var(--fg-secondary)}}.published-tag{border-radius:var(--radius-full);background:var(--success-bg);font:600 var(--text-xs) / 1 var(--font-ui);color:var(--success);align-self:flex-start;align-items:center;gap:6px;padding:6px 10px 6px 8px;display:flex}.published-unlinked{border-radius:var(--radius-md);background:var(--bg-hover);color:var(--fg);flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;display:flex}.published-link{flex-direction:column;gap:8px;display:flex;&>span{font:500 var(--text-sm) / 1.2 var(--font-ui);color:var(--fg)}}.published-link-box{box-sizing:border-box;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);align-items:center;gap:8px;min-height:44px;padding:0 6px 0 14px;display:flex;& code{text-overflow:ellipsis;white-space:nowrap;min-width:0;font:400 var(--text-sm) / 1 var(--font-mono);color:var(--fg-secondary);flex:1;overflow:hidden}& .btn{flex:none}}.published-actions{flex-wrap:wrap;gap:10px;display:flex}.published-removed{flex-direction:column;gap:8px;display:flex;& ul{margin:0;padding-left:20px}& code{font:400 var(--text-xs) / 1.5 var(--font-mono);overflow-wrap:anywhere}}.published-shot{aspect-ratio:16/10;object-fit:cover;object-position:top center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-track);width:100%;box-shadow:var(--shadow-lg);display:block}.css-unchanged{border-radius:var(--radius-md);background:var(--bg-hover);flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;display:flex;& p{font:400 var(--text-sm) / 1.5 var(--font-ui);color:var(--fg-secondary);margin:0}}.css-diff{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);max-height:320px;font:400 13px/1.7 var(--font-mono);overflow:hidden auto}.css-diff-hunk{padding:8px 0;&+&{border-top:1px dashed var(--border)}}.css-diff-line{white-space:pre-wrap;min-height:1.7em;color:var(--fg-muted);gap:10px;padding:0 16px 0 10px;display:flex;&.is-added{background:var(--success-bg);color:var(--fg)}&.is-removed{background:var(--danger-bg);color:var(--fg)}}.css-diff-number{text-align:right;width:28px;color:var(--fg-subtle);user-select:none;flex:none}.css-diff-sign{user-select:none;flex:none;width:10px;.is-added &{color:var(--success)}.is-removed &{color:var(--danger)}}.css-diff-text{overflow-wrap:anywhere;flex:1;min-width:0}.publish-css-dialog{margin-top:8px;& .css-code,& .css-diff{border-radius:var(--radius-md);max-height:calc(100vh - 240px)}}.publish-css-dialog-toggle{margin-right:auto}.publish-css{display:flex}.publish-css-counts{font:400 var(--text-xs) / 1 var(--font-mono);gap:6px;display:flex}.publish-css-added{color:var(--success)}.publish-css-removed{color:var(--danger)}.publish-details{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 16px;display:flex;& .btn{flex:none}}.publish-details-text{min-width:0;font:400 var(--text-sm) / 1.5 var(--font-ui);color:var(--fg-muted);flex-direction:column;gap:4px;display:flex;& strong{color:var(--fg);overflow-wrap:anywhere;font-weight:600}& p{overflow-wrap:anywhere;white-space:pre-line;margin:0}}.publish-start{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);max-width:600px;font:400 var(--text-base) / 1.55 var(--font-ui);color:var(--fg-secondary);flex-direction:column;gap:16px;padding:28px;display:flex;& h2{font:600 var(--text-lg) / 1.3 var(--font-display);color:var(--fg);margin:0}& p{text-wrap:pretty;margin:0}@media (width<=639px){padding:20px}}.publish-start-steps{counter-reset:step;flex-direction:column;gap:12px;margin:4px 0;padding:0;list-style:none;display:flex;& li{counter-increment:step;color:var(--fg);align-items:baseline;gap:12px;display:flex;&:before{content:counter(step);border-radius:var(--radius-full);background:var(--bg-hover);width:24px;height:24px;font:600 var(--text-xs) / 1 var(--font-ui);color:var(--fg-secondary);flex:none;place-items:center;display:inline-grid;transform:translateY(-1px)}}}.publish-start-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px;display:flex;& p{font-size:var(--text-sm);color:var(--fg-muted)}}.publish-page{flex-direction:column;gap:32px;display:flex}