, icon <link> and the three <script>s of index.html 4-21) 2 \3c style> x-dc{display:none!important} 3 \3c style> .scp0:hover {...} 4 \3c style> FULL_PAGE_CSS 5-9 <link> tokens/fonts, colors, typography, spacing, base 10 <link> styles.css (only @imports 5-9 again) 11 <script> _ds_bundle.js 12 \3c style> helmet block (index.html 33-39) and <body>, after the template and the narrow notice's markup, held 13 \3c style> #mtg-narrow (index.html 620-635), followed only by its <script>. ========================================================================== */ /* --------------------------------------------------------------------------- 1. BASE_CSS (support.js 86-131): only the @media print block survives. The screen rules in BASE_CSS style runtime-only states the rebuild never produces, so they are left out: .sc-placeholder, .sc-placeholder-error loading placeholder for an x-import @keyframes sc-shine, html.sc-dc-streaming ... shimmer while the design tool streamed a template .sc-interp.sc-missing / .sc-unresolved holes in {{ }} while streaming or in the editor .sc-host.sc-has-error, .sc-logic-error the runtime's error-boundary overlay (The plain .sc-interp class itself has NO style. The spans the rebuild renders for {{ }} interpolations carry that class only so the DOM matches.) ------------------------------------------------------------------------- */ @media print { @page { margin: 0.5cm; } figure, table { break-inside: avoid; } /* Comes before the full-page rule in §3 on purpose. Both selectors have the same specificity and the later one wins, so in print #root and .sc-host stay at height:100%. Legacy behaves the same way (checked with print emulation: #dc-root computed height 900px). */ #root, #root > .sc-host { height: auto; } *, *::before, *::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; } } /* --------------------------------------------------------------------------- 2. Pseudo-class sheet (support.js createPseudoSheet 1567-1589). The template's only style-* attribute is style-hover on the start-screen preset buttons (index.html 332). The runtime turned it into the class "scp0" (base-36 counter, first and only entry), added that class to the button, and inserted this rule after importantify() appended !important to every declaration. The rebuild must put className="scp0" on those buttons. ------------------------------------------------------------------------- */ .scp0:hover { border: 1px solid var(--ink) !important; } /* --------------------------------------------------------------------------- 3. FULL_PAGE_CSS (support.js 132). boot() injects it because the page's data-props declare no $preview. ------------------------------------------------------------------------- */ html, body { height: 100%; margin: 0; } #root, #root > .sc-host { height: 100%; } /* --------------------------------------------------------------------------- Omitted runtime CSS (listed for completeness): x-dc{display:none!important} (support.js hideRawTemplate) - there is no <x-dc>. ATOMIC_CSS (.fx, .col, .gap8, ...) only injected for <helmet data-dc-atomics>, which this page does not use. [data-dc-canvas] canvas background only for <meta name="design_doc_mode" content="canvas">, also unused. Nothing else adds stylesheet rules: _ds_bundle.js (Button, Switch, Tabs) and the mtg-*.js modules never create a \3c style> or call insertRule. They only set inline styles (the DS components' style props, and the engine's canvas display/width/height), which belong to those ports, not to this file. ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 4. The app's own rules: legacy/index.html <helmet>\3c style> (lines 33-39), verbatim. In legacy these came after the token <link>s and so override tokens/base.css (body background, a colour). ------------------------------------------------------------------------- */ html, body { margin: 0; height: 100%; overflow: hidden; background: #fff; } a { color: #000; } a:hover { color: #e45c44; } select, input[type=number] { font: inherit; } @media (max-width: 1239px) { [data-hide-narrow] { display: none !important; } } @media print { [data-print-hide] { display: none !important; } [data-print-page] { position: static !important; overflow: visible !important; height: auto !important; } } /* --------------------------------------------------------------------------- 5. Narrow-screen notice: the \3c style> element in <body> after the template, legacy/index.html 620-635, verbatim. It came last in the legacy cascade. Its markup (#mtg-narrow, index.html 609-619) and dismiss script (636-645) sit outside <x-dc>, so they belong in the rebuild's index.html or App, not in the template translation. ------------------------------------------------------------------------- */ #mtg-narrow { display: none; } @media (max-width: 899px) { #mtg-narrow { display: flex; position: fixed; inset: 0; z-index: 9999; background: #fff; align-items: center; justify-content: center; padding: 24px 16px; overflow: auto; font-family: "Suisse Intl", system-ui, sans-serif; color: #000; } #mtg-narrow.mtg-dismissed { display: none; } } .mtg-narrow-card { max-width: 420px; border-top: 3px solid #e45c44; padding-top: 18px; } .mtg-narrow-eyebrow { font-family: "Titling Gothic FB", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px; } .mtg-narrow-card h2 { font-family: "Titling Gothic FB", system-ui, sans-serif; font-weight: 500; font-size: 32px; letter-spacing: -0.01em; margin: 0 0 12px; } .mtg-narrow-card p { font-size: 15px; line-height: 1.5; margin: 0 0 20px; } .mtg-narrow-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } #mtg-narrow-go { height: 40px; padding: 0 18px; border: 0; border-radius: 3px; background: #e45c44; color: #fff; font: 500 14px "Titling Gothic FB", system-ui, sans-serif; cursor: pointer; } #mtg-narrow-go:hover { background: #d44e38; } .mtg-narrow-actions a { font: 14px "Titling Gothic FB", system-ui, sans-serif; color: #000; } @media print { #mtg-narrow { display: none !important; } }

and rendered one

inside it, which held the whole template. The name comes from the URL path: "Root" at /, "index" at /index.html. No CSS reads it. The rebuild mounts React into

, and the App root renders

(see docs/rebuild/template-to-jsx.md §1). So "#dc-root" becomes "#root" below, and ".sc-host" stays the same. IMPORT ORDER: import this file AFTER the five token files (fonts, colors, typography, spacing, base). In legacy the helmet \3c style> came after the design-system s, so "a { color:#000 }" and the html/body background override tokens/base.css. The rules from support.js came before the tokens in legacy. None of them conflict with a token rule, so placing them here gives the same cascade. Measured in legacy (headless Chrome, 13 Oct 2026), held these stylesheets, in this order: 1 \3c style> BASE_CSS (prepended, so it sits before the static , , icon <link> and the three <script>s of index.html 4-21) 2 \3c style> x-dc{display:none!important} 3 \3c style> .scp0:hover {...} 4 \3c style> FULL_PAGE_CSS 5-9 <link> tokens/fonts, colors, typography, spacing, base 10 <link> styles.css (only @imports 5-9 again) 11 <script> _ds_bundle.js 12 \3c style> helmet block (index.html 33-39) and <body>, after the template and the narrow notice's markup, held 13 \3c style> #mtg-narrow (index.html 620-635), followed only by its <script>. ========================================================================== */ /* --------------------------------------------------------------------------- 1. BASE_CSS (support.js 86-131): only the @media print block survives. The screen rules in BASE_CSS style runtime-only states the rebuild never produces, so they are left out: .sc-placeholder, .sc-placeholder-error loading placeholder for an x-import @keyframes sc-shine, html.sc-dc-streaming ... shimmer while the design tool streamed a template .sc-interp.sc-missing / .sc-unresolved holes in {{ }} while streaming or in the editor .sc-host.sc-has-error, .sc-logic-error the runtime's error-boundary overlay (The plain .sc-interp class itself has NO style. The spans the rebuild renders for {{ }} interpolations carry that class only so the DOM matches.) ------------------------------------------------------------------------- */ @media print { @page { margin: 0.5cm; } figure, table { break-inside: avoid; } /* Comes before the full-page rule in §3 on purpose. Both selectors have the same specificity and the later one wins, so in print #root and .sc-host stay at height:100%. Legacy behaves the same way (checked with print emulation: #dc-root computed height 900px). */ #root, #root > .sc-host { height: auto; } *, *::before, *::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; } } /* --------------------------------------------------------------------------- 2. Pseudo-class sheet (support.js createPseudoSheet 1567-1589). The template's only style-* attribute is style-hover on the start-screen preset buttons (index.html 332). The runtime turned it into the class "scp0" (base-36 counter, first and only entry), added that class to the button, and inserted this rule after importantify() appended !important to every declaration. The rebuild must put className="scp0" on those buttons. ------------------------------------------------------------------------- */ .scp0:hover { border: 1px solid var(--ink) !important; } /* --------------------------------------------------------------------------- 3. FULL_PAGE_CSS (support.js 132). boot() injects it because the page's data-props declare no $preview. ------------------------------------------------------------------------- */ html, body { height: 100%; margin: 0; } #root, #root > .sc-host { height: 100%; } /* --------------------------------------------------------------------------- Omitted runtime CSS (listed for completeness): x-dc{display:none!important} (support.js hideRawTemplate) - there is no <x-dc>. ATOMIC_CSS (.fx, .col, .gap8, ...) only injected for <helmet data-dc-atomics>, which this page does not use. [data-dc-canvas] canvas background only for <meta name="design_doc_mode" content="canvas">, also unused. Nothing else adds stylesheet rules: _ds_bundle.js (Button, Switch, Tabs) and the mtg-*.js modules never create a \3c style> or call insertRule. They only set inline styles (the DS components' style props, and the engine's canvas display/width/height), which belong to those ports, not to this file. ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 4. The app's own rules: legacy/index.html <helmet>\3c style> (lines 33-39), verbatim. In legacy these came after the token <link>s and so override tokens/base.css (body background, a colour). ------------------------------------------------------------------------- */ html, body { margin: 0; height: 100%; overflow: hidden; background: #fff; } a { color: #000; } a:hover { color: #e45c44; } select, input[type=number] { font: inherit; } @media (max-width: 1239px) { [data-hide-narrow] { display: none !important; } } @media print { [data-print-hide] { display: none !important; } [data-print-page] { position: static !important; overflow: visible !important; height: auto !important; } } /* --------------------------------------------------------------------------- 5. Narrow-screen notice: the \3c style> element in <body> after the template, legacy/index.html 620-635, verbatim. It came last in the legacy cascade. Its markup (#mtg-narrow, index.html 609-619) and dismiss script (636-645) sit outside <x-dc>, so they belong in the rebuild's index.html or App, not in the template translation. ------------------------------------------------------------------------- */ #mtg-narrow { display: none; } @media (max-width: 899px) { #mtg-narrow { display: flex; position: fixed; inset: 0; z-index: 9999; background: #fff; align-items: center; justify-content: center; padding: 24px 16px; overflow: auto; font-family: "Suisse Intl", system-ui, sans-serif; color: #000; } #mtg-narrow.mtg-dismissed { display: none; } } .mtg-narrow-card { max-width: 420px; border-top: 3px solid #e45c44; padding-top: 18px; } .mtg-narrow-eyebrow { font-family: "Titling Gothic FB", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px; } .mtg-narrow-card h2 { font-family: "Titling Gothic FB", system-ui, sans-serif; font-weight: 500; font-size: 32px; letter-spacing: -0.01em; margin: 0 0 12px; } .mtg-narrow-card p { font-size: 15px; line-height: 1.5; margin: 0 0 20px; } .mtg-narrow-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } #mtg-narrow-go { height: 40px; padding: 0 18px; border: 0; border-radius: 3px; background: #e45c44; color: #fff; font: 500 14px "Titling Gothic FB", system-ui, sans-serif; cursor: pointer; } #mtg-narrow-go:hover { background: #d44e38; } .mtg-narrow-actions a { font: 14px "Titling Gothic FB", system-ui, sans-serif; color: #000; } @media print { #mtg-narrow { display: none !important; } }