/* THE MADAV UNIVERSITY SHEET - one governing design for every University page (owner, 2026-09-22: "one core central rule that every page has to follow and respect: the existing page as well as the future new pages to be added"). GENERATED from docs/core/UNIVERSITY-DESIGN-BOOK.md by docs/work/2026-09-13-ai-sdlc-story/ university-design-sheet.py. Do not edit this file: edit the book, or the step. Every number below is the book's, declared once as a token; the rules read the tokens and never a number. The house tokens come from ../_house-tokens.css, which the page links first; this sheet is the only other thing it links. The house block at its head is the page's own dress moved whole (wave 5, 2026-09-24); the book's rules follow it, so where a house rule and a book rule meet at the same weight the book's wins, as it did when that dress stood on the page. ====================================================================================== */ /* ---- THE HOUSE AND THE CHROME, restated once (Part A; wave 5, 2026-09-24). What the page's own style block and the story's sheet still held after every tile, drawing and words block had left them: the frame, the map and the rail, the top bar and the face switch, the footer, the buttons, the chips, the tables, the code windows, the two pop-ups, the entrance, the light-face lines. Moved here VERBATIM by one-design-house.py - the story's sheet first and the page's block second, the order they were linked in - so every rule keeps its place in the cascade; his word of 2026-09-24: "our objective was change font, not design behaviour". The book's own rules follow this block and win a tie, as they did when this dress stood on the page. Nothing in this block is the book's to change: a house object changes in the app's design book, and this block follows it. ---- */ /* ---- the story's sheet, whole ---- */ /* =================================================================== THE AI SDLC STORY DRESS. Page-only layout for the Spindle story, spoken entirely in house tokens. Every class here is prefixed sd- so the block can be lifted into university/index.html beside the journey dress without touching a shared object. No --uni-* is declared here. =================================================================== */ /* THE LIGHT FACE READS AS THE APPLICATION'S: white surfaces on the app canvas, the warm cream only in recessed wells. The University's own light holding values are re-bound to the house tokens here - no new name, only where each one points. */ /* the spine: a file name may ride beside a stage label */ #sdlc-view .sd-spine-file { display:block; margin-top:var(--at-s1); color:var(--at-tx-3); font:var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); } #sdlc-view .spine-link[aria-current="location"] .sd-spine-file { color:var(--accent-text); } @media (max-width:900px) { #sdlc-view .sd-spine-file { display:none; } } /* the figure wrappers: the loop and the architecture wear the lesson figure */ /* the loop: six house tiles on one track, the committed file riding each wire; who plays a role sits on the tile */ :is(#sdlc-view, #campus-home .lv-rec) .sd-face { display:grid; place-items:center; width:var(--icon-md); height:var(--icon-md); border-radius:50%; border:1px solid var(--at-line-2); background:var(--at-canvas-2); box-shadow:var(--emboss-rest); } :is(#sdlc-view, #campus-home .lv-rec) .sd-face svg { width:var(--at-s3); height:var(--at-s3); fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } :is(#sdlc-view, #campus-home .lv-rec) .sd-face.is-person { color:var(--accent-text); background:rgba(var(--accent-rgb), .14); border-color:rgba(var(--accent-rgb), .45); } :is(#sdlc-view, #campus-home .lv-rec) .sd-face.is-agent { color:#D97757; background:color-mix(in srgb, #D97757 16%, transparent); border-color:color-mix(in srgb, #D97757 50%, transparent); } /* the checks wear a green tick and a trigger an amber bolt (owner 2026-09-14, "make these icons coloured", "update in cast also", "Tick green, bolt amber") - the recipe a person's and Claude's faces wear: the icon in the colour, a faint wash, a ring */ #sdlc-view :is(.sd-face, .sd-tile-face).is-check, #sdlc-view .sd-cast-card.is-machine .sd-cast-face, #concepts .aif :is(.sd-face, .sd-tile-face).is-check { color:var(--at-ok); background:color-mix(in srgb, var(--at-ok) 14%, transparent); border-color:color-mix(in srgb, var(--at-ok) 45%, transparent); } /* the cast: read-only teaching cards on the tile rhythm, one dot per kind */ /* a stage: the story beside its card of record */ #sdlc-view .sd-who { display:flex; flex-wrap:wrap; gap:var(--at-s1); } #sdlc-view .sd-who .habit i { content:""; width:var(--at-s2); height:var(--at-s2); border-radius:50%; background:var(--accent); flex:0 0 auto; } #sdlc-view .sd-who .is-agent i { background:#D97757; } #sdlc-view .sd-who .is-machine i { background:var(--at-ok); } /* the flow: a fixed drawing - three lanes, tiles, accent arrows - spoken in the house's --at-* tokens */ :is(#sdlc-view, #campus-home .om) .sd-map-path, :is(#concepts .aif, #campus-home .om) .sd-map-path { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:butt; stroke-linejoin:round; } :is(#sdlc-view, #campus-home .om) .sd-map-arrowhead, :is(#concepts .aif, #campus-home .om) .sd-map-arrowhead { fill:var(--accent); } :is(#sdlc-view, #campus-home .om) .sd-map-label, :is(#concepts .aif, #campus-home .om) .sd-map-label { position:absolute; z-index:4; transform:translate(-50%, -50%); padding:var(--at-s1) var(--at-s3); border:1px solid rgba(var(--accent-rgb), .52); border-radius:var(--at-r1); color:var(--at-tx); background:var(--at-panel); font:var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-read); white-space:nowrap; pointer-events:none; } /* the face: round, one hairline, the identity colour faint behind the drawing (the avatar law) */ :is(#sdlc-view, #campus-home .om) .sd-tile-face, :is(#concepts .aif, #campus-home .om) .sd-tile-face { display:grid; flex:0 0 auto; place-items:center; width:var(--at-s6); height:var(--at-s6); border-radius:50%; border:1px solid var(--at-line-2); background:var(--at-canvas-2); box-shadow:var(--emboss-rest); } :is(#sdlc-view, #campus-home .om) .sd-tile-face svg, :is(#concepts .aif, #campus-home .om) .sd-tile-face svg { width:var(--icon-md); height:var(--icon-md); fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } :is(#sdlc-view, #campus-home .om) .sd-tile-face.is-person, :is(#concepts .aif, #campus-home .om) .sd-tile-face.is-person { color:var(--accent-text); background:rgba(var(--accent-rgb), .14); border-color:rgba(var(--accent-rgb), .45); } :is(#sdlc-view, #campus-home .om) .sd-tile-face.is-agent, :is(#concepts .aif, #campus-home .om) .sd-tile-face.is-agent { color:#D97757; background:color-mix(in srgb, #D97757 16%, transparent); border-color:color-mix(in srgb, #D97757 50%, transparent); } /* before and now: two cards, the AI-native one wholly accent */ /* what gets written down: one panel, a sliding tab track, the file in the brief dress */ #sdlc-view .sd-files { min-width:0; border:1px solid var(--at-line-2); border-radius:var(--at-r1); background:var(--at-panel); box-shadow:var(--emboss-rest); overflow:hidden; } #sdlc-view .sd-files-title { padding:var(--at-s4) var(--at-s5) 0; } #sdlc-view .sd-files-title h3 { font:var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing:var(--tr-head); } #sdlc-view .sd-files-title small { display:block; margin-top:var(--at-s1); color:var(--at-tx-3); font-size:var(--at-fs-tiny); line-height:var(--lh-body); } #sdlc-view .sd-tabs { position:relative; display:flex; gap:var(--at-s1); margin-top:var(--at-s3); padding:0 var(--at-s3); border-bottom:1px solid var(--at-line); overflow-x:auto; scrollbar-width:none; } #sdlc-view .sd-tabs::-webkit-scrollbar { display:none; } #sdlc-view .sd-tabs [role="tab"] { flex:0 0 auto; padding:var(--at-s3) var(--at-s3); border:0; background:transparent; color:var(--at-tx-2); cursor:pointer; white-space:nowrap; font:var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); border-radius:var(--at-r1) var(--at-r1) 0 0; transition:color var(--at-d1) var(--at-ease), background var(--at-d1) var(--at-ease); } #sdlc-view .sd-tabs [role="tab"]:hover { color:var(--at-tx); background:var(--at-panel); } #sdlc-view .sd-tabs [role="tab"][aria-selected="true"] { color:var(--at-tx); } #sdlc-view .sd-tab-track { position:absolute; left:0; bottom:var(--at-s1); height:var(--at-s1); width:var(--sd-track-w, 0px); transform:translateX(var(--sd-track-x, 0px)); border-radius:var(--at-r1); background:var(--accent); transition:transform var(--at-d2) var(--at-ease), width var(--at-d2) var(--at-ease); } #sdlc-view .sd-panel { display:none; } #sdlc-view .sd-panel.is-open { display:block; } /* how you know it worked: an early sign and a later sign */ #sdlc-view .sd-measure .step p code, #sdlc-view .sd-compare .step p code, #sdlc-view .sd-summary code { font-family:var(--at-mono); color:var(--at-tx); font-weight:var(--fw-ui); } /* the glossary term and its floating note */ #sdlc-view .term { font:inherit; background:none; border:0; padding:0; margin:0; color:inherit; cursor:help; text-align:left; border-bottom:1px dotted var(--at-az-line); border-radius:0; transition:background var(--at-d1) var(--at-ease); } #sdlc-view .term:hover, #sdlc-view .term:focus-visible, #sdlc-view .term.is-on { background:var(--at-az-w); border-bottom-style:solid; } #sdlc-view .sd-tip, #concepts .aif .sd-tip { position:fixed; z-index:var(--z-tooltip); max-width:330px; padding:var(--at-s3) var(--at-s4); border:1px solid var(--at-line-2); border-radius:var(--at-r1); background:var(--at-panel); color:var(--at-tx-1); box-shadow:var(--at-shadow-deep); font:var(--fw-body) var(--at-fs-tiny)/var(--lh-body) var(--at-read); opacity:0; pointer-events:none; transform:translateY(-2px); transition:opacity var(--at-d1) var(--at-ease), transform var(--at-d1) var(--at-ease); } #sdlc-view .sd-tip.is-open, #concepts .aif .sd-tip.is-open { opacity:1; pointer-events:auto; transform:none; } #sdlc-view .sd-tip b, #concepts .aif .sd-tip b { display:block; margin-bottom:var(--at-s1); color:var(--accent-text); font:var(--fw-ui) var(--at-fs-body)/var(--lh-prose) var(--at-disp); } /* what actually changed: the one table skin, then two lists */ #sdlc-view .sd-summary-wrap { overflow-x:auto; border:1px solid var(--at-line-2); border-radius:var(--at-r1); background:var(--at-panel); box-shadow:var(--emboss-rest); } #sdlc-view .sd-summary { width: 100%; border-collapse: collapse; } #sdlc-view .sd-summary th { position: sticky; top: 0; text-align: left; color: var(--at-tx-2); background: var(--at-panel); border-bottom: 1px solid var(--at-line-2); } #sdlc-view .sd-summary td { vertical-align: top; color: var(--at-tx-1); border-bottom: 1px solid var(--at-line); border-left: 1px solid var(--at-line); } #sdlc-view .sd-summary td:first-child, #sdlc-view .sd-summary th:first-child { border-left:0; } #sdlc-view .sd-summary th + th { border-left:1px solid var(--at-line); } #sdlc-view .sd-summary tr:last-child td { border-bottom:0; } #sdlc-view .sd-summary td:first-child { color: var(--at-tx); white-space: nowrap; } #sdlc-view .sd-summary tbody tr:hover td { background:var(--at-row-hover); } #sdlc-view .sd-twocol .proofs div code { font-family:var(--at-mono); color:var(--at-tx); font-weight:var(--fw-ui); } /* the plain-English glossary: read-only tiles */ @media (max-width:900px) { #sdlc-view .sd-summary td:first-child { white-space:normal; } } @media (prefers-reduced-motion: reduce) { #sdlc-view .sd-tile, #sdlc-view .sd-map-path, #sdlc-view .sd-map-label, #sdlc-view .sd-tip, #sdlc-view .sd-tab-track, #sdlc-view .sd-loop .lp-station rect, #concepts .aif .sd-tile, #concepts .aif .sd-map-path, #concepts .aif .sd-map-label, #concepts .aif .sd-tip { transition:none !important; animation:none !important; } } /* =================================================================== THE HOUSE, NOT THE UNIVERSITY'S HOLDING VALUES (owner instruction 2026-09-13: align the page to the Madav House Theme design book - tiles, boxes, spacing, fonts and sizes, buttons). First the University's --uni-* names are re-pointed at the house tokens, so one edit moves the whole page the way it moves the application; then each object wears its book recipe: 2.1 button, 2.2 tile, 2.6 chip, 2.7 panel and card, 2.26 spacing, 3.1 page, 3.2 text. No new name is declared; every number below is a token. =================================================================== */ /* 3.2 text - the reading voice for anything you read, the display voice for anything that labels */ #sdlc-view body:before { display: none; } #sdlc-view h3, #sdlc-view h4, #sdlc-view .sd-flow-head h3, #sdlc-view .sd-files-title h3, #sdlc-view .sd-twocol h3, #concepts .aif .sd-flow-head h3 { font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); } #sdlc-view code, #sdlc-view .sd-summary code, #sdlc-view .sd-compare .step p code, #sdlc-view .sd-measure .step p code, #sdlc-view .sd-twocol .proofs div code { font-family: var(--at-mono); font-size: var(--at-fs-tiny); color: var(--at-tx); font-weight: var(--fw-ui); } #sdlc-view > .layout > div { padding-top: calc(var(--at-s3) + var(--page-head-gap)); } /* 2.7 panel and card - one hairline, the panel fill, the flat surface at rest, 12 inside */ #sdlc-view .sd-files, #sdlc-view .sd-summary-wrap { border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--surface-rest); transition: transform var(--at-d2) var(--at-ease), border-color var(--at-d2) var(--at-ease), box-shadow var(--at-d2) var(--at-ease), background var(--at-d2) var(--at-ease); } html[data-lum="light"] #sdlc-view .sd-files, html[data-lum="light"] #sdlc-view .sd-summary-wrap { background: var(--at-panel); } #sdlc-view .lesson-figure figcaption { margin:var(--card-gap) auto 0; font: var(--fw-body) var(--at-fs-tiny)/var(--lh-body) var(--at-read); color: var(--at-tx-3); } #sdlc-view .lesson-example p { margin:var(--at-s1) 0 0; font: var(--fw-body) var(--at-fs-body)/var(--lh-body) var(--at-read); color: var(--at-tx-1); } #sdlc-view .sd-files-title { padding: var(--card-pad); padding-bottom: 0; } #sdlc-view .sd-files-title small { margin-top: var(--at-s1); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-body) var(--at-read); color: var(--at-tx-3); } #sdlc-view .sd-tabs { margin-top: var(--at-s3); padding:0 var(--at-s2); border-bottom-color: var(--at-line); } #sdlc-view .sd-tabs [role="tab"] { padding:var(--at-s2) var(--at-s3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); border-radius: var(--at-r1) var(--at-r1) 0 0; } /* 2.2 tile - the tile padding, one hairline, the plate, the emboss; rises on hover, name in the display voice */ html[data-lum="light"] #sdlc-view .sd-loop .lp-file, html[data-lum="light"] :is(#sdlc-view, #campus-home .om) .sd-map-label, html[data-lum="light"] :is(#sdlc-view, #campus-home .om) .sd-tile-face, html[data-lum="light"] :is(#sdlc-view, #campus-home .lv-rec) .sd-face, html[data-lum="light"] :is(#concepts .aif, #campus-home .om) .sd-map-label, html[data-lum="light"] :is(#concepts .aif, #campus-home .om) .sd-tile-face { background-color: var(--at-panel); } :is(#sdlc-view, #campus-home .om) .sd-map-label, :is(#concepts .aif, #campus-home .om) .sd-map-label { padding:var(--at-s1) var(--at-s3); border-color: var(--at-line-2); border-radius: var(--at-r1); color: var(--at-tx-1); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-disp); box-shadow: none; } #sdlc-view .sd-tab-track { background: var(--at-az); } #sdlc-view .habit b { font-weight: var(--fw-ui); color: var(--at-tx-1); } #sdlc-view .sd-who { gap: var(--at-s2); } /* the island rail wears the panel: one corner, one hairline, the panel lift */ #sdlc-view .sd-spine-file { font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); } /* the term and its floating note follow 2.13 - panel, hairline, the deep shadow, one corner */ #sdlc-view .sd-tip, #concepts .aif .sd-tip { padding: var(--card-pad); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--at-shadow-deep); font: var(--fw-body) var(--at-fs-body)/var(--lh-body) var(--at-read); } #sdlc-view .sd-tip b, #concepts .aif .sd-tip b { margin-bottom: var(--at-s1); font: var(--fw-ui) var(--at-fs-body)/var(--lh-prose) var(--at-disp); color: var(--accent-text); } #sdlc-view .term { border-bottom-color: var(--at-az-line); } /* EVERY ARROW IS THE LOOP'S ARROW (owner 2026-09-13, "adopt tile, arrow everything foramt as above"): the thin accent line and its small head, superseding the ink arrows set earlier the same day. A flow map's world is shown at about 70%, so its line is drawn at 2 in the world to land at the loop's 1.4. */ :is(#sdlc-view, #campus-home .om) .sd-map-path, :is(#concepts .aif, #campus-home .om) .sd-map-path { stroke: var(--accent); stroke-width: 2; stroke-linecap: butt; } :is(#sdlc-view, #campus-home .om) .sd-map-arrowhead, #sdlc-view .sd-figure .dg-arrowhead, :is(#concepts .aif, #campus-home .om) .sd-map-arrowhead, #concepts .aif .sd-figure .dg-arrowhead { fill: var(--accent); stroke: none; } /* the six-stage loop wears the University's own arrow: the thin accent line with the open head of the → glyph */ :is(#sdlc-view, #campus-home .om) .sd-map-label, #sdlc-view .sd-loop .lp-file, :is(#concepts .aif, #campus-home .om) .sd-map-label { border-color: var(--at-line-2); } /* The story view wears the home page's own grid: the island rail on the left, the hero and the reading column stacked in the second column. */ #sdlc-view { display: grid; grid-template-columns: var(--uni-rail-current) minmax(0,1fr); column-gap: var(--at-s6); align-items: start; padding-top: var(--at-s5); } #sdlc-view > .layout { display: contents; } #sdlc-view > .layout > .toc { grid-column: 1; grid-row: 1 / span 2; } #sdlc-view > .layout > div { grid-column: 2; grid-row: 2; min-width: 0; padding-top: calc(var(--at-s3) + var(--page-head-gap)); } /* the story keeps its sidebar column until the sidebar becomes the phone's strip (owner 2026-09-14, "Page cannot go behind Left Side bar when windo size is small") */ @media (max-width: 900px) { #sdlc-view { display: block; padding-top: var(--at-s4); } #sdlc-view > .layout { display: block; } #sdlc-view > .layout > div { padding-top: 0; } } /* ---- where the story's own blocks sit (never how they look) ---- */ /* ---- every tile is white on paper (owner, 2026-09-13) ---- */ html[data-lum="light"] #sdlc-view .sd-panel, html[data-lum="light"] #sdlc-view .sd-summary { background-color: var(--at-panel); } /* THE LOOP'S FILES OPEN (owner 2026-09-13). A file label is a chip you press (2.6): it answers the mouse with the accent's hover version, a solid edge (2.27). */ /* the pop-up: the book's 2.14 - dimmed page, centred, the large size, resizable and remembered - in 2.13's floating box */ #sdlc-view .sd-file-dialog { position: fixed; inset: 0; margin: auto; padding: 0; z-index: var(--z-dialog); width: min(calc(100vw - var(--at-s7) * 2), var(--conv-w)); height: min(calc(100vh - var(--at-s7) * 2), calc(var(--conv-w) * .8)); min-width: min(calc(100vw - var(--at-s5) * 2), calc(var(--tile-max) * 1.2)); min-height: calc(var(--tile-min) * 1.4); max-width: calc(100vw - var(--at-s5) * 2); max-height: calc(100vh - var(--at-s5) * 2); resize: both; overflow: hidden; color: var(--at-tx); border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--at-shadow-deep); } #sdlc-view .sd-file-dialog::backdrop { background: var(--at-scrim-deep); } #sdlc-view .sd-file-dialog-in { display: flex; flex-direction: column; height: 100%; } #sdlc-view .sd-file-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--at-s3); padding: var(--at-s4) var(--at-s5) var(--at-s3); border-bottom: 1px solid var(--at-line); } #sdlc-view .sd-file-dialog-head h2 { margin-top: var(--page-head-gap); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); } #sdlc-view .sd-file-dialog-close > svg { fill: none; } #sdlc-view .sd-file-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 var(--at-s3) var(--at-s3); } #sdlc-view .sd-file-dialog-body .sd-files { margin: 0; border: 0; box-shadow: none; background: transparent; } #sdlc-view .sd-file-dialog-body .sd-files-title h3 { display: none; } /* THE CAST'S FACES (owner 2026-09-13, "For Each Cast Add Avatar like Agents Avatar in application"). The book's avatar, 2.15: round, one hairline, sitting forward. A person wears the application's own drawn agent face; Claude wears the sidebar's Agents icon in Claude's colour; the checks keep their check mark. The face takes the place of the small coloured dot the card used to carry. */ #sdlc-view .sd-cast-face > svg.pt, #sdlc-view .sd-cast-face > img { display: block; width: 100%; height: 100%; object-fit: cover; } #sdlc-view .sd-cast-face > svg:not(.pt) { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* THE OPENING CREDITS ITS SOURCE, THEN TURNS TO OUR EXAMPLE (owner 2026-09-13). Two small labels in the quiet voice - the accent kicker above the headline stays the page's one accent label - each with its text a head-gap below and a section-gap above the next part; the playbook link is the book's link (2.19). */ #sdlc-view .sd-source-link { display: inline-block; margin-top: var(--page-head-gap); color: var(--accent-text); text-decoration: none; font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-ui); } #sdlc-view .sd-source-link:hover { text-decoration: underline; } /* THE LOOP'S BOX CAME BACK (owner 2026-09-13: first "Remove BBig tile behin Teh Sex Stage Flow", then "Add Big tile back which we rmoved before and keep it white") - the lesson figure's own box, white on the light face, as it was. A STAGE TILE: its name centred, who takes part stacked on its right ("Make 1 Plan Text Centre aligned and move Icon to right in vertical manner"). Three faces stacked need the tile taller - 80px, the 64px step and the 16px step - and the loop's tracks and file labels already meet an 80px tile on the same centre line; only the entry arrows shorten. */ /* the one rule at the loop's centre speaks in the same ink as its file labels, so the drawing leads and the sentence follows ("Centre text is two dark and take all attention than flow diagram ... same colour asintent.md") */ /* A SECTION HEAD'S THREE LINES ARE EVENLY SPACED (owner 2026-09-13, "make space between each same the same between Sencond line and thrird line > update this for all stages"): the label sits the 8px step above the heading, which reads 14.9px against the 14px from the heading to the line under it. */ /* HALF THE AIR BETWEEN A SECTION'S LINES OF PROSE (owner 2026-09-13, "reduce that space by 50%, apply same across other stages ans sections"). As the eye reads them the gaps were about 24px; the empty band above the capitals and below the baseline is trimmed off the story's paragraphs and off the bottom of each subtitle (the house's THE EYE MEASURES), so the 12px step between them is the gap that shows. */ /* the head hands off with its own 12px step; the block after it - a drawing, a table - brings no margin of its own */ /* THE ARCHITECTURE DRAWING IS MADE OF HOUSE TILES (owner 2026-09-13, "All time in Flow Diagram should align with Madav House design ... make it move with mouse hover like it happens in applciation even if there is no action"). Built like the loop: tiles on a world, lines beneath, scaled to fit. They wear the story's one tile dress and rise on hover - his named exception to "a tile that answers nothing does not rise" - with the ordinary pointer. */ /* the lines are drawn in the world's own units, so the lesson figure's picture sizing (a 940px cap, centred) must not reach them - it squeezed the lines under the tiles on the first render */ /* THE CAST IS COMPACT (owner 2026-09-13, "Case Tile are taking too much space in Page. make it compact"): the house tile grid, one row on a wide window; the face at the row-icon size beside the name, the line about the person under both. */ #sdlc-view .sd-cast-card > .sd-cast-face > svg:not(.pt) { width: var(--at-s4); height: var(--at-s4); } /* 18PX BETWEEN MAJOR SECTIONS (owner 2026-09-13, "make it 18Px > apply for all similar section in page"): the 12px step and the head's 6px make his 18; a section carries no bottom padding of its own. */ /* a section that ends on a line of text is measured to that line's letters, not the band below them */ /* WHO IS IN THIS STAGE ON THE HOUSE (owner 2026-09-13, "all tiles should follow madav house design theme"). The card is the book's panel (2.7); the names are the book's label (2.6), restated from atelier-system.css .at-chip. */ #sdlc-view .sd-who .habit { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); color: var(--at-tx-2); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-ui); } /* A FIXED FLOW (owner 2026-09-13, prototyped on Stage 1): the flow in the lesson figure's white box at the loop's scale. Its line layer is pinned to its world - the lesson figure's picture sizing must not reach it. */ :is(#sdlc-view .sd-flow-fixed, #campus-home .om) .sd-map-path, :is(#concepts .aif .sd-flow-fixed, #campus-home .om) .sd-map-path { stroke-width: 1.4; } /* its tiles keep the map's own inside - the face on the left, the words and who acts beneath, the number in the corner (his word on the loop-style tile: "i like previous design of tile - revert only this design on how information was displayed inside tile") - at the size they read at the map's own whole-flow view */ /* one tile voice ("keep tile font same as other tiels") */ #sdlc-view :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face, #concepts .aif :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face { width: var(--at-s5); height: var(--at-s5); } #sdlc-view :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face svg, #concepts .aif :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face svg { width: var(--icon-sm); height: var(--icon-sm); } /* THE LOOP'S TILES LIFT 4PX (owner 2026-09-13, "Tile feeling Forward is 3px, can you make it 4px for Six stage loop flow diagram") - the 4px spacing step, for the loop's tiles only */ /* THE THREE LANES ARE PANELS (owner 2026-09-13, "Three Horizontal tile in background > align to madav house theme design") - the book's 2.7: the card padding, one corner, one hairline, the panel fill in both faces, sitting slightly forward. The lane's name and who acts there share the panel's top line; a line crossing a lane's name passes behind the words. */ /* A FILE TILE BREATHES AND OPENS ITS FILE (owner 2026-09-13, "make it breathing with border glowing ( same effect as glowing feeling of Top Tab in applciation) - show click hand icon on this tile > when user clicks on it > open pop-up of intent.md"). The glow is the app's top tab's, restated because this page cannot import the app's sheet - island-rail.css, .tn-tabs .segnav-thumb and @keyframes tn-seat-breathe: the full accent edge, a halo breathing from 10px at .28 to 22px at .60 on the 3.6s house ease, without end, the tile's own resting depth riding last. The tab's 2px edge is the tile's hairline plus a 1px ring, so the words never move. The hand is an icon, not a box (2.16). */ /* ONE SIZE (owner 2026-09-14, "all tiles in every Flow of Stages has to be same size > width and length - align and fix it"): the breath is the glow alone - it no longer swells the tile ("Make tile breathe to get attnetion" had it grow 3%) - and the accent ring is drawn inside the edge, so a file tile is exactly every other tile's size at every moment */ @keyframes sd-file-breathe { 0%, 100% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 10px rgba(var(--accent-rgb), 0.28), var(--emboss-rest); } 50% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 22px rgba(var(--accent-rgb), 0.6), var(--emboss-rest); } } /* THE PRESS ASKS FOR THE CLICK (owner 2026-09-13: "can you addclick icon somethign like this and animate to get user attention ?", then "move icon here and make icon colour as solid accent colour not just border icon", marking the tile's bottom-right corner). A solid hand in the accent, its finger raised inside a ring, in the corner under the step's number: the hand taps without pause and a thin ring ripples out from the fingertip with every tap ("click animation on hand should be continous always - it shoudl gain use attention") - three taps to each 3.6s breath of the tile's glow. A reader who asks for less motion gets the still drawing. */ /* the hand at half as big again as a row's icon ("make click icon bigger by 50%"), still centred under the step's number */ :is(#sdlc-view .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press, :is(#concepts .aif .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press { position: absolute; right: calc(var(--at-s1) + (var(--at-s5) - var(--icon-md) * 1.5) / 2); bottom: var(--at-s1); width: calc(var(--icon-md) * 1.5); height: calc(var(--icon-md) * 1.5); color: var(--accent); pointer-events: none; } /* a file's face speaks in the accent, as a person's does ("Make file icon as Accent colour") - the same rule's values, so it takes the paper fill on the light face exactly as a person's face does */ :is(#sdlc-view .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press svg, :is(#concepts .aif .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; } :is(#sdlc-view .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-ripple, :is(#concepts .aif .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-ripple { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-origin: 11.5px 7.5px; animation: sd-press-ring 1.2s var(--at-ease) infinite; } :is(#sdlc-view .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-hand, :is(#concepts .aif .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-hand { transform-origin: 11.5px 22px; animation: sd-press-tap 1.2s var(--at-ease) infinite; } @keyframes sd-press-ring { 0%, 32% { opacity: 0; transform: scale(.7); } 46% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } } @keyframes sd-press-tap { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(1px) scale(.92); } } @media (prefers-reduced-motion: reduce) { :is(#sdlc-view .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-ripple, :is(#sdlc-view .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-hand, :is(#concepts .aif .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-ripple, :is(#concepts .aif .sd-flow-fixed, #campus-home .lv-card, #campus-home .lv-rec-step, #campus-home .cs-door-tile) .sd-tile-press .press-hand { animation: none; } } /* A STAGE'S CHIPS ARE ONE SIZE (owner 2026-09-13, "all these tiles should be same size for consistency. update in all satges"). The row is a grid of columns as wide as its widest chip, measured by the engine, with rows of one height; a row that does not fit wraps, and a card narrower than the widest chip gives every chip its width. */ #sdlc-view .sd-who.is-sized { display: grid; grid-template-columns: repeat(auto-fill, min(100%, var(--sd-who-w))); grid-auto-rows: 1fr; } #sdlc-view .sd-who.is-measuring { display: flex; } #sdlc-view .sd-who.is-measuring .habit { white-space: nowrap; } #sdlc-view .sd-who .habit { justify-content: center; text-align: center; } /* A STAGE'S LABEL READS AT THE BODY SIZE (owner 2026-09-13, "Increase this Font Size of Stage 01 - Plan", "updated this for all stages") - still the accent label above the headline, still the 8px step above it */ /* THE FLOW STANDS 22PX BELOW THE STORY, AS THE EYE MEASURES (owner 2026-09-13, "Make Space before How it Flows = 22Px"): the story's last line ends on its baseline and "How it flows" starts at its capitals, so the margin is the gap seen */ /* A FILE'S TABS ARE THE HOUSE'S SLIDING TRACK (owner 2026-09-13, "chnage this as tile not line, update in other stage files section also"): the chosen file sits on a seat that glides from file to file, not above a line. Restated from styles.css .segnav / .segnav-thumb / .segnav .qt, which this page cannot import: the recessed track (panel fill, one hairline, the emboss, the corner, 3px inside; on paper a faint warm wash with no edge), the seat (panel fill, the accent's line edge, the glow, the corner) and the stop (6px 14px, the display voice, lifting on hover, the chosen one in the accent). */ #sdlc-view .sd-tabs { isolation: isolate; width: fit-content; max-width: 100%; gap: 0; margin: var(--at-s3) 0 0; padding: 3px; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } html[data-lum="light"] #sdlc-view .sd-tabs { background: rgba(62, 55, 42, 0.07); border-color: transparent; } #sdlc-view .sd-tabs [role="tab"] { position: relative; z-index: 1; padding: 6px 14px; border-radius: var(--at-r1); background: transparent; color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-small)/var(--lh-prose) var(--at-disp); transition: color var(--at-d1) var(--at-ease), transform var(--at-d1) var(--at-ease); } #sdlc-view .sd-tabs [role="tab"]:hover { background: transparent; color: var(--at-tx); transform: translateY(var(--lift-btn)); } #sdlc-view .sd-tabs [role="tab"][aria-selected="true"] { color: var(--at-az); font-weight: var(--fw-ui); } #sdlc-view .sd-tab-track { z-index: 0; top: 3px; bottom: 3px; height: auto; background: var(--at-panel); border: 1px solid var(--at-az-line); border-radius: var(--at-r1); box-shadow: var(--at-glow); box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { #sdlc-view .sd-tabs [role="tab"]:hover { transform: none; } } /* A FLOW NEVER SHRINKS PAST READING (owner 2026-09-14, "Agree" to "below a readable size, stop shrinking and let the drawing slide sideways inside its box, with no zoom"). Below 0.85 - where a tile's 13.5px words read at the house's smallest 11.5px - the drawing keeps its size and its box slides sideways. The world sits in a sizer cut to its scaled size; the bar is the view's own scrollbar, restated from this page's #sdlc-view rule (one width, one fill - the book's 2.22). */ #sdlc-view .sd-flow-fixed.sd-loop-fit::-webkit-scrollbar, #concepts .aif .sd-flow-fixed .sd-loop-fit::-webkit-scrollbar { height: var(--at-s2); } #sdlc-view .sd-flow-fixed.sd-loop-fit::-webkit-scrollbar-track, #concepts .aif .sd-flow-fixed .sd-loop-fit::-webkit-scrollbar-track { background: transparent; } #sdlc-view .sd-flow-fixed.sd-loop-fit::-webkit-scrollbar-thumb, #concepts .aif .sd-flow-fixed .sd-loop-fit::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--at-r1); background: color-mix(in srgb, var(--at-tx-3) 62%, transparent) padding-box; } /* A FLOW'S TILE WORDS READ AS ONE (owner 2026-09-14, "Font size in all tiles should be same size and same colour and try to align it to tile centre and keep it tidy"): one ink for every tile's words, a trigger's included, and the face and the words one group centred in the tile, the lines centred with it */ /* A STORY'S LIST SITS IN A TILE (owner 2026-09-14, "3 points in bullet point > put them in a tile in same spot"): the story's one card, joined to the at-a-glance panel's rule above; the story's 12px step above and below it, and the list read from the tile's padding as the eye measures */ /* A STAGE'S SUBTITLE READS IN ITALICS (owner 2026-09-14, "in all stage > this line make it italica") - the line under each stage's headline, in its own voice's italic; nothing else about it changes */ /* A FLOW TILE'S NUMBER HAS ITS OWN ROW (owner 2026-09-14, "Own row at the top"): the words start below the number's box - its 4px inset, its 22px, and 4px of air - and centre in the room left, so no line of words ever sits beside a number */ /* THE TWO LISTS WEAR THE POWERS STRIP (owner 2026-09-14, "use tile format showed in screen from Agents Power to display without check box ... centre align this tile to page"). Restated from agents-atelier.css .aga .ags-powrow / .ags-pow: one frame up to 900px, centred; six equal cells split by one hairline, content centred; the list's mark where a power's picture stands, and no check box. The lists stack, each heading centred over its strip. */ /* the mark stands above the words; the words, their code included, run as one text */ /* A FILE POP-UP'S INSIDE ALIGNS AND WEARS THE HOUSE (owner 2026-09-14, "Add gap between rail and bottom tiles of 12Px and also make these tiles boxes align with madav house theme, same for below tile. Rail should be left aligned with Tile. apply for all file popups"): one left edge - the heading's - for the description, the rail and the boxes; 12px from the rail to the file and from the file to its note; the file and the note each the house panel (2.7) */ #sdlc-view .sd-file-dialog-body { padding: 0 var(--at-s5) var(--at-s5); } #sdlc-view .sd-file-dialog-body .sd-files-title { padding-inline: 0; } #sdlc-view .sd-file-dialog-body .sd-tabs { margin-bottom: var(--at-s3); } #sdlc-view .sd-file-dialog-body pre.brief, #sdlc-view .sd-file-dialog-body .lesson-example { padding: var(--card-pad); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #sdlc-view .sd-file-dialog-body .lesson-example { margin-top: var(--at-s3); } /* THE DRAWING'S ARROW LABEL IS PLAIN TEXT (owner 2026-09-14, "remove tile, just text ie enough") - the caption voice, sitting just above the arrow it names */ /* A FILE POP-UP'S INSIDE (owner 2026-09-14, "in all pop-up, make these tiles/boxes aligned to madav house theme", then "Paper ground inside", then "make this pop-up background white"): on the light face the body is the pop-up's own white panel, one sheet with its heading bar, and the file cards on it keep their hairline and resting depth; the dark face keeps the page's ground under its cards, where the panel would make a card vanish into its sheet */ #sdlc-view .sd-file-dialog-body { background: var(--app-canvas); } html[data-lum="light"] #sdlc-view .sd-file-dialog-body { background: var(--at-panel); } /* a stage's card measures its height edge to edge, so the height the engine gives it is the height it shows */ /* EVERY SECTION STANDS 30PX BELOW WHAT COMES BEFORE IT (owner 2026-09-14, "Spacing should be same as space about Stage section", after "above each Stage > make Spacing as 30 px" and "add 30Px Space") - the 30px step above every section's accent bar; the first section takes it from the opening's bottom edge */ @media (min-width: 901px) { #sdlc-view > .layout > div { padding-top: var(--at-s6); } } /* THE CAST FILLS EVERY ROW (found checking the page 2026-09-14: at 1600px its six cards wrapped five and one). Six in a row where six fit at the house's smallest tile (--tile-min 220px, --tile-gap 12px: 1380px), else three and three (684px), two by three (452px), or one above another - chosen on the cast's own width */ #sdlc-view #sdlc-cast { container-type: inline-size; } /* A FLOW'S LANES SIT BACK IN THE DARK FACE (owner 2026-09-14, "in dark model, Tile visbility is not great"): lanes and tiles were both the panel; the lanes take the house's deepest ground so every tile stands forward as a panel on a ground */ /* A STAGE CARD'S CONTENTS SIT CENTRED (owner 2026-09-14, "align details in that tile in centre aligned") - every card is the tallest card's height, so its contents centre top to bottom in it, the gaps between them unchanged */ /* A FLOW TILE'S ICON SITS IN ITS TOP-LEFT CORNER, A LITTLE BIGGER (owner 2026-09-14, "i was thinking of moving Icon left corner and make it little big as there is enough space here") - opposite the step number, at the house's large icon size; the number row grows to hold it and the number centres on its line; the words, with no icon beside them, centre across the tile with the same room on both sides. Replaces the rule that centred the icon on the tile's middle. */ #sdlc-view .sd-flow .sd-flow-fixed .sd-tile-face svg:not(.pt), #concepts .aif .sd-flow .sd-flow-fixed .sd-tile-face svg:not(.pt) { width: var(--icon-md); height: var(--icon-md); } /* a file tile's words keep clear of its pressing hand: its small line - the one beside the hand - takes the same narrower room on both sides, so it steps round the hand and stays centred (the full width put "Saved to the repository" 1.6px from the hand, measured), while the file's name keeps every tile's full room ("keep it on two lines", of intent/gpt-error-mapping.md, which a narrower tile broke over three) */ /* THE CAST IS ALIVE AS THE APPLICATION'S FACES ARE (owner 2026-09-14, "can you animate them that they e smiling or eye blinking liek in appliaction") - Portrait's own law (styles.css .pt-*) restated: the eyes blink on its 4.6s clock, each face a beat apart; reaching a face's card or tile, the face says hello - the beaming smile, the blush, the head tilt */ #sdlc-view .pt .pt-eyes { transform-box: fill-box; transform-origin: 50% 50%; } #sdlc-view .pt .pt-headg { transform-box: fill-box; transform-origin: 50% 62%; } #sdlc-view .pt .pt-hello { opacity: 0; } #sdlc-view :is(.sd-cast-card, .sd-tile):hover .pt .pt-hello, #concepts .aif :is(.sd-cast-card, .sd-tile):hover .pt .pt-hello { opacity: 1; animation: none; } #sdlc-view :is(.sd-cast-card, .sd-tile):hover .pt .pt-rest, #concepts .aif :is(.sd-cast-card, .sd-tile):hover .pt .pt-rest { opacity: 0; animation: none; } @media (prefers-reduced-motion: no-preference) { #sdlc-view .pt .pt-eyes { animation: pt-blink 4.6s ease-in-out infinite; animation-delay: calc(var(--sd-beat, var(--i, 0)) * -1.15s); } #sdlc-view :is(.sd-cast-card, .sd-tile):hover .pt .pt-headg, #concepts .aif :is(.sd-cast-card, .sd-tile):hover .pt .pt-headg { animation: pt-greet 3s ease-in-out infinite; } /* the smile comes and goes on its own ("Avatars here also should anmiate") - Portrait's hello smile for two seconds in eight, each face at its own moment */ #sdlc-view .pt .pt-hello { animation: sd-cast-beam 8s var(--at-ease) infinite; animation-delay: calc(var(--sd-beat, var(--i, 0)) * -1.9s); } #sdlc-view .pt .pt-rest { animation: sd-cast-rest 8s var(--at-ease) infinite; animation-delay: calc(var(--sd-beat, var(--i, 0)) * -1.9s); } /* the Founding Crew's living avatar (agents-atelier.css .fcw-av): it breathes at rest and does the crew's bob when reached */ #sdlc-view :is(.sd-cast-face, .sd-tile-face.is-cast):has(> .pt, > img), #concepts .aif :is(.sd-cast-face, .sd-tile-face.is-cast):has(> .pt, > img) { animation: fcw-breathe 3.4s ease-in-out infinite; animation-delay: calc(var(--sd-beat, var(--i, 0)) * -0.85s); } #sdlc-view .sd-cast-card:hover .sd-cast-face:has(> .pt, > img), #sdlc-view .sd-tile:hover .sd-tile-face.is-cast, #concepts .aif .sd-tile:hover .sd-tile-face.is-cast { animation: crew-bob 1.6s ease-in-out infinite; } } @keyframes pt-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5%, 97.5% { transform: scaleY(0.12); } } @keyframes pt-greet { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-2.5deg); } } @keyframes sd-cast-beam { 0%, 60%, 100% { opacity: 0; } 66%, 90% { opacity: 1; } } @keyframes sd-cast-rest { 0%, 60%, 100% { opacity: 1; } 66%, 90% { opacity: 0; } } @keyframes fcw-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.2px) scale(1.012); } } @keyframes crew-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-3px) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } } /* A FLOW'S PERSON TILE WEARS THAT PERSON'S CAST FACE (owner 2026-09-14, "in Flows diagram, replace this icon with Cast Avatar with animation as requested above", "update for all flows of stages") - the Cast face's own round, at the one face size every flow tile keeps; two people overlap */ #sdlc-view :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face.is-cast, #concepts .aif :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face.is-cast { overflow: hidden; } #sdlc-view :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face.is-cast > :is(svg.pt, img), #concepts .aif :is(.sd-flow-fixed, .sd-repo-who) .sd-tile-face.is-cast > :is(svg.pt, img) { display: block; width: 100%; height: 100%; object-fit: cover; fill: initial; stroke: none; stroke-width: 1; } /* THE PROJECT REPOSITORY TILE (owner 2026-09-14, "Add a Tile Called Project Repository") - a flow's file tile, breathing and pressing, in the room beside the loop and centred on the drawing's height; where the room is narrower than the tile it stands centred under the drawing. It has no step number, so its contents take the tile's own padding. */ #sdlc-view .sd-loop-repo { display: flex; justify-content: flex-end; margin-bottom: var(--at-s3); } /* the repository's rows: the page's one table skin; the tree's lines and names in the code voice, a folder's name in the accent's text colour, the players as the flows' faces */ #sdlc-view .sd-repo-lede { margin: var(--at-s3) 0; color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-body)/var(--lh-prose) var(--at-read); } #sdlc-view .sd-repo-table td:first-child { white-space: nowrap; font: var(--fw-body) var(--at-fs-small)/var(--lh-prose) var(--at-mono); } #sdlc-view .sd-repo-table td:nth-child(3), #sdlc-view .sd-repo-table td:nth-child(4) { white-space: nowrap; } #sdlc-view .sd-repo-table tr.is-folder code { color: var(--accent-text); } #sdlc-view .sd-repo-who { display: flex; gap: var(--at-s1); } #sdlc-view .sd-repo-face { position: relative; display: inline-flex; } /* THE REPOSITORY TILE, COMPACT AND AT THE LOOP'S RIGHT END (owner 2026-09-24, night: "Move that tile to the right section where I showed you", "Make that tile smaller and compact, Make it look tidy and Remove the glow feeling from the tile", "Align the icons in that tile properly") - one row, the folder's face, the words, the hand, centred on one line; the tile the stage tile's width - 150, as the loop draws it (his word the same night: "Reduce the tile size width to the same as the test tile") - the house's small step between its three parts and a step of padding all round, so the word stands on one line; no breath and no halo - it is not a breathing file tile any more, so it wears the loop's plain tile edge, and the folder's accent face and the hand say it opens; it stands in the frame's top-right corner, a tile's step above the drawing, which sits centred beneath it (his word of 2026-09-24, night: "move it to the top-right corner"), and lifts 4px when pointed at, as the loop's tiles do. Its rules name the seat in full so they outrank the flow tile's own padding. */ #sdlc-view .sd-flow-fixed.sd-loop-repo .sd-tile, #concepts .aif .sd-flow-fixed.sd-loop-repo .sd-tile { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto; align-items: center; column-gap: var(--at-s1); width: 150px; height: auto; padding: var(--at-s2); text-align: left; } #sdlc-view .sd-flow-fixed.sd-loop-repo .sd-tile-face, #concepts .aif .sd-flow-fixed.sd-loop-repo .sd-tile-face { grid-column: 1; grid-row: 1; width: var(--icon-md); height: var(--icon-md); } #sdlc-view .sd-flow-fixed.sd-loop-repo .sd-tile-face svg, #concepts .aif .sd-flow-fixed.sd-loop-repo .sd-tile-face svg { width: var(--at-s3); height: var(--at-s3); } #sdlc-view .sd-flow-fixed.sd-loop-repo .sd-tile-copy, #concepts .aif .sd-flow-fixed.sd-loop-repo .sd-tile-copy { grid-column: 2; grid-row: 1; } #sdlc-view .sd-flow-fixed.sd-loop-repo .sd-tile-press, #concepts .aif .sd-flow-fixed.sd-loop-repo .sd-tile-press { position: static; grid-column: 3; grid-row: 1; } @media (hover: hover) and (pointer: fine) { #sdlc-view .sd-flow-fixed.sd-loop-repo .sd-tile:hover, #concepts .aif .sd-flow-fixed.sd-loop-repo .sd-tile:hover { transform: translateY(calc(-1 * var(--at-s1))); } } /* THE REAL REPOSITORY, ONE PRESS AWAY (owner 2026-09-14, "Should we add Small tile here with Git Icon link to this project repo ?", then "add the tile and link everything as if it works today") - under the Project repository tile, a small tile the stage tile's width and one row tall, the GitHub mark in the doors' quiet grey; it opens the real repository in a new tab, sits forward and lifts 4px like the loop's tiles; on the journey the pair stands centred on the drawing's height. In the repository pop-up the same address speaks in the page's outbound-link voice. */ #campus-home .sd-repo-git { display: flex; align-items: center; justify-content: center; gap: var(--at-s2); box-sizing: border-box; width: 150px; height: var(--at-s7); padding: var(--tile-pad); border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); color: var(--at-tx); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); text-decoration: none; transition: var(--tile-trans); } #campus-home .sd-repo-git svg { flex: none; width: var(--icon-md); height: var(--icon-md); fill: currentColor; color: var(--at-tx-2); } @media (hover: hover) and (pointer: fine) { #campus-home .sd-repo-git:hover { transform: translateY(calc(-1 * var(--at-s1))); border-color: var(--at-az-line); box-shadow: var(--at-shadow); } } #sdlc-view .sd-repo .sd-source-link { margin: 0 0 var(--at-s3); } /* THE REPOSITORY LANE'S LABELS STAND AT ITS FOOT (owner 2026-09-14, "mvoe it down as it cuts the flow arrow. move it only for this section ins all flows") - arrows come down into this lane through its top row; its name and its owner move together to the row under its tiles, which no arrow crosses (measured in all six flows); the other lanes keep their labels at the top */ /* THE LOOP'S CENTRE SENTENCE STEPS BACK AGAIN (owner 2026-09-14, "make this text further light and reduce font a bit") - the next ink down from the file labels' ink it matched, and the body size, the house's next size down from the heading size (there is none between); the note under it stays the smallest and palest, so the drawing leads, then the sentence */ /* EVERY STAGE'S FLOW STANDS WITHOUT ITS BIG BOX (owner 2026-09-14, "For Stage 03 > can you remove this big tile outside - i want see how it looks", then "remvoe that bix for all stages") - no edge, no fill, no shadow; the room inside stays, so the lanes do not move; the lanes keep their own boxes, and the six-stage loop keeps its box, asked back on 2026-09-13 */ /* TRIAL - EVERY STAGE'S STORY AND ITS AT-A-GLANCE CARD SHARE ONE TILE, IN TWO SECTIONS (owner 2026-09-14: "can you prepare mock with B for AI native page for one of stage", then, pointing at Where to start's strip, "instead of having two seperate tile, can we use this forma > same tile two sections", "can you apply this for Ai native page for Stage 1", "two boxes one tile", and, shown Stage 1, "This is great, Apply this is all stages") - the story's paragraphs as labelled read-out rows (§2.4), and the rows and the stage at a glance in one panel (§2.7) split by one hairline; below 1101px the at-a-glance section stands under the rows */ /* the labelled rows are dressed ONCE, here, for both pages that read them: the story's stages and the journey's levels (owner 2026-09-14, of Stage 01's tile: "Lets chaneg this Tile format design to same we are using in AI-natice Chapters") */ /* THE REPOSITORY LIST OPENS AND CLOSES BY FOLDER, AND ITS ROOT ROW SITS ON LIGHT GREY (owner 2026-09-14: "Can you make root folder row light grey", then "isit possibe to make close and expand option for repository ? make is eay to read") - a folder is a button with a small arrow that turns as it opens; files keep the arrow's room so every name starts on one line; one quiet button opens or closes every folder */ #sdlc-view .sd-repo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--at-s3); margin: 0 0 var(--at-s3); } #sdlc-view .sd-repo .sd-repo-bar .sd-source-link { margin: 0; } #sdlc-view .sd-repo-fold { display: inline-flex; align-items: center; gap: var(--at-s1); padding: 0; border: 0; border-radius: var(--at-r1); background: none; color: inherit; font: inherit; cursor: pointer; } #sdlc-view :is(.sd-repo-fold, .sd-repo-mark) svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: var(--at-tx-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--at-d3) var(--at-ease); } #sdlc-view .sd-repo-fold[aria-expanded="true"] svg { transform: rotate(90deg); } #sdlc-view .sd-repo-fold:hover svg { stroke: var(--accent-text); } #sdlc-view .sd-repo-fold:focus-visible { outline: none; box-shadow: var(--accent-ring); } @media (prefers-reduced-motion: reduce) { #sdlc-view .sd-repo-fold svg { transition: none; } } #sdlc-view .sd-repo-table tbody tr:first-child td { background: var(--at-canvas-0); } /* THE PROJECT REPOSITORY'S TREE IS DRAWN (owner 2026-09-15, "i want that structure to conenct the text or be ver close to folder text", then his marks on the mock - an arrowhead into each file's name, and a folder's line running on to its last item - and "perfect. go ahead and implement it"): hairlines in the tree's ink, drawn inside each name's own box and clipped by its cell, so a line always meets the name's own line; one level of depth is the arm (--at-s3) plus half a folder arrow (--icon-sm), which stands a child's stem under its folder's arrow */ #sdlc-view .sd-repo-table tbody td:first-child { position: relative; overflow: hidden; } #sdlc-view .sd-repo-node { position: relative; display: inline-flex; align-items: center; vertical-align: top; } /* a name never breaks: the house code style lets text wrap, which split write-intent/SKILL.md across two lines in a narrow pop-up and left its line pointing between them; the column grows instead, as the first column always meant to */ #sdlc-view .sd-repo-node code { white-space: nowrap; } /* the lines are one small vector drawing per name, crisp on the screen's own pixels: a painted or bordered line that lands between two screen pixels blurs across both, which at a Windows 125 or 150 percent scale made some lines look thicker than others (owner 2026-09-15, "Also make all line same thick as in screen", "including vertical lines"); with crisp edges every line is a whole number of screen pixels, and the engine gives each drawing the weight he marked - two screen pixels - as its stroke ("i needed thickness marked to implement everywhere. current line is very thin") */ #sdlc-view .sd-repo-draw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } #sdlc-view .sd-repo-draw line { stroke: var(--at-tx-3); shape-rendering: crispEdges; } /* ONE MARK (owner 2026-09-15, "lets keep single arrow type in both places", then "nope keep everythig >"): a file carries the folder's own > in the same room, so its line arrives at the mark exactly as a folder's does; the mark wears the folder arrow's one dress, widened below, and never turns or lights, because a file does not open */ #sdlc-view .sd-repo-mark { display: inline-flex; align-items: center; gap: var(--at-s1); } /* an open folder drops a line from its arrow to its first item; the root row always does */ #sdlc-view .sd-repo-draw .sd-repo-open { display: none; } #sdlc-view :is(.sd-repo-node:has(> .sd-repo-fold[aria-expanded="true"]), .sd-repo-node.is-root) .sd-repo-draw .sd-repo-open { display: inline; } #sdlc-view .sd-repo-node[data-depth="0"] { padding-left: calc(0px + var(--at-s3)); } #sdlc-view .sd-repo-node[data-depth="1"] { padding-left: calc(calc(1 * (var(--at-s3) + var(--icon-sm) / 2)) + var(--at-s3)); } #sdlc-view .sd-repo-node[data-depth="2"] { padding-left: calc(calc(2 * (var(--at-s3) + var(--icon-sm) / 2)) + var(--at-s3)); } #sdlc-view .sd-repo-node[data-depth="3"] { padding-left: calc(calc(3 * (var(--at-s3) + var(--icon-sm) / 2)) + var(--at-s3)); } #sdlc-view .sd-repo-node[data-depth="4"] { padding-left: calc(calc(4 * (var(--at-s3) + var(--icon-sm) / 2)) + var(--at-s3)); } /* CLAUDE'S THREE HELPER AGENTS (owner 2026-09-15, "for Claude Tile, Show Three Drop Down with Agent Icon to represent agents Researcher Code Simplifier Verifier", then "when user scrolls screen and the cast is on scree, Agent three agents quetly and slowly drop down from Claude Tile"): a row of three small house tiles directly under the Claude card, each hung on the flows' own arrow; the row sits in the cast grid under the card at six, three and two across (the fifth card's column), and simply follows it at one across */ /* the drop, every time the cast comes on screen (owner 2026-09-15, "everytime user scroll up or down, agent vanish > when cast section is on screen, agent drop down again"): while the cast is off screen the helpers are gone at once, with no motion; when it comes back all three tiles fall from the card together, each line stretching behind its tile; still and always shown for a reader who asks for less motion */ /* all three fall together ("All three agent should drop down together", "Animation should be dynamic", then "make animate bit slower", so the fall takes half as long again): each tile starts tucked under the card and falls to its place while its line stretches behind it - the line grows from its bottom at the same pace the tile falls, so its top stays fixed on the card the whole way down */ /* ---- the page's own style block, whole ---- */ /* Fraunces and Inter are the only two voices used by Madav University. Both are bundled beside this portable page; no font leaves this folder. */ @font-face { font-family: "Madav Display"; font-style: normal; font-weight: var(--fw-body) var(--fw-strong); font-display: swap; src: url("../fonts/fraunces-roman.woff2") format("woff2"); } @font-face { font-family: "Madav Display"; font-style: italic; font-weight: 340 640; font-display: swap; src: url("../fonts/fraunces-italic.woff2") format("woff2"); } /* TRIAL, 2026-09-13, at his word "change Madav Text font to Cambria font - it is to review". The reading voice is pointed at Cambria for him to look at. Nothing is recorded anywhere: remove trial-cambria.py from the chain in make.py and the next build restores the Madav reading face exactly. TWO BLOCKS, NOT ONE. Cambria ships as regular and bold, where the Madav reading face carries every weight in one variable file. A single block claiming 100-900 makes the browser use the regular cut for everything, and bold disappears from the page - which would be a test of a mistake rather than a test of Cambria. So the regular cut carries up to 550 (the text at 340 and the label at 510) and the bold cut takes 551 and above (the emphasis at 590). */ @font-face { font-family: "Madav Text"; font-style: normal; font-weight: 100 550; font-display: swap; src: local("Cambria"), local("Cambria Regular"), url("../fonts/inter-var.woff2") format("woff2"); } @font-face { font-family: "Madav Text"; font-style: normal; font-weight: 551 900; font-display: swap; src: local("Cambria Bold"), local("Cambria-Bold"), url("../fonts/inter-var.woff2") format("woff2"); } :root { /* ─── THE TWENTY-NINE ON LOAN FROM THE HOUSE'S NAMESPACE ──────────────────────────────── These carried a value that differs from the house's, so slice 2 could not simply delete them without moving a pixel - and moving pixels was not slice 2's job. They are renamed out of the house's namespace and NOT settled here. THEY ARE SCHEDULED TO DIE IN PHASE 3, STEP 4, by his ruling of 2026-09-12: "i donot want university to have its own design, it should align to madav design theme" - which SPEC.md §3 renders as NO page-only VALUES, every number from tokens.css. Re-stated 2026-09-13: --uni-* is a HOLDING POSITION WITH AN EXPIRY, not a settlement. Each one resolves to a house token or becomes a house token; none survives as a University-only value. tests/parity/landing-house-tokens.test.js counts every --uni-* in this file and the count may only FALL: 51 the day slice 2 landed, 0 at the end of Phase 3. Do not add to this namespace. */ color-scheme: dark; /* Madav University uses one editorial accent in both luminance faces. Every selected edge, focus ring and primary action derives from it. */ /* the READABLE side of the accent, derived rather than fixed: white measured 2.47:1 on this fill (and 2.16:1 on the gold it replaces) - under the 3.0 floor for a label. This is the application's own --at-az-ink formula and reads 6.36:1. */ /* Binding Atelier dark face. */ /* University aliases are semantic views of Atelier tokens, never a parallel identity pack. */ --page-gutter: clamp(16px, 1.6vw, 34px); --uni-rail: clamp(240px, 14vw, 260px); --uni-rail-coin: 54px; --uni-rail-current: var(--uni-rail); --uni-rail-left: clamp(12px, .9vw, 18px); /* Three heading roles for the University home, map and every lesson. */ /* Both faces load with font-display: swap, so the FALLBACK is what a reader sees while the woff2 arrives - and what they keep if it never does. Without a stack, an unknown family falls to the browser default sans and the serif display face is simply never requested. Same stacks the application names. */ } * { box-sizing: border-box; } :where(h1, h2, h3, h4, p, li, blockquote, td, th, strong, span) { min-width: 0; overflow-wrap: break-word; word-break: normal; text-wrap: pretty; } :where(h1, h2, h3, h4) { text-wrap: balance; } /* University reading law: use available width and grow; never crop instructional text. */ main :where(section, article, header, footer, aside, div) { min-width: 0; } main :where(h1, h2, h3, h4, p, li, blockquote, td, th, strong, span, small) { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; word-break: normal; } html { scroll-behavior: auto; scroll-padding-top: calc(var(--app-topbar-h) + var(--at-s3)); font-family: var(--at-read); } body { margin: 0; color: var(--at-tx); background: var(--app-canvas); font: var(--fw-body) var(--at-fs-body)/var(--lh-body) var(--at-read); /* the mock's own leading - long lines need it */ overflow-x: auto; } a { color: var(--accent-text); text-underline-offset: 3px; } button { font: inherit; } button,a { -webkit-tap-highlight-color: transparent; } :focus-visible { border-radius: var(--at-r1); outline: 2px solid var(--accent); outline-offset: 2px; } [hidden] { display: none !important; } .skip-link { position: fixed; left: var(--page-gutter); top: var(--at-s2); z-index: 1000; padding: var(--at-s2) var(--at-s3); border: 1px solid var(--at-az-line); border-radius: var(--at-r1); background: var(--at-panel); color: var(--at-tx); text-decoration: none; transform: translateY(-140%); transition: transform var(--at-d1) var(--at-ease); } .skip-link:focus { transform: translateY(0); } .shell { width: 100%; margin: 0; padding: 0 var(--page-gutter) var(--at-s5); position: relative; } .brandbar { min-height: var(--app-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--at-s4); position: sticky; top: 0; z-index: 100; margin-inline: calc(-1 * var(--page-gutter)); padding: var(--at-s1) var(--page-gutter); background: color-mix(in srgb, var(--app-canvas) 94%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--at-line); box-shadow: var(--at-shadow); } .brand { display: inline-flex; align-items: center; gap: var(--at-s3); color: var(--at-tx); text-decoration: none; min-width: 0; } .brand img { width: 154px; height: auto; object-fit: contain; flex: 0 0 auto; } .brand-rule { width: 1px; height: var(--icon-lg); background: linear-gradient(var(--accent), var(--accent)); } .brand-copy { min-width: 0; } .brand-copy strong { display: block; font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); } .brand-copy span { display: block; margin-top: var(--at-s1); color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-caps); } .theme-toggle { display: grid; place-items: center; flex: 0 0 auto; position: relative; border: 0; border-radius: var(--at-r1); padding: 0; color: var(--at-tx-2); background: transparent; cursor: pointer; transition: var(--fluid-trans); } .theme-toggle svg { position: absolute; inset: 0; margin: auto; transition: transform var(--at-d2) var(--at-ease), opacity var(--at-d2) var(--at-ease); } html[data-lum="dark"] .theme-toggle .theme-sun { opacity: 0; transform: rotate(90deg) scale(.4); } html[data-lum="dark"] .theme-toggle .theme-moon { opacity: 1; transform: rotate(0deg) scale(1); color: var(--at-gold); fill: var(--at-gold); } html[data-lum="light"] .theme-toggle .theme-sun { opacity: 1; transform: rotate(0deg) scale(1); } html[data-lum="light"] .theme-toggle .theme-moon { opacity: 0; transform: rotate(-90deg) scale(.4); } .theme-toggle:active { transform: scale(.97); box-shadow: var(--emboss-press); } .eyebrow { color: var(--accent-text); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-caps); } h1,h2,h3,h4 { margin: 0; font-weight: var(--fw-ui); } h1 { margin-top: var(--at-s3); font: var(--fw-ui) var(--at-fs-hero)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-display); max-width: none; text-wrap: balance; } h1 em { color: var(--accent); font-style: italic; font-weight: var(--fw-body); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--at-s2); margin-top: var(--at-s4); } /* THE ONE BUTTON FAMILY, as objects/button.css writes it. This page cannot import that file - landing/ has no build step - so the recipe is restated here in tokens and nowhere else, and every button on every University page wears it. Hover answers in ink and edge and lifts; it never paints a fill (his Q1 ruling, 2026-09-12). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--at-s2); border: 1px solid var(--at-line); color: var(--at-tx-1); background: transparent; border-radius: var(--at-r1); padding: var(--at-btn-pad); cursor: pointer; text-decoration: none; font-family: var(--at-disp); font-weight: var(--fw-ui); font-size: var(--at-fs-small); line-height: var(--lh-tight); transition: transform var(--at-d2) var(--at-ease), box-shadow var(--at-d2) var(--at-ease), color var(--at-d1) var(--at-ease), border-color var(--at-d1) var(--at-ease); box-shadow: var(--emboss-rest); } .btn:active:not(:disabled) { transform: translateY(var(--tile-lift-active)); box-shadow: var(--emboss-press); } /* An accent-filled button takes the full curve - the one curve in the house (law 5). */ .btn.primary { background: var(--accent); border-color: transparent; color: #fff; font-weight: var(--fw-strong); border-radius: var(--at-r-accent); } /* THE ONE DISABLED STANDARD: 45%, visibly inert, never lifts or glows. */ .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; box-shadow: none; } #campus-home { display: grid; grid-template-columns: var(--uni-rail-current) minmax(0,1fr); column-gap: var(--at-s6); align-items: start; padding-top: var(--at-s5); } #campus-home { grid-template-rows: auto 1fr; } #campus-home > .layout { display: contents; } #campus-home > .layout > .toc { grid-column: 1; grid-row: 1 / span 2; } #campus-home > .layout > div { grid-column: 2; grid-row: 2; min-width: 0; padding-top: var(--at-s5); } .layout { display: grid; grid-template-columns: var(--uni-rail-current) minmax(0,1fr); gap: var(--at-s6); align-items: start; padding-top: var(--at-s5); } /* The University reading spine borrows the Madav application's Island Rail: one floating panel, compact display-face rows and one traveling mark of place. */ .toc, .depth-nav { position: sticky; top: calc(var(--app-topbar-h) + var(--at-s3)); display: flex; flex-direction: column; isolation: isolate; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: linear-gradient(180deg, var(--at-panel), transparent 26%), color-mix(in srgb, var(--at-canvas-2) 30%, transparent); box-shadow: var(--at-shadow-deep); padding: var(--at-s3) var(--at-s3) var(--at-s3); height: calc(100vh - var(--app-topbar-h) - (var(--at-s3) * 2)); max-height: calc(100vh - var(--app-topbar-h) - (var(--at-s3) * 2)); min-width: 0; overflow: visible; font-family: var(--at-disp); transition: border-color var(--at-d2) var(--at-ease), background var(--at-d2) var(--at-ease), box-shadow var(--at-d2) var(--at-ease), padding var(--at-d2) var(--at-ease), height var(--at-d2) var(--at-ease); } .spine-content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; opacity: 1; visibility: visible; transition: opacity var(--at-d1) var(--at-ease), visibility var(--at-d1) linear var(--at-d1); } .spine-brand { display: grid; grid-template-columns: auto 1px minmax(0, 1fr); align-items: center; /* the map is a flex column: without this the row is shrunk below its own words and its rule is drawn through them (owner 2026-09-20: "Also fix this line") */ flex: 0 0 auto; gap: var(--at-s2); min-height: var(--at-s5); margin: 0 var(--at-s1) var(--at-s2); padding: var(--at-s1) var(--at-s1) var(--at-s2); border-bottom: 1px solid var(--at-line); color: var(--at-tx); text-decoration: none; } .spine-brand img { display: block; width: auto; max-width: 100%; height: var(--at-s4); align-self: center; object-fit: contain; } .spine-brand-rule { width: 1px; height: var(--at-s5); align-self: center; background: linear-gradient(var(--accent), var(--accent)); } .spine-brand-copy { min-width: 0; } .spine-brand-copy strong { display: block; color: var(--at-tx); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); white-space: nowrap; } .spine-brand-copy small { display: block; margin-top: var(--at-s1); color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); white-space: nowrap; } .spine-fold { position: absolute; top: 26px; right: -11px; z-index: 6; display: grid; place-items: center; width: var(--at-s5); height: var(--at-s5); padding: 0; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-text); background: var(--at-panel); box-shadow: var(--at-shadow); cursor: pointer; transform: translateY(0); transition: top var(--at-d2) var(--at-ease), right var(--at-d2) var(--at-ease), width var(--at-d2) var(--at-ease), height var(--at-d2) var(--at-ease), transform var(--at-d1) var(--at-ease), border-color var(--at-d1) var(--at-ease), background var(--at-d1) var(--at-ease), box-shadow var(--at-d1) var(--at-ease); } .spine-fold:before { content: ""; position: absolute; inset: -9px; } .spine-fold svg { position: absolute; left: 50%; top: 50%; width: var(--at-s3); height: var(--at-s3); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translate(-50%, -50%); transition: opacity var(--at-d1) var(--at-ease); } .spine-fold-logo { position: absolute; left: 50%; top: 50%; width: var(--at-s5); height: var(--at-s5); display: grid; place-items: center; overflow: visible; opacity: 0; transform: translate(-50%, -50%); transition: opacity var(--at-d1) var(--at-ease); } .spine-fold-logo img { display: block; width: var(--at-s5); max-width: var(--at-s5); height: auto; object-fit: contain; transform: none; } @media (min-width: 901px) { html,body { height: 100%; overflow: hidden; } .shell { height: 100dvh; overflow: hidden; padding-bottom: 0; } .brandbar { position: fixed; top: 0; right: 0; left: calc(var(--uni-rail-left) + var(--uni-rail-current) + 10px); width: auto; height: var(--app-topbar-h); min-height: var(--app-topbar-h); margin: 0; padding: 0; background: transparent; backdrop-filter: none; border: 0; border-bottom: 1px solid var(--at-line); box-shadow: none; } .brandbar > .brand { display: none; } #campus-home,#lesson-view,#sdlc-view { width: calc(100% + var(--page-gutter)); /* the page ends where the sidebar ends, 12px above the window's foot (owner 2026-09-14, "bottom of Page is same bottom of left side bar") */ height: calc(100dvh - var(--app-topbar-h) - var(--at-s3)); max-height: calc(100dvh - var(--app-topbar-h) - var(--at-s3)); margin-top: var(--app-topbar-h); padding-right: var(--page-gutter); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } #campus-home::-webkit-scrollbar,#lesson-view::-webkit-scrollbar,#sdlc-view::-webkit-scrollbar { width: var(--at-s2); } #campus-home::-webkit-scrollbar-track,#lesson-view::-webkit-scrollbar-track,#sdlc-view::-webkit-scrollbar-track { background: transparent; } #campus-home::-webkit-scrollbar-thumb,#lesson-view::-webkit-scrollbar-thumb,#sdlc-view::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--at-r1); background: color-mix(in srgb, var(--at-tx-3) 62%, transparent) padding-box; } .toc,.depth-nav { position: fixed; top: var(--at-s3); left: var(--uni-rail-left); width: var(--uni-rail-current); height: calc(100dvh - (var(--at-s3) * 2)); max-height: calc(100dvh - (var(--at-s3) * 2)); z-index: 20; } html[data-rail="collapsed"] { --uni-rail-current: var(--uni-rail-coin); } html[data-rail="collapsed"] .brandbar { left: calc(var(--uni-rail-left) + var(--uni-rail-current) + 4px); } html[data-rail="collapsed"] .toc,html[data-rail="collapsed"] .depth-nav { height: calc(100dvh - (var(--at-s3) * 2)); min-height: calc(100dvh - (var(--at-s3) * 2)); max-height: calc(100dvh - (var(--at-s3) * 2)); padding: 0; border-color: transparent; background: transparent; box-shadow: none; } html[data-rail="collapsed"] .spine-content { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--at-d1) var(--at-ease), visibility var(--at-d1) linear var(--at-d1); } html[data-rail="collapsed"] .spine-fold { top: 0; right: 0; width: var(--uni-rail-coin); height: var(--uni-rail-coin); border-width: 1px; border-color: var(--at-line-2); background: linear-gradient(155deg, var(--at-panel), var(--app-canvas)); box-shadow: var(--at-shadow-deep); } html[data-rail="collapsed"] .spine-fold::after { content: ""; position: absolute; inset: -5px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 50%; pointer-events: none; box-shadow: 0 0 var(--at-s2) var(--accent-glow), inset 0 0 var(--at-s1) var(--accent-glow); transition: border-color var(--at-d1) var(--at-ease), box-shadow var(--at-d1) var(--at-ease); } html[data-rail="collapsed"] .spine-fold-chevron { opacity: 0; } html[data-rail="collapsed"] .spine-fold-logo { opacity: 1; } html[data-rail="collapsed"] .spine-fold:hover,html[data-rail="collapsed"] .spine-fold:active { transform: none; box-shadow: var(--at-shadow-deep); } html[data-rail="collapsed"] .spine-fold:hover::after { border-color: var(--accent); box-shadow: 0 0 var(--at-s4) var(--accent-glow), inset 0 0 var(--at-s2) var(--accent-glow); } } @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { #campus-home,.lesson-shell,#sdlc-view { transition: grid-template-columns var(--at-d2) var(--at-ease); } } .spine-group-label { display: block; margin: var(--at-s2) var(--at-s2) var(--at-s1); color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-read); overflow-wrap: break-word; } .spine-group-label:first-of-type { margin-top: var(--at-s1); } .spine-group-rule { height: 1px; margin: var(--at-s2) var(--at-s1) var(--at-s1); background: linear-gradient(90deg, transparent, var(--at-line), transparent); } .spine-links { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--at-s1); min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; } .spine-links::-webkit-scrollbar { width: var(--at-s1); height: var(--at-s1); } .spine-links::-webkit-scrollbar-track { background: transparent; } .spine-links::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--at-r1); } .toc:hover .spine-links,.depth-nav:hover .spine-links { scrollbar-color: var(--at-line-2) transparent; } .toc:hover .spine-links::-webkit-scrollbar-thumb,.depth-nav:hover .spine-links::-webkit-scrollbar-thumb { background: var(--at-line-2); } .spine-link { position: relative; display: grid; grid-template-columns: 27px minmax(0,1fr); gap: var(--at-s2); align-items: center; width: 100%; min-width: 0; min-height: var(--at-s5); padding: var(--at-s1) var(--at-s2); border: 1px solid transparent; border-radius: var(--at-r1); color: var(--at-tx-2); background: transparent; text-decoration: none; font: var(--fw-ui) var(--at-fs-body)/var(--lh-prose) var(--at-disp); transition: color var(--at-d1) var(--at-ease), background var(--at-d1) var(--at-ease), transform var(--at-d1) var(--at-ease); } .spine-index { color: var(--at-tx-3); font: var(--fw-strong) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); font-variant-numeric: tabular-nums; transition: color var(--at-d1) var(--at-ease); } .spine-label { min-width: 0; overflow-wrap: break-word; } .spine-link[aria-current="location"] { color: color-mix(in srgb, var(--accent) 14%, white); background: rgba(var(--accent-rgb), .07); } .spine-link[aria-current="page"] { color: var(--at-tx-1); } .spine-link[aria-current="location"] .spine-index,.spine-link[aria-current="page"] .spine-index { color: var(--accent-text); } .spine-depth-title { display: block; margin: var(--at-s2) var(--at-s2) var(--at-s1); padding-top: var(--at-s2); border-top: 1px solid var(--at-line); color: var(--at-tx-1); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-read); overflow-wrap: break-word; } .spine-link.spine-depth-link { grid-template-columns: 27px minmax(0,1fr); color: var(--at-tx-3); font-size: var(--at-fs-tiny); } .spine-depth-link .spine-index { text-align: right; font-weight: var(--fw-ui); } .spine-depth-link[aria-current="location"] { color: color-mix(in srgb, var(--accent) 14%, white); } .reading-thread { position: absolute; top: 0; left: -1px; z-index: 2; width: var(--at-s1); height: var(--spine-thread-h, 24px); border-radius: var(--at-r1); opacity: var(--spine-thread-o, 0); transform: translateY(var(--spine-thread-y, 0px)); background: linear-gradient(180deg, rgba(var(--accent-rgb), .38), var(--accent)); box-shadow: 0 0 var(--at-s3) var(--accent-glow); pointer-events: none; animation: spine-thread-breathe 3.4s ease-in-out infinite; transition: transform var(--at-d3) var(--at-ease), height var(--at-d2) var(--at-ease), opacity var(--at-d2) var(--at-ease); } @keyframes spine-thread-breathe { 0%, 100% { box-shadow: 0 0 var(--at-s2) var(--accent-glow); } 50% { box-shadow: 0 0 var(--at-s4) var(--accent-glow); } } main { min-width: 0; } section.content-section { scroll-margin-top: 0; } strong, b { font-weight: var(--fw-strong); } h2 { font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-display); } h3 { font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); } h4 { font: var(--fw-ui) var(--at-fs-h3)/var(--lh-prose) var(--at-disp); } p { margin: 0 0 var(--at-s3); } .terminal-dots { display: inline-flex; gap: var(--at-s1); } .terminal-dots i { width: var(--at-s2); height: var(--at-s2); border-radius: 50%; background: var(--at-line); } .terminal-dots i:first-child { background: var(--accent); } .method-grid { margin-top: var(--at-s5); } pre.brief { margin: 0; white-space: pre-wrap; background: var(--at-canvas-0); border: 1px solid var(--at-line); border-radius: var(--at-r1); padding: var(--at-s4); color: var(--at-tx-1); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-body) var(--at-mono); max-height: none; overflow: visible; } footer { border-top: 1px solid var(--at-line); padding: var(--at-s5) 0 var(--at-s2); color: var(--at-tx-2); display: flex; align-items: center; justify-content: space-between; gap: var(--at-s5); font-size: var(--at-fs-tiny); } /* Tools and integrations has its own teaching composition. It is intentionally not forced through the shared lesson-card template. */ .mcp-technical { margin-top: var(--at-s4); border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); padding: 0 var(--at-s4); } .mcp-technical summary { cursor: pointer; color: var(--at-tx); font-weight: var(--fw-strong); padding: var(--at-s3) 0; } .mcp-technical[open] summary { border-bottom: 1px solid var(--at-line); } .mcp-technical > p { margin: var(--at-s3) 0 0; color: var(--at-tx-2); } .mcp-technical .mcp-glossary { margin: var(--at-s3) 0; } @media (max-width: 760px) { /* the circle fills its own column, round (D6 retired the control height it read) */ } .lesson-shell { width: 100%; margin: 0; padding: var(--at-s5) 0 var(--at-s5); display: grid; grid-template-columns: var(--uni-rail-current) minmax(0,1fr); column-gap: var(--at-s6); align-items: start; } .lesson-layout { display: contents; } .lesson-layout > .depth-nav { grid-column: 1; grid-row: 1 / span 2; } .lesson-content { grid-column: 2; grid-row: 2; min-width: 0; padding-top: var(--at-s5); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: var(--at-s1); overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Madav's one join path for navigable tiles. */ .fluid-tile { transition: var(--tile-trans); } .fluid-tile.fluid-tile:active { transform: translateY(var(--tile-lift-active)); box-shadow: var(--emboss-press); } /* General card rows reflow continuously; no breakpoint-specific column counts. */ :is(.lesson-link, pre.brief) { min-width: 0; overflow-wrap: break-word; word-break: normal; } /* Read-only teaching blocks keep the tile rhythm without pretending to be controls. */ /* Shared supporting type roles. Components may change layout,but labels,metadata and explanatory copy do not invent new sizes. */ :is(.brand-copy span, .eyebrow, .lesson-link small, footer) { font-size: var(--at-fs-tiny); } :is(.btn, pre.brief) { font-size: var(--at-fs-tiny); } html[data-lum="light"] { color-scheme: light; } html[data-lum="light"] body { background: var(--app-canvas); } html[data-lum="light"] .brandbar { background: var(--at-panel); box-shadow: var(--at-shadow); } @media (min-width: 901px) { html[data-lum="light"] .brandbar { background: transparent; box-shadow: none; } } html[data-lum="light"] body:before { display: none; } html[data-lum="light"] .btn:active:not(:disabled) { box-shadow: var(--emboss-press); } html[data-lum="light"] .btn.primary { color: #fff; background: var(--accent); border-color: transparent; } /* a white label on paper would be invisible,so an OUTLINE button keeps its ink on the light face only - the filled buttons are white on both */ html[data-lum="light"] .btn:not(.primary) { color: var(--at-tx); } /* EVERY TILE IS WHITE ON PAPER (owner, 2026-09-13). These nine carried no background of their own and let the page show through. Only the colour is set, so a gradient that marks a state - the accent wash on a chosen card - still paints over the white. */ html[data-lum="light"] .flat-tile, html[data-lum="light"] .step, html[data-lum="light"] .close-card, html[data-lum="light"] .lesson-link, html[data-lum="light"] .lesson-figure { background-color: var(--at-panel); } /* THE THREE ACCENT WASHES ARE WHITE TOO (owner, 2026-09-13: "change it to white too"). They were the accent's fourth version - a light fill and an edge - marking the one to look at. The fill goes; the accent EDGE stays, so each still reads as the one that matters without a tint. The shorthand is used here on purpose: the wash IS a gradient layer, and only the shorthand removes it. The dark face keeps its wash. */ html[data-lum="light"] .lesson-example, html[data-lum="light"] .route-note { background: var(--at-panel); } html[data-lum="light"]:not([data-rail="collapsed"]) .toc,html[data-lum="light"]:not([data-rail="collapsed"]) .depth-nav { background: linear-gradient(180deg, var(--at-panel), transparent 26%), color-mix(in srgb, var(--at-panel) 55%, transparent); } html[data-lum="light"] .spine-link[aria-current="location"],html[data-lum="light"] .spine-depth-link[aria-current="location"] { color: var(--at-tx); background: rgba(var(--accent-rgb), .09); } html[data-lum="light"] pre.brief { background: var(--at-panel); } html[data-lum="light"] pre.brief { color: var(--at-tx-1); } html[data-lum="light"] :is(.eyebrow, h1 em) { color: var(--accent-text); } @media (hover:hover) and (pointer:fine) { a:hover { color: var(--accent-text); } .theme-toggle:hover { color: var(--at-tx); background: var(--at-well); transform: translateY(var(--lift-btn)); box-shadow: var(--at-shadow); } .theme-toggle:hover .theme-sun { color: var(--accent-text); } .theme-toggle:hover .theme-moon { color: color-mix(in srgb, var(--at-gold) 82%, white); fill: color-mix(in srgb, var(--at-gold) 82%, white); } .btn:hover:not(:disabled) { border-color: var(--at-line-2); color: var(--at-tx); transform: translateY(var(--lift-btn)); } .btn.primary:hover:not(:disabled) { background: var(--accent); border-color: transparent; color: #fff; } .spine-link:hover { color: var(--at-tx); background: var(--at-well); transform: translateY(var(--lift-btn)); } .spine-link:hover:active { transform: scale(.98); } .spine-fold:hover { color: var(--at-tx); border-color: var(--accent); background: var(--at-canvas-2); transform: translateY(var(--lift-btn)); box-shadow: var(--at-shadow-deep); } .spine-fold:hover:active { transform: scale(.94); box-shadow: var(--emboss-press); } .fluid-tile.fluid-tile:hover { transform: translateY(var(--tile-lift)); border-color: var(--at-az-line); box-shadow: var(--at-shadow); } .btn:hover:active:not(:disabled),.theme-toggle:hover:active,.fluid-tile.fluid-tile:hover:active { transform: scale(.97); box-shadow: var(--emboss-press); } } @media (max-width: 900px) { .spine-brand { display: none; } #campus-home { display: block; padding-top: 0; } #campus-home > .layout { display: block; padding-top: var(--at-s4); } #campus-home > .layout > .toc,#campus-home > .layout > div { grid-column: auto; grid-row: auto; padding-top: 0; } .layout { grid-template-columns: 1fr; } .lesson-shell { display: block; padding-top: 0; } .lesson-layout { display: block; padding-top: var(--at-s4); } .lesson-layout > .depth-nav,.lesson-content { grid-column: auto; grid-row: auto; padding-top: 0; } .toc,.depth-nav { position: relative; top: 0; height: auto; min-height: 0; max-height: none; display: flex; overflow: hidden; } .spine-fold { display: none; } .spine-content { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .spine-links { flex: 0 0 auto; flex-direction: row; gap: var(--at-s1); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding: 0 var(--at-s1) var(--at-s1); } .spine-group-label,.spine-group-rule,.spine-depth-title { display: none; } .spine-link,.spine-link.spine-depth-link { flex: 0 0 auto; width: auto; white-space: nowrap; scroll-snap-align: start; } .reading-thread { top: auto; bottom: 1px; left: 0; width: var(--spine-thread-w, 32px); height: var(--at-s1); transform: translateX(var(--spine-thread-x, 0px)); transition: transform var(--at-d3) var(--at-ease), width var(--at-d2) var(--at-ease), opacity var(--at-d2) var(--at-ease); } } @media (max-width: 760px) { .shell { padding-left: var(--at-s4); padding-right: var(--at-s4); } .brandbar { align-items: center; gap: var(--at-s3); padding: var(--at-s1) var(--page-gutter); } .brand { gap: var(--at-s2); } .brand img { width: 105px; } .brand-copy span { display: none; } .layout,.lesson-layout { padding-top: var(--at-s4); } #map-expand { display: none; } footer { flex-direction: column; align-items: flex-start; } h1 { font-size: var(--at-fs-hero); } } @media (max-width: 440px) { .brand-rule { display: none; } .brand img { width: 112px; } .theme-toggle { padding: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*:before,*:after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } .fluid-tile.fluid-tile:hover,.fluid-tile.fluid-tile:active,.btn:hover:not(:disabled),.btn:active:not(:disabled),.theme-toggle:hover,.theme-toggle:active,.spine-link:hover,.spine-link:active,.spine-fold:hover,.spine-fold:active { transform: none !important; } #campus-home,.lesson-shell,#sdlc-view,.toc,.depth-nav,.spine-content,.spine-fold { transition: none !important; } .reading-thread { animation: none !important; transition: none !important; } .theme-toggle svg { transition: opacity var(--at-d1) var(--at-ease); transform: none !important; } } @media print { @page { margin: 14mm; } :root {} html,body { height:auto; overflow:visible; } body { background:#fff; color:#171717; font-size:11pt; } body:before { display:none; } .shell,#lesson-view,#sdlc-view { width:100%; height:auto; max-height:none; margin-top:0; padding:0; overflow:visible; } .shell { overflow:visible; } .lesson-shell { display:block; } .brandbar { position: static; width:auto; height:auto; min-height:auto; margin-inline:0; padding:var(--at-s3) 0; } #campus-home { display:block; width:100%; height:auto; max-height:none; margin-top:0; padding-top:0; padding-right:0; overflow:visible; } #campus-home > .layout { display:block; } #campus-home > .layout > div { padding-top:0; } .layout,.lesson-layout { display:block; } .toc, .depth-nav, .hero-actions, .theme-toggle { display:none !important; } h1 { font-size: 30pt; } h2 { font-size: 22pt; } h3 { font-size: 16pt; } a { color:#03577f; } } /* =================================================================== THE JOINED-FLOW MAP. Inlined from madav-joined-ai-flow-mock.html,which madav.ai refused to frame (X-Frame-Options: DENY + frame-ancestors 'none'). Every rule below is scoped to #madav-joined-ai-flow-mock; the map's private --mj-* family, its three duplicate @font-face blocks and its four unscoped html[data-embed] rules did NOT come with it. Its light face now reads the page's own html[data-lum],so the face has one source. =================================================================== */ /* --------------------------------------------------------------------------- THE HOST BARRIER. Inside an iframe this section was immune to the page's own bare-element rules; inlined it is not. index.html styles bare h1-h4, p, a and button, and its `main :where(...)` rule forces white-space:normal and overflow:visible - which would break every nowrap and ellipsis in here. :where() contributes ZERO specificity, so this scores (1,0,0) from the id alone: above the host's (0,0,1) element rules,below every classed rule the map itself declares. Neutralise,then let the map paint. --------------------------------------------------------------------------- */ #madav-joined-ai-flow-mock :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, a, button, span, small, strong, b, em, i, blockquote, figure, figcaption, table, td, th, section, article, header, footer, aside, div, pre, code) { margin: 0; padding: 0; max-width: none; min-width: 0; font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; text-wrap: auto; text-decoration: none; overflow-wrap: normal; word-break: normal; white-space: normal; text-transform: none; list-style: none; border: 0; background: none; box-shadow: none; } #madav-joined-ai-flow-mock :where(strong, b) { font-weight: var(--fw-strong); } #madav-joined-ai-flow-mock :where(em, i) { font-style: italic; } #madav-joined-ai-flow-mock { /* THE THIRD ACCENT ALIAS. amber/blue/brass were all the SAME hex in the original map - one accent, flattened - so all three follow --accent. Binding this one to the supporting gold instead was my error: it made the 'over limit' and 'proposed action' strokes the only warm thing on an azure map, LOUDER than they had ever been, and the legend I justified it with does not exist - the scope bar was deleted when the map was inlined. jade/cyan/violet/rose keep their own colours; those were always distinct. */ width: 100%; min-width: 0; overflow: hidden; color: var(--at-tx); background: var(--at-canvas-0); border: 0; border-radius: 0; font-family: var(--at-read); } #madav-joined-ai-flow-mock * { box-sizing: border-box; } #madav-joined-ai-flow-mock button { font: inherit; } #madav-joined-ai-flow-mock h2,#madav-joined-ai-flow-mock h3,#madav-joined-ai-flow-mock p { margin: 0; } #madav-joined-ai-flow-mock .mj-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--at-s1); } /* University reading law: content uses the available width and grows instead of clipping. */ @media (max-width: 430px) { #madav-joined-ai-flow-mock .mj-tools { justify-content: flex-end; margin-top: var(--at-s2); } } /* Madav University design system: presentation only; flow geometry stays unchanged. */ #madav-joined-ai-flow-mock { color-scheme: dark; background: var(--at-canvas-1); } html[data-lum="light"] #madav-joined-ai-flow-mock { color-scheme: light; } /* The two arrowhead markers used to carry a hard-coded gold as a presentation ATTRIBUTE in the markup,where no design token could reach them - the arrows on every connector would have stayed gold while the rest of the map turned. It lives here now,once,and follows the accent like everything else. */ #madav-joined-ai-flow-mock #mj-arrow-brass path,#madav-joined-ai-flow-mock #mj-arrow-brass-compact path { fill: var(--accent); } /* =================================================================== THE JOURNEY DRESS (owner-approved mock, 2026-08-24). The spine is the one idea: the journey is the page's structure. Everything here speaks the page's own Atelier tokens; the flow map is untouched. =================================================================== */ :root{ --jy-gutter: clamp(44px, 4vw, 84px); } /* the spine: chapters hang off one drawn thread,and it ends open */ .chapter,.terminus { display:grid; grid-template-columns: var(--jy-gutter) minmax(0,1fr); padding-top: clamp(var(--at-s5), 6vh, 60px); } .chapter:first-child{ padding-top: var(--at-s1); } .habit{ display:inline-flex; align-items:baseline; gap:var(--at-s2); border:1px solid var(--at-line); border-radius:var(--at-r1); background:var(--at-panel); padding:var(--at-s2) var(--at-s3); font-size:var(--at-fs-tiny); color:var(--at-tx-2); } .habit b{ color:var(--at-tx-1); font-weight:var(--fw-ui); white-space:nowrap; } @keyframes terminus-pulse{ 0%,100%{ box-shadow:var(--accent-ring); } 50%{ box-shadow:var(--accent-ring), 0 0 var(--at-s4) var(--accent-glow); } } /* the topic homes: numbered tiles on adaptive tracks,always flush */ /* the route: the spine turned horizontal */ .route-note{ margin:var(--at-s5) 0 0; border:1px solid var(--at-az-line); border-radius:var(--at-r1); background:var(--at-az-w); padding:var(--at-s3) var(--at-s4); color:var(--at-tx-1); font-size:var(--at-fs-body); } .route-note strong{ color:var(--accent-text); } /* the method: six steps on adaptive tracks */ .method{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--at-s3); } @media (min-width:901px) and (max-width:1499px){ .method{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (min-width:1500px){ .method{ grid-template-columns:repeat(6, minmax(0,1fr)); } } /* the first build */ .build{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:clamp(var(--at-s5), 3vw, 56px); align-items:stretch; } .build > div:first-child{ display:flex; flex-direction:column; min-width:0; } .brief{ border:1px solid var(--at-line); border-radius:var(--at-r1); background:var(--at-canvas-0); padding:var(--at-s4) var(--at-s5); margin:0; color:var(--at-tx-1); font:var(--fw-body) var(--at-fs-tiny)/var(--lh-body) var(--at-mono); white-space:pre-wrap; } :root[data-lum="light"] .brief{ background:var(--at-canvas-2); } /* the closing card */ .close-card{ border:1px solid var(--at-line-2); border-top-color:var(--at-az-line); border-radius:var(--at-r1); background:linear-gradient(150deg, var(--at-panel), var(--at-canvas-2)); padding:clamp(var(--at-s5), 4vw, 48px); } .close-card h2{ font:var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing:var(--tr-display); } .close-card p{ margin:var(--at-s2) 0 0; color:var(--at-tx-1); } /* the corner: the face switch */ /* the corner's icons stand on the page with no tile behind them (owner 2026-09-14, "Remove background Tile from that Icons on top") */ .corner{ position:fixed; top:10px; right:14px; z-index:120; display:flex; align-items:center; gap:var(--at-s1); } .icon-btn{ display:grid; place-items:center; width:var(--at-s5); height:var(--at-s5); border:0; border-radius:50%; color:var(--at-tx-2); background:transparent; cursor:pointer; text-decoration:none; padding:0; transition:var(--fluid-trans), color var(--at-d1) var(--at-ease), background var(--at-d1) var(--at-ease); } .icon-btn:hover{ color:var(--at-tx); background:var(--at-panel); transform:translateY(var(--lift-btn)); } .icon-btn:active{ transform:scale(.94); } .icon-btn > svg{ width:var(--at-s4); height:var(--at-s4); fill:currentColor; } .corner .theme-toggle{ position:relative; } .corner .theme-toggle svg{ position:absolute; inset:0; margin:auto; } /* the reference-lesson pieces: a drawn figure and the running-example thread */ .lesson-example{ margin:var(--at-s4) 0 0; border:1px solid var(--at-az-line); border-radius:var(--at-r1); background:rgba(var(--accent-rgb), .05); padding:var(--at-s3) var(--at-s4) var(--at-s3); } .lesson-example .lex-kicker{ display:block; margin-bottom:var(--at-s1); color:var(--accent-text); font:var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-read); letter-spacing:var(--tr-small); } .lesson-example p{ margin:0; color:var(--at-tx-2); font:var(--fw-body) var(--at-fs-body)/var(--lh-body) var(--at-read); } @media (max-width:900px){ :root{ --jy-gutter: 26px; } .brandbar{ padding-right:180px; } .build{ grid-template-columns:minmax(0,1fr); } } @media (max-width:560px){ /* a phone keeps the MADAV mark alone - the wordmark has no room beside the corner,and wrapping "University" mid-line reads as a defect; the footer still says it */ .brandbar .brand-copy,.brandbar .brand-rule { display:none; } .brandbar { padding-right:150px; } } @media (prefers-reduced-motion: reduce){ .tile:hover,.icon-btn:hover { transform:none; } } /* EVERY BOX SITS SLIGHTLY FORWARD (the design book, law 6; owner 2026-09-13 "apply for entier university page"). The house tile is a 1px house edge on var(--emboss-rest), and the page's own .tile already wore it - these join it rather than each carrying a copy. Code wells stay recessed, chips and edgeless containers stay as they are, and no hover lift is added: a tile that answers nothing does not rise (his 2026-09-02 ruling). */ .flat-tile, .step, .close-card, .lesson-link, .lesson-example, .route-note, .lesson-figure { box-shadow: var(--emboss-rest); } /* THE MAP ROW IS THE HOUSE ROW (owner 2026-09-13, "Reduce Space between point in left sections"). The application's sidebar row, restated because landing cannot import it: styles.css .nav-item (padding --row-pad, a 1px edge, no stated height, the icon --at-s3 from its label; the number takes the icon's slot, --icon-md, so every label starts at one x - the display face has no even figures, and an '11' is 4px narrower than an '08') and styles.css .sb-scroll (rows 1px apart). */ .spine-links { gap: 1px; } .spine-link, .spine-link.spine-depth-link { grid-template-columns: var(--icon-md) minmax(0,1fr); gap: var(--at-s3); min-height: auto; padding: var(--row-pad); } /* A NUMBER IS FURNITURE (the voice ruling, 2026-08-30: Madav Display wears "labels, table rows, numbers"). One dress for every number in every map, on even figures. */ .spine-index, .spine-depth-link .spine-index { font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-ui); font-variant-numeric: tabular-nums; text-align: left; } /* THE PROFILE ROW (owner 2026-09-13: "move Creator and Linkden contact into this section like profile appears in application", then "replace with M Logo of Madav in place of C profile Picture and next to it add Linkden, instagram, X real logo"). It sits where the application puts its profile, at the foot of the map behind one hairline (styles.css .sb-profile). The face is the book's avatar, 2.15: round, one hairline, sitting forward - here it wears Madav's mark. The three doors are the page's one icon button, so they hover the way every icon does. */ .spine-profile { display: flex; align-items: center; gap: var(--at-s2); margin-top: var(--sp-1); padding: var(--at-s3) var(--at-s2) var(--at-s1); border-top: 1px solid var(--at-line); } /* THE DOORS ARE QUIET GREY GLYPHS (his word 2026-09-13, "Change these social media icons to grey icons shown in pic", replacing "real colour picture of all three"; and "Remvoe Swquare background from Web icon and make webicon size same as other icon"): one single-colour drawing per door, no ground behind it, in the icon button's own ink and at the icon size the book gives a row's icon, answering the mouse with the page's one icon hover */ .spine-door > svg { width: var(--icon-md); height: var(--icon-md); } /* On a phone the map is one sticky strip, and a second row under it would cover reading for the whole scroll. So the row sits at the strip's end - its doors, the strip keeping its height. */ @media (max-width: 900px) { .spine-content { flex-direction: row; align-items: center; gap: var(--at-s2); } .spine-links { flex: 1 1 auto; min-width: 0; } .spine-profile { flex: 0 0 auto; gap: var(--at-s1); margin-top: 0; padding: 0; border-top: 0; } } /* ONE LEFT EDGE (owner 2026-09-13, "Everythign should be left aligned in page"). The journey's chapter thread is a drawing: on a wide window it hangs in the margin left of the column, so the chapter text starts at the same edge as every heading. A phone has no margin to hang it in, so there it keeps its own column (the rule below applies from 901px). */ @media (min-width: 901px) { .chapter, .terminus { grid-template-columns: var(--at-s6) minmax(0,1fr); margin-left: calc(-1 * var(--at-s6)); } } /* THE SIXTEEN AI TOPICS AS CHILD ROWS OF 04 AI TOPICS (owner 2026-09-13, "AI topics should child items in Learn and build as 01 - 16"). Each child's number starts under its parent's label: set in by one number slot and its gap, as the application's sub-row is (styles.css .nav-item.nav-sub). */ .spine-children:not([hidden]) { display: flex; flex-direction: column; gap: 1px; margin-left: calc(var(--icon-md) + var(--at-s3)); } @media (max-width: 900px) { .spine-children:not([hidden]) { display: none; } } /* THE CORNER'S HOME DOOR AND ACCENT DOT (owner 2026-09-13). Both are the page's one icon button. Home is the application's own door, TopNav.jsx: the Home glyph, drawn with its two strokes. */ .corner-home > svg { fill: none; } .accent-dot { display: block; width: var(--icon-sm); height: var(--icon-sm); border-radius: 50%; background: var(--accent); border: 1px solid var(--at-line-2); box-shadow: var(--emboss-rest); } /* the accent panel floats, so it wears the book's floating dress (2.13): the one corner, the panel fill, one hairline, the deep shadow, the menu layer */ .accent-pop:not([hidden]) { position: absolute; top: calc(100% + var(--at-s2)); right: 0; z-index: var(--z-menu); display: flex; flex-direction: column; gap: 1px; min-width: calc(var(--tile-min) * .8); padding: var(--at-s2); border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--at-shadow-deep); } .accent-pop-title { padding: var(--at-s1) var(--at-s2) var(--at-s2); color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-ui); } .accent-choice { position: relative; display: flex; align-items: center; gap: var(--at-s3); width: 100%; padding: var(--row-pad); border: 1px solid transparent; border-radius: var(--at-r1); background: transparent; color: var(--at-tx-1); font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-ui); text-align: left; cursor: pointer; transition: background var(--at-d1) var(--at-ease); } .accent-choice:hover { background: var(--at-row-hover); color: var(--at-tx); } .accent-choice[aria-checked="true"] { color: var(--accent-text); } .accent-swatch { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); border-radius: 50%; border: 1px solid var(--at-line-2); box-shadow: var(--emboss-rest); } /* Madav blue is painted by the engine from the house token itself, so it stays the house blue while the page wears another colour; Any colour is a picture of every hue - the colours of a colour wheel */ .accent-swatch-any { background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); } .accent-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* LONG TEXT IS JUSTIFIED (owner 2026-09-13, "Where ever you long text, keep it justified format"). Running text only; a caption keeps its last line centred under its drawing. A file block is a pre and is never reached, so every .md stays monospace exactly as it is written. */ :is(#campus-home, #sdlc-view, #lesson-view) :is(p, dd, li, blockquote, .proofs > div, .route-note):not(:is(td, th, button, .btn) *) { text-align: justify; } :is(#campus-home, #sdlc-view, #lesson-view) figcaption { text-align: justify; text-align-last: center; } /* THE MAP'S FOOT IS ITS DOORS, CENTRED (owner 2026-09-14, "Remove this M Logo", "Center align this section to Side bar"); each door's drawing is framed to fill the same 90% of its box ("All social Media Icons Should be same size") */ .spine-profile { justify-content: center; } /* THE WHOLE AI FLOW IN TWO LAYERS (owner 2026-09-19): the story flow's own dress, widened to this block in the one sheet's story block; here only its place under the map and the inputs' lower tile - the icon at its left, the name, the number at its right, all on the tile's centre line; its tiles measure their padding inside as the story's do */ /* THE MAP HAS LEFT (owner 2026-09-19, "delete the old AI Flow diagram"): its figure holds only the lesson panel, and stands only while a lesson is open */ /* a pressed or focused tile never scrolls the drawing's frame: the frame is cut to the scaled drawing, so the unscaled world it holds is clipped, not scrolled (a press had moved the whole drawing 82px up under the page's front door) */ #concepts .aif.aif .sd-flow-sizer { overflow: clip; overflow-clip-margin: var(--at-s3); } /* THE TOPICS AS BIG PICTURE TILES (owner 2026-09-19, "remove this Categorization and Numbering ... big tie and subject name on the top"): one grid of equal tiles at the size nine to a row gave them ("switch to 9 per row"), as many to a row as the page holds, so the row fills as he adds topics ("Make Tile Size 60% of current size", then "Reduce Tile Size by 30% from current size"; four, then two, then one to a row as the window narrows), each its name on top and its picture beneath, a square picture space (his drawings are square, so none of one is cut) holding the topic's one line in quiet ink until the picture comes */ /* A DAY AT MADAV COFFEE SHOP (owner 2026-09-19, "readers can first read the story, understand the context, and then go into individual components"): the story opens the page above the tiles - one map of the shop, then seven scenes, each a wide drawing beside its words, the sides alternating so the day reads as a strip; on a narrow window a scene stacks, picture first. The words take the page's own type and rhythm; the doorway line under each scene carries the accent. */ /* THE TOPIC LESSONS READ SIMPLY (owner 2026-09-19, "apply the same lesson format to AI in Plain Words topics", "we may need to change later"): one column top to bottom in the story page's type, no tiles or boxes - the one line in the display face under its small label, each section's points as a plain list, its example as one line, why it matters and the closing line, the Madav prompt as a quoted line */ .lesson-picture[hidden] { display: none; } .lesson-picture-open { display: block; padding: 0; border: 0; border-radius: var(--at-r1); background: none; cursor: zoom-in; } .lesson-picture img { display: block; max-width: 100%; height: auto; max-height: calc(var(--sp-8) * 5); border-radius: var(--at-r1); } .picture-zoom { position: fixed; inset: 0; margin: auto; padding: 0; z-index: var(--z-dialog); max-width: calc(100vw - var(--at-s7) * 2); max-height: calc(100vh - var(--at-s7) * 2); overflow: hidden; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--at-shadow-deep); } .picture-zoom::backdrop { background: var(--at-scrim-deep); } .picture-zoom img { display: block; max-width: calc(100vw - var(--at-s7) * 2); max-height: calc(100vh - var(--at-s7) * 2); width: auto; height: auto; cursor: zoom-out; } :is(.lesson-shell, #aif-lesson) .lesson-list { padding-left: var(--at-s5); } /* his plain-words template (owner 2026-09-19): each part a small heading and short paragraphs, the example's list plain, the recommendation in bold, the practice a numbered list with a bold lead, the one line to remember set off by a bar */ /* one rhythm down the lesson (owner 2026-09-19, "Can you align spacing between different subject. its nto consistent"): one step between his parts, one smaller step between every line inside a part, whatever that line is */ /* THE LESSON READS SIMPLY (owner 2026-09-19, "simple, straightforward, with no overcomplexities ... Just change the format of the way the information will be presented"): one column read top to bottom in the story page's type, no boxes - the name at the story's section size with its layer as the kicker above it, the one line in the display face, parts under a small heading, the basics as a plain list, the example's request in the display face, the fact to remember as the closing line */ /* THE LESSON WEARS THE AI-NATIVE SDLC PAGE (owner 2026-09-19, "Fix that page design and align it to the AI-native SDLC page ... that page has two slide 2 tiles in backend. Remove that. Make it aligned like the SDLC page: font, tiles, inside spacing, and text, everything"): the two frames behind it go, its head and sections read as the story's sections, and every card is a story tile - the story page's numbers, spoken in the house tokens */ #concepts #madav-joined-ai-flow-mock { background: none; } #concepts .aif.aif .sd-figure { margin-inline: 0; padding-inline: 0; } #concepts .aif .sd-tile { box-sizing: border-box; } /* the drawing is shown at about two thirds of its size, so its words are drawn larger than the story's ("Increase the font size of the sequence number ... Increase the font size of tile name as there is enough space", then "Reduce the font of the tiles ... Increase Thai sequence font"), and a name stands at its tile's centre, across and down, the same room on both sides ("All tile NAme Text has to be center-aligned to make it look tidy") */ #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile strong { display: block; font-size: calc((var(--at-fs-body) + var(--at-fs-h3)) / 2); line-height: var(--lh-tight); } #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile-badge { font-size: var(--at-fs-h3); } /* the three layers' names in the accent and a size larger than the notes' ("All three big tiles ... Change the color to the accent color and make the font a little big"); the orchestration layer's name at its foot ("Move orchestration action and outcome as shown") */ #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-map-zone[data-layer] .sd-map-zone-heading { color: var(--accent-text); font-size: var(--at-fs-h3); } #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile.is-slim { padding-inline: calc(var(--icon-lg) + var(--at-s1) * 1.5); } #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile.is-slim { padding-block: 0; } #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile.is-slim > .sd-tile-face { top: calc((100% - var(--icon-lg)) / 2); } #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile.is-slim .sd-tile-badge { top: calc((100% - var(--at-s5)) / 2); } /* EVERY HEADER IS ONE SIZE (owner 2026-09-19, "The red section on this page will be the size of the header for all pages ahead ... Make all header sections the same size"): the whole AI picture's and the story's headers start where the page's top gap ends and are at least 184px, their words centred top to bottom with a small step of air above and below; the journey's header is its picture at the same height (journey-opens-on-the-maker.py) */ /* THE ROBOT BEHIND THE MAP (owner 2026-09-19: "position the robot behind the sidebar and make the sidebar transparent", "Make it even dimmer", "can you make it stay all the time, irrespective of the page? Also, when the sidebar is minimized, the robot stays in the backend"): one picture behind the whole page, where the map's foot is - the map's left edge and open width, standing on the doors' row where it stood in the map ("Do not change the position of the robot") - drawn at 22% beneath every page's content; the open map's fill is 55% on paper and 30% in the dark face, whose dark fill hid it ("In the dark mode, it's not visible on the sidebar. Fix it"), and when the map folds the words of the page run over it at about a fifth. A phone's map is a strip with no foot, so it is not drawn */ .uni-robot { display: none; } @media (min-width: 901px) { .uni-robot { position: fixed; z-index: -1; left: var(--uni-rail-left); bottom: calc(var(--sp-8) + var(--sp-1)); align-items: flex-end; justify-content: center; width: var(--uni-rail); height: calc(100dvh - var(--sp-8) * 6); opacity: .22; pointer-events: none; } /* only behind the open map ("when the sidebar is minimized. Don't make it visible on the main page"), on every page ("Robot stays on the sidebar all the time, irrespective of any page") */ html:not([data-rail="collapsed"]) .uni-robot { display: flex; } .uni-robot > img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom center; } /* the pale drawing carries on a dark sidebar and fades on a light one, so paper gets more of it (owner 2026-09-20: "I'd lift the light face to about 32% and leave dark alone") */ html[data-lum="light"] .uni-robot { opacity: .32; } } /* THE FOLDED MAP'S M IS 30% LARGER IN THE SAME ROUND (owner 2026-09-14, "Keep Circel size same , increaase M logo size by 30%") - the 22px step times 1.3; the round keeps its size */ .spine-fold-logo, .spine-fold-logo img { width: calc(var(--at-s5) * 1.3); max-width: calc(var(--at-s5) * 1.3); } .spine-fold-logo { height: calc(var(--at-s5) * 1.3); } /* THE FOLDED MAP'S RING SHOWS THE ROBOT'S FACE (owner 2026-09-19, "replace the M logo with a big robot face so that it covers the maximum of the circle", then "Make the robot face even bigger, as big as the inner white circle"): the face takes the whole round button inside the accent ring, clipped to its circle, edge to edge */ .spine-fold-logo { width: 100%; max-width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .spine-fold-logo img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; } /* THE READING THREAD IS THE APPLICATION'S (owner 2026-09-14, "Align how it is in application") - island-rail.css .isl-thread: 2.5px wide, a 2px corner, 7px inside its row top and bottom, its glow breathing 8px at .4 to 16px at .8 over 3.4s */ .reading-thread { width: 2.5px; border-radius: 2px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .35), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); animation-name: spine-thread-glow; } @keyframes spine-thread-glow { 0%, 100% { box-shadow: 0 0 8px rgba(var(--accent-rgb), .4); } 50% { box-shadow: 0 0 16px rgba(var(--accent-rgb), .8); } } @media (max-width: 900px) { .reading-thread { height: var(--at-s1); border-radius: var(--at-r1); } } /* THE FOLDED MAP'S M BREATHES SLOWLY (owner 2026-09-14, "make that m Breath slowly") - a 6s house ease: the M swells 6% as its round's accent ring brightens and glows, then settles; still for a reader who asks for less motion */ @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { html[data-rail="collapsed"] .spine-fold-logo img { animation: spine-fold-breathe 6s var(--at-ease) infinite; } html[data-rail="collapsed"] .spine-fold::after { animation: spine-fold-ring 6s var(--at-ease) infinite; } } @keyframes spine-fold-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes spine-fold-ring { 0%, 100% { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 var(--at-s2) var(--accent-glow), inset 0 0 var(--at-s1) var(--accent-glow); } 50% { border-color: var(--accent); box-shadow: 0 0 22px rgba(var(--accent-rgb), .6), inset 0 0 var(--at-s2) var(--accent-glow); } } /* THE MAP WEARS THE APPLICATION'S RAIL SHADE ON THE DARK FACE (owner 2026-09-14, "Change side bar shade in dark mode"): it was the page's own ground under a fading gleam; the application's rail (island-rail.css .sidebar.glass) is the panel */ html[data-lum="dark"]:not([data-rail="collapsed"]) .toc,html[data-lum="dark"]:not([data-rail="collapsed"]) .depth-nav { background: color-mix(in srgb, var(--at-panel) 30%, transparent); } /* THE PICTURE PAGE STARTS WHERE THE OTHER PAGES START (owner 2026-09-14, the journey and the whole AI picture as two pages): its first section takes no room above it, so its first line stands where the journey's and the story's do */ /* ==== THE CREATOR'S JOURNEY WEARS THE AI-NATIVE SDLC STORY'S DESIGN (owner 2026-09-14, "adopt all design chanegs from AI-native page to journey page"; the eighteen-item list approved, "yes the design part") - scoped to the journey; the numbers are the list's ==== */ /* 4 THE CHAPTERS' HEAD: 30px below the opening's edge, as every story section stands; it hands off on its 12px step, the empty band under the subtitle's letters trimmed, and the first chapter brings no room of its own */ #campus-home .chapter:first-child { padding-top: 0; } /* 7 A CHAPTER'S PICTURE TAKES ONE WIDTH IN EVERY CHAPTER - 10.5 of the house's 64px steps (672px), the room Chapter 03's three equal tiles need to keep every line on one line - never more than half, and the story takes the rest */ /* a chip keeps its words on one line, as the story's chips do, at its own width; where Chapter 01's three do not fit on one row the next one starts the row below */ #campus-home .habit { gap: var(--at-s2); justify-content: center; white-space: nowrap; flex: 0 0 auto; } /* 11 CHAPTER 03'S TILES WEAR THE HOUSE TILE AT ONE WIDTH, and do not rise, since pressing them does nothing; Capable builder keeps its blue edge and words - the answer of the equation - without the glow the book keeps for a selected thing (2.27) */ #campus-home :is(.chapter, .terminus) { padding-top: var(--at-s6); } #campus-home .chapter:first-child { padding-top: 0; } /* ==== TRIAL: IF I WERE STARTING TODAY - THE THREE LEVELS CLIMB AS SMALL CARDS, AND PRESSING ONE SHOWS ITS STORY (owner 2026-09-14) ==== */ /* the climb (his "I like you 3 level", centred, with "more distance between level" and the story loop's arrows): three cards 96px apart (one and a half of the house's 64px steps), each on a base that names its level, 42px higher than the last; the drawing is 1008px wide (cards of 272px, wide enough that every card keeps its two tags on one row) and centred on the page; below that width the cards stand one under another */ /* the story loop's hairline and head, dashed ("arrow can be dashed") */ /* the level being read comes forward - larger, ringed in the accent and glowing - while the other two stay fully visible (owner 2026-09-15, "Make all three visible, remove dim option. select tile become big with glow stays"; the dimming asked for on 2026-09-14, "dim level 2 and 3", is withdrawn) */ /* its border glows and breathes, in the recipe the story's files breathe with (sd-file-breathe, the one sheet's story block) - "when selected,i want Tile border to glow and breathe like we have for fiel in AI-native page. Also when selected > can make that level come forward and appeat 15% more big" */ /* while a card is enlarged, the arrow pointing into it stops short of its larger edge, so its head still shows */ /* the icons in colour, standing on their own - no circle behind them, the Madav M too ("For Icon, dont put it in Circle tile, keep it just icon, for m also") */ #campus-home .lv-step-icon { display: grid; place-items: center; } #campus-home .lv-step-1 .lv-step-icon { color: var(--accent-text); } #campus-home .lv-step-2 .lv-step-icon { color: var(--accent-orange); } #campus-home .lv-step-icon img { display: block; width: var(--icon-md); height: var(--icon-md); } /* the colour lives in the base that names the level, stronger up the climb: a wash, a deeper wash, the accent itself at the summit */ /* the first base is the lightest rung of the climb (owner 2026-09-15, "make level 01 blue more lighter"): a twentieth of the accent, then a quarter, then the whole */ #campus-home :is(.lv-step-icon, .lv-rare, .lv-face, .lv-model-face, .lv-can-icon, .lv-track span) svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* the summit stands on the other side of Level 3, pointing back at it ("The summit can go other side"), where the page has room */ /* THE CLIMB NEVER STACKS (owner 2026-09-19, "it should always be next to each other. based on widows size proportionally reduce size"): below its own width the whole drawing shrinks as one piece - cards, bases, words, arrows and the hand - by the one factor the engine measures (university.js, levelSteps); 1 wherever it fits */ /* the story under the cards wears the stage tile's format (owner 2026-09-14, of Stage 01's tile: "Lets chaneg this Tile format design to same we are using in AI-natice Chapters"): the level's label, title and line to remember stand above the tile as a stage's kicker, title and italic line do (the same steps between them: 8, the page's head gap, then 12 to the tile); the level's words are labelled read-out rows; the rows and the level's picture share one house card - one hairline, the panel fill, the house corner, resting depth - split by one hairline, the picture centred in its section; below the journey's picture width (1500px) the picture stands under the rows behind a hairline across; a level with no picture is the rows alone */ /* the line to remember is the level's italic line, as a stage's subtitle is (stage-subtitle-italic.py), never justified: the page's justify rule (specificity 1-2-1) is answered at 1-3-1 */ /* the picture stands first - on the left, or on top when the tile stacks - and the words follow, in one plain tile with no line between them (owner 2026-09-15, "Moe Picture to left and text Right", then "chaneg background tile to single tile": the middle hairline leaves) */ /* the boxes drawn inside a picture lie flat (his "it worked well for Ai-natice, here its no blending well with picture on right") */ /* Level 1's small picture: three people flowing into one model (the chat window beside them left on his word, 2026-09-15, "remvoe this chat window") */ /* the people and the model keep the size they had beside the chat window - half the picture's room - centred in it ("Donot change Picture size, chaneg it back to original size") */ /* a picture's note is speech, never justified - the page's justify rule for running text (:is(#campus-home, ...) :is(p, ...):not(...), specificity 1-2-1) is answered at a higher one */ /* Level 2's small picture: what an agent does, and a task running from start to delivered */ /* each level's picture stays alive quietly; a reader who asks for less motion sees it still */ @keyframes lv-flow { to { stroke-dashoffset: -20; } } @keyframes lv-breathe { 0%, 100% { box-shadow: var(--emboss-rest), var(--accent-ring); } 50% { box-shadow: var(--emboss-rest), var(--accent-ring), 0 0 var(--at-s5) var(--accent-glow); } } /* THE JOURNEY'S OPENING READS CHAPTER 01'S FIRST WORDS (owner 2026-09-15, "move this text in this Section and organize and remvoe begin the journey button", then "2" - a copy, Chapter 01 keeps them), SET AS THE AI-NATIVE OPENING IS SET ("Always keep text justified. For Font, follow Ai-native page guidelines. also for sapcing"): the AI-Native aside uses two sizes only - 11.5px labels and 13.5px text - on full line height, the page section gap between groups and the page head gap inside one; so the honest-path line is the first group, the lead line opens the second group at body size in the display voice and ink (the size and weight of the story's source link), and its two paragraphs follow at the head gap; the page's justify rule reaches every paragraph, the last line of each left as the story's are */ /* THE LEVEL CARDS WEAR THE STORY'S TAPPING HAND (owner 2026-09-15, "Add this same click option from AI native page to all three level tiles on bottom righ corner, when user click on it and its big, hide this icon, bring it back when its not selected"): its place in the card's bottom-right corner, and gone from the level being read */ #campus-home .lv-step .lv-card .sd-tile-press { right: var(--at-s3); bottom: var(--at-s3); } #campus-home .lv-step[aria-selected="true"] .lv-card .sd-tile-press { display: none; } /* ==== 05 CLAUDE STRUCTURE (owner 2026-09-15, "create similar amazing page with madav university design theme. only use Claude Structure related information from it"; "Own page, opened from Level 1"; "Follow the docs, note it") - a page of its own on the house theme ==== */ /* THE SPACING CORE RULE on this page (owner 2026-09-15, "i want consistency in spacing"): a block's title breathes --page-title-gap above it; every other stacked gap between the page's blocks reads --page-section-gap; inside a card the card's own --at-s3 */ /* the two kinds of file, named once and worn by every detail */ /* the story every example follows: a house tile under the head, its label in the number's voice, its lines in the reading voice */ /* the story tile is wholly accent, the accent's fourth version (DESIGN_GUIDELINES.md 2.27, light fill + edge): the light accent fill laid over the panel and the accent edge, as the AI-native page's now card wears it (owner 2026-09-17, "make this accent tint as per house design rules colour"); one object, so the story under Levels 2 and 3 wears it too */ #campus-home .cs-legend span:not(.cs-scope) { margin-right: var(--at-s4); } #campus-home .cs-scope { display: inline-flex; align-items: center; gap: var(--at-s1); padding: 2px var(--at-s2); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); color: var(--at-tx-2); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); white-space: nowrap; } #campus-home .cs-scope::before { content: ""; width: var(--at-s2); height: var(--at-s2); border-radius: 50%; background: var(--at-tx-3); } /* shared with the team wears green, just for you wears amber (owner 2026-09-15, "when its Shared with the team > show section and font in green", "when its Just for you > show section and font in amber") - the story's recipe for its green tick and amber bolt: the colour, a faint wash behind, a ring around; on paper the words take a little of the ink so they stay readable */ #campus-home .cs-scope.is-shared { --cs-tone: var(--at-ok); } #campus-home .cs-scope.is-yours { --cs-tone: var(--accent-orange); border-style: dashed; } #campus-home .cs-scope:is(.is-shared, .is-yours) { border-color: color-mix(in srgb, var(--cs-tone) 45%, transparent); background: color-mix(in srgb, var(--cs-tone) 14%, transparent); color: var(--cs-tone); } html[data-lum="light"] #campus-home .cs-scope:is(.is-shared, .is-yours) { color: color-mix(in srgb, var(--cs-tone) 70%, var(--at-tx)); } #campus-home .cs-scope.is-shared::before { background: var(--cs-tone); } #campus-home .cs-scope.is-yours::before { background: transparent; border: 1px solid var(--cs-tone); } /* THE TREE YOU PRESS (owner 2026-09-15, "approac should be explaining user in hirearchy click", "Make it click on each of it", "Put each Folder as fodler inthat design", "House colours"): the tree in one window on the left, the chosen row's detail beside it */ /* three tiles in one row (owner 2026-09-15, "Show all three seciton in Tiles"): the tree, the words and the example, one height */ #campus-home .cs-win-bar code { color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-mono); } /* a folder's files sit one step in, behind a hairline that falls from under the folder's icon */ /* a row: its icon, its name, and a quiet hint - a closed folder's hint names what is inside */ #campus-home .cs-row code { color: var(--at-tx); font: var(--fw-body) var(--at-fs-small)/var(--lh-body) var(--at-mono); overflow-wrap: anywhere; } #campus-home .cs-row.is-folder code { font-weight: var(--fw-ui); } #campus-home .cs-row[aria-selected="true"] code, #campus-home .cs-row[aria-selected="true"] .cs-icon { color: var(--accent-text); } #campus-home .cs-icon { display: inline-grid; flex: none; place-items: center; color: var(--at-tx-3); } #campus-home .cs-icon svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* the detail (owner 2026-09-15, "when User Claude.md > show detaiels liek this"): the number and where it lives, the name large, its tagline, what it does, when it is read and what goes inside - and its example in the code window beside, or beneath when narrow */ #campus-home .cs-badge { display: inline-grid; place-items: center; min-width: var(--at-s6); height: var(--at-s6); padding: 0 var(--at-s2); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); color: var(--accent-text); font: var(--fw-ui) var(--at-fs-tiny)/1 var(--at-mono); } /* the one code card: a window bar naming the file, the example beneath */ #campus-home .cs-code { margin: 0; overflow: hidden; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #campus-home .cs-card > .cs-code { min-width: 0; } #campus-home .cs-code figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--at-s3); padding: var(--at-s3) var(--at-s4); border-bottom: 1px solid var(--at-line); color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); text-align: left; } #campus-home .cs-code figcaption b { overflow: hidden; color: var(--at-tx-2); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-mono); text-overflow: ellipsis; white-space: nowrap; } #campus-home .cs-code pre { margin: 0; padding: var(--at-s4); overflow-x: auto; } #campus-home .cs-code code { color: var(--at-tx); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-prose) var(--at-mono); white-space: pre; } /* when Claude reads each one: five moments on one dashed path, the story's arrow between them */ /* the moments follow one task (owner 2026-09-15, "i want to make it better in reading flow", "apply it let me see it"): the task named once above the cards, a Then line in each card, the cards' words set left so a narrow card leaves no gaps */ #campus-home .cs-task code, #campus-home .cs-moment code { color: var(--accent-text); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-mono); } #campus-home .cs-jumps { display: flex; flex-wrap: wrap; gap: var(--at-s1); margin-top: var(--at-s1); } #campus-home .cs-jump { padding: 2px var(--at-s2); border: 1px solid var(--at-az-line); border-radius: var(--at-r1); background: var(--at-panel); color: var(--accent-text); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-mono); cursor: pointer; transition: var(--tile-trans); } @media (hover: hover) and (pointer: fine) { #campus-home .cs-jump:hover { transform: translateY(var(--tile-lift)); box-shadow: var(--at-shadow); } } /* which one wins, and skills or commands: two cards side by side */ /* the ladder: the two rungs outside the project wear a dashed ring in the quiet ink; the first file you own is the filled one */ #campus-home .cs-ladder li.is-outside code { color: var(--at-tx-1); } #campus-home .cs-ladder code { color: var(--at-tx); font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-mono); } #campus-home .cs-versus code { font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-mono); color: var(--accent-text); } /* HOW CLAUDE WORKS (owner 2026-09-15, "gvie a tile for user to click > and expalin all of these critical components of Caldue"; "Keep explnation in very simple language"; "dont invent new name which is not part of claude guidelines"): six tiles of one size, the chosen one breathing as the level cards do, and one card beneath in the page's own detail design */ /* nine small tiles in one row on a wide screen (owner 2026-09-15, "make these are 9 Samll tile in one Row with 01 as default selected"): number and name only, the hint kept for the card beneath; three rows of three would have been the alternative */ /* the part at Madav Coffee Cup: the story tile, its dress the structure's own, set on the card's inside step (owner 2026-09-17) */ /* the card's name is a heading in the display face, not a file name */ /* ==== LEVEL 1 AS A STORY (owner 2026-09-15, his three steps and "build the Level 1 mock"; then "Remvoe Marked in Red", "Show Strucure below itself not in new page", "Rename > Start > Build", "Make these three Tile sammer") ==== */ /* the myth turns over into the first recommendation */ /* the Flip it tile sits under the words and breathes, as the chosen level card does (owner 2026-09-15, "Flip it > make that tile breathe and glow . Move that tile below the Text") */ /* no glow (owner 2026-09-15, "Flip it Tile > Move it little below, Remove Glowing, make it Breathe"): the tile breathes by rising and settling on the tile lift, the story's glow-breathe being a glow */ #campus-home .lv-flip-hint { display: inline-flex; align-items: center; margin-top: var(--at-s3); gap: var(--at-s1); padding: var(--at-s1) var(--at-s3); border: 1px solid var(--accent); border-radius: var(--at-r1); background: var(--at-panel); color: var(--accent-text); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); font-style: normal; animation: lv-flip-breathe 3.6s var(--at-ease) infinite; } @keyframes lv-flip-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(var(--tile-lift)); } } @media (prefers-reduced-motion: reduce) { #campus-home .lv-flip-hint { animation: none; } } /* the picture at the left, the poster in the middle, the three points at the right (owner 2026-09-15, "Move Picture to Left", "Revert back drawing changes > just that keep current drawing on left", then "Keep You Competitor, Everyone Picture on left, Can you recrate second picture same foramt with house them in middle and Text on Right without divder in much better looking") */ /* the drawing keeps the width it had beside the words (4.8 row units), and takes the whole column where the column is narrower */ /* the three lines start on one edge, one step clear of the longest name (owner 2026-09-15, "Start flow from where shown one step away from Everyone else"); they still end on the model */ /* on a phone the picture takes the whole row, so the three names have room */ /* the level's own tile, a direct child of its story: a tile inside the story (the whole AI picture's front door, 2026-09-15) keeps the two-column shape */ /* the poster, in the house's own dress: the quiet line in the reading face, the line that lands in the display face, one word in the accent */ /* the three points, no line between them, centred on the tile's middle (owner 2026-09-15, "Right text > make it centre aligend to tile") */ /* my recommendation: three small steps on the story's dashed path, one height */ /* the step's face is the story's face, at the size of the step's number row */ #campus-home .lv-rec .sd-face { width: var(--at-s5); height: var(--at-s5); color: var(--accent-text); } #campus-home .lv-rec .sd-face svg { width: var(--icon-sm); height: var(--icon-sm); } /* a foot may name what its link is for (owner 2026-09-16, the course moved under Start with Claude): the name quiet at the left, the link at the right, on the foot's one row */ #campus-home .lv-rec-act { padding: 0; border: 0; background: none; color: var(--accent-text); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); text-decoration: none; cursor: pointer; } #campus-home .lv-rec-act:focus-visible { outline: none; box-shadow: var(--accent-ring); border-radius: var(--at-r1); } /* the step that opens something breathes and wears the tapping hand, as the story's file tiles do; open, it rests */ /* an opening step keeps its hand while open - a press still does something, it hides (owner 2026-09-15, "Til 04 > add click icon to it") */ #campus-home .lv-rec-step.is-opens .sd-tile-press { right: var(--at-s4); bottom: auto; top: var(--at-s4); } /* the Claude structure, opened beneath the steps: a block of this story, not a page of its own */ /* ==== LEVEL 2 READS AS LEVELS 1 AND 3 DO (owner 2026-09-15, "Lets Work on level 2 fast"): the picture, the poster, the three points, in one tile - the levels' own rules widened to this panel, never copied ==== */ /* ==== LEVEL 2'S PICTURE IS HIS DRAWING (owner 2026-09-15, his attached picture and "use atatched pic and draw similar like Level & 3 left side pic with same design theme. keep it intresting", "Keep the bootm=om Section"): the agent in the middle, the four things built around it at the corners, the levels' own dashed lines between them, the task track kept beneath ==== */ /* THE DRAWING READS ITS OWN ROOM, not the window's: in a narrow column the circle leads and the four stand under it; once the column is wide enough for the ring, the middle becomes a column of its own and the four take the corners, so they can never crowd the circle at any window width */ /* the four are one collection, so they are one size: every tile fills its cell and centres its words in it */ /* the middle sits over the lines, round as the house draws a circle, the model's own face inside it; it is held centred by its own box, so the entrance's own transform never moves it off the middle */ /* the picture plays once when the level is shown, as Levels 1 and 3 do, then rests */ /* ==== THE TASK WALKS ITSELF (owner 2026-09-15, "can you animate this section from action step 1 > 4"): the line fills from Task to Delivered, each station lights as the work reaches it, Delivered rings as it lands, then a rest and again ==== */ /* the work's own line, over the grey one, growing left to right across the run - BEHIND the stations, which stand on it and are never crossed by it (owner 2026-09-15, "line appears crossing circle - fix it") */ @media (prefers-reduced-motion: no-preference) { /* the landing keeps its own green and rings once, on the beat the line arrives */ } /* the run ends full, rests there, then fades and begins again at nothing - never a snap back across the track */ @keyframes lv-walk-line { 0%, 8% { width: 0; opacity: 1; } 58%, 88% { width: 75%; opacity: 1; } 97% { width: 75%; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes lv-walk-stop { 0%, 8% { border-color: var(--at-line-2); box-shadow: var(--emboss-rest); color: var(--at-tx-2); } 14%, 30% { border-color: var(--accent); box-shadow: var(--accent-ring), var(--emboss-rest); color: var(--accent-text); } 46%, 100% { border-color: var(--at-line-2); box-shadow: var(--emboss-rest); color: var(--at-tx-2); } } @keyframes lv-walk-land { 0%, 56% { box-shadow: var(--emboss-rest); transform: none; } 62% { box-shadow: var(--emboss-rest), 0 0 var(--at-s5) color-mix(in srgb, var(--at-ok) 60%, transparent); transform: translateY(var(--tile-lift)); } 74%, 100% { box-shadow: var(--emboss-rest); transform: none; } } /* ==== LEVEL 3 AS LEVEL 1 IS (owner 2026-09-15, "Next Lets Move to Level 3 - i need your help here", "The Work on Level 3"): the picture of you, your harness and the agent; the poster; the three points. Level 1's tile rules reach this level; these are Level 3's own objects ==== */ /* the brain and the body (his picture, "use this for left side Picture"): the model at the left, the four parts of the harness stacked at the right, four dashed lines flowing from the one to each of the four; the picture takes its whole column. The drawing keeps the height Level 1's has ("keep this tile size same as level 1"), so the two tiles stand one height: the label takes the drawing's first row, and the four parts share the second as plain rows, as Level 1's three people do, the lines landing on their middles */ /* the brain's label hangs under the face as Level 1's "One model" does, so the face alone is the block and the lines start at its middle */ /* the four rows share the drawing's second row in four, no gap between them, so each line lands on its row's middle; their label stands over them */ /* the poster's four lines: the big line, the quiet italic, a small spaced label, and the big line in the accent */ /* the picture plays as Level 1's does: the person arrives, the line shows and flows, the harness shows, the agent's face breathes */ /* THREE DOORS UNDER THE STRUCTURE (owner 2026-09-15, "Add Three Tiles with click icon ... Click on opens each of these below this section"): a row of three tiles wearing the story's tapping hand; the open one settles, its hand gone, and its part shows beneath */ #campus-home .cs-door-tile .sd-tile-press { right: var(--at-s3); bottom: auto; top: var(--at-s3); } #campus-home .cs-door-tile[aria-expanded="true"] .sd-tile-press { display: none; } /* CLAUDE DAILY COMMANDS (owner 2026-09-15, "explain in simple plain english > add details > click on give real time example used case"): the Project repository pop-up's table skin, copied as he asked; an example opens under any row in the page's code card */ #campus-home .cs-cmd-wrap { overflow-x: auto; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #campus-home .cs-cmd { width: 100%; border-collapse: collapse; } #campus-home .cs-cmd thead th { position: sticky; top: 0; z-index: 1; text-align: left; color: var(--at-tx-2); background: var(--at-panel); border-bottom: 1px solid var(--at-line-2); } #campus-home .cs-cmd thead th + th { border-left: 1px solid var(--at-line); } #campus-home .cs-cmd td { vertical-align: top; color: var(--at-tx-1); border-bottom: 1px solid var(--at-line); border-left: 1px solid var(--at-line); text-align: left; } #campus-home .cs-cmd td:first-child { border-left: 0; white-space: nowrap; } #campus-home .cs-cmd td:first-child code { color: var(--accent-text); font: var(--fw-ui) var(--at-fs-small)/var(--lh-prose) var(--at-mono); white-space: nowrap; } /* a group's name is one quiet row across the table */ #campus-home .cs-cmd .cs-cmd-group th { text-align: left; color: var(--at-tx); background: var(--at-canvas-0); border-bottom: 1px solid var(--at-line); } #campus-home .cs-cmd .cs-cmd-group.is-quiet th { color: var(--at-tx-2); } #campus-home .cs-ex-toggle { margin-left: var(--at-s2); padding: 1px var(--at-s2); border: 1px solid var(--at-az-line); border-radius: var(--at-r1); background: var(--at-panel); color: var(--accent-text); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); cursor: pointer; vertical-align: baseline; transition: var(--tile-trans); } @media (hover: hover) and (pointer: fine) { #campus-home .cs-ex-toggle:hover { transform: translateY(var(--tile-lift)); box-shadow: var(--at-shadow); } } /* an example is plain text in its row, no frame (owner 2026-09-15, "when showing example, no need for tile, remove it"): what you type in the accent, what happens in the reading face, wrapping inside the column */ #campus-home .cs-cmd tr.cs-ex-row td { vertical-align: middle; } #campus-home .cs-cmd-ex { display: grid; gap: var(--at-s1); margin: 0; } #campus-home .cs-cmd-ex code { color: var(--accent-text); font: var(--fw-ui) var(--at-fs-small)/var(--lh-prose) var(--at-mono); overflow-wrap: anywhere; } #campus-home .claude-structure .cs-cmd-ex p { margin: 0; color: var(--at-tx-1); text-align: left; } #campus-home .cs-cmd-fold { display: flex; align-items: center; gap: var(--at-s2); width: 100%; border: 0; background: none; color: var(--at-tx); text-align: left; cursor: pointer; border-radius: var(--at-r1); } #campus-home .cs-cmd-fold:focus-visible { outline: none; box-shadow: var(--accent-ring); } #campus-home .cs-cmd-fold svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: var(--at-tx-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--at-d3) var(--at-ease); } #campus-home .cs-cmd-fold[aria-expanded="true"] svg { transform: rotate(90deg); } #campus-home .cs-cmd-fold small { color: var(--at-tx-2); } @media (prefers-reduced-motion: reduce) { #campus-home .cs-cmd-fold svg { transition: none; } } /* ==== LEVEL 3'S RECOMMENDATION (owner 2026-09-15): the GitHub tile, small, at the right end of its step's foot; every step's foot one control row tall so the steps stand one height on every level ("Mvoe itthre and make tile samller", "My recoomendation tiles have to be same across all levels alwasy keep these tile") ==== */ #campus-home .lv-rec-foot:has(.sd-repo-git) { justify-content: flex-end; flex-wrap: wrap; gap: var(--at-s2); } #campus-home .lv-rec-foot .sd-repo-git { width: auto; height: var(--at-s5); padding: 0 var(--at-s2); font-size: var(--at-fs-tiny); } #campus-home .lv-rec-foot .sd-repo-git svg { width: var(--icon-sm); height: var(--icon-sm); } /* four steps on the path where the row is wide enough ("Add 04 - The Whole AI Picture"); one column beneath, as Level 1's three */ /* ==== THE WHOLE AI PICTURE WEARS THE HOUSE, FIRST MARKS (owner 2026-09-15, "we need to align this page to Madav University deign theme") ==== */ /* the front door is a University tile ("Change Tile to University Tile format"): the levels' tile, the picture at the left and the words at the right; its three boxes are house tiles, the middle one - the door - wearing the accent edge and no glow */ /* the map's ground is the page's ("Remove Square Background from Flow Diagram") and its tiles are house tiles ("Tile in Flow Diagram > align it to House desig nstyle"): both set in the map's own rules above - the grid gone from the viewport; the tile on the house line, corner, panel and emboss, lifting on hover, the accent edge and ring when chosen */ /* ==== MY CURRENT OPERATING MODEL (owner 2026-09-15): his approach diagram, box for box, top to bottom on the AI-Native flow's own tiles, narrow and centred, its arrows that flow's arrows drawn from the tiles' real places; opening beneath Level 3's fourth step. The tile, the face, the line, the head and the label are the flow's own rules (the one sheet's story block), widened to this block ==== */ /* the flow: one narrow column of rows, centred on the page; the arrows are one drawing laid over it */ /* the tile is the AI-Native flow's tile: its size, its face in the top-left corner, its words centred in the room beneath the face's row */ #campus-home .om-tile > .sd-tile-face { position: absolute; top: var(--at-s1); left: var(--at-s1); } #campus-home .om .sd-tile-face { width: var(--icon-lg); height: var(--icon-lg); } #campus-home .om .sd-tile-face :is(svg, img) { width: var(--icon-md); height: var(--icon-md); } /* a mark - the GitHub mark, the GPT mark - is filled, as the repository link's mark is */ #campus-home .om .sd-tile-face.is-mark svg { fill: currentColor; stroke: none; color: var(--at-tx-1); } /* row 1: the idea on its own, the band of social-media sources beside it, on four columns; the band's tiles ride the same columns (subgrid) and its edge sits on the column edges, so every tile has the same air and the four stand one size */ /* the band is a lane on the house: white on paper, the deepest ground in the dark face, so its tiles stand forward on it */ /* the social marks beside the band's name, at the small face size, the map's foot's own drawings */ #campus-home .om-band-head .sd-tile-face { width: var(--at-s5); height: var(--at-s5); } #campus-home .om-band-head .sd-tile-face svg { width: var(--icon-sm); height: var(--icon-sm); } /* row 2: the bench under the repository, a full step below the band; beneath it the room the lines gather in */ /* the labels are the map's labels: the bench's on its own drop (placed by the engine), Approved and New feature centred in the room between their tiles, each on its line */ /* Build's row: Build on the flow's middle, Codex on the fourth column beside it, the two-headed line between them */ /* the last tile carries the Madav wordmark, the brand's own image, centred in the whole tile - not in the room under the face's row - and a quarter narrower than the tile's inner width ("Center Align Text, Make Text 25% Smnaller") */ /* the life: the tiles arrive one after another when the block opens, the drawing after them; a spark of the accent runs the story along the lines, and Madav.ai's edge glows as it lands */ /* narrower than the four-column row, the sources stack two to a row and the drawing steps aside */ @media (max-width: 899px) { /* the bench's label takes its place in the column (outweighing the map's absolute rule) */ } /* ==== THE LEVELS' STORY TILES, A QUARTER TIGHTER (owner 2026-09-16, "make this Section bit compact in all three levels - may by 25% - reduce content size accordingly"): every column a step in, the poster and the points a step down, the drawings three quarters of their size, on all three levels at once ==== */ /* Level 1's crowd and Level 3's harness: the frame three quarters as tall, the faces a step smaller */ /* the words under the model's face, "One model", had always hung a little past the face on each side; they take the face's width and break over two lines beneath it, centred, so nothing in the drawing spills its column */ /* Level 2's drawing and its track */ /* ==== THE THREE LEVELS' TILES STAND ONE HEIGHT (owner 2026-09-16, "all three level should be same size"): the engine measures the three together and gives every tile the tallest one's height; the rules here let the drawings fit that height on a laptop ==== */ /* Level 2's drawing: the hub rows a step closer, the stations a step smaller, both of the track's lines at their middle */ /* on a laptop the picture column takes a little more of the tile, so Level 2's ring keeps its shape rather than stacking */ /* ==== LEVELS 2 AND 3 CARRY THE STORY (owner 2026-09-17, "For Level 1 , 2, 3 lets go with coffee Shop scenario"): the story tile Level 1's Claude structure opens with, under the level's tile - its dress is the structure's own; only its place is set here ==== */ /* ---- END OF THE HOUSE BLOCK - the book's own rules follow ---- */ /* ---- THE NUMBERS, every one out of the book. A header number reads min(the book's number, its share of the header's width at the page width), so below the page width the header scales as one piece and at the page width or wider the book's number stands exactly; the hairlines never scale. ---- */ :root { /* Object 2 - the page width */ --uni-measure: 1100px; /* Object 1 - the header */ --uni-kicker-fs: min(16px, 1.455cqw); --uni-kicker-gap: min(8px, 0.7273cqw); --uni-title-fs: min(40px, 3.636cqw); --uni-title-gap: min(10px, 0.9091cqw); --uni-sub-fs: min(17px, 1.545cqw); --uni-sub-gap: 0px; --uni-line-w: 1px; --uni-line-inset: min(22px, 2cqw); --uni-line-pad: min(4px, 0.3636cqw); --uni-band-pad: min(12px, 1.091cqw); --uni-band-rule: 1px; /* the slots - a part keeps its height when it is blank, so every band is one height */ --uni-kicker-slot: calc(var(--uni-kicker-fs) * var(--lh-tight)); --uni-title-line: calc(var(--uni-title-fs) * var(--lh-tight)); --uni-sub-slot: calc(var(--uni-sub-fs) * var(--lh-prose) + 2 * var(--uni-line-pad)); /* the band: as tall as a page's parts stacked - 2 title lines - and one height for every page and lesson */ --uni-band-h: calc(2 * var(--uni-band-pad) + var(--uni-kicker-slot) + var(--uni-kicker-gap) + 2 * var(--uni-title-line) + var(--uni-title-gap) + var(--uni-sub-slot) + var(--uni-sub-gap)); } html[data-rail="collapsed"] { --uni-measure: 1300px; } /* under 900 the page keeps its phone layout: the numbers as written, no scaling */ @media (max-width: 900px) { :root { --uni-kicker-fs: 16px; --uni-kicker-gap: 8px; --uni-title-fs: min(40px, var(--at-fs-hero)); --uni-title-gap: 10px; --uni-sub-fs: 17px; --uni-sub-gap: 0px; --uni-line-inset: 22px; --uni-line-pad: 4px; --uni-band-pad: 12px; } } /* ---- OBJECT 3's NUMBERS: the section under the header. Plain pixels - the words stand as written at every width (owner, 2026-09-23); only the header scales. ---- */ :root { --uni-sec-kicker-fs: 16px; --uni-sec-kicker-gap: 8px; --uni-sec-title-fs: 26px; --uni-sec-title-gap: 10px; --uni-sec-sub1-fs: 22px; --uni-sec-sub1-gap: 10px; --uni-sec-sub2-fs: 20px; --uni-sec-sub2-gap: 10px; --uni-body-fs: 17px; --uni-body-fw: 450; --uni-body-gap: 10px; --uni-body-face: "Source Serif 4", var(--at-read); /* the spaces: under the header's hairline, between any two blocks, between sections */ --uni-gap-first: 20px; --uni-gap-block: 30px; --uni-gap-section: 30px; } /* ---- OBJECT 4's NUMBERS: a tile is any box (owner, 2026-09-23 evening). Its clearance on every side and the gap between the things inside are one number; between tiles another; a row of chips above a tile a third. The three roles inside - Name, Body 1, Body 2 - carry his sizes, weights and one line height. ---- */ :root { --uni-name-fs: 14px; --uni-name-fw: var(--fw-ui); --uni-name-lh: 25.5px; --uni-b1-fs: 14px; --uni-b1-fw: 400; --uni-b1-lh: 25.5px; --uni-b2-fs: 12px; --uni-b2-fw: 400; --uni-b2-lh: 25.5px; --uni-tile-pad: 10px; --uni-gap-inside: 10px; --uni-gap-tile: 12px; --uni-gap-chips: 12px; } /* ---- THE BODY FACE, bundled and declared once: Source Serif 4. Two styles, each cut into a basic Latin set and an extended one, so a reader downloads only the sets the words on screen need. ---- */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-roman.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-roman-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-italic-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- OBJECT 2: THE PAGE WIDTH - one width for the header, the text, the tiles and the drawings, centred in the space beside the map, a narrower window taking what is left ---- */ :is(#campus-home, .lesson-shell, #sdlc-view) > .uni-head, :is(#campus-home, #sdlc-view) > .layout > div, .lesson-shell .lesson-content { box-sizing: border-box; width: 100%; max-width: var(--uni-measure); margin-inline: auto; } /* the column's first block stands one measure under the header's hairline on every view (Object 3, the spaces) */ :is(#campus-home, #sdlc-view) > .layout > div, .lesson-shell .lesson-content { padding-top: var(--uni-gap-first); } /* ---- OBJECT 1: THE HEADER - words at the left, a picture at the right, nothing between ---- */ /* the outer element measures: its width is the column's, and every number inside is a share of it */ .uni-head { container-type: inline-size; margin: 0; } /* the header stands in the page's first row and takes in the page's top gap, so it runs from the top bar's line to its own hairline on every view */ :is(#campus-home, .lesson-shell, #sdlc-view) > .uni-head { grid-column: 2; grid-row: 1; } @media (min-width: 901px) { :is(#campus-home, .lesson-shell, #sdlc-view) > .uni-head { margin-top: calc(-1 * var(--at-s5)); } } /* the band - one height for every page and lesson, its content centred on its centre line (owner, 2026-09-23: "Content of header section text and Image has to be center-aligned to the total size of the header section"; "The header section panel size should be the same for all pages. Whether there is a picture or not") */ .uni-head-in { position: relative; box-sizing: border-box; min-height: var(--uni-band-h); padding: var(--uni-band-pad) 0; border-bottom: var(--uni-band-rule) solid var(--at-line); display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: var(--uni-line-inset); align-items: center; } .uni-head-words { min-width: 0; } /* the kicker - its slot always exists; blank keeps the height */ .uni-kicker { margin: 0 0 var(--uni-kicker-gap); min-height: var(--uni-kicker-slot); color: var(--accent-text); font: var(--fw-ui) var(--uni-kicker-fs)/var(--lh-tight) var(--at-disp); } /* the title - line one roman ink, line two italic accent, both one weight; the house hero size shrinks with the window */ .uni-title { margin: 0 0 var(--uni-title-gap); color: var(--at-tx); font: var(--fw-strong) var(--uni-title-fs)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-display); } .uni-title em { color: var(--accent-text); font-style: italic; font-weight: var(--fw-strong); } /* the subtitle - italic ink beside its accent line; its slot always exists, and a blank one keeps the height and hides the line */ .uni-sub { box-sizing: border-box; margin: 0 0 var(--uni-sub-gap); min-height: var(--uni-sub-slot); padding: var(--uni-line-pad) 0 var(--uni-line-pad) var(--uni-line-inset); border-left: var(--uni-line-w) solid var(--accent); color: var(--at-tx); font: italic var(--fw-ui) var(--uni-sub-fs)/var(--lh-prose) var(--at-disp); } .uni-sub:empty { border-left-color: transparent; } .uni-sub b { color: var(--accent-text); font-weight: var(--fw-ui); } /* the picture, main pages only - scaled proportionally into the room the band leaves beside the words, never wider than that room and never taller than the band; one blend for all; a press opens the shared pop-up */ /* the cell is sized by the words' row, never by the picture: the picture is taken out of the flow and fitted into whatever the cell measures, so a wide picture gives way to the words and a tall one to the band */ .uni-head-pic { position: relative; min-width: 0; align-self: stretch; justify-self: stretch; } .uni-head-pic .lesson-picture-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; } .uni-head-pic img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; -webkit-mask-image: linear-gradient(to bottom, var(--white) 72%, transparent); mask-image: linear-gradient(to bottom, var(--white) 72%, transparent); } /* a phone's header is words only - except the creator's journey, whose picture stands first and its words follow, the picture at the column's width keeping its shape (his word of 2026-09-24: "For header show only picture for The creator Journey Page. Start with picture, then followed with Header text") */ @media (max-width: 900px) { .uni-head-pic { display: none; } #journey .uni-head-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--uni-band-pad); } #journey .uni-head-pic { display: block; order: -1; align-self: auto; justify-self: auto; } #journey .uni-head-pic .lesson-picture-open { position: static; height: auto; } #journey .uni-head-pic img { height: auto; object-fit: fill; object-position: center; } } /* ---- OBJECT 3: THE SECTION UNDER THE HEADER - five roles and no sixth, in a words block; blocks stack one measure apart; every word inside a drawing wears Madav Display (owner, 2026-09-23). The prefix names the three views the University is made of so this sheet outranks the story's own id-prefixed rules; every view gets the same rule, and nothing here is written per page. ---- */ /* the kicker - the header's kicker at the same numbers (the gate holds the two rows equal); in a section it keeps no empty slot, and it is never justified */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > p.uni-kicker { margin: 0 0 var(--uni-sec-kicker-gap); min-height: 0; color: var(--accent-text); font: var(--fw-ui) var(--uni-sec-kicker-fs)/var(--lh-tight) var(--at-disp); text-align: start; } /* the title, subtitle 1 and subtitle 2 - every heading is a Title for now; the two subtitles stand ready */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > h2 { margin: 0 0 var(--uni-sec-title-gap); color: var(--at-tx); font: var(--fw-ui) var(--uni-sec-title-fs)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-display); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > h3 { margin: 0 0 var(--uni-sec-sub1-gap); color: var(--at-tx); font: var(--fw-ui) var(--uni-sec-sub1-fs)/25.5px var(--at-disp); letter-spacing: var(--tr-display); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > h4 { margin: 0 0 var(--uni-sec-sub2-gap); color: var(--accent-text); font: var(--fw-ui) var(--uni-sec-sub2-fs)/25.5px var(--at-disp); letter-spacing: var(--tr-display); } /* the body - a paragraph, a list, a quote, a line that is a link: one voice, justified (removed and put back on his word, 2026-09-24), one space below each */ /* (the kicker is a paragraph too and is kept out of these two with :where, which adds no weight - so the last-part rule below still wins over them: a last paragraph's space below is cancelled, not carried into the block gap) */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > :is(p, ul, ol, blockquote, a):where(:not(.uni-kicker)) { margin: 0 0 var(--uni-body-gap); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words :is(p, li, blockquote, a):where(:not(.uni-kicker)) { color: var(--at-tx-1); font: var(--uni-body-fw) var(--uni-body-fs)/25.5px var(--uni-body-face); text-align: justify; } /* a list is one text, in a words block as in a tile (his word of 2026-09-24, on the lessons' lists: "I clearly set one rule for the entire University page"): its lines stand at the line height with no gap between them; the list itself stands the paragraph gap from the words above and below it (the block's rule above gives the list its space below, the paragraph before it the space above) */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words li { margin: 0; } /* a list's marker is a dot, never a number (his word of 2026-09-24: "Bullet points should be formatted with a dot, not numbered") */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words :is(ul, ol) { list-style: disc; } /* a list in a words block stands the reading list's indent, as every lesson's list does (Object 3, law 12): the browser's own forty never shows */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > :where(ul, ol):not([class]) { padding-left: var(--at-s5); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words blockquote { padding: 0; border: 0; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > a { display: block; width: max-content; max-width: 100%; color: var(--accent-text); text-decoration: none; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > a:hover { text-decoration: underline; } /* the last part of a block carries no space below, so what follows stands exactly one block gap away */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words > :last-child { margin-bottom: 0; } /* a link in running prose wears the house link: the accent, underlined at rest (the ruling of 2026-09-19); the things stacked inside a list item - its words, then a code window - stand a paragraph gap apart */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words :is(p, li, blockquote) a { color: var(--accent-text); text-decoration: underline; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-words li > * + * { margin-top: var(--uni-body-gap); } /* a row of blocks - a scene's picture beside its words - keeps the block gap between them, its columns its own layout */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-blocks { display: grid; gap: var(--uni-gap-block); } /* a scene's picture shows whole, never cut and never stretched: it stands as tall as the scenes' one shape at its side's width, its own width following, in the middle of its side - a wide drawing fills its side as before, a square one stands smaller (Object 3, law 14; his words of 2026-09-26: "same as Understanding AI", then "put original picture with reduce d size. i need full picture") */ :is(#campus-home, .lesson-shell, #sdlc-view) .shop-shot { container-type: inline-size; } :is(#campus-home, .lesson-shell, #sdlc-view) .shop-shot > img { width: auto; max-width: 100%; height: calc(100cqw * 930 / 1400); margin-inline: auto; object-fit: contain; } /* the spaces - any two blocks stand one measure apart: a words block, a drawing, a tile grid, a section. The column and every section lay their blocks out as one column with one gap, so a hidden block leaves no gap behind and nothing carries a margin of its own; the header is not a block of the column and keeps its own place. A section that is a grid of its own (a story stage) keeps its grid: this rule stands beneath the page's. */ :is(#campus-home, #sdlc-view) > .layout > div, .lesson-shell .lesson-content { display: flex; flex-direction: column; gap: var(--uni-gap-block); } /* a hidden page that is not a
in the markup - a level's story, its recommendation - carries uni-section and is one too */ :is(section, .uni-section):not(.uni-head):not([hidden]) { display: flex; flex-direction: column; gap: var(--uni-gap-block); } /* a words block that stands inside an older container - neither the column nor a section, such as a part of the Level 1 story's doors - is followed by the same gap before the table, list or block that comes next (his review of 2026-09-23: "is there different logic in differnt pages ?" - there is not; this closes the one place the gap missed) */ :is(#campus-home, .lesson-shell, #sdlc-view) :not(section, .uni-section, .layout > div, .lesson-content) > .uni-words + :is(table, div, section, figure, ul, ol, nav, article) { margin-top: var(--uni-gap-block); } /* emphasis is flattened (his word, 2026-09-23 evening: "Remove emphasis"): a bold or italic word inside a words block or a tile wears its role's weight and style; the markup stays, the dress does not */ :is(#campus-home, .lesson-shell, #sdlc-view) :is(.uni-words, .uni-tile) :is(b, strong) { font-weight: inherit; } :is(#campus-home, .lesson-shell, #sdlc-view) :is(.uni-words, .uni-tile) :is(em, i, cite) { font-style: inherit; } /* ---- OBJECT 4: TILES - a tile is any box (owner, 2026-09-23 evening). One clearance on every side, one gap between the things inside, one gap between tiles wherever two stand together (two tiles inside a tile are wrapped as a collection), a row of chips above a tile its own; three roles inside and the house tile look, written once. A tile whose inside stands in columns carries uni-grid and its columns come from the drawings and layouts block; a hairline row carries uni-rows; a pressable tile uni-press. The guard keeps the roles off a drawing, a chip, a button, a code window, a table or a pop-up inside a tile: those are house objects. ---- */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tiles { display: grid; gap: var(--uni-gap-tile); } /* the browser's own indent and margin never show through (his words of 2026-09-24, on the scenes and the topic grid standing forty pixels in from the column's edge once the legacy resets had left: "utilize the maximum width", "Align shape so that maximum width is utilized"): a list that is a section, a collection, a row of blocks or a row list carries no indent, no margin and no marker of its own; a figure inside a drawing carries no margin - the space around a drawing is the section's */ :is(#campus-home, .lesson-shell, #sdlc-view) :is(ol, ul):is(.uni-section, .uni-tiles, .uni-blocks, .uni-rows) { margin: 0; padding: 0; list-style: none; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-drawing figure { margin: 0; } /* a lesson's two neighbour tiles are small: their label and the lesson's name stand on one line, the inside gap between them (his word of 2026-09-24: "Previous concept and next concept tiles: make those small tiles in terms of height") */ :is(#campus-home, .lesson-shell, #sdlc-view) .lesson-links .lesson-link { flex-direction: row; align-items: baseline; } /* THE EXCEPTION to the column (Object 2, law 1; Object 5, law 5): a wide drawing takes the whole width of the space beside the map, centred on the column, and fills that frame as it was drawn to - the whole AI picture (his words of 2026-09-24: "I want it as it was before any changes in the beginning Width, full width"; of the 1600 cap he had set an hour before, "lift the cap, i need to review"), then the story's loop and its six How-it-flows drawings (the same night: "Like Ai flow diagram, Six Stage Loop, make How it works diagram of all stages wide as exception"). The mark sits on the drawing, or on the picture box beneath a drawing's own heading. The space beside the map is measured by the engine into --uni-space (only the browser knows the track's width), again when the map folds; without it the frame is the column's */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-wide { width: var(--uni-space, 100%); margin-inline: calc((100% - var(--uni-space, 100%)) / 2); } /* a tile's clearance and its inside gap are the book's; its LOOK - edge, fill, corner, a tint - stays as designed (his word, 2026-09-24: "our objective was change font, not design behaviour"), so the look moved from its page stands unchanged */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile { box-sizing: border-box; min-width: 0; padding: var(--uni-tile-pad); display: flex; flex-direction: column; gap: var(--uni-gap-inside); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile.uni-grid { display: grid; } /* a tile made of panels - the level tiles - keeps no clearance of its own: its panels sit flush (Object 4, law 8) */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile.uni-panels { padding: 0; gap: 0; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile > * { margin: 0; } /* a tile or a collection standing inside a tile keeps the tile gap from what stands above and below it (his word: two boxes are 12 apart even inside another box) - the inside gap plus the difference */ /* (a tile in a grid cell sits flush in its cell, as its row was laid out - the review of 2026-09-24 found the 2px riding into rows) */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile:not(.uni-grid) > :is(.uni-tile, .uni-tiles) { margin-block: calc(var(--uni-gap-tile) - var(--uni-gap-inside)); } /* a hairline row keeps the inside gap above and below its line: one marked row, or every row after the first */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile > .uni-row { border-top: 1px solid var(--at-line); padding-top: var(--uni-gap-inside); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-rows { display: flex; flex-direction: column; gap: var(--uni-gap-inside); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-rows > * + * { border-top: 1px solid var(--at-line); padding-top: var(--uni-gap-inside); } /* two tile blocks stacked in a section - a collection, a tile, a chips-and-tile pair, one after the other - stand the tile gap apart, not the block gap (his word of 2026-09-24 on the explorer and the doors: "Why is the distance ... not 12?"); the difference is taken off the section's gap, both numbers the book's */ :is(#campus-home, .lesson-shell, #sdlc-view) :is(section, .uni-section) > :is(.uni-tiles, .uni-tile, .uni-chips-tile) + :is(.uni-tiles, .uni-tile) { margin-top: calc(var(--uni-gap-tile) - var(--uni-gap-block)); } /* a row of chips standing on its own above a tile: the pair is one block of the section, the chips gap inside it */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-chips-tile { display: flex; flex-direction: column; gap: var(--uni-gap-chips); } /* the three roles inside a tile, by element: the Name, Body 1, Body 2 - and a label, Body 2 in the accent */ /* (a role carries no margin of its own - the browser's own indent of a definition included; the tile's gap is the space) */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile :is(h3, h4, dt):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)), :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile .uni-name { margin: 0; color: var(--accent-text); font: var(--uni-name-fw) var(--uni-name-fs)/var(--uni-name-lh) var(--at-disp); text-align: start; } /* a Subtitle 1 where he assigns one inside a tile - an h2 (his word of 2026-09-24 on the file cards' names: "make it a subtitle 1") */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile h2:where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)) { margin: 0; color: var(--at-tx); font: var(--fw-ui) var(--uni-sec-sub1-fs)/25.5px var(--at-disp); letter-spacing: var(--tr-display); text-align: start; } /* and a Subtitle 2 where he assigns one - an h2 marked uni-sub2 (his word of 2026-09-24 on the recommendation steps' names: "I said subtitle2") */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile h2.uni-sub2:where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)) { color: var(--accent-text); font: var(--fw-ui) var(--uni-sec-sub2-fs)/25.5px var(--at-disp); } /* in a collection you choose from, a name keeps its ink until its tile is chosen; the chosen name is the design's own rule (his example of 2026-09-24) */ :is(#campus-home, .lesson-shell, #sdlc-view) :where(.uni-choice) > .uni-tile :is(h2, h3, h4, dt):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)) { color: var(--at-tx); } /* (a list's lines read with the paragraphs - one font in a tile: his word of 2026-09-24, "Entire text in the section should be of the same font") */ /* (the mark stands as its own selector: inside :is() its class would lift the whole rule over the no-gap rule below) */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile :is(p, li):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)), :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile .uni-b1 { margin: 0; color: var(--at-tx-1); font: var(--uni-b1-fw) var(--uni-b1-fs)/var(--uni-b1-lh) var(--uni-body-face); text-align: justify; } /* (a term list in a tile: the term is a Name, the definition Body 2 - his words of 2026-09-24 on the level tiles: "make it Body 2"; "The Layer, Its Name, Worker and Harness ... Make it Name not Body. Name has Madav Display font") */ /* body texts stacked in a tile stand at the line height, no gap between them - the inside gap is taken back between two of them (his word of 2026-09-24: "I don't want a separate gap for any of the body texts"); a name, a label, a box keep the gap, and so does a list - it stands the inside gap from the words around it (his word, the same day: "I need space above bullet points, like space between two characters") */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile > :is(p, dd, dt):not(.uni-name) + :is(p, dd, dt):not(.uni-name):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)) { margin-top: calc(-1 * var(--uni-gap-inside)); } /* a line inside a drawing that he says reads as body text - the file tree's names and hints (2026-09-24: "change the text to the same as the body text. Make the font also body"; the line under each flow's heading joined it the same night, "Change font to Body 1 in all chapters") - is Body 1 whole, face, size and ink; the drawing's display face yields to it and nothing else */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-drawing .uni-b1 { color: var(--at-tx-1); font: var(--uni-b1-fw) var(--uni-b1-fs)/var(--uni-b1-lh) var(--uni-body-face) !important; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile :is(dd, small, figcaption):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)), :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile .uni-b2 { margin: 0; color: var(--at-tx-1); font: var(--uni-b2-fw) var(--uni-b2-fs)/var(--uni-b2-lh) var(--uni-body-face); text-align: justify; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile .uni-label { color: var(--at-tx-1); font: var(--uni-b2-fw) var(--uni-b2-fs)/var(--uni-b2-lh) var(--uni-body-face); } /* a table's words wear the roles - a head and a group row a Name, a cell Body 2 - while its skin (lines, stripes, padding, the button in a cell, a command in the house monospace) stays the house's (his "yes" of 2026-09-24). The mark is written twice so the rule outranks the house block's own table rules, which name a head by its table and its section */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-table.uni-table th { color: var(--accent-text); font: var(--uni-name-fw) var(--uni-name-fs)/var(--uni-name-lh) var(--at-disp); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-table.uni-table td { color: var(--at-tx-1); font: var(--uni-b2-fw) var(--uni-b2-fs)/var(--uni-b2-lh) var(--uni-body-face); } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-table.uni-table td :is(p, li) { margin: 0; color: var(--at-tx-1); font: var(--uni-b2-fw) var(--uni-b2-fs)/var(--uni-b2-lh) var(--uni-body-face); } /* and a cell's clearance is the book's (his rule of 2026-09-24: "Font and Spacing should follow university rule book no house rules") */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-table.uni-table :is(th, td) { padding: var(--uni-tile-pad); } /* a small line standing outside a tile - a caption beside a chip - is Body 2 too */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-b2 { color: var(--at-tx-1); font: var(--uni-b2-fw) var(--uni-b2-fs)/var(--uni-b2-lh) var(--uni-body-face); } /* a list inside a tile, and a term list's groups: the things stacked in them stand the inside gap apart too (a group's rule weighs no more than a moved row layout, so a row that lays its term beside its words keeps its own columns) */ /* a list is one text: its lines stand at the line height with no gap between them (his word of 2026-09-24: "Why are the bullet numbers space between line is more?"); a term list's groups are things stacked, the inside gap apart */ /* a list in a tile wears the dot like every list (his word of 2026-09-24: "Bullet points always as dot"): the marker's room is one house step */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile :is(ul, ol):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)) { margin: 0; padding: 0 0 0 var(--at-s4); list-style: disc; display: flex; flex-direction: column; gap: 0; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile dl:where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)) { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile dl > :where(div) { display: flex; flex-direction: column; gap: 0; } /* a plain box inside a tile - a words column, a head - stacks what it holds at the inside gap too: a one-column grid, so a row's own layout moved from its page (a flex line, grid columns) still lays it out as a row and keeps only the gap; it weighs no more than one element. A drawing, a collection, a tile and a house object are their own */ :where(.uni-tile) div:where(:not(.uni-drawing, .uni-drawing *, .uni-tiles, .uni-tile, .uni-rows, .uni-house, .uni-house *)) { display: grid; gap: var(--uni-gap-inside); } /* (a house object that is a link - a chip, a button - keeps the house's colour: his word of 2026-09-24 on the two GitHub chips) */ :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile a:not(.btn):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)) { color: var(--accent-text); text-decoration: none; } :is(#campus-home, .lesson-shell, #sdlc-view) .uni-tile a:not(.btn):where(:not(.uni-drawing *, .uni-house, .uni-house *, code, pre, pre *, td, th, table *, dialog *)):hover { text-decoration: underline; } /* THE DRAWINGS' GROUND (owner, 2026-09-25: 'Can you make the big background tile behind this flow diagram warm?', then 'for this tile i need same warm feeling as you did for background few mins ago', then 'this looks good, apply thi warm feel for all SDLC page all Six Stage drawings and Stage loop drawing alos', then of the architecture drawing 'update this pic also') - the whole AI picture's three lane panels and the names on their top line, the story's six stage flows' lanes and their names, the loop's box and the architecture drawing's box read on the book's warm ground in the light face; the tiles standing on it keep their face. The number lives in the book's table The drawings' ground and is written here alone. */ html[data-lum="light"] :is(#sdlc-view, #concepts .aif) .sd-flow-fixed :is(.sd-map-zone, .sd-map-zone-heading, .sd-map-zone-owner), html[data-lum="light"] #sdlc-view .sd-figure:is(.sd-loop, .sd-arch) { background: rgb(250, 246, 237); } /* THE MAT (owner, 2026-09-25, choosing among three renderings of the whole AI picture on the dark face: 'Lets use Mat for all Drawings') - in the dark face every drawing that has a ground reads on the mat with its own edge: the two pictures' lanes and the names on their top line, the loop's and the architecture's boxes, the operating model's bands, the three level posters and the file tree's window; and everything standing inside any drawing - a tile, a label on a line, a file chip, a card - reads the mat's tile shade with its own edge, by the house's panel - its one name since D17 of the design book - and the two house lines re-pointed inside a drawing, so the hover and the chosen tile keep the accent edge they already draw. The numbers live in the book's table The drawings' ground. */ html[data-lum="dark"] :is(:is(#sdlc-view, #concepts .aif) .sd-flow-fixed :is(.sd-map-zone, .sd-map-zone-heading, .sd-map-zone-owner), #sdlc-view .sd-figure:is(.sd-loop, .sd-arch), #campus-home :is(.om-band, .lv-poster, .cs-win)) { background: rgb(40, 37, 32); border-color: rgba(233, 228, 220, 0.18); } html[data-lum="dark"] .uni-drawing { --at-panel: rgb(58, 54, 48); --at-line: rgba(233, 228, 220, 0.22); --at-line-2: rgba(233, 228, 220, 0.22); } /* THE WHOLE AI PICTURE'S TILES (Object 5, law 6; owner, 2026-09-25: 'move them to the center, top, and below so that you can further reduce the width', then 'This Looks Good, apply this to page') - a large tile stands at the book's size, placed by one-design-ai-picture.py; inside it the icon is centred at the top, the name in two lines at the middle and the number centred at the bottom, the tile's own clearance at the sides; the seven 01 tiles keep their one-row shape. */ #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile:not(.is-slim) { padding: calc(var(--at-s1) * 2 + var(--icon-lg)) var(--uni-tile-pad) calc(var(--at-s1) * 2 + var(--at-s5)); justify-content: center; text-align: center; } #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile:not(.is-slim) > .sd-tile-face { left: 50%; transform: translateX(-50%); } #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-tile:not(.is-slim) .sd-tile-badge { top: auto; right: auto; bottom: var(--at-s1); left: 50%; transform: translateX(-50%); } /* the tile whose lesson stands under the picture wears the accent edge the hover draws (Object 5, law 7; owner, 2026-09-25) */ #concepts .aif .sd-tile[aria-pressed="true"] { border-color: var(--at-az-line); } /* THE SHORT VERSION LIGHTS ITS STEPS (Object 5, law 8; owner, 2026-09-26: 'make it glow and breathe and dim rest of tiles and arrows', then 'glow and breathe borders like we have it in SDLC diagram') - the pressed step and every tile it lights breathe the story's own border (sd-file-breathe, the accent edge and its halo on the house's 3.6s breath - the rule the story's file tiles wear); every other tile, arrow and label of the whole picture dims to the book's number, an arrow joining two lit tiles and the words on it staying lit; and the six range chips stand one size, each its tile's width ('Tiles with Step No's - make them same size') */ #concepts .aif .sd-tile.is-lit, #concepts #six-steps .sd-tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow), var(--emboss-rest); animation: sd-file-breathe 3.6s var(--at-ease) infinite; } #whole-ai-flow.has-lit :is(.sd-tile, .sd-map-path, .sd-map-label):not(.is-lit) { opacity: 0.25; transition: opacity var(--at-d2) var(--at-ease); } #six-steps .sd-map-label { box-sizing: border-box; text-align: center; } /* the lanes' notes - Preparation layer, Provider or self-hosted, Application or platform layer, The short version - read at the house's body size, a step up from its smallest (his word of 2026-09-26: 'increase font of ... Preparation Layer, Provider or self-hosted, Application or platform layer') */ #concepts .aif.aif .sd-flow .sd-flow-fixed .sd-map-zone-owner { font-size: var(--at-fs-body); } /* ---- OBJECT 5: DRAWINGS - the exception (owner, 2026-09-23 evening): its own size within the page width, its own inside; every word Madav Display, code and file names included, the one declaration that must outrank a drawing's own rules; no margin of its own, the space around it is the section's. Each drawing's own rules stand below under its name as its page's legacy leaves. ---- */ /* (a drawing carries no margin of its own on any side, so a drawing's frame takes its column's whole width and the browser's figure margin never shows through - his word of 2026-09-24, night, of the architecture picture standing forty pixels in from the words: 'This picture tile has to be the maximum width of the page'; where it sits across its column - centred, as the climb is drawn - is its own rule, which outranks this one) */ .uni-drawing { margin: 0; } /* a lesson's picture stands centred in its column, and the browser's figure margin never shows through (his word of 2026-09-24: "Move the picture in lessons to the center of the page") */ .lesson-picture { margin-inline: 0; display: grid; justify-items: center; } /* the robot behind the map is bright on the creator's journey alone - which is what first open shows - and keeps its dim look everywhere else (his words of 2026-09-24: "I want this image to be visible as bright", "Full brightness only when the user is on the creators journey page"); the engine names the page on the root (Object 7) */ html[data-uni-page="journey"] .uni-robot { opacity: 1; } /* THE MAP'S ROWS (Object 7, law 5; owner, 2026-09-25: 'Text on side is very lightm make its weight more visible both in light and black theme. also Make Font 15Px') - every word in the rows, the group's name, the numbers and the names, a chapter's row and a lesson's alike, at the book's one size and one weight, in both faces; the phone's size stands with the phone's map below */ :is(.spine-group-label, .spine-link, .spine-link.spine-depth-link, .spine-index, .spine-depth-link .spine-index) { font-size: 15px; font-weight: var(--fw-strong); } /* a number stays on one line: the display face has no even figures, and at this size a two-digit number is wider than the icon's slot it stands in; it runs into the gap before its name, and every name still starts at one x */ :is(.spine-index, .spine-depth-link .spine-index) { white-space: nowrap; } /* THE PHONE'S MAP (Object 7, law 4; his go of 2026-09-24 on the plan and its mock): below 901 the strip the map became is retired; the corner's Map button opens the visible view's map as a full-screen sheet - the same tree, the same rows - and closes it. Above 900 the button is not drawn and nothing changes. */ .corner-map { display: none; } .corner-map .map-close { display: none; } @media (max-width: 900px) { .corner-map { display: grid; } html[data-map] .corner-map .map-open { display: none; } html[data-map] .corner-map .map-close { display: block; } .toc, .depth-nav { display: none; } html[data-map] :is(#campus-home:not([hidden]) .toc, #lesson-view:not([hidden]) .depth-nav, #sdlc-view:not([hidden]) .toc) { display: block; position: fixed; inset: 0; z-index: 110; overflow: auto; padding: var(--at-s2) var(--at-s4) var(--at-s4); background: var(--at-canvas-0); } html[data-map] .spine-content { display: flex; flex-direction: column; align-items: stretch; gap: 0; } html[data-map] .spine-brand { display: flex; align-items: center; gap: var(--at-s3); padding: var(--at-s2) 0 var(--at-s3); border-bottom: 1px solid var(--at-line); } html[data-map] .spine-links { flex: 1 1 auto; flex-direction: column; gap: 1px; overflow: visible; padding: var(--at-s3) 0 0; scroll-snap-type: none; } html[data-map] .spine-link, html[data-map] .spine-link.spine-depth-link { width: auto; white-space: normal; } html[data-map] .spine-group-label, html[data-map] .spine-depth-title { display: block; } html[data-map] .spine-children:not([hidden]) { display: flex; } /* the social doors stand at the sheet's foot, below the robot (his word of 2026-09-24: "can Social media icons below sidebar image"): a fixed row as tall as an icon button and its air, the rows leaving it room, the robot ending above it */ html[data-map] .spine-profile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: var(--at-s3) 0; justify-content: center; background: var(--at-canvas-0); } html[data-map] .spine-links { padding-bottom: calc(var(--at-s5) + 2 * var(--at-s3)); } html[data-map] .reading-thread { display: none; } html[data-map] body { overflow: hidden; } } /* the robot stands in the phone map's foot too, behind the rows: dim, and bright on the creator's journey by the same rule (his go of 2026-09-24). Its two dim numbers are the desktop robot's, held in the house block */ @media (max-width: 900px) { html[data-map] :is(#campus-home:not([hidden]) .toc, #lesson-view:not([hidden]) .depth-nav, #sdlc-view:not([hidden]) .toc)::after { content: ""; position: fixed; left: 0; right: 0; bottom: calc(var(--at-s5) + 2 * var(--at-s3)); height: 46dvh; background: url(rail-tower.webp) no-repeat bottom center / auto 100%; opacity: .22; pointer-events: none; } html[data-lum="light"][data-map] :is(#campus-home:not([hidden]) .toc, #lesson-view:not([hidden]) .depth-nav, #sdlc-view:not([hidden]) .toc)::after { opacity: .32; } html[data-map][data-uni-page="journey"] :is(#campus-home:not([hidden]) .toc, #lesson-view:not([hidden]) .depth-nav, #sdlc-view:not([hidden]) .toc)::after { opacity: 1; } html[data-map] .spine-content { position: relative; z-index: 1; } } /* his look at the phone (2026-09-24, night): the Map button a step bigger than its neighbours and on their row, the home door kept beside it ("make it bit bigger and align with same row as other icons"; "Donot remove home button ... keep it"); the map's rows a step bigger ("menu drop down font in phone is very small, increase font a bit") */ @media (max-width: 900px) { .corner-map { width: var(--at-s6); height: var(--at-s6); } .corner-map > svg { width: var(--at-s5); height: var(--at-s5); } html[data-map] :is(.spine-group-label, .spine-link, .spine-link.spine-depth-link, .spine-index, .spine-depth-link .spine-index) { font-size: 17px; } } /* a touch screen has no hover: the lift and the shade a mouse earns must not stick to a button after a tap (the Map button sat lifted and shaded in his picture) */ @media (hover: none) { .icon-btn:hover { transform: none; background: transparent; color: inherit; } } .uni-drawing, .uni-drawing * { font-family: var(--at-disp) !important; } /* ---- MOVED FROM THE PAGE by one-design-text.py: each drawing's own rules, and the layout of every tile that keeps columns, rows, positions or motion of its own. No spacing, font or look stands here for a tile: the book's tile carries those once. Generated - do not edit; the step is the source. ---- */ /* ==== THE DRAWINGS of the creator's journey: the climb, the three level pictures and the posters, the operating-model flow, the file tree ==== */ #campus-home .lv-climb-wrap { container-type: inline-size; } #campus-home .lv-climb { position: relative; width: calc(var(--sp-8) * 15.75); height: calc(var(--at-s6) + 2 * var(--at-s7) + var(--sp-8) * 2 + var(--at-s5)); margin-inline: auto; } #campus-home .lv-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #campus-home .lv-path path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: butt; stroke-dasharray: 4 6; } #campus-home .lv-path .lv-arrowhead { fill: var(--accent); stroke: none; } #campus-home .lv-links path { fill: none; stroke: var(--at-tx-3); stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; } #campus-home .lv-steps { position: absolute; inset: 0; } #campus-home .lv-step { position: absolute; width: calc(var(--sp-8) * 4.25); display: grid; padding: 0; border: 0; background: none; color: var(--at-tx); text-align: left; cursor: pointer; font: inherit; } #campus-home .lv-step-1 { left: 0; bottom: 0; } #campus-home .lv-step-2 { left: calc(var(--sp-8) * 5.75); bottom: var(--at-s7); } #campus-home .lv-step-3 { left: calc(var(--sp-8) * 11.5); bottom: calc(2 * var(--at-s7)); } #campus-home .lv-card { position: relative; display: grid; align-content: start; gap: var(--at-s2); height: calc(var(--sp-8) * 2); padding: var(--card-pad); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); transition: var(--tile-trans); } #campus-home .lv-step { transition: transform var(--at-d3) var(--at-ease); } #campus-home .lv-step[aria-selected="true"] { z-index: 2; transform: scale(1.15); } #campus-home .lv-step[aria-selected="true"] .lv-card { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow), var(--emboss-rest); animation: sd-file-breathe 3.6s var(--at-ease) infinite; } @media (prefers-reduced-motion: reduce) { #campus-home .lv-step[aria-selected="true"] .lv-card { animation: none; } } #campus-home :is(.lv-arrow-1-near, .lv-arrow-2-near) { display: none; } #campus-home .lv-climb[data-level="2"] .lv-arrow-1, #campus-home .lv-climb[data-level="3"] .lv-arrow-2 { display: none; } #campus-home .lv-climb[data-level="2"] .lv-arrow-1-near, #campus-home .lv-climb[data-level="3"] .lv-arrow-2-near { display: inline; } @media (prefers-reduced-motion: reduce) { #campus-home .lv-step { transition: none; } } @media (hover: hover) and (pointer: fine) { #campus-home .lv-step:hover .lv-card { transform: translateY(var(--tile-lift)); box-shadow: var(--at-shadow); } } #campus-home .lv-step:active .lv-card { transform: translateY(var(--tile-lift-active)); box-shadow: var(--emboss-press); } #campus-home .lv-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--at-s3); } #campus-home .lv-card-head b { overflow: hidden; color: var(--at-tx); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); text-overflow: ellipsis; white-space: nowrap; } #campus-home .lv-step[aria-selected="true"] .lv-card-head b { color: var(--accent-text); } #campus-home .lv-line { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-disp); letter-spacing: var(--tr-caps); } #campus-home .lv-tags { display: flex; flex-wrap: wrap; gap: var(--at-s1); margin-top: auto; } #campus-home .lv-tag { padding: 2px var(--at-s2); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); color: var(--at-tx-2); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); white-space: nowrap; } #campus-home .lv-tag.is-key { border-color: var(--at-az-line); background: color-mix(in srgb, var(--accent) 12%, var(--at-panel)); color: var(--accent-text); } #campus-home .lv-step-3 .lv-tag.is-key { border-color: color-mix(in srgb, var(--at-ok) 45%, transparent); background: color-mix(in srgb, var(--at-ok) 14%, var(--at-panel)); color: var(--at-ok); } #campus-home .lv-base { margin: 0 var(--at-s3); height: var(--at-s5); padding: 0 var(--at-s3); border: 1px solid var(--at-az-line); border-top: 0; border-radius: 0 0 var(--at-r1) var(--at-r1); background: color-mix(in srgb, var(--accent) 5%, var(--at-panel)); box-shadow: var(--emboss-rest); color: var(--accent-text); font: var(--fw-ui) var(--at-fs-tiny)/var(--at-s5) var(--at-disp); letter-spacing: var(--tr-caps); } #campus-home .lv-step-2 .lv-base { background: color-mix(in srgb, var(--accent) 24%, var(--at-panel)); } #campus-home .lv-step-3 .lv-base { border-color: transparent; background: var(--accent); color: #fff; } #campus-home .lv-rare { position: absolute; top: calc(-1 * var(--at-s3)); right: var(--at-s4); display: inline-flex; align-items: center; gap: var(--at-s1); padding: 2px var(--at-s2); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); color: var(--at-tx-2); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); } #campus-home .lv-rare svg { width: var(--at-s3); height: var(--at-s3); } #campus-home .lv-hand { position: absolute; display: inline-flex; align-items: center; gap: var(--at-s1); color: var(--accent-text); font: italic var(--fw-body) var(--at-fs-h3)/1 var(--at-disp); white-space: nowrap; } #campus-home .lv-here { left: var(--at-s5); top: calc(2 * var(--at-s7) - var(--at-s4)); align-items: flex-end; } #campus-home .lv-summit { left: calc(100% + var(--at-s6)); top: calc(var(--at-s6) + var(--at-s4)); } @container (max-width: 1339px) { #campus-home .lv-summit { display: none; } } #campus-home .lv-here svg { width: var(--at-s2); height: var(--at-s4); overflow: visible; } #campus-home .lv-summit svg { width: var(--at-s5); height: var(--at-s2); overflow: visible; } #campus-home .lv-hand-line { fill: none; stroke: var(--accent); stroke-width: 1.4; } #campus-home .lv-hand-head { fill: var(--accent); } #campus-home .lv-climb { zoom: var(--lv-fit, 1); } #campus-home .lv-tile > .lv-mini { order: -1; display: grid; align-content: center; padding: var(--at-s5); } @media (min-width: 1500px) { #campus-home .lv-tile:has(.lv-mini) { grid-template-columns: minmax(0, min(calc(var(--sp-8) * 10.5), 50%)) minmax(0, 1fr); } } #campus-home .lv-note { grid-column: 1 / -1; justify-self: center; margin: 0; color: var(--at-tx-2); font: italic var(--fw-body) var(--at-fs-body)/var(--lh-tight) var(--at-disp); } #campus-home .lv-note-mark { margin-right: var(--at-s1); color: var(--at-bad); font-style: normal; } #campus-home .lv-mini :is(.lv-can li, .lv-face, .lv-track span) { box-shadow: none; } #campus-home .lv-mini .lv-can li { background: var(--at-panel); } #campus-home .lv-mini-chat { display: grid; gap: var(--at-s4); align-items: center; } #campus-home .lv-mini-chat .lv-crowd { justify-self: center; width: calc((100% - var(--at-s4)) / 2); } #campus-home .lv-mini p.lv-note.lv-note { text-align: left; } #campus-home .lv-crowd { display: grid; grid-template-columns: auto minmax(var(--at-s6), 1fr) auto; grid-template-rows: minmax(0, 1fr); height: calc(var(--sp-8) * 3); } #campus-home .lv-people { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; } #campus-home .lv-person { display: inline-flex; align-items: center; gap: var(--at-s2); color: var(--at-tx-1); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); white-space: nowrap; } #campus-home .lv-face { display: grid; place-items: center; width: var(--at-s7); height: var(--at-s7); border: 1px solid var(--at-line-2); border-radius: 50%; background: var(--at-panel); box-shadow: var(--emboss-rest); color: var(--at-tx-2); } #campus-home .lv-links { width: 100%; height: 100%; overflow: visible; } #campus-home .lv-model { position: relative; align-self: center; } #campus-home .lv-model-face { display: grid; place-items: center; width: calc(var(--sp-8) * .875); height: calc(var(--sp-8) * .875); border: 1px solid var(--at-az-line); border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--at-panel)); box-shadow: var(--emboss-rest), var(--accent-ring); color: var(--accent-text); } #campus-home .lv-model-face svg { width: var(--icon-lg); height: var(--icon-lg); } #campus-home .lv-model b { position: absolute; top: calc(100% + var(--at-s1)); left: 50%; transform: translateX(-50%); color: var(--accent-text); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); white-space: nowrap; } #campus-home .lv-mini-agent { display: grid; gap: var(--at-s4); } #campus-home .lv-can-icon.is-done { color: var(--at-ok); } #campus-home .lv-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--at-s3) 0 0; padding: 0; list-style: none; } #campus-home .lv-track:before { content: ""; position: absolute; top: calc(var(--at-s7) / 2); left: 12.5%; right: 12.5%; height: 1px; background: var(--at-line-2); } #campus-home .lv-track li { position: relative; display: grid; justify-items: center; gap: var(--at-s1); color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-caps); } #campus-home .lv-track span { display: grid; place-items: center; width: var(--at-s7); height: var(--at-s7); border: 1px solid var(--at-line-2); border-radius: 50%; background: var(--at-panel); box-shadow: var(--emboss-rest); color: var(--at-tx-2); font: var(--fw-strong) var(--at-fs-body)/1 var(--at-disp); } #campus-home .lv-track .is-done span { border-color: color-mix(in srgb, var(--at-ok) 45%, transparent); background: color-mix(in srgb, var(--at-ok) 14%, var(--at-panel)); color: var(--at-ok); } @media (prefers-reduced-motion: no-preference) { #campus-home .lv-panel-1 .lv-links path { animation: lv-flow 1.6s linear infinite; } #campus-home .lv-panel-1 .lv-model-face { animation: lv-breathe 3.4s var(--at-ease) 1.4s infinite; } } #campus-home .cs-win { overflow: hidden; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #campus-home .cs-win-bar { display: flex; align-items: center; gap: var(--at-s4); padding: var(--at-s3) var(--at-s4); border-bottom: 1px solid var(--at-line); } #campus-home .cs-tree-list, #campus-home .cs-group { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; } #campus-home .cs-tree-list { padding: var(--at-s4) var(--at-s3); } #campus-home .cs-group { margin: 1px 0 var(--at-s1) calc(var(--at-s3) + var(--icon-md) / 2); padding-left: calc(var(--icon-md) / 2); border-left: 1px solid var(--at-line); } #campus-home .cs-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--at-s3); row-gap: 0; width: 100%; min-width: 0; padding: var(--row-pad); border: 1px solid transparent; border-radius: var(--at-r1); background: none; color: var(--at-tx-1); font: inherit; text-align: left; cursor: pointer; transition: var(--tile-trans); } #campus-home .cs-hint { min-width: 0; color: var(--at-tx-3); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-body) var(--at-mono); overflow-wrap: anywhere; } #campus-home .cs-row[aria-expanded="true"] .cs-hint, #campus-home .cs-row[aria-expanded="true"] .is-closed, #campus-home .cs-row[aria-expanded="false"] .is-open { display: none; } @media (hover: hover) and (pointer: fine) { #campus-home .cs-row:hover { background: var(--at-well); transform: translateY(var(--lift-btn)); } } #campus-home .cs-row:active { transform: scale(.98); } #campus-home .cs-row:focus-visible { outline: none; box-shadow: var(--accent-ring); } #campus-home .cs-row[aria-selected="true"] { border-color: var(--at-az-line); background: var(--accent-weak); } @media (prefers-reduced-motion: reduce) { #campus-home .cs-row { transition: none; } } #campus-home .cs-arrow { display: none; } @media (min-width: 1200px) { #campus-home .cs-arrow { display: block; align-self: center; width: 100%; height: var(--at-s2); overflow: visible; } } #campus-home .cs-arrow path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 6; } #campus-home .cs-arrow .cs-head { fill: var(--accent); stroke: none; stroke-dasharray: none; } #campus-home .uni-tile .cs-ladder { display: grid; gap: var(--at-s2); margin: 0; padding: 0; list-style: none; counter-reset: cs-rank; } #campus-home .uni-tile .cs-ladder li { display: grid; grid-template-columns: var(--at-s6) minmax(0, 1fr); align-items: baseline; column-gap: var(--at-s2); counter-increment: cs-rank; } #campus-home .cs-ladder li::before { content: counter(cs-rank); grid-row: span 2; display: grid; place-items: center; width: var(--at-s6); height: var(--at-s6); border: 1px solid var(--at-az-line); border-radius: 50%; color: var(--accent-text); font: var(--fw-ui) var(--at-fs-small)/1 var(--at-disp); } #campus-home .cs-ladder li.is-outside::before { border-style: dashed; color: var(--at-tx-2); } #campus-home .cs-ladder li.is-win::before { background: var(--accent); border-color: var(--accent); color: #fff; } #campus-home .lv-panel-1 .lv-mini-chat .lv-crowd { justify-self: start; width: min(100%, calc(var(--sp-8) * 4.8)); } #campus-home .lv-panel-1 .lv-links { box-sizing: border-box; padding-left: var(--at-s3); } @media (max-width: 759px) { #campus-home .lv-panel-1 .lv-mini-chat .lv-crowd { width: 100%; } } #campus-home :is(.lv-panel-1, .lv-panel-3) .lv-mini .lv-note { justify-self: start; } @media (min-width: 1200px) { #campus-home :is(.lv-panel-1, .lv-panel-3) > .lv-tile:has(.lv-mini) { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); } } #campus-home .lv-poster { display: grid; align-content: center; justify-items: center; gap: var(--at-s3); padding: var(--at-s5); background: var(--at-canvas-0); text-align: center; } #campus-home :is(.lv-panel-1, .lv-panel-3) p.lv-poster-lead { margin: 0; color: var(--at-tx-2); font: italic var(--fw-body) var(--at-fs-body)/var(--lh-tight) var(--at-read); text-align: center; } #campus-home :is(.lv-panel-1, .lv-panel-3) p.lv-poster-line { margin: 0; color: var(--at-tx); font: var(--fw-strong) calc(var(--at-fs-h3) * 1.8)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); text-align: center; text-wrap: balance; } #campus-home .lv-poster-line b { color: var(--accent-text); font-weight: inherit; } @media (min-width: 1200px) { #campus-home .lv-panel-2 > .lv-tile:has(.lv-mini) { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); } } #campus-home .lv-panel-2 .lv-mini .lv-note { justify-self: start; } #campus-home .lv-panel-2 p.lv-poster-lead { margin: 0; color: var(--at-tx-2); font: italic var(--fw-body) var(--at-fs-body)/var(--lh-tight) var(--at-read); text-align: center; } #campus-home .lv-panel-2 p.lv-poster-line { margin: 0; color: var(--at-tx); font: var(--fw-strong) calc(var(--at-fs-h3) * 1.8)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); text-align: center; text-wrap: balance; } #campus-home .lv-panel-2 p.lv-poster-line.is-accent { color: var(--accent-text); } #campus-home .lv-panel-2 .lv-poster { gap: var(--at-s2); } #campus-home .lv-mini-agent { container-type: inline-size; } #campus-home .lv-hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--at-s3); place-items: stretch; padding: var(--at-s2) 0; } #campus-home .lv-hub-hold { order: -1; } #campus-home .lv-hub-links { display: none; } @container (min-width: 330px) { #campus-home .lv-hub { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: repeat(2, auto); gap: var(--at-s4) var(--at-s5); } #campus-home .lv-hub-1 { grid-area: 1 / 1; } #campus-home .lv-hub-2 { grid-area: 1 / 3; } #campus-home .lv-hub-3 { grid-area: 2 / 1; } #campus-home .lv-hub-4 { grid-area: 2 / 3; } #campus-home .lv-hub-hold { grid-area: 1 / 2 / 3 / 3; order: 0; } #campus-home .lv-hub-links { display: block; } } #campus-home .lv-hub-links { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; } #campus-home .lv-hub-tile { position: relative; z-index: 2; display: grid; align-content: center; gap: var(--at-s1); box-sizing: border-box; width: 100%; min-height: calc(var(--sp-8) * .95); padding: var(--at-s2) var(--at-s3); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); text-align: center; } #campus-home .lv-hub-tile b { color: var(--at-tx); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); } #campus-home .lv-hub-tile small { color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); } #campus-home .lv-hub-hold { z-index: 3; display: grid; place-items: center; pointer-events: none; } #campus-home .lv-hub-core { display: grid; place-items: center; align-content: center; gap: var(--at-s1); box-sizing: border-box; width: calc(var(--sp-8) * 2.4); height: calc(var(--sp-8) * 2.4); padding: var(--at-s3); border: 1px solid var(--accent); border-radius: 50%; background: var(--at-panel); box-shadow: inset 0 0 0 1px var(--accent), var(--emboss-rest); text-align: center; } #campus-home .lv-hub-core b { color: var(--at-tx); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); } #campus-home .lv-hub-core small { max-width: calc(var(--sp-8) * 1.7); color: var(--at-tx-3); font: var(--fw-body) calc(var(--at-fs-tiny) * .9)/var(--lh-tight) var(--at-read); } #campus-home .lv-hub-core .lv-model-face { display: grid; place-items: center; width: var(--at-s6); height: var(--at-s6); color: var(--accent-text); } #campus-home .lv-hub-core .lv-model-face svg { width: var(--icon-md); height: var(--icon-md); } @media (prefers-reduced-motion: no-preference) { #campus-home .lv-panel-2 .lv-hub-links path { animation: lv-flow 1.6s linear infinite; } #campus-home .lv-panel-2 .lv-hub-core { animation: lv-breathe 3.4s var(--at-ease) 1.4s infinite; } } #campus-home .lv-panel-2 .lv-track { --walk: 5.6s; } #campus-home .lv-panel-2 .lv-track:after { content: ""; position: absolute; z-index: 0; top: calc(var(--at-s7) / 2); left: 12.5%; width: 0; height: 1px; background: var(--accent); } #campus-home .lv-panel-2 .lv-track li { z-index: 1; } #campus-home .lv-panel-2 .lv-track li:nth-child(1) { --beat: 0; } #campus-home .lv-panel-2 .lv-track li:nth-child(2) { --beat: 1; } #campus-home .lv-panel-2 .lv-track li:nth-child(3) { --beat: 2; } #campus-home .lv-panel-2 .lv-track li:nth-child(4) { --beat: 3; } @media (prefers-reduced-motion: no-preference) { #campus-home .lv-panel-2 .lv-track:after { animation: lv-walk-line var(--walk) var(--at-ease) infinite; } #campus-home .lv-panel-2 .lv-track li:not(.is-done) span { animation: lv-walk-stop var(--walk) var(--at-ease) infinite; animation-delay: calc(var(--beat) * var(--walk) / 6); } #campus-home .lv-panel-2 .lv-track .is-done span { animation: lv-walk-land var(--walk) var(--at-ease) infinite; } } #campus-home .lv-mini-harness .lv-crowd { justify-self: stretch; width: 100%; grid-template-columns: auto minmax(var(--at-s6), 1fr) minmax(0, auto); grid-template-rows: auto minmax(0, 1fr); row-gap: var(--at-s1); } #campus-home .lv-mini-harness .lv-brain { grid-area: 2 / 1; } #campus-home .lv-mini-harness .lv-links { grid-area: 2 / 2; } #campus-home .lv-mini-harness .lv-parts { grid-area: 2 / 3; } #campus-home .lv-panel-3 .lv-links { box-sizing: border-box; padding-left: var(--at-s2); } #campus-home .lv-brain { display: grid; justify-items: center; align-self: center; } #campus-home .lv-brain .lv-model-face { width: calc(var(--sp-8) * 1.4); height: calc(var(--sp-8) * 1.4); } #campus-home .lv-brain > b { top: calc(100% + var(--at-s2)); text-align: center; } #campus-home .lv-brain > b small { display: block; white-space: nowrap; color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-caps); } #campus-home .lv-parts { display: grid; grid-auto-rows: minmax(0, 1fr); align-self: stretch; } #campus-home .lv-mini-harness { gap: var(--at-s2); } #campus-home .lv-panel-3 p.lv-parts-label { grid-area: 1 / 3; justify-self: start; margin: 0; color: var(--at-tx); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); text-align: left; } #campus-home .lv-parts-label b { color: var(--accent-text); font-weight: inherit; } #campus-home .lv-panel-3 .lv-mini .lv-note { margin-top: var(--at-s2); } #campus-home .lv-part-row { display: grid; grid-template-columns: var(--at-s5) minmax(0, 1fr); align-items: center; column-gap: var(--at-s3); } #campus-home .lv-part-row i { display: grid; place-items: center; width: var(--at-s5); height: var(--at-s5); border-radius: var(--at-r1); background: var(--accent); color: #fff; font: var(--fw-ui) var(--at-fs-tiny)/1 var(--at-mono); font-style: normal; } #campus-home .lv-part-row b { display: block; color: var(--at-tx); font: var(--fw-ui) var(--at-fs-small)/var(--lh-tight) var(--at-disp); } #campus-home .lv-part-row small { display: block; color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); } #campus-home .lv-note-mark.is-ok { color: var(--at-ok); } #campus-home .lv-panel-3 .lv-poster { gap: var(--at-s2); } #campus-home .lv-panel-3 p.lv-poster-tag { margin: var(--at-s2) 0 0; color: var(--at-tx-3); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-caps); text-align: center; } #campus-home .lv-panel-3 p.lv-poster-line.is-accent { color: var(--accent-text); } #campus-home .lv-panel-3 .lv-links path { animation: lv-flow 1.6s linear infinite; } #campus-home .lv-panel-3 .lv-model-face { animation: lv-breathe 3.4s var(--at-ease) 1.4s infinite; } @media (prefers-reduced-motion: reduce) { #campus-home .lv-panel-3 :is(.lv-links path, .lv-model-face) { animation: none; } } #campus-home .lv-panel-3 .om { margin-top: var(--page-title-gap); } #campus-home .om .lv-head { margin-bottom: var(--page-section-gap); } #campus-home .om-flow { position: relative; display: grid; justify-items: center; width: min(100%, calc(var(--sp-8) * 15)); } #campus-home .om-flow > .om-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } #campus-home .om-tile { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: min(100%, calc(var(--sp-8) * 2.75)); height: calc(var(--sp-8) * 2 + var(--at-s1)); padding: calc(var(--at-s1) * 2 + var(--icon-lg)) var(--at-s3) var(--at-s3); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); text-align: center; } #campus-home .om-tile b { display: block; color: var(--at-tx); font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-disp); } #campus-home .om-tile small { display: block; margin-top: var(--at-s1); color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); } #campus-home .om-tile .lv-tag { margin-top: var(--at-s2); } #campus-home .om-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; width: 100%; } #campus-home .om-sources .om-tile { justify-self: center; } #campus-home .om-sources > .om-tile { margin-bottom: var(--at-s4); } #campus-home .om-band { grid-column: 2 / 5; display: grid; grid-template-columns: subgrid; row-gap: var(--at-s3); padding: var(--at-s4) 0; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #campus-home .om-band-head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--at-s3); padding-left: var(--at-s4); color: var(--at-tx); font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-disp); } #campus-home .om-band-doors { display: flex; align-items: center; gap: var(--at-s1); } #campus-home .om-zone { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; padding-top: var(--sp-8); padding-bottom: calc(var(--sp-8) * 2.25); box-sizing: border-box; } #campus-home .om-bench { grid-column: 3; justify-self: center; } #campus-home .om-value { z-index: 4; } #campus-home .om-gate { position: relative; z-index: 3; display: grid; place-items: center; height: calc(var(--sp-8) * 1.25); } #campus-home .om-gate .sd-map-label { position: relative; transform: none; } #campus-home .om-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } #campus-home .om-build { grid-column: 2 / 4; justify-self: center; } #campus-home .om-codex { grid-column: 4; justify-self: center; } #campus-home .om-madav { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--emboss-rest); } #campus-home .om-madav { padding-top: var(--at-s3); } #campus-home .om-madav .om-wordmark { display: block; width: calc(var(--sp-8) * 1.5); height: auto; margin: 0 auto; } #campus-home .om .cs-handon { margin-top: var(--page-section-gap); } #campus-home .om-lines .om-spark { fill: var(--accent); opacity: 0; } #campus-home .om-lines .om-land { fill: none; stroke: var(--accent); stroke-width: 4; filter: blur(var(--at-s1)); opacity: 0; } @media (prefers-reduced-motion: reduce) { #campus-home .om-lines :is(.om-spark, .om-land) { display: none; } } @media (max-width: 899px) { #campus-home .om-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; row-gap: var(--at-s4); } #campus-home .om-sources > .om-tile { margin-bottom: 0; } #campus-home .om-band { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } #campus-home .om-zone { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: var(--at-s4); padding-top: var(--at-s4); padding-bottom: var(--at-s4); } #campus-home .om-bench { grid-column: 1; } #campus-home .om-row { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: var(--at-s4); } #campus-home :is(.om-build, .om-codex) { grid-column: 1; } #campus-home .om .om-flow .om-value { position: static; transform: none; justify-self: center; margin-bottom: var(--at-s4); } #campus-home .om-flow > .om-lines { display: none; } #campus-home .om-gate { height: var(--at-s7); } } #campus-home :is(.lv-panel-1, .lv-panel-2, .lv-panel-3) > .lv-tile > :is(.lv-mini, .lv-poster) { padding: var(--at-s4); } #campus-home :is(.lv-panel-1, .lv-panel-2, .lv-panel-3) .lv-poster { gap: var(--at-s2); } #campus-home :is(.lv-panel-1, .lv-panel-2, .lv-panel-3) p.lv-poster-line { font-size: calc(var(--at-fs-h3) * 1.35); } #campus-home :is(.lv-panel-1, .lv-panel-2, .lv-panel-3) p.lv-poster-lead { font-size: var(--at-fs-small); } #campus-home .lv-panel-3 p.lv-poster-tag { margin-top: var(--at-s1); } #campus-home .lv-crowd { height: calc(var(--sp-8) * 2.25); } #campus-home .lv-face { width: var(--at-s6); height: var(--at-s6); } #campus-home .lv-model-face { width: calc(var(--sp-8) * .75); height: calc(var(--sp-8) * .75); } #campus-home .lv-model b { max-width: 100%; white-space: normal; text-align: center; } #campus-home .lv-brain .lv-model-face { width: calc(var(--sp-8) * 1.05); height: calc(var(--sp-8) * 1.05); } #campus-home .lv-hub { gap: var(--at-s3) var(--at-s4); padding: 0; } #campus-home .lv-hub-tile { min-height: calc(var(--sp-8) * .7); padding: var(--at-s1) var(--at-s2); } #campus-home .lv-hub-core { width: calc(var(--sp-8) * 1.8); height: calc(var(--sp-8) * 1.8); padding: var(--at-s2); } #campus-home .lv-hub-core small { max-width: calc(var(--sp-8) * 1.35); } #campus-home .lv-track span { width: var(--at-s6); height: var(--at-s6); } #campus-home .lv-track:before, #campus-home .lv-panel-2 .lv-track:after { top: calc(var(--at-s6) / 2); } #campus-home :is(.lv-mini-chat, .lv-mini-agent, .lv-mini-harness) { gap: var(--at-s2); } #campus-home .lv-panel-3 .lv-mini .lv-note { margin-top: 0; } #campus-home .lv-hub { gap: var(--at-s3) var(--at-s5); } #campus-home .lv-track span { width: var(--at-s5); height: var(--at-s5); } #campus-home .lv-track:before, #campus-home .lv-panel-2 .lv-track:after { top: calc(var(--at-s5) / 2); } @media (min-width: 1200px) { #campus-home :is(.lv-panel-1, .lv-panel-2, .lv-panel-3) > .lv-tile:has(.lv-mini) { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1fr); } } /* ==== THE LAYOUTS of the journey's tiles and hidden pages: what a box keeps of its own after the book took its spacing, font and look ==== */ #campus-home .lv-tile { display: grid; overflow: hidden; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #campus-home .cs-story { display: grid; border: 1px solid var(--accent-line); border-radius: var(--at-r1); background: linear-gradient(var(--accent-weak), var(--accent-weak)), linear-gradient(var(--at-panel), var(--at-panel)); box-shadow: var(--emboss-rest); } #campus-home .cs-story p { text-align: justify; } #campus-home .cs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-s2) var(--at-s3); } #campus-home .cs-explorer { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; } @media (min-width: 1200px) { #campus-home .cs-explorer { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } } #campus-home .cs-cards { display: grid; container-type: inline-size; } #campus-home .cs-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; } #campus-home .cs-card-text { min-width: 0; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } @container (min-width: 760px) { #campus-home .cs-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } #campus-home .cs-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-s3); } #campus-home .cs-card h3 { overflow-wrap: break-word; } #campus-home .claude-structure p.cs-tagline { text-align: left; } #campus-home .claude-structure p.cs-note { border-left: 2px solid var(--accent); border-radius: 0 var(--at-r1) var(--at-r1) 0; background: var(--at-panel); } #campus-home .cs-moments { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--at-s2); } @media (min-width: 1200px) { #campus-home .cs-moments { grid-template-columns: minmax(0, 1fr) var(--at-s6) minmax(0, 1fr) var(--at-s6) minmax(0, 1fr) var(--at-s6) minmax(0, 1fr) var(--at-s6) minmax(0, 1fr); align-items: stretch; gap: 0; } } #campus-home .cs-moment { display: grid; align-content: start; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #campus-home .claude-structure .cs-moment p { text-align: left; } #campus-home .cs-two { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1200px) { #campus-home .cs-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } #campus-home .cs-panel { border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #campus-home .cs-notes { display: grid; } #campus-home .cs-versus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #campus-home .cs-versus > div { border: 1px solid var(--at-line); border-radius: var(--at-r1); } #campus-home .cs-versus > div + div { border-color: var(--at-az-line); } #campus-home .cs-handon a { text-decoration: none; } #campus-home .cs-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tile-min)), 1fr)); } @media (min-width: 1200px) { #campus-home .cs-parts { grid-template-columns: repeat(9, minmax(0, 1fr)); } #campus-home .cs-part-tile small { display: none; } } #campus-home .cs-part-tile { display: grid; align-content: start; min-width: 0; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); text-align: left; cursor: pointer; transition: var(--tile-trans); } @media (hover: hover) and (pointer: fine) { #campus-home .cs-part-tile:hover { transform: translateY(var(--tile-lift)); border-color: var(--at-az-line); box-shadow: var(--at-shadow); } } #campus-home .cs-part-tile:active { transform: translateY(var(--tile-lift-active)); box-shadow: var(--emboss-press); } #campus-home .cs-part-tile:focus-visible { outline: none; box-shadow: var(--accent-ring); } #campus-home .cs-part-tile[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow), var(--emboss-rest); animation: sd-file-breathe 3.6s var(--at-ease) infinite; } #campus-home .cs-part-tile[aria-selected="true"] h3 { color: var(--accent-text); } @media (prefers-reduced-motion: reduce) { #campus-home .cs-part-tile[aria-selected="true"] { animation: none; } } #campus-home .lv-flip { position: relative; display: grid; cursor: pointer; perspective: 800px; border-radius: var(--at-r1); } #campus-home .lv-flip:focus-visible { outline: none; box-shadow: var(--accent-ring); } #campus-home .lv-flip > span { grid-area: 1 / 1; display: grid; justify-items: start; backface-visibility: hidden; transition: transform calc(var(--at-d3) * 1.6) var(--at-ease); } #campus-home .lv-flip-back { transform: rotateX(180deg); } #campus-home .lv-flip[aria-pressed="true"] .lv-flip-front { transform: rotateX(-180deg); } #campus-home .lv-flip[aria-pressed="true"] .lv-flip-back { transform: none; } @media (prefers-reduced-motion: reduce) { #campus-home .lv-flip > span { transition: none; } } #campus-home :is(.lv-panel-1, .lv-panel-3) > .lv-tile > .lv-words { display: grid; align-content: center; } #campus-home .lv-points { display: grid; } #campus-home .lv-points > div { display: grid; } #campus-home .lv-rec-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--uni-gap-tile); } @media (min-width: 1200px) { #campus-home .lv-rec-steps { grid-template-columns: minmax(0, 1fr) var(--uni-gap-tile) minmax(0, 1fr) var(--uni-gap-tile) minmax(0, 1fr); align-items: stretch; gap: 0; } } #campus-home .lv-rec-step { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); transition: var(--tile-trans); } #campus-home .lv-rec-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--at-s5); } #campus-home .lv-rec-step p { text-align: left; } #campus-home .lv-rec-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--at-line); gap: var(--at-s3); } #campus-home .lv-rec-step.is-opens { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow), var(--emboss-rest); animation: sd-file-breathe 3.6s var(--at-ease) infinite; cursor: pointer; } #campus-home .lv-rec-step.is-opens[aria-expanded="true"] { animation: none; } @media (hover: hover) and (pointer: fine) { #campus-home .lv-rec-step.is-opens:hover { transform: translateY(var(--tile-lift)); } } @media (prefers-reduced-motion: reduce) { #campus-home .lv-rec-step.is-opens { animation: none; } } #campus-home .lv-panel-2 > .lv-tile { display: grid; } #campus-home .lv-panel-2 > .lv-tile > .lv-words { display: grid; align-content: center; } #campus-home .cs-doors { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1200px) { #campus-home .cs-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #campus-home .cs-door-tile { position: relative; } #campus-home .cs-door-tile[aria-expanded="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow), var(--emboss-rest); animation: sd-file-breathe 3.6s var(--at-ease) infinite; } #campus-home .cs-door-tile[aria-expanded="true"] h3 { color: var(--accent-text); } @media (prefers-reduced-motion: reduce) { #campus-home .cs-door-tile[aria-expanded="true"] { animation: none; } } #campus-home .lv-rec-foot { box-sizing: content-box; min-height: var(--at-s5); } @media (min-width: 1200px) { #campus-home .lv-rec-four { grid-template-columns: minmax(0, 1fr) var(--at-s6) minmax(0, 1fr) var(--at-s6) minmax(0, 1fr) var(--at-s6) minmax(0, 1fr); } } #campus-home :is(.lv-panel-1, .lv-panel-2, .lv-panel-3) > .lv-tile { box-sizing: border-box; } /* ==== THE DRAWINGS of the story and the whole AI picture: the flows, the loop, the architecture, the flow tiles, the helpers' drop ==== */ #sdlc-view .sd-figure.lesson-figure svg, #concepts .aif .sd-figure.lesson-figure svg { max-width: 940px; } #sdlc-view .sd-figure.sd-loop figcaption, #concepts .aif .sd-figure.sd-loop figcaption { margin-top: var(--at-s1); } #sdlc-view .sd-figure .dg-edge, #concepts .aif .sd-figure .dg-edge { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: butt; } #sdlc-view .sd-figure .dg-edge.is-later, #concepts .aif .sd-figure .dg-edge.is-later { stroke-dasharray: 4 3; } #sdlc-view .sd-figure .dg-arrowhead, #concepts .aif .sd-figure .dg-arrowhead { fill: var(--accent); } #sdlc-view .sd-loop { padding: var(--at-s3) clamp(var(--at-s2), 2vw, var(--at-s5)) var(--at-s1); } #sdlc-view .sd-loop-fit, #concepts .aif .sd-loop-fit { position: relative; overflow: hidden; } #sdlc-view .sd-loop-world { position: relative; transform-origin: 0 0; margin: 0 auto; } #sdlc-view .sd-loop-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; } #sdlc-view .sd-loop .lp-track { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: butt; } #sdlc-view .sd-loop .lp-arrowhead { fill: var(--accent); } #sdlc-view .sd-loop .lp-entry { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; } #sdlc-view .sd-loop .lp-entrytext { font: italic var(--fw-body) var(--at-fs-body) var(--at-disp); fill: var(--at-tx-3); } #sdlc-view .sd-loop .lp-center { font: var(--fw-body) var(--at-fs-h3) var(--at-disp); fill: var(--at-tx); } #sdlc-view .sd-loop .lp-center-sub { font: var(--fw-body) var(--at-fs-tiny) var(--at-read); fill: var(--at-tx-3); } #sdlc-view .sd-loop .lp-file { position: absolute; transform: translate(-50%, -50%); padding: var(--at-s1) var(--at-s3); border: 1px solid var(--at-line-2); border-radius: var(--at-r1); color: var(--at-tx-1); background: var(--at-panel); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-read); white-space: nowrap; } #sdlc-view .sd-loop-tile { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: var(--at-s1); width: 150px; height: var(--sp-8); padding: var(--tile-pad); border: 1px solid var(--at-line-2); border-radius: var(--at-r1); color: var(--at-tx); background: var(--at-panel); box-shadow: var(--emboss-rest); cursor: pointer; text-align: left; font: inherit; transition: var(--tile-trans); } #sdlc-view .sd-loop-line { display: flex; align-items: baseline; gap: var(--at-s2); } #sdlc-view .sd-loop-line b { color: var(--accent-text); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); } #sdlc-view .sd-loop-line span { color: var(--at-tx); font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-read); } #sdlc-view .sd-loop-who { display: flex; gap: var(--at-s1); } #sdlc-view .sd-tile-face.is-trigger, #concepts .aif .sd-tile-face.is-trigger { color: var(--accent-orange); background: color-mix(in srgb, var(--accent-orange) 14%, transparent); border-color: color-mix(in srgb, var(--accent-orange) 45%, transparent); } #sdlc-view .sd-loop-tile.is-active { border-color: var(--accent); box-shadow: var(--accent-ring), 0 0 14px var(--accent-glow), var(--emboss-rest); } #sdlc-view .sd-loop-tile:active { transform: translateY(var(--tile-lift-active)); box-shadow: var(--emboss-press); } @media (hover:hover) and (pointer:fine) { #sdlc-view .sd-loop-tile:hover { transform: translateY(var(--tile-lift)); border-color: var(--at-az-line); box-shadow: var(--at-shadow); } } :root[data-lum="light"] #sdlc-view .sd-loop-tile { box-shadow: var(--emboss-rest); } #sdlc-view .sd-flow { min-width: 0; } #sdlc-view .sd-flow-head, #concepts .aif .sd-flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--at-s4); flex-wrap: wrap; margin-bottom: var(--uni-gap-block); } #sdlc-view .sd-flow-head h3, #concepts .aif .sd-flow-head h3 { font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); } #sdlc-view .sd-flow-sub, #concepts .aif .sd-flow-sub { margin: var(--uni-sec-title-gap) 0 0; } #sdlc-view .sd-map-zone, #concepts .aif .sd-map-zone { position: absolute; border: 2px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-canvas-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } #sdlc-view .sd-map-zone-heading, #concepts .aif .sd-map-zone-heading { position: absolute; top: var(--at-s3); left: var(--at-s4); color: var(--at-tx); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); } #sdlc-view .sd-map-zone-owner, #concepts .aif .sd-map-zone-owner { position: absolute; top: var(--at-s3); right: var(--at-s4); color: var(--at-tx-2); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); letter-spacing: var(--tr-caps); } #sdlc-view .sd-map-lines, #concepts .aif .sd-map-lines { position: absolute; inset: 0; z-index: 3; overflow: visible; pointer-events: none; } #sdlc-view .sd-map-path.is-dashed, #concepts .aif .sd-map-path.is-dashed { stroke-dasharray: 6 6; stroke-linejoin: round; } #sdlc-view .sd-tile, #concepts .aif .sd-tile { position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--at-s3); padding: var(--at-s3) var(--at-s7) var(--at-s3) var(--at-s4); border: 3px solid var(--at-line-2); border-radius: var(--at-r1); color: var(--at-tx); background: var(--at-panel); box-shadow: 0 0 0 1px var(--at-line), var(--at-shadow), inset 0 1px 0 rgba(255,255,255,.035); cursor: pointer; text-align: left; font: inherit; transition: transform var(--at-d2) var(--at-ease), border-color var(--at-d1) var(--at-ease), box-shadow var(--at-d2) var(--at-ease), opacity var(--at-d2) var(--at-ease), filter var(--at-d2) var(--at-ease); } #sdlc-view .sd-tile-copy, #concepts .aif .sd-tile-copy { min-width: 0; flex: 1 1 auto; } #sdlc-view .sd-tile strong, #concepts .aif .sd-tile strong { display: block; font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); } #sdlc-view .sd-tile small, #concepts .aif .sd-tile small { display: block; margin-top: var(--at-s1); color: var(--at-tx-2); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-prose) var(--at-read); } #sdlc-view .sd-tile-badge, #concepts .aif .sd-tile-badge { position: absolute; top: var(--at-s3); right: var(--at-s3); display: flex; width: var(--at-s6); height: var(--at-s6); align-items: center; justify-content: center; border: 1px solid var(--at-line-2); border-radius: 50%; color: var(--accent-text); font: var(--fw-strong) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); font-variant-numeric: tabular-nums; } #sdlc-view .sd-tile.k-trigger strong, #concepts .aif .sd-tile.k-trigger strong { color: var(--at-tx-1); } #sdlc-view .sd-map-path, #sdlc-view .sd-map-label, #sdlc-view .sd-map-zone, #concepts .aif .sd-map-path, #concepts .aif .sd-map-label, #concepts .aif .sd-map-zone { transition: opacity var(--at-d2) var(--at-ease), filter var(--at-d2) var(--at-ease); } @media (hover:hover) and (pointer:fine) { #sdlc-view .sd-tile:hover, #concepts .aif .sd-tile:hover { transform: translateY(var(--tile-lift)); border-color: var(--at-az-line); box-shadow: var(--accent-ring), var(--at-shadow); } } #sdlc-view .sd-twocol .proofs.is-never div:before { content: "\00d7"; color: var(--at-bad); font-weight: var(--fw-strong); } #sdlc-view .sd-loop { padding: var(--card-pad); } #sdlc-view .sd-loop-tile, #sdlc-view .sd-tile, #sdlc-view .sd-arch-tile, #concepts .aif .sd-tile { padding: var(--tile-pad); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); transition: var(--tile-trans); } html[data-lum="light"] #sdlc-view .sd-loop-tile, html[data-lum="light"] #sdlc-view .sd-tile, html[data-lum="light"] #sdlc-view .sd-arch-tile, html[data-lum="light"] #concepts .aif .sd-tile { background: var(--at-panel); } #sdlc-view .sd-loop-line b { font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); color: var(--accent-text); } #sdlc-view .sd-loop-line span { font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-disp); } #sdlc-view .sd-loop .lp-file { font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-disp); border-radius: var(--at-r1); } #sdlc-view .sd-loop .lp-center { font: var(--fw-ui) var(--at-fs-h3) var(--at-disp); } #sdlc-view .sd-loop .lp-center-sub { font: var(--fw-body) var(--at-fs-tiny) var(--at-read); } #sdlc-view .sd-loop .lp-entrytext { font: italic var(--fw-body) var(--at-fs-tiny) var(--at-disp); } #sdlc-view .sd-tile, #concepts .aif .sd-tile { padding: var(--tile-pad); padding-right: calc(var(--at-s5) + var(--at-s4)); gap: var(--at-s2); } #sdlc-view .sd-tile strong, #concepts .aif .sd-tile strong { font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-head); } #sdlc-view .sd-tile small, #concepts .aif .sd-tile small { margin-top: var(--at-s1); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-prose) var(--at-disp); } #sdlc-view .sd-tile.k-trigger, #concepts .aif .sd-tile.k-trigger { border-style: dashed; } #sdlc-view .sd-tile.k-artifact strong, #concepts .aif .sd-tile.k-artifact strong { font-family: var(--at-mono); font-weight: var(--fw-ui); font-size: var(--at-fs-body); } #sdlc-view .sd-tile-badge, #concepts .aif .sd-tile-badge { top: var(--at-s2); right: var(--at-s2); width: var(--at-s5); height: var(--at-s5); border-color: transparent; font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); } #sdlc-view .sd-tile-face, #concepts .aif .sd-tile-face { width: var(--at-s6); height: var(--at-s6); } @media (hover:hover) and (pointer:fine) { #sdlc-view .sd-loop-tile:hover, #sdlc-view .sd-tile:hover, #sdlc-view .sd-tile.k-agent:hover, #sdlc-view .sd-arch-tile:hover, #concepts .aif .sd-tile:hover, #concepts .aif .sd-tile.k-agent:hover { transform: translateY(var(--tile-lift)); border-color: var(--at-az-line); box-shadow: var(--at-shadow); background-color: var(--at-panel); } } html[data-lum="light"] #sdlc-view .sd-map-zone, html[data-lum="light"] #concepts .aif .sd-map-zone { background: var(--at-panel); } #sdlc-view .sd-map-zone, #concepts .aif .sd-map-zone { border: 1px solid var(--at-line); border-radius: var(--at-r1); } #sdlc-view .sd-map-zone-heading, #concepts .aif .sd-map-zone-heading { top: var(--at-s3); left: var(--at-s4); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); } #sdlc-view .sd-map-zone-owner, #concepts .aif .sd-map-zone-owner { top: var(--at-s3); right: var(--at-s4); font: var(--fw-ui) var(--at-fs-tiny)/var(--lh-tight) var(--at-disp); letter-spacing: var(--tr-small); } @media (prefers-reduced-motion: reduce) { #sdlc-view .sd-loop-tile:hover, #sdlc-view .sd-tile:hover, #sdlc-view .sd-arch-tile:hover, #concepts .aif .sd-tile:hover { transform: none !important; } } #sdlc-view .sd-figure .dg-edge, #concepts .aif .sd-figure .dg-edge { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: butt; } #sdlc-view .sd-loop .lp-track { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: butt; opacity: 1; } #sdlc-view .sd-loop .lp-arrowhead { fill: var(--accent); stroke: none; } #sdlc-view .sd-loop .lp-file { cursor: pointer; transition: border-color var(--at-d1) var(--at-ease), color var(--at-d1) var(--at-ease); } #sdlc-view .sd-loop .lp-file:hover { border-color: var(--accent); color: var(--at-tx); } #sdlc-view .sd-cast-face { grid-row: 1 / span 2; display: grid; place-items: center; width: calc(var(--icon-lg) * 1.5); height: calc(var(--icon-lg) * 1.5); overflow: hidden; border: 1px solid var(--at-line-2); border-radius: 50%; background: var(--at-canvas-2); box-shadow: var(--emboss-rest); color: var(--at-tx-2); } #sdlc-view .sd-cast-face.is-agent { color: #D97757; background: color-mix(in srgb, #D97757 16%, transparent); border-color: color-mix(in srgb, #D97757 50%, transparent); } html[data-lum="light"] #sdlc-view .sd-cast-face { background-color: var(--at-panel); } html[data-lum="light"] #sdlc-view .sd-cast-face.is-agent { background: color-mix(in srgb, #D97757 12%, var(--at-panel)); } #sdlc-view .sd-loop-tile { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: var(--at-s2); height: calc(var(--sp-8) + var(--at-s4)); } #sdlc-view .sd-loop-line { justify-content: center; } #sdlc-view .sd-loop-who { flex-direction: column; justify-content: center; gap: var(--at-s1); } #sdlc-view .sd-loop .lp-center { fill: var(--at-tx-1); } #sdlc-view .sd-arch-world { position: relative; transform-origin: 0 0; margin: 0 auto; } #sdlc-view .sd-figure.sd-arch .sd-arch-lines, #concepts .aif .sd-figure.sd-arch .sd-arch-lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; overflow: visible; pointer-events: none; } #sdlc-view .sd-arch-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-s1); text-align: center; cursor: default; } #sdlc-view .sd-arch-tile b { color: var(--at-tx); font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-disp); white-space: nowrap; } #sdlc-view .sd-arch-tile small { color: var(--at-tx-3); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); white-space: nowrap; } #sdlc-view .sd-arch-tile.is-later { border-style: dashed; } #sdlc-view .sd-arch-tile.is-later b { color: var(--at-tx-3); } #sdlc-view .sd-arch-note { position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--at-tx-3); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); } #sdlc-view .sd-cast-card > .sd-cast-face { grid-row: 1; width: var(--icon-lg); height: var(--icon-lg); } #concepts .aif .sd-flow-fixed { padding: var(--card-pad); } #sdlc-view .sd-flow-world, #concepts .aif .sd-flow-world { position: relative; transform-origin: 0 0; margin: 0 auto; } #sdlc-view .sd-flow-fixed .sd-map-lines, #concepts .aif .sd-figure.sd-flow-fixed .sd-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; overflow: visible; pointer-events: none; } #sdlc-view .sd-flow-fixed .sd-map-path.is-dashed, #concepts .aif .sd-flow-fixed .sd-map-path.is-dashed { stroke-dasharray: 4 4; } #sdlc-view .sd-flow-fixed .sd-map-zone-heading, #concepts .aif .sd-flow-fixed .sd-map-zone-heading { font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-disp); } #sdlc-view .sd-flow-fixed .sd-tile, #concepts .aif .sd-flow-fixed .sd-tile { padding: var(--tile-pad); padding-right: calc(var(--at-s5) + var(--at-s1)); gap: var(--at-s2); } #sdlc-view .sd-flow-fixed .sd-tile strong, #concepts .aif .sd-flow-fixed .sd-tile strong { font: var(--fw-ui) var(--at-fs-body)/var(--lh-tight) var(--at-disp); letter-spacing: normal; } #sdlc-view .sd-flow-fixed .sd-tile small, #concepts .aif .sd-flow-fixed .sd-tile small { margin-top: var(--at-s1); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); } #sdlc-view .sd-flow-fixed .sd-tile.k-artifact strong, #concepts .aif .sd-flow-fixed .sd-tile.k-artifact strong { font-family: var(--at-disp); } #sdlc-view .sd-flow-fixed .sd-tile-badge, #concepts .aif .sd-flow-fixed .sd-tile-badge { top: var(--at-s1); right: var(--at-s1); } @media (hover: hover) and (pointer: fine) { #sdlc-view .sd-loop-tile:hover { transform: translateY(calc(-1 * var(--at-s1))); } } #sdlc-view .sd-flow-fixed .sd-map-zone, #concepts .aif .sd-flow-fixed .sd-map-zone { box-sizing: border-box; display: flex; align-items: baseline; justify-content: space-between; gap: var(--at-s3); padding: var(--card-pad); border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #sdlc-view .sd-flow-fixed .sd-map-zone-heading, #sdlc-view .sd-flow-fixed .sd-map-zone-owner, #concepts .aif .sd-flow-fixed .sd-map-zone-heading, #concepts .aif .sd-flow-fixed .sd-map-zone-owner { position: relative; top: auto; right: auto; left: auto; z-index: 4; background: var(--at-panel); } #sdlc-view .sd-flow-fixed .sd-tile.is-file, #sdlc-view .sd-flow-fixed .sd-tile.is-file:hover, #concepts .aif .sd-flow-fixed .sd-tile.is-file, #concepts .aif .sd-flow-fixed .sd-tile.is-file:hover { border-color: var(--accent); } #sdlc-view .sd-flow-fixed .sd-tile.is-file, #concepts .aif .sd-flow-fixed .sd-tile.is-file { box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow), var(--emboss-rest); animation: sd-file-breathe 3.6s var(--at-ease) infinite; } #sdlc-view .sd-tile-face.is-file, #concepts .aif .sd-tile-face.is-file { color: var(--accent-text); background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .45); } #sdlc-view .sd-flow-sizer, #concepts .aif .sd-flow-sizer { position: relative; overflow: hidden; } #sdlc-view .sd-flow-fixed.sd-loop-fit.is-sliding, #concepts .aif .sd-flow-fixed .sd-loop-fit.is-sliding { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; } #sdlc-view .sd-flow-fixed .sd-tile, #concepts .aif .sd-flow-fixed .sd-tile { justify-content: center; } #sdlc-view .sd-flow-fixed .sd-tile-copy, #concepts .aif .sd-flow-fixed .sd-tile-copy { flex: 0 1 auto; text-align: center; } #sdlc-view .sd-flow-fixed .sd-tile.k-trigger strong, #concepts .aif .sd-flow-fixed .sd-tile.k-trigger strong { color: var(--at-tx); } #sdlc-view .sd-flow-fixed .sd-tile, #concepts .aif .sd-flow-fixed .sd-tile { padding-top: calc(var(--at-s1) * 2 + var(--at-s5)); } #sdlc-view .sd-twocol .proofs > div:before { position: static; display: block; margin-bottom: 1px; } #sdlc-view .sd-arch-note.is-label { transform: translate(-50%, -50%); } #sdlc-view .sd-flow .sd-flow-fixed .sd-tile, #concepts .aif .sd-flow .sd-flow-fixed .sd-tile { padding-top: calc(var(--at-s1) * 2 + var(--icon-lg)); padding-left: calc(var(--at-s5) + var(--at-s1)); } #sdlc-view .sd-flow .sd-flow-fixed :is(.sd-tile > .sd-tile-face, .sd-tile-faces), #concepts .aif .sd-flow .sd-flow-fixed :is(.sd-tile > .sd-tile-face, .sd-tile-faces) { position: absolute; top: var(--at-s1); left: var(--at-s1); } #sdlc-view .sd-flow .sd-flow-fixed .sd-tile-face, #concepts .aif .sd-flow .sd-flow-fixed .sd-tile-face { width: var(--icon-lg); height: var(--icon-lg); } #sdlc-view .sd-flow .sd-flow-fixed .sd-tile-badge, #concepts .aif .sd-flow .sd-flow-fixed .sd-tile-badge { top: calc(var(--at-s1) + (var(--icon-lg) - var(--at-s5)) / 2); } #sdlc-view .sd-flow .sd-flow-fixed .sd-tile.is-file small, #concepts .aif .sd-flow .sd-flow-fixed .sd-tile.is-file small { padding-inline: var(--at-s3); } #sdlc-view .sd-flow-fixed .sd-tile-faces, #concepts .aif .sd-flow-fixed .sd-tile-faces { display: flex; flex: 0 0 auto; align-items: center; } #sdlc-view .sd-flow-fixed .sd-tile-faces > .sd-tile-face + .sd-tile-face, #concepts .aif .sd-flow-fixed .sd-tile-faces > .sd-tile-face + .sd-tile-face { margin-left: calc(var(--at-s2) * -1); } #sdlc-view .sd-loop-stage { position: relative; } #sdlc-view .sd-flow .sd-flow-fixed .sd-map-zone[data-lane="2"], #concepts .aif .sd-flow .sd-flow-fixed .sd-map-zone[data-lane="2"] { align-items: flex-end; } #sdlc-view .sd-loop .lp-center { font-size: var(--at-fs-body); fill: var(--at-tx-2); } #concepts .aif .sd-flow .sd-flow-fixed { border-width: 0; background: none; box-shadow: none; } .proofs div:before { content: "\2713"; position: absolute; left: 0; color: var(--at-ok); } /* ==== THE LAYOUTS of the story's tiles: the stage tile's columns and rows, the cast, the steps, the close ==== */ html[data-lum="light"] #sdlc-view .sd-cast-card { background: var(--at-panel); } @media (min-width:901px) { #sdlc-view .sd-cast { grid-template-columns: repeat(3, minmax(0,1fr)); } } #sdlc-view .sd-cast-card { position: relative; min-width: 0; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: linear-gradient(150deg, var(--at-canvas-2), var(--at-panel)); box-shadow: var(--emboss-rest); } #sdlc-view .sd-compare { display: grid; grid-template-columns: 1fr 1fr; } #sdlc-view .sd-compare .sd-now { border-color: var(--at-az-line); background: linear-gradient(var(--at-az-w),var(--at-az-w)),linear-gradient(var(--at-panel),var(--at-panel)); } #sdlc-view .sd-measure { display: grid; grid-template-columns: 1fr 1fr; } #sdlc-view .sd-twocol { display: grid; grid-template-columns: 1fr 1fr; } #sdlc-view .sd-glossary dl { display: contents; } @media (max-width:900px) { #sdlc-view .sd-compare, #sdlc-view .sd-measure, #sdlc-view .sd-twocol { grid-template-columns: 1fr; } } #sdlc-view .sd-compare .sd-now { border-color: var(--at-az-line); background: linear-gradient(var(--at-az-w), var(--at-az-w)), var(--at-panel); } html[data-lum="light"] #sdlc-view .sd-compare .sd-now { background: linear-gradient(var(--at-az-w), var(--at-az-w)), var(--at-panel); } #sdlc-view .sd-cast-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; align-content: start; column-gap: var(--at-s3); } #sdlc-view .sd-cast-card > h3, #sdlc-view .sd-cast-card > p { grid-column: 2; } #sdlc-view .sd-cast { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tile-min)), 1fr)); } #sdlc-view .sd-cast-card { grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: var(--at-s2); } #sdlc-view .sd-cast-card > h3 { grid-column: 2; } #sdlc-view .sd-cast-card > p { grid-column: 1 / -1; } #sdlc-view :is(.sd-glance, .sd-list-tile) { border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); } #sdlc-view .sd-twocol { grid-template-columns: 1fr; } #sdlc-view .sd-twocol h3 { text-align: center; } #sdlc-view .sd-twocol .proofs { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 900px); overflow: hidden; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: var(--at-panel); box-shadow: var(--emboss-rest); gap: 0; } #sdlc-view .sd-twocol .proofs.proofs > div { display: block; min-width: 0; min-height: 62px; text-align: center; } #sdlc-view .sd-twocol .proofs > div + div { border-left: 1px solid var(--at-line); } @media (max-width: 640px) { #sdlc-view .sd-twocol .proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); } #sdlc-view .sd-twocol .proofs > div:nth-child(4) { border-left: 0; } #sdlc-view .sd-twocol .proofs > div:nth-child(n + 4) { border-top: 1px solid var(--at-line); } } #sdlc-view .sd-cast { grid-template-columns: minmax(0, 1fr); } @container (min-width: 452px) { #sdlc-view .sd-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 684px) { #sdlc-view .sd-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (min-width: 1380px) { #sdlc-view .sd-cast { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .flat-tile { min-width: 0; border: 1px solid transparent; border-radius: var(--at-r1); background: transparent; box-shadow: none; cursor: default; } .step { min-width: 0; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: linear-gradient(150deg, var(--at-canvas-2), var(--at-panel)); } .proofs { display: grid; } .proofs div { position: relative; } .flat-tile { border-color: var(--at-line); } /* ==== THE DRAWINGS of AI in Plain Words, Git and the lessons: the scenes' pictures, the front door's flow, the lesson pictures, the MCP flows and paths ==== */ .mcp-section-number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--at-az-line); border-radius: 50%; color: var(--accent-text); font: var(--fw-strong) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); font-variant-numeric: tabular-nums; } .mcp-spaghetti,.mcp-hub { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--at-s2); } .mcp-spaghetti span,.mcp-hub span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--at-line); border-radius: var(--at-r1); padding: var(--at-s2); color: var(--at-tx-1); text-align: center; font-size: var(--at-fs-tiny); overflow-wrap: break-word; } .mcp-hub span:nth-child(2) { border-color: var(--at-az-line); color: var(--accent-text); } .mcp-problem-arrow { display: grid; place-items: center; color: var(--accent-text); font-size: var(--at-fs-h3); } .mcp-path-flow { display: grid; grid-template-columns: repeat(5,minmax(138px,1fr)); gap: var(--at-s5); min-width: 830px; align-items: stretch; } .mcp-path-step { position: relative; display: grid; align-content: center; min-width: 0; min-height: 92px; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--app-canvas); padding: var(--at-s3); } .mcp-path-step b { color: var(--at-tx); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); overflow-wrap: break-word; } .mcp-path-step small { display: block; margin-top: var(--at-s1); color: var(--at-tx-2); line-height: var(--lh-prose); overflow-wrap: break-word; } .mcp-path-step:not(:last-child)::before { content: ""; position: absolute; left: 100%; top: 50%; width: var(--icon-lg); height: var(--at-s1); background: var(--accent); transform: translateY(-50%); } .mcp-path-step:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 18px); top: 50%; border-top: var(--at-s2) solid transparent; border-bottom: var(--at-s2) solid transparent; border-left: var(--at-s2) solid var(--accent); transform: translateY(-50%); } .mcp-flow { display: grid; grid-template-columns: minmax(142px,1fr) 32px minmax(142px,1fr) 32px minmax(142px,1fr) 32px minmax(142px,1fr) 32px minmax(142px,1fr) 32px minmax(142px,1fr) 32px minmax(142px,1fr); align-items: stretch; min-width: 1160px; } .mcp-flow-step { position: relative; display: grid; align-content: center; min-width: 0; min-height: 126px; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); padding: var(--at-s3); } .mcp-flow-step b { display: block; color: var(--at-tx); font: var(--fw-ui) var(--at-fs-h3)/var(--lh-tight) var(--at-disp); } .mcp-flow-step small { display: block; margin-top: var(--at-s2); color: var(--at-tx-2); font-size: var(--at-fs-tiny); line-height: var(--lh-prose); white-space: normal; overflow-wrap: break-word; } .mcp-flow-step em { display: block; margin-bottom: var(--at-s2); color: var(--accent-text); font: var(--fw-strong) var(--at-fs-tiny)/var(--lh-tight) var(--at-read); font-style: normal; } .mcp-flow-step.is-control { border-color: var(--at-az-line); box-shadow: inset 0 0 0 1px var(--accent-weak); } .mcp-flow-link { position: relative; min-width: var(--at-s5); align-self: stretch; } .mcp-flow-link::before { content: ""; position: absolute; left: 0; right: 9px; top: 50%; height: var(--at-s1); background: var(--accent); transform: translateY(-50%); } .mcp-flow-link::after { content: ""; position: absolute; right: -1px; top: 50%; width: 0; height: 0; border-top: var(--at-s2) solid transparent; border-bottom: var(--at-s2) solid transparent; border-left: var(--at-s2) solid var(--accent); transform: translateY(-50%); } @media (max-width: 760px) { .mcp-section-number { width: 100%; height: auto; aspect-ratio: 1; } .mcp-path-flow { grid-template-columns: 1fr; gap: var(--at-s5); min-width: 0; } .mcp-path-step { min-height: 0; } .mcp-path-step:not(:last-child)::before { left: 50%; top: 100%; width: var(--at-s1); height: var(--icon-lg); transform: translateX(-50%); } .mcp-path-step:not(:last-child)::after { left: 50%; top: calc(100% + 19px); border-left: var(--at-s2) solid transparent; border-right: var(--at-s2) solid transparent; border-top: var(--at-s2) solid var(--accent); border-bottom: 0; transform: translateX(-50%); } .mcp-problem-arrow { transform: rotate(90deg); min-height: var(--icon-lg); } .mcp-flow { grid-template-columns: 1fr; min-width: 0; } .mcp-flow-link { min-height: var(--icon-lg); } .mcp-flow-link::before { left: 50%; right: auto; top: 0; bottom: 9px; width: var(--at-s1); height: auto; transform: translateX(-50%); } .mcp-flow-link::after { right: auto; left: 50%; top: auto; bottom: -1px; border-top: var(--at-s2) solid var(--accent); border-left: var(--at-s2) solid transparent; border-right: var(--at-s2) solid transparent; border-bottom: 0; transform: translateX(-50%); } .mcp-flow-step { min-height: 0; } } .lesson-figure { border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-well); padding: var(--at-s5) clamp(var(--at-s3), 3vw, var(--at-s5)) var(--at-s2); } .lesson-figure svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; } .lesson-figure figcaption { margin: var(--at-s3) auto var(--at-s1); text-align: center; color: var(--at-tx-3); font: var(--fw-body) var(--at-fs-tiny)/var(--lh-body) var(--at-read); } .lesson-figure .dg-box { fill: var(--at-panel); stroke: var(--at-line-2); } .lesson-figure .dg-core { fill: rgba(var(--accent-rgb), .07); stroke: var(--accent); } .lesson-figure .dg-arrow { stroke: var(--accent); } .lesson-figure .dg-head { fill: var(--accent); } .lesson-figure .dg-mesh { stroke: rgba(var(--accent-rgb), .45); } .lesson-figure .dg-node { fill: var(--accent); } .lesson-figure .dg-title { fill: var(--at-tx-1); font: var(--fw-strong) var(--at-fs-body) var(--at-read); } .lesson-figure .dg-sub { fill: var(--at-tx-3); font: var(--fw-body) var(--at-fs-tiny) var(--at-read); } .shop-story figure { margin: 0; } .shop-story img { display: block; width: 100%; height: auto; border-radius: var(--at-r1); } .shop-story figcaption { padding-top: var(--at-s2); color: var(--at-tx-3); font: var(--at-fs-small)/var(--lh-body) var(--at-ui); } .shop-scene:nth-child(even) .shop-shot { order: 2; } @media (max-width: 900px) { .shop-scene:nth-child(even) .shop-shot { order: 0; } } /* ==== THE LAYOUTS of the rest: the scenes' rows, the topic tiles, the lessons' feet, the MCP chapter's rows of boxes ==== */ .mcp-chapter { display: grid; min-width: 0; } .mcp-section { scroll-margin-top: var(--at-s4); min-width: 0; } .mcp-section-head { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: start; gap: var(--at-s4); } .mcp-principle { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); } .mcp-principle article,.mcp-role,.mcp-primitive,.mcp-compare-card,.mcp-mode,.mcp-safety-card,.mcp-build-step { min-width: 0; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); } .mcp-principle strong,.mcp-role h3,.mcp-primitive h3,.mcp-compare-card h3,.mcp-mode h3,.mcp-safety-card h3,.mcp-build-step h3 { display: block; overflow-wrap: break-word; } .mcp-principle p,.mcp-role p,.mcp-primitive p,.mcp-compare-card p,.mcp-mode p,.mcp-safety-card p,.mcp-build-step p { text-wrap: pretty; overflow-wrap: break-word; } .mcp-principle article:nth-child(2) { border-color: var(--at-az-line); box-shadow: inset 0 0 0 1px var(--accent-weak); } .mcp-problem { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); align-items: stretch; } .mcp-problem-panel { border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); min-width: 0; } .mcp-same-request { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; border: 1px solid var(--at-az-line); border-radius: var(--at-r1); background: var(--at-az-w); gap: var(--at-s3); } .mcp-same-request strong { overflow-wrap: break-word; } .mcp-same-request p { grid-column: 2; overflow-wrap: break-word; } .mcp-same-request q { quotes: "\201c" "\201d"; text-wrap: pretty; } .mcp-paths { display: grid; } .mcp-path { min-width: 0; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); overflow-x: auto; overscroll-behavior-inline: contain; } .mcp-path-head { display: grid; grid-template-columns: minmax(180px,.42fr) minmax(0,1fr); align-items: end; gap: var(--at-s4); } .mcp-path-head p { text-wrap: pretty; } .mcp-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .mcp-choice article { min-width: 0; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); } .mcp-choice article:first-child { border-color: var(--at-az-line); } .mcp-flow-wrap { border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-canvas-0); overflow-x: auto; overscroll-behavior-inline: contain; } .mcp-flow-note { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; border-left: 1px solid var(--accent); gap: var(--at-s3); } .mcp-roles,.mcp-primitives,.mcp-compare,.mcp-modes,.mcp-safety,.mcp-build { display: grid; } .mcp-roles { grid-template-columns: repeat(3,minmax(0,1fr)); } .mcp-safety { grid-template-columns: repeat(3,minmax(0,1fr)); } .mcp-role .mcp-label,.mcp-primitive .mcp-label,.mcp-compare-card .mcp-label,.mcp-mode .mcp-label,.mcp-safety-card .mcp-label,.mcp-build-step .mcp-label { display: block; } html[data-lum="light"] .mcp-flow-wrap { background: var(--at-canvas-2); } @media (max-width: 1180px) { .mcp-safety { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 760px) { .mcp-section-head { grid-template-columns: 38px minmax(0,1fr); gap: var(--at-s2); } .mcp-principle,.mcp-problem,.mcp-roles,.mcp-primitives,.mcp-compare,.mcp-modes,.mcp-safety,.mcp-build,.mcp-not,.mcp-glossary,.mcp-choice { grid-template-columns: 1fr; } .mcp-same-request,.mcp-path-head { grid-template-columns: 1fr; } .mcp-same-request p { grid-column: auto; } .mcp-path { overflow: visible; } .mcp-flow-wrap { overflow: visible; } } .lesson-section { scroll-margin-top: 0; } .lesson-link { display: block; border: 1px solid var(--at-line); border-radius: var(--at-r1); background: linear-gradient(150deg,var(--at-canvas-2),var(--at-panel)); text-decoration: none; } .lesson-link small { display: block; } .tile-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--tile-min)),1fr)); align-content: start; } .tile-grid > * { min-width: 0; max-width: none; } .tile-grid > * :is(b, span, small, div, p, h3) { overflow-wrap: break-word; word-break: normal; } @media (hover:hover) and (pointer:fine) { .lesson-link:hover { color: var(--at-tx); } } .topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } .tile { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: start; min-height: 104px; border: 1px solid var(--at-line-2); border-radius: var(--at-r1); background: var(--at-panel); text-decoration: none; box-shadow: var(--emboss-rest); transition: transform var(--at-d1) var(--at-ease), border-color var(--at-d1) var(--at-ease), box-shadow var(--at-d1) var(--at-ease); gap: var(--at-s2); } .tile:hover { transform: translateY(var(--tile-lift)); border-color: var(--at-az-line); box-shadow: var(--at-shadow); } .tile:active { transform: translateY(var(--tile-lift-active)); box-shadow: var(--emboss-press); } .tile b { display: block; } .tile small { display: block; } .shop-story p { text-align: justify; } .shop-scenes { display: flex; flex-direction: column; list-style: none; } .shop-scene { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; } .shop-words { display: flex; flex-direction: column; min-width: 0; } .shop-words h3 { display: flex; align-items: baseline; gap: var(--at-s2); } @media (max-width: 900px) { .shop-scene { grid-template-columns: minmax(0, 1fr); } } #topics.topics { display: block; } #topics .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-8) * 2.65), 1fr)); grid-auto-rows: 1fr; list-style: none; } @media (max-width: 620px) { #topics .topic-grid { grid-template-columns: minmax(0, 1fr); } } #topics .topic-grid > li { display: flex; min-width: 0; } #topics .topic-grid .tile.is-picture { flex: 1 1 auto; } #topics .tile.is-picture { display: flex; flex-direction: column; min-height: 0; } #topics .tile.is-picture b { text-align: start; } #topics .tile-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--at-r1); background: var(--at-canvas-2); } #topics .tile-art img { width: 100%; height: 100%; object-fit: cover; } #topics .tile-art small { text-align: center; } :is(.lesson-shell, #aif-lesson) .lesson-example-line { text-align: justify; }