.artifact-preview { position: relative; width: min(100%, 500px); margin: 12px 0; border: 1px solid #dedfeb; border-radius: 12px; background: #fff; overflow: hidden; }
.artifact-viewport { position: relative; height: 270px; overflow: hidden; pointer-events: none; }
.artifact-canvas { width: 760px; transform-origin: top left; position: absolute; top: 0; left: 0; color: #25203e; background: #fff; }
.artifact-open { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-top: 1px solid #eeebf5; background: #faf9ff; padding: 10px 12px; color: #58428d; text-align: left; font-size: 11px; cursor: zoom-in; }
.artifact-open::before { content: ''; position: absolute; inset: 0; }
.artifact-open:hover { background: #eeebff; }
.artifact-canvas .t1-plan, .artifact-canvas .t2-chart { margin: 0; padding: 20px; border: 0; border-radius: 0; }
.artifact-canvas .t1-plan h2, .artifact-canvas .t2-chart h2 { font-size: 22px; max-width: none; }
.artifact-canvas .t1-plan header p { font-size: 12px; }
.artifact-canvas .t1-plan table { display: table; font-size: 13px; }
.artifact-canvas .t1-plan thead { display: table-header-group; position: static; width: auto; height: auto; clip-path: none; overflow: visible; }
.artifact-canvas .t1-plan tbody { display: table-row-group; }
.artifact-canvas .t1-plan tr { display: table-row; padding: 0; }
.artifact-canvas .t1-plan td, .artifact-canvas .t1-plan th { display: table-cell; padding: 8px 12px; font-size: 13px; font-weight: 400; }
.artifact-canvas .t1-plan td[data-label]::before { content: none; }
.artifact-canvas .t1-deadline { font-size: 12px; padding: 10px; }
.artifact-canvas .t1-deadline > span { display: inline; margin-left: 10px; }
.artifact-canvas .t1-plan-notes { grid-template-columns: 1fr 1fr; }
.artifact-canvas .t1-plan-notes p { font-size: 12px; }
.artifact-canvas .t2-chart-row { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 10px; padding: 3px 0; }
.artifact-canvas .t2-chart-row > strong { font-size: 12px; margin: 0; }
.artifact-canvas .t2-chart-axis { margin-left: 155px; margin-right: 48px; }
.artifact-canvas .t2-bar-line { height: 12px; margin: 2px 0; }
.t1-screen .artifact-viewer { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 20px; border: 0; border-radius: 0; background: #111118; color: #fff; }
.artifact-viewer[open] { display: flex; flex-direction: column; gap: 20px; }
.artifact-viewer::backdrop { background: #111118; }
body:has(.artifact-viewer[open]) { overflow: hidden; }
.artifact-viewer > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; flex-shrink: 0; }
.artifact-viewer > header > div { display: flex; gap: 8px; flex-shrink: 0; }
.artifact-viewer button { padding: 10px 12px; border: 1px solid #55525f; border-radius: 9px; background: #2b2834; color: #fff; font-size: 12px; }
.artifact-stage { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
.artifact-sheet { position: relative; margin: auto; }
@media (max-width: 760px) {
  .t1-screen .artifact-viewer { padding: 12px; }
  .artifact-viewer > header { align-items: flex-start; font-size: 11px; }
  .artifact-viewer button { padding: 9px; font-size: 10px; }
  .shell:has(.t1-marina) { height: 100dvh; min-height: 0; overflow: hidden; }
  .t1-screen.t1-marina { flex: 1; min-height: 0; display: flex; padding: 0; margin: 8px auto max(8px, env(safe-area-inset-bottom)); }
  .t1-screen.t1-marina .t1-chat { flex: 1; height: auto; min-height: 0; }
  .t1-screen.t1-marina .t1-composer { flex-shrink: 0; min-height: 0; padding: 10px; }
  .t1-screen.t1-marina .t1-composer > .button { font-size: 12px; min-height: 44px; }
  .t1-screen.t1-marina .t1-feed { min-height: 0; }
}