@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
[hidden] { display:none !important; }
.symbol-row { align-items: flex-start; }
.symbol-row .field-label { margin: 7px 14px 0 0; flex: none; }
.symbols { flex-wrap: wrap; }
.guide-actions { display:flex; align-items:center; gap:16px; }
#share-design { margin-top:auto; }
.guide-card pre { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.badge-info { width:100%; margin-top:14px; border:1px solid #dfdcd6; border-radius:8px; padding:10px 12px; color:#62645f; font:500 11px 'DM Mono',monospace; }.badge-info summary { cursor:pointer; color:#555753; font:700 11px Manrope,sans-serif; }.badge-info dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; margin:12px 0 0; }.badge-info dt { color:#858783; }.badge-info dd { max-width:170px; margin:0; overflow-wrap:anywhere; text-align:right; color:#343633; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .badge-info { border-color:#41443f; color:#b4b7b0; }:root:not([data-theme]) .badge-info summary,:root:not([data-theme]) .badge-info dd { color:#f1eee8; }:root:not([data-theme]) .badge-info dt { color:#969a92; } } :root[data-theme="dark"] .badge-info { border-color:#41443f; color:#b4b7b0;}:root[data-theme="dark"] .badge-info summary,:root[data-theme="dark"] .badge-info dd { color:#f1eee8;}:root[data-theme="dark"] .badge-info dt { color:#969a92; }
.editor-mode { display:inline-flex; margin-top:22px; padding:3px; border:1px solid #dfdcd6; border-radius:9px; background:#f4f2ed; }
.program-mode { display:inline-flex; margin:0 0 25px; padding:3px; border:1px solid #dfdcd6; border-radius:10px; background:#f4f2ed; }.program-mode-button { border:0; border-radius:7px; padding:8px 13px; background:transparent; color:#70726d; font:700 11px Manrope,sans-serif; cursor:pointer; }.program-mode-button.active { background:#17191a; color:#fff; box-shadow:0 2px 5px #17191a33; }.multi-workspace { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr); gap:19px; }.multi-editor-panel { min-width:0; }.multi-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:22px; }.multi-controls .control { margin:0; }.multi-drawing-badge { margin-top:0; }.multi-grid { position:relative; display:grid; gap:2px; padding:10px; border-radius:6px; background:#17191a; touch-action:none; }.multi-grid-divider { position:absolute; z-index:2; top:10px; bottom:10px; width:12px; transform:translateX(-6px); border-left:1px solid #535651; border-right:1px solid #080909; background:#121414; box-shadow:0 0 0 1px #292c29; pointer-events:none; }.multi-device-list { width:100%; margin:0 0 16px; padding:0; list-style:none; }.multi-device-list li { margin:0 0 7px; padding:8px 9px; border-radius:6px; background:#f4f2ed; color:#666865; font:500 11px 'DM Mono',monospace; }.multi-device-list li.connected { background:#e8f5ed; color:#28754c; }.multi-action-panel #program-multi,.multi-action-panel #restart-multi { margin-top:10px; }
.mode-button { border:0; border-radius:6px; padding:7px 13px; background:transparent; color:#70726d; font:700 11px Manrope,sans-serif; cursor:pointer; }.mode-button.active { background:#ff5632; color:#fff; box-shadow:0 2px 5px #ff563244; }
.drawing-badge { overflow-x:auto; padding:13px; border-radius:12px; background:#27292a; box-shadow:inset 0 0 0 1px #515451; }.drawing-grid { display:grid; grid-template-columns:repeat(44,minmax(7px,1fr)); gap:2px; min-width:410px; padding:10px; border-radius:6px; background:#17191a; touch-action:none; }.led-cell { min-width:0; aspect-ratio:1; border:0; border-radius:2px; background:#3a2520; cursor:crosshair; }.led-cell.is-on { background:#ff5833; box-shadow:0 0 6px #ff4220; }.led-cell:focus-visible { outline:1px solid #fff; outline-offset:1px; }.drawing-actions { display:flex; gap:8px; margin-top:10px; }.drawing-action { flex:1; border:1px solid #d9d7d1; border-radius:7px; padding:8px 10px; background:#fff; color:#555753; font:700 11px Manrope,sans-serif; cursor:pointer; }.drawing-action:hover { border-color:#ff8065; background:#fff0eb; }
.bitmap-controls { margin:18px 0; padding:14px; border:1px solid #dfdcd6; border-radius:10px; background:#fbfaf8; }.bitmap-file { display:inline-flex; align-items:center; border:1px solid #d9d7d1; border-radius:7px; padding:8px 10px; background:#fff; color:#555753; font:700 11px Manrope,sans-serif; cursor:pointer; }.bitmap-file input { position:absolute; width:1px; height:1px; opacity:0; }.bitmap-status { margin:8px 0 12px; color:#70726d; font:500 11px Manrope,sans-serif; }.bitmap-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.bitmap-options .control { margin:0; }.bitmap-invert { display:flex; align-items:center; gap:8px; color:#555753; font:700 11px Manrope,sans-serif; cursor:pointer; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .editor-mode { background:#191b1a; border-color:#41443f; } :root:not([data-theme]) .mode-button { color:#b4b7b0; } :root:not([data-theme]) .drawing-action { background:#242725; border-color:#454844; color:#f1eee8; } }
:root[data-theme="dark"] .editor-mode { background:#191b1a; border-color:#41443f; }:root[data-theme="dark"] .mode-button { color:#b4b7b0; }:root[data-theme="dark"] .mode-button.active { color:#fff; }:root[data-theme="dark"] .drawing-action { background:#242725; border-color:#454844; color:#f1eee8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .program-mode { background:#191b1a; border-color:#41443f; }:root:not([data-theme]) .program-mode-button { color:#b4b7b0; }:root:not([data-theme]) .multi-device-list li { background:#191b1a; color:#b4b7b0; }:root:not([data-theme]) .multi-device-list li.connected { background:#21382a; color:#aee2c1; } } :root[data-theme="dark"] .program-mode { background:#191b1a; border-color:#41443f; }:root[data-theme="dark"] .program-mode-button { color:#b4b7b0;}:root[data-theme="dark"] .multi-device-list li { background:#191b1a; color:#b4b7b0;}:root[data-theme="dark"] .multi-device-list li.connected { background:#21382a; color:#aee2c1; }
@media(max-width:760px) { .multi-workspace { grid-template-columns:1fr; gap:19px; }.multi-controls { gap:14px; }.program-mode { margin-bottom:18px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .bitmap-controls { background:#202321; border-color:#41443f; }:root:not([data-theme]) .bitmap-file { background:#242725; border-color:#454844; color:#f1eee8; }:root:not([data-theme]) .bitmap-status,:root:not([data-theme]) .bitmap-invert { color:#b4b7b0; } } :root[data-theme="dark"] .bitmap-controls { background:#202321; border-color:#41443f; }:root[data-theme="dark"] .bitmap-file { background:#242725; border-color:#454844; color:#f1eee8;}:root[data-theme="dark"] .bitmap-status,:root[data-theme="dark"] .bitmap-invert { color:#b4b7b0; } @media(max-width:640px) { .bitmap-options { grid-template-columns:1fr; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .guide-nav a { color:#b4b7b0; } :root:not([data-theme]) .guide-page p,:root:not([data-theme]) .guide-page li { color:#b4b7b0; } :root:not([data-theme]) .guide-page code { background:#2a2d2b; color:#f3f0ea; } :root:not([data-theme]) .guide-note { background:#392820; color:#ffd3c8; } :root:not([data-theme]) .guide-footer { border-color:#3a3d39; color:#969a92; } }
:root[data-theme="dark"] .guide-nav a { color:#b4b7b0; }:root[data-theme="dark"] .guide-page p,:root[data-theme="dark"] .guide-page li { color:#b4b7b0; }:root[data-theme="dark"] .guide-page code { background:#2a2d2b; color:#f3f0ea; }:root[data-theme="dark"] .guide-note { background:#392820; color:#ffd3c8; }:root[data-theme="dark"] .guide-footer { border-color:#3a3d39; color:#969a92; }
.switch-group { grid-column: 1 / -1; margin-top: 4px; }
.switch-group-title { display: block; margin-bottom: 8px; color: #71736f; font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.switch-row { display: flex; overflow: hidden; border: 1px solid #e1ded8; border-radius: 9px; background: #fbfaf8; }
.switch-row .switch-control { flex: 1; justify-content: center; margin: 0; padding: 10px 12px; transition: background .2s, color .2s; }
.switch-row .switch-control + .switch-control { border-left: 1px solid #e1ded8; }
.switch-label { display: inline-flex; align-items: center; gap: 6px; }
.switch-label b { color: #ff5632; font-size: 12px; line-height: 1; text-shadow: 0 0 6px #ff563255; }
.switch-row .switch-control:has(input:checked) { background: #fff0eb; color: #c74326; }
.switch-row .switch-control:has(input:checked) .switch-label b { color: #e94322; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .switch-group-title { color: #969a92; } :root:not([data-theme]) .switch-row { background: #191b1a; border-color: #41443f; } :root:not([data-theme]) .switch-row .switch-control + .switch-control { border-color: #41443f; } :root:not([data-theme]) .switch-row .switch-control:has(input:checked) { background: #48271f; color: #ffd3c8; } }
:root[data-theme="dark"] .switch-group-title { color: #969a92; }:root[data-theme="dark"] .switch-row { background: #191b1a; border-color: #41443f; }:root[data-theme="dark"] .switch-row .switch-control + .switch-control { border-color: #41443f; }:root[data-theme="dark"] .switch-row .switch-control:has(input:checked) { background: #48271f; color: #ffd3c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .switch { background:#4a4d48; }:root:not([data-theme]) .switch:after { background:#c7cac3; } } :root[data-theme="dark"] .switch { background:#4a4d48;}:root[data-theme="dark"] .switch:after { background:#c7cac3; }
.guide-page { max-width:850px; margin:0 auto; padding:28px 38px 48px; }.guide-header { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:64px; }.guide-header a { color:inherit; text-decoration:none; }.guide-brand { font-weight:800; letter-spacing:-.6px; }.guide-nav { display:flex; flex-wrap:wrap; gap:12px; font:500 11px 'DM Mono',monospace; }.guide-nav a { color:#686a66; }.guide-nav a:hover { color:#ff5632; }.guide-page h1 { max-width:720px; font-size:clamp(42px,7vw,64px); }.guide-intro { max-width:690px; margin:20px 0 38px; color:#626561; font-size:17px; line-height:1.65; }.guide-page h2 { margin-top:36px; }.guide-page p,.guide-page li { color:#5f625e; line-height:1.7; }.guide-page ul,.guide-page ol { padding-left:22px; }.guide-page code { padding:2px 5px; border-radius:4px; background:#ece9e2; font:12px 'DM Mono',monospace; }.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.guide-card { padding:21px; }.guide-card h2 { margin-top:0; font-size:19px; }.guide-cta { display:inline-flex; margin-top:16px; padding:12px 15px; border-radius:8px; background:#ff5632; color:#fff !important; font-weight:700; text-decoration:none; }.guide-cta:hover { background:#e94322; }.guide-note { margin-top:28px; padding:16px 18px; border-left:3px solid #ff5632; background:#fff6f2; border-radius:0 8px 8px 0; }.guide-footer { margin-top:48px; padding-top:22px; border-top:1px solid #dfdcd6; font:11px 'DM Mono',monospace; color:#777a75; }@media(max-width:640px) { .guide-page{padding:22px 18px 38px}.guide-header{align-items:flex-start;flex-direction:column;margin-bottom:44px}.guide-grid{grid-template-columns:1fr} }
.brand-tld { color:#ff5632; }
.utility-button { border:1px solid #d8d5ce; border-radius:999px; padding:6px 9px; background:#fff; color:#62645f; font:500 10px 'DM Mono',monospace; cursor:pointer; }.utility-button:disabled { opacity:.5; cursor:not-allowed; }
.visitor-counter { display:flex; align-items:center; gap:6px; padding:4px 6px; border:1px solid #565a57; border-radius:6px; background:#202321; color:#a6ada8; font:500 8px 'DM Mono',monospace; letter-spacing:.08em; }.visitor-counter output { min-width:5.4em; padding:2px 4px; border-radius:3px; background:#090b0a; color:#ff5632; font:500 11px 'DM Mono',monospace; letter-spacing:.13em; text-shadow:0 0 6px #ff5632; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .utility-button { background:#252826; border-color:#484b46; color:#d1d3cd; } }
:root[data-theme="dark"] .utility-button { background:#252826; border-color:#484b46; color:#d1d3cd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .bottom-tabs { background:#202322; border-color:#3a3d39; box-shadow:none; } :root:not([data-theme]) .tab-button { color:#b4b7b0; } :root:not([data-theme]) .tab-button:hover:not(.active) { background:#2b2e2b; color:#f3f0ea; } }
:root[data-theme="dark"] .bottom-tabs { background:#202322; border-color:#3a3d39; box-shadow:none; }:root[data-theme="dark"] .tab-button { color:#b4b7b0; }:root[data-theme="dark"] .tab-button:hover:not(.active) { background:#2b2e2b; color:#f3f0ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .primary:disabled { background:#343735; color:#777b75; } }
:root[data-theme="dark"] .primary:disabled { background:#343735; color:#777b75; }
.tab-panel[hidden] { display: none; }
.action-panel .secondary + .secondary { margin-top: 8px; }
.bottom-tabs { display:flex; justify-content:center; gap:8px; margin:32px auto 0; padding:6px; width:max-content; max-width:100%; border:1px solid #dcd9d2; border-radius:12px; background:#fff; box-shadow:0 8px 18px #514a3b0d; }
.tab-button { border:0; border-radius:8px; padding:9px 15px; background:transparent; color:#6b6d68; font:700 12px Manrope,sans-serif; cursor:pointer; }.tab-button.active { background:#ff5632; color:#fff; }.tab-button:hover:not(.active) { background:#f2f0eb; color:#232422; }
.info-page { padding:30px 0 0; min-height:500px; }.info-page > h1 { margin-bottom:30px; }.info-grid { display:grid; grid-template-columns:1.4fr .75fr; gap:19px; }.info-card { min-height:300px; }.info-card p,.info-card li { color:#656763; font-size:13px; line-height:1.65; }.info-card ul { margin:19px 0; padding-left:19px; }.info-card pre { overflow:auto; padding:16px; border-radius:8px; background:#181a1a; color:#e3e0d8; font:11px/1.55 'DM Mono',monospace; }.info-card .note { color:#8a8c87; font-family:'DM Mono',monospace; font-size:11px; }.matrix-card { overflow:auto; padding:8px; }.matrix-card table { width:100%; border-collapse:collapse; font-size:14px; }.matrix-card th,.matrix-card td { padding:19px; border-bottom:1px solid #e5e2dc; text-align:left; }.matrix-card thead th { color:#72746f; font:500 11px 'DM Mono',monospace; letter-spacing:.04em; }.matrix-card tbody th { font-family:'DM Mono',monospace; }.status-yes { display:inline-block; padding:4px 9px; border-radius:999px; background:#d9f1e3; color:#167344; font:700 11px 'DM Mono',monospace; }
.sitemap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px; }.sitemap-link { position:relative; min-height:180px; color:inherit; text-decoration:none; transition:transform .2s,border-color .2s,box-shadow .2s; }.sitemap-link:hover { transform:translateY(-2px); border-color:#ff8065; box-shadow:0 12px 24px #514a3b14; }.sitemap-link h2 { max-width:250px; margin:4px 0 10px; }.sitemap-link p { max-width:310px; margin:0; color:#656763; font-size:13px; line-height:1.65; }.sitemap-arrow { position:absolute; right:22px; bottom:19px; color:#ff5632; font:700 20px 'DM Mono',monospace; }.sitemap-grid > :last-child { grid-column:1 / -1; }@media(max-width:640px) { .sitemap-grid{grid-template-columns:1fr}.sitemap-grid > :last-child{grid-column:auto} }@media (prefers-color-scheme: dark) { :root:not([data-theme]) .sitemap-link p { color:#b4b7b0; } }:root[data-theme="dark"] .sitemap-link p { color:#b4b7b0; }
:root { color-scheme: light dark; }
.header-actions { display:flex; align-items:center; gap:15px; }
.theme-toggle { display:flex; align-items:center; gap:2px; width:52px; height:28px; padding:3px; border:1px solid #d8d5ce; border-radius:999px; background:#fff; color:#676964; cursor:pointer; }
.theme-toggle span { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:13px; line-height:1; }.theme-toggle span:first-child { background:#ff5632; color:#fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) body { background:#171918; color:#f3f0ea; } :root:not([data-theme]) .panel { background:#202322; border-color:#3a3d39; box-shadow:none; } :root:not([data-theme]) .subhead,:root:not([data-theme]) .device-copy { color:#b4b7b0; } :root:not([data-theme]) .eyebrow,:root:not([data-theme]) .field-label,:root:not([data-theme]) .count,:root:not([data-theme]) .hint,:root:not([data-theme]) footer { color:#969a92; } :root:not([data-theme]) textarea,:root:not([data-theme]) select { background:#191b1a; border-color:#41443f; color:#f3f0ea; } :root:not([data-theme]) .symbols button,:root:not([data-theme]) .secondary { background:#242725; border-color:#454844; color:#f1eee8; } :root:not([data-theme]) .control span,:root:not([data-theme]) .switch-control,:root:not([data-theme]) footer a { color:#c7c9c3; } :root:not([data-theme]) .control b { color:#fff; } :root:not([data-theme]) .theme-toggle { background:#252826; border-color:#484b46; color:#d1d3cd; } :root:not([data-theme]) .theme-toggle span:first-child { background:transparent; color:inherit; } :root:not([data-theme]) .theme-toggle span:last-child { background:#ff5632; color:#fff; } }
:root[data-theme="dark"] body { background:#171918; color:#f3f0ea; } :root[data-theme="dark"] .panel { background:#202322; border-color:#3a3d39; box-shadow:none; } :root[data-theme="dark"] .subhead,:root[data-theme="dark"] .device-copy { color:#b4b7b0; } :root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .field-label,:root[data-theme="dark"] .count,:root[data-theme="dark"] .hint,:root[data-theme="dark"] footer { color:#969a92; } :root[data-theme="dark"] textarea,:root[data-theme="dark"] select { background:#191b1a; border-color:#41443f; color:#f3f0ea; } :root[data-theme="dark"] .symbols button,:root[data-theme="dark"] .secondary { background:#242725; border-color:#454844; color:#f1eee8; } :root[data-theme="dark"] .control span,:root[data-theme="dark"] .switch-control,:root[data-theme="dark"] footer a { color:#c7c9c3; } :root[data-theme="dark"] .control b { color:#fff; } :root[data-theme="dark"] .theme-toggle { background:#252826; border-color:#484b46; color:#d1d3cd; } :root[data-theme="dark"] .theme-toggle span:first-child { background:transparent; color:inherit; } :root[data-theme="dark"] .theme-toggle span:last-child { background:#ff5632; color:#fff; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html .badge-case { position: static; aspect-ratio: auto; padding: 12px; background: #27292a; border-radius: 14px; box-shadow: 0 24px 32px #36343132; transform: perspective(900px) rotateX(359deg) rotateZ(3deg) rotateY(358deg); transform-origin: center; }
html .badge-case canvas { position: static; z-index: auto; width: 100%; height: auto; display: block; border-radius: 8px; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: #f0eee9; color: #161719; font-family: Manrope, sans-serif; } .app-shell { max-width: 1180px; margin: auto; padding: 25px 38px 28px; } header, footer, .panel-heading, .symbol-row { display:flex; align-items:center; justify-content:space-between; } header { padding-bottom: 52px; } .brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.6px; } .brand-mark { display:grid; place-items:center; width:26px; height:26px; background:#ff5632; color:#fff; border-radius:8px; } .device-state, footer, .eyebrow, .field-label, .hint { font-family:'DM Mono', monospace; font-size:11px; letter-spacing:.04em; } .device-state { color:#626463; display:flex; gap:8px; align-items:center; } .dot { width:7px; height:7px; border-radius:50%; background:#adaeaa; }.dot.connected { background:#39a96b; box-shadow:0 0 0 4px #cde9d8; } .hero { display:grid; grid-template-columns: .95fr 1.05fr; gap:70px; align-items:center; margin-bottom:54px; }.eyebrow { margin:0 0 10px; color:#797a76; font-weight:500; }h1 { margin:0; font-size: clamp(43px, 5.3vw, 69px); line-height:1.02; letter-spacing:-.065em; }.subhead { max-width:430px; margin:21px 0 0; color:#646663; line-height:1.6; font-size:15px; }.badge-case { position:relative; aspect-ratio:2.76; transform:rotate(-2deg); }.badge-case canvas { position:absolute; z-index:1; left:7.4%; top:20%; width:85.2%; height:60%; display:block; border-radius:4px; }.badge-frame { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; }.workspace { display:grid; grid-template-columns:1.5fr .8fr; gap:19px; }.panel { background:#fff; border:1px solid #dfdcd6; border-radius:14px; padding:27px; box-shadow:0 8px 18px #514a3b08; }h2 { margin:0; font-size:22px; letter-spacing:-.05em; }.count { color:#8b8d89; font-family:'DM Mono',monospace; font-size:11px; }.field-label { display:block; color:#71736f; margin:24px 0 8px; }textarea, select { width:100%; border:1px solid #dedbd5; background:#fbfaf8; border-radius:8px; padding:13px; font:500 16px/1.4 Manrope,sans-serif; color:#18191a; outline-color:#ff5632; }textarea { resize:vertical; min-height:80px; }.symbol-row { margin-top:16px; align-items:center; }.symbol-row .field-label { margin:0; }.symbols { display:flex; gap:7px; }.symbols button { border:1px solid #e1ded8; border-radius:6px; background:#fff; width:30px; height:29px; cursor:pointer; font-size:15px; }.symbols button:hover { background:#fff0eb; border-color:#ff8065; }.controls-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }.control span { display:flex; justify-content:space-between; color:#666865; font-size:12px; margin-bottom:8px; }.control b { color:#222; font-family:'DM Mono',monospace; }.control input { accent-color:#ff5632; width:100%; }.switch-control { display:flex; align-items:center; gap:9px; margin-top:27px; color:#555753; font-size:13px; cursor:pointer; }.switch-control input { display:none; }.switch { width:31px; height:18px; padding:2px; border-radius:99px; background:#d6d5d1; transition:.2s; }.switch:after { content:''; display:block; width:14px; height:14px; background:#fff; border-radius:50%; transition:.2s; }.switch-control input:checked + .switch { background:#ff5632; }.switch-control input:checked + .switch:after { transform:translateX(13px); }.action-panel { display:flex; flex-direction:column; align-items:flex-start; }.device-copy { color:#666864; font-size:13px; line-height:1.6; margin:14px 0 24px; }.primary,.secondary { width:100%; padding:13px 15px; border-radius:8px; font:700 13px Manrope,sans-serif; cursor:pointer; }.primary { margin-top:10px; border:0; background:#ff5632; color:#fff; display:flex; justify-content:space-between; }.primary:hover { background:#e94322; }.primary:disabled { cursor:not-allowed; background:#deddd9; color:#94938f; }.secondary { border:1px solid #d9d7d1; background:#fff; color:#252625; }.secondary:disabled { opacity:.65; }.hint { color:#898b87; line-height:1.5; margin:18px 0 0; }footer { margin-top:29px; color:#7b7c78; }footer a { color:#40413e; }@media(max-width:760px) { .app-shell{padding:22px 18px}.hero,.workspace{grid-template-columns:1fr;gap:27px}header{padding-bottom:35px}.hero{margin-bottom:35px}.badge-case{order:-1}.controls-grid{gap:14px}.symbols{gap:4px}.symbols button{width:27px}footer{gap:10px;align-items:flex-start;flex-direction:column;} }