.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:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);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:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);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}}.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}}.pub{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);width:min(100%,300px);box-shadow:var(--shadow-card);font:400 var(--text-sm) / 1.2 var(--font-ui);color:var(--fg);justify-self:center;overflow:hidden}.pub-head{border-bottom:1px solid var(--border);padding:14px 16px}.pub-head b{color:var(--fg);font-weight:600}.pub-styles{flex-direction:column;gap:2px;min-height:250px;padding:8px 6px 10px;display:flex;position:relative}.pub-row{border-radius:var(--radius-md);min-height:36px;color:var(--fg);justify-content:space-between;align-items:center;padding:8px 10px;display:flex}.pub-active{background:var(--bg-muted);font-weight:600}.pub-more{color:var(--fg-muted);font-weight:700}.pub-muted{color:var(--fg-muted)}.pub-menu{border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--bg-surface);min-width:170px;box-shadow:var(--shadow-card);flex-direction:column;gap:2px;padding:5px;display:flex;position:absolute;top:78px;right:10px}.pub-menu span{border-radius:var(--radius-sm);color:var(--fg);padding:8px 10px}.pub-menu .pub-highlight{background:var(--bg-track);position:relative}.pub-cursor{filter:drop-shadow(0 1px 2px #00000040);position:absolute;top:55%;right:14px}.pub-menu hr{background:var(--border);border:none;width:100%;height:1px;margin:2px 0}.publish-start-layout{align-items:flex-start;gap:32px;display:flex;& .publish-start{flex:1}@media (width<=899px){flex-direction:column;& .publish-start{flex:none;width:100%}}}.publish-start-mock{flex:none;width:300px;max-width:100%;& .pub{width:100%}}.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}