1/* The landing page as a 012 screen: the control panel on top, a sheet of2 features, the status line at the bottom. Colors are the roles in3 custom.css. */45.page {6 --cell-pad: 1.4rem;7 /* A flex item of the layout: without these the control panel's8 unwrapped lines would widen it past a phone's screen. */9 width: 100%;10 min-width: 0;11 max-width: 1240px;12 margin: 0 auto;13 padding: 0 1.25rem 4rem;14 font-family: var(--font-sans);15}1617/* ---------- Control panel ---------- */1819.panel {20 font-family: var(--font-mono);21 font-size: 0.95rem;22 margin: 1.5rem 0 0;23 border-bottom: 1px solid var(--role-grid);24}2526.line {27 display: flex;28 align-items: baseline;29 gap: 0.9ch;30 min-height: 2rem;31 padding: 0.25rem 0;32 white-space: nowrap;33 overflow: hidden;34 animation: lineIn 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;35}3637.line1 {38 animation-delay: 60ms;39}4041.line2 {42 animation-delay: 160ms;43}4445.line3 {46 animation-delay: 260ms;47 color: var(--role-muted);48}4950@keyframes lineIn {51 from {52 opacity: 0;53 transform: translateX(-0.6rem);54 }55}5657.addr {58 font-weight: 600;59}6061.entry {62 flex: 1;63 overflow: hidden;64 text-overflow: ellipsis;65}6667.mode {68 font-weight: 600;69 letter-spacing: 0.08em;70 padding: 0 0.6ch;71 background: var(--role-accent-bg);72 color: var(--role-accent-fg);73}7475.menuItem {76 color: var(--term-fg);77 padding: 0 0.6ch;78 margin-right: 1.4ch;79}8081.menuItem:hover,82.menuItem:focus-visible {83 text-decoration: none;84 background: var(--role-accent-bg);85 color: var(--role-accent-fg);86}8788.menuItem u {89 text-underline-offset: 0.2em;90}9192.cursor {93 display: inline-block;94 width: 0.6em;95 height: 1.05em;96 margin-left: 0.3ch;97 vertical-align: -0.15em;98 background: var(--term-fg);99 animation: blink 1.1s steps(1) infinite;100}101102@keyframes blink {103 50% {104 opacity: 0;105 }106}107108/* ---------- Hero ---------- */109110.hero {111 display: grid;112 grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);113 gap: 3rem;114 align-items: center;115 padding: 3.5rem 0 3.5rem;116}117118/* The page's heading, for screen readers and outlines: the logomark119 already names 012 on screen. */120.srOnly {121 position: absolute;122 width: 1px;123 height: 1px;124 overflow: hidden;125 clip-path: inset(50%);126 white-space: nowrap;127}128129.sub {130 font-size: 1.05rem;131 line-height: 1.65;132 color: var(--term-fg);133 opacity: 0.9;134 max-width: 34rem;135}136137.install {138 font-size: 0.78rem;139 padding: 0.8rem 1rem;140 overflow-x: auto;141 margin: 1.6rem 0 1.4rem;142 background: var(--role-panel-bg);143 border: none;144 border-left: 3px solid var(--role-accent-bg);145 white-space: pre;146}147148[data-theme='dark'] .install {149 background: #151617;150}151152.prompt {153 color: var(--role-muted);154 user-select: none;155}156157.actions {158 display: flex;159 flex-wrap: wrap;160 align-items: center;161 gap: 0.8rem 1.4rem;162 font-family: var(--font-mono);163 font-size: 0.95rem;164}165166.action {167 display: inline-flex;168 align-items: center;169 gap: 0.7ch;170 color: var(--term-fg);171 padding: 0.4rem 0.8rem 0.4rem 0.4rem;172 border: 1px solid var(--role-frame);173}174175.action:hover {176 text-decoration: none;177 color: var(--role-accent-fg);178 background: var(--role-accent-bg);179 border-color: var(--role-accent-bg);180}181182.actionPrimary {183 color: var(--role-accent-fg);184 background: var(--role-accent-bg);185 border-color: var(--role-accent-bg);186}187188.actionPrimary:hover {189 filter: brightness(1.08);190}191192.searchHint {193 color: var(--role-muted);194 display: inline-flex;195 align-items: center;196 gap: 0.7ch;197}198199.chip {200 font-family: var(--font-mono);201 font-size: 0.82em;202 font-weight: 500;203 border: none;204 border-radius: 0;205 box-shadow: none;206 padding: 0.05em 0.5ch;207 background: var(--role-header-bg);208 color: var(--role-header-fg);209}210211/* The recording in an overlay frame: light box-drawing lines, a title in212 the top border and a note in the bottom one. */213.frame {214 position: relative;215 margin: 0;216 padding: 0.9rem;217 border: 1px solid var(--role-frame);218 animation: frameIn 700ms 200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;219}220221@keyframes frameIn {222 from {223 opacity: 0;224 clip-path: inset(0 0 100% 0);225 }226 to {227 opacity: 1;228 clip-path: inset(-1rem);229 }230}231232.frame img {233 display: block;234 width: 100%;235 height: auto;236}237238.frameTitle,239.frameCount {240 position: absolute;241 font-family: var(--font-mono);242 font-size: 0.8rem;243 padding: 0 0.8ch;244 background: var(--ifm-background-color);245 line-height: 1;246}247248.frameTitle {249 top: -0.45rem;250 left: 1.2rem;251 font-weight: 600;252}253254.frameCount {255 bottom: -0.45rem;256 right: 1.2rem;257 color: var(--role-muted);258}259260/* ---------- The sheet of features ---------- */261262.sheet {263 display: grid;264 grid-template-columns: 3.2rem repeat(2, minmax(0, 1fr));265 border-top: 1px solid var(--role-grid);266 border-left: 1px solid var(--role-grid);267 font-family: var(--font-mono);268}269270.corner,271.colHeader,272.rowHeader {273 background: var(--role-header-bg);274 color: var(--role-header-fg);275 font-size: 0.85rem;276 display: flex;277 align-items: center;278 justify-content: center;279 border-right: 1px solid var(--ifm-background-color);280 border-bottom: 1px solid var(--ifm-background-color);281}282283.colHeader {284 height: 1.8rem;285}286287.rowHeader {288 align-items: flex-start;289 padding-top: var(--cell-pad);290}291292.headerActive {293 background: var(--role-accent-bg);294 color: var(--role-accent-fg);295 font-weight: 600;296}297298.cell {299 display: flex;300 flex-direction: column;301 gap: 0.6rem;302 padding: var(--cell-pad);303 color: var(--term-fg);304 border-right: 1px solid var(--role-grid);305 border-bottom: 1px solid var(--role-grid);306 transition: background 90ms linear, color 90ms linear;307}308309.cell:hover {310 text-decoration: none;311}312313.cellActive,314.cell:focus-visible {315 outline: none;316 background: var(--role-accent-bg);317 color: var(--role-accent-fg);318}319320.cellEntry {321 font-size: 0.82rem;322 opacity: 0.75;323 white-space: nowrap;324 overflow: hidden;325 text-overflow: ellipsis;326}327328.cellTitle {329 font-size: 1.35rem;330 margin: 0;331 color: inherit;332}333334.cellBody {335 font-family: var(--font-sans);336 font-size: 0.98rem;337 line-height: 1.6;338 margin: 0;339 flex: 1;340}341342.cellGo {343 font-size: 0.85rem;344 font-weight: 500;345}346347/* ---------- Status line ---------- */348349.status {350 display: flex;351 flex-wrap: wrap;352 align-items: center;353 gap: 0.3rem 2ch;354 margin-top: 2.5rem;355 padding: 0.35rem 0.8ch;356 font-family: var(--font-mono);357 font-size: 0.9rem;358 background: var(--role-header-bg);359 color: var(--role-header-fg);360}361362.statusLabel {363 font-weight: 600;364 padding: 0 0.6ch;365 background: var(--role-accent-bg);366 color: var(--role-accent-fg);367}368369.statusItem {370 color: inherit;371}372373.statusItem:hover {374 color: inherit;375 text-decoration: underline;376}377378/* ---------- Narrow screens ---------- */379380@media (max-width: 996px) {381 .hero {382 grid-template-columns: minmax(0, 1fr);383 gap: 2.2rem;384 padding: 2.5rem 0;385 }386}387388@media (max-width: 700px) {389 .page {390 --cell-pad: 1.1rem;391 }392393 .sheet {394 grid-template-columns: 2.4rem minmax(0, 1fr);395 }396397 /* One column: B's header goes, and each cell keeps its address. */398 .colHeader:nth-of-type(3) {399 display: none;400 }401402 .rowHeader {403 grid-row: span 2;404 }405406 .line2,407 .line3 {408 flex-wrap: wrap;409 white-space: normal;410 }411}412413@media (prefers-reduced-motion: reduce) {414 .line,415 .frame {416 animation: none;417 }418419 .cursor {420 animation: none;421 }422}