/* Copyright (c) Pawan Nayar - LLOS.ai - 2026 - Original pedagogy, voice, and design - all rights reserved. */ /* =============================================================================================== ARTICLE - the shared sheet for AI Learning articles. [2026-08-10] Step 1 of LESSON_ARTICLE_PROCESS.md. Pawan: "do that i will" (judge the one article). WHY THIS EXISTS. The six articles written on 8-9 August each carry 27-30KB of their own inline CSS, and 235 rules are byte-identical across all six. That is 20 KB duplicated six times, one builder script per article, and six places to edit when one thing changes. The plan is ~280 articles. Running that pipeline on the old foundation would manufacture the same problem 280 times, which is why the process document makes this the step nothing else starts before. HOW IT WAS BUILT. Not hand-written: every rule below appears in ALL SIX articles with a byte-identical body, taken in the cascade order of article_working_rhythm.html - the newest and the only one that passes tools/check_prose.py with zero problems. WHAT IT DOES NOT DO. The six existing articles are approved work and are not rewritten. They keep their inline copies until somebody looks at a migration properly. This sheet is for the next article and the ones after it. Depends on the page's own :root tokens, exactly as the inline versions did. =============================================================================================== */ :root{--bg:#fdfcfa; --bg-warm:#faf5ea; --card:#ffffff; --ink:#171717; --muted:#404040; --soft:#737373; --accent:#ea7a27; --accent-dark:#b8500f; --accent-deep:#92400e; --ch-soft:#fde8c4; --ch-mist:#fdf8f1; --ok:#16a34a; --ok-soft:#e7f3e9; --ok-bd:#bfe3c8; --warn:#b4431f; --warn-soft:#fbe7dc; --warn-bd:#f3c79a; --reflect:#7a5912; --reflect-soft:#f3ecd6; --reflect-bd:#e4d8b0; --line:#e7e5e0; --border-soft:#f0ebe0; --line-soft:#f3efe7; --glass:#ffffff; --glass-2:#faf5ea; --glass-bd:#e7e5e0; --shadow:0 6px 24px rgba(120,72,20,.05); --shadow-lg:0 16px 44px rgba(120,72,20,.10); --glass-shadow:0 6px 24px rgba(120,72,20,.05); --spring:cubic-bezier(.22,1,.36,1); --radius-lg:18px;} *{box-sizing:border-box;margin:0;padding:0} html,body{max-width:100%;overflow-x:clip} .prose,.lede,.car-card,.mcard,.blchip,.gdef,.gdef dd,.faq,.note,h1,h2,h3,.subtitle{overflow-wrap:break-word;word-break:break-word} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;color:var(--ink);line-height:1.62; background:radial-gradient(circle at 10% 20%,rgba(234,122,39,.03) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(245,159,10,.04) 0%,transparent 40%),linear-gradient(to bottom,#fdfcfa,#faf5ea); background-attachment:fixed;} .glass{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius-lg)} header:not(.sh-topbar){position:sticky;top:0;z-index:50;background:rgba(253,252,250,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-soft)} /* [2026-08-18] local header nav onto the same 1200 rail as everything else. */ .nav{max-width:1200px;margin:0 auto;padding:.7rem 1.5rem;display:flex;align-items:center;gap:.8rem} .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#f59f0a);color:#fff;font-weight:900;display:grid;place-items:center;text-decoration:none} .brand{font-family:'Outfit';font-weight:800;font-size:1.12rem;color:var(--ink);text-decoration:none} .brand span{color:var(--accent-dark)} .crumb{margin-left:auto;font-size:.76rem;color:var(--soft)} .crumb a{color:var(--soft);text-decoration:none} .crumb a:hover{color:var(--accent-dark)} .hero{padding:2.4rem 0 1.4rem} .herorow{display:flex;gap:1.6rem;align-items:center} .htext{flex:1;min-width:0} .badge{display:inline-block;font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.06em;color:var(--accent-deep);background:var(--ch-mist);border:1px solid var(--ch-soft);padding:.34rem .8rem;border-radius:999px} h1{font-family:'Outfit';font-weight:900;font-size:clamp(2rem,5.2vw,3rem);letter-spacing:-.02em;line-height:1.04;margin:.9rem 0 .5rem} .byline{font-size:.83rem;color:var(--soft);margin-bottom:1rem} .byline b{color:var(--muted);font-weight:600} .lede{font-family:'Lora';font-size:1.2rem;color:var(--muted);max-width:60ch} .xshape{width:138px;height:138px;flex:none;display:grid;place-items:center;padding:14px;border-radius:24px} .xshape svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(120,72,20,.18))} .ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem} .btn{font-weight:700;font-size:.9rem;border-radius:12px;padding:.66rem 1.2rem;text-decoration:none;cursor:pointer;border:1px solid transparent;font-family:'Inter',sans-serif} .btn-go{background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px rgba(234,122,39,.55)} .btn-go:hover{background:var(--accent-dark)} .btn-gh{background:var(--card);border-color:var(--line);color:var(--muted)} .btn-gh:hover{border-color:var(--accent);color:var(--accent-dark)} .stats{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem} .stat{font-size:.76rem;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--glass-bd);border-radius:999px;padding:.36rem .8rem} .stat b{color:var(--accent-deep)} section{padding:1.5rem 0} h2{font-family:'Outfit';font-weight:800;font-size:1.65rem;margin-bottom:.7rem;letter-spacing:-.01em} h2 .em{color:var(--accent-dark)} .panel{padding:1.4rem 1.5rem;margin-bottom:1rem} .secrow{display:flex;gap:1.2rem;align-items:flex-start} .secrow .sshape{width:84px;height:84px;flex:none;border-radius:18px;display:grid;place-items:center;padding:9px;background:var(--card);border:1px solid var(--glass-bd)} .secrow .sshape svg{width:100%;height:100%} .mh{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:1rem 0 .35rem} .prose{font-family:'Lora';font-size:1.08rem;color:var(--muted)} .prose p{margin-bottom:.9rem} .prose b{color:var(--ink);font-weight:600} /* [2026-08-22] Pawan: "lets fix all of them" → white-space:nowrap held this citation on ONE line at 1601px inside a 342px column, which pushed the document wide enough that html/body's overflow-x:clip cut it off: the paper number, the date and the sample size were unreadable on a phone and there was no way to scroll to them. Wrapping is the whole fix. The radius drops from the 999px stadium to 10px because a pill shape only reads as a pill on one line — over two or three it looks like a mistake. .honest has exactly one consumer site-wide (grepped: start.html), so nothing else moves. Breaks if removed: the source citation becomes unreadable on mobile again. */ .honest{font-family:'JetBrains Mono';font-size:.64rem;letter-spacing:.04em;color:var(--accent-deep);background:var(--ch-mist);border:1px solid var(--ch-soft);border-radius:10px;padding:.2rem .55rem;white-space:normal} .gloss-link{border-bottom:1px dotted var(--accent);cursor:help;color:var(--accent-dark);font-weight:600} ul.clean{list-style:none} ul.clean li{padding:.5rem 0 .5rem 1.4rem;position:relative;border-bottom:1px solid var(--line);color:var(--muted)} ul.clean li:before{content:"\2726";position:absolute;left:0;color:var(--accent)} ul.clean li b{color:var(--ink)} .cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} .rwc{padding:1.1rem;display:flex;flex-direction:column;gap:.5rem} .rwc .rwshape{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;padding:8px;background:var(--card);border:1px solid var(--glass-bd)} .rwc .rwshape svg{width:100%;height:100%} .rwc h3{font-family:'Outfit';font-size:1.04rem} .rwc p{font-size:.9rem;color:var(--muted)} .gloss-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .gdef{padding:1rem 1.15rem} .gdef h4{font-family:'Outfit';font-size:1.04rem;color:var(--accent-deep);margin-bottom:.25rem} .gdef dt{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-top:.5rem} .gdef dd{margin:.08rem 0 0;font-size:.9rem;color:var(--muted)} .gdef .kq{color:var(--accent-dark);font-style:italic} .faq details{padding:.2rem .2rem;margin-bottom:.55rem;border-radius:12px} .faq summary{font-weight:700;cursor:pointer;padding:.66rem .9rem;list-style:none;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary:before{content:"+";color:var(--accent);font-weight:800;margin-right:.55rem} .faq details[open] summary:before{content:"\2212"} .faq .meta{display:flex;gap:.35rem;flex-wrap:wrap;padding:0 .9rem .3rem 2rem} .faq .meta span{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.02em;color:var(--accent-deep);background:var(--ch-mist);border:1px solid var(--ch-soft);border-radius:999px;padding:.14rem .6rem} .faq .ans{padding:.15rem .9rem .8rem 2rem;color:var(--muted);font-size:.94rem} .faq table{border-collapse:collapse;margin:.45rem .9rem .7rem 2rem;width:calc(100% - 2.9rem);font-size:.88rem;color:var(--muted)} .faq table th,.faq table td{border:1px solid var(--line);padding:.4rem .65rem;text-align:left;vertical-align:top} .faq table th{background:var(--bg-warm);font-weight:700;color:var(--ink)} .faq table td:first-child{font-weight:600;color:var(--ink)} .boardbar{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .6rem} .boardpill{font-size:.8rem;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--glass-bd);border-radius:999px;padding:.4rem .85rem;cursor:pointer;font-family:inherit;transition:.14s} .boardpill:hover{border-color:var(--accent);color:var(--accent-dark)} .boardpill.on{background:var(--accent);color:#fff;border-color:transparent} .boardpill .bc{font-family:'JetBrains Mono';font-size:.7rem;opacity:.7;margin-left:.35rem} .boardpill.on .bc{opacity:.95} #bankNote{font-family:'JetBrains Mono';font-size:.74rem;color:var(--accent-deep);margin:0 0 1rem} .quiz{padding:1.2rem 1.3rem} .qtop{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem} .qprog{flex:1;min-width:160px} .qprog .ptrack{height:7px;border-radius:99px;background:rgba(120,72,20,.14);overflow:hidden;margin-top:.4rem} .qprog .pfill{height:100%;background:linear-gradient(90deg,var(--accent),#f59f0a);width:0;transition:width .35s ease} .qprog .pmeta{font-family:'JetBrains Mono';font-size:.72rem;color:var(--soft)} .qtypebadge{font-family:'JetBrains Mono';font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);background:var(--card);border:1px solid var(--glass-bd);border-radius:999px;padding:.26rem .7rem} .qstem{font-size:1.12rem;font-weight:600;color:var(--ink);line-height:1.48;margin-bottom:.4rem} .qsub{font-size:.82rem;color:var(--soft);margin-bottom:.8rem;text-transform:capitalize} .passage{font-family:'Lora';font-size:1rem;color:var(--muted);background:var(--bg-warm);border:1px solid var(--glass-bd);border-left:3px solid var(--accent);border-radius:10px;padding:.8rem 1rem;margin-bottom:.9rem} .opts{display:flex;flex-direction:column;gap:.5rem} .opt{display:flex;gap:.6rem;align-items:flex-start;text-align:left;background:var(--card);border:1px solid var(--glass-bd);border-radius:11px;padding:.62rem .8rem;font-size:.94rem;color:var(--muted);cursor:pointer;font-family:inherit;line-height:1.4;transition:.14s} .opt:hover:not(.locked){border-color:var(--accent);color:var(--ink)} .opt .tick{width:1.25rem;height:1.25rem;border-radius:6px;border:1.5px solid var(--soft);flex:none;display:grid;place-items:center;font-size:.7rem;color:transparent;margin-top:.05rem} .opt.sel{border-color:var(--accent);background:rgba(234,122,39,.08)} .opt.sel .tick{border-color:var(--accent);background:var(--accent);color:#fff} .opt.locked{cursor:default} .opt.correct{border-color:var(--ok);background:var(--ok-soft)} .opt.correct .tick{border-color:var(--ok);background:var(--ok);color:#fff} .opt.wrong{border-color:var(--warn);background:var(--warn-soft)} .opt.wrong .tick{border-color:var(--warn);background:var(--warn);color:#fff} .opt .ofb{display:block;font-size:.8rem;color:var(--soft);margin-top:.25rem} .opt.correct .ofb{color:var(--ok)} .opt.wrong .ofb{color:var(--warn)} .blankrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-size:1.05rem} .blankrow input{font-family:inherit;font-size:1rem;padding:.5rem .7rem;border:1px solid var(--glass-bd);border-radius:10px;background:var(--card);min-width:160px;color:var(--ink)} .blankrow input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(234,122,39,.15)} .matchgrid{display:flex;flex-direction:column;gap:.55rem} .matchrow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .matchrow .ml{flex:1;min-width:140px;background:var(--card);border:1px solid var(--glass-bd);border-radius:10px;padding:.55rem .75rem;font-size:.92rem;color:var(--ink)} .matchrow select{font-family:inherit;font-size:.9rem;padding:.5rem .6rem;border:1px solid var(--glass-bd);border-radius:10px;background:var(--card);min-width:150px;color:var(--ink)} .matchrow.correct select{border-color:var(--ok);background:var(--ok-soft)} .matchrow.wrong select{border-color:var(--warn);background:var(--warn-soft)} .seqtray{min-height:46px;display:flex;flex-wrap:wrap;gap:.45rem;padding:.5rem;border:1.5px dashed var(--glass-bd);border-radius:12px;background:var(--bg-warm);margin-bottom:.6rem} .seqtray:empty:before{content:"Click items below in the right order…";color:var(--soft);font-size:.85rem} .seqpool{display:flex;flex-wrap:wrap;gap:.45rem} .chip{background:var(--card);border:1px solid var(--glass-bd);border-radius:9px;padding:.4rem .7rem;font-size:.88rem;color:var(--ink);cursor:pointer;font-family:inherit} .chip:hover{border-color:var(--accent)} .chip.placed{opacity:.4;pointer-events:none} .chip.intray{background:rgba(234,122,39,.1);border-color:var(--accent)} .chip.intray .ord{font-family:'JetBrains Mono';color:var(--accent-dark);margin-right:.3rem} .chip.ok{background:var(--ok-soft);border-color:var(--ok)} .chip.bad{background:var(--warn-soft);border-color:var(--warn)} .subjwrap textarea{width:100%;min-height:120px;padding:.8rem;border:1px solid var(--glass-bd);border-radius:12px;font-family:inherit;font-size:.95rem;resize:vertical;background:var(--card);color:var(--ink)} .subjwrap textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(234,122,39,.15)} .kwline{margin-top:.7rem;font-size:.85rem} .kwline .kw{display:inline-block;border-radius:6px;padding:.05rem .4rem;margin:.12rem;border:1px solid} .kw.found{background:var(--ok-soft);border-color:var(--ok-bd);color:var(--ok)} .kw.miss{background:var(--warn-soft);border-color:var(--warn-bd);color:var(--warn)} .controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;align-items:center} .qbtn{font-family:'Inter';font-weight:600;font-size:.84rem;border-radius:999px;padding:.5rem 1rem;cursor:pointer;border:1px solid var(--glass-bd);background:var(--card)} .qbtn.primary{background:var(--accent);color:#fff;border-color:transparent} .qbtn.primary:hover{background:var(--accent-dark)} .qbtn.hint{color:var(--accent-deep)} .qbtn:hover{border-color:var(--accent)} .qbtn:disabled{opacity:.45;cursor:default} .qnav{margin-left:auto;display:flex;gap:.4rem;align-items:center} .qnav .nb{background:var(--card);border:1px solid var(--glass-bd);border-radius:999px;padding:.45rem .9rem;cursor:pointer;font-weight:600;color:var(--accent-dark);font-size:.84rem} .qnav .nb:disabled{opacity:.4;cursor:default} .reveal-stack{display:flex;flex-direction:column;gap:.55rem;margin-top:.9rem} .reveal-block{padding:.7rem .9rem;border-radius:11px;font-family:'Lora';font-size:.96rem;line-height:1.55;border:1px solid} .reveal-block .rl{font-family:'Inter';font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.85;margin-bottom:.25rem;display:block} .reveal-block.hint{background:var(--warn-soft);border-color:var(--warn-bd);color:#7a3d08} .reveal-block.why{background:var(--ok-soft);border-color:var(--ok-bd);color:#0e5c3c} .reveal-block.deeper{background:var(--reflect-soft);border-color:var(--reflect-bd);color:#3c2870} .takeaway{padding:1.2rem 1.4rem} .takeaway h3{font-family:'Outfit';margin-bottom:.5rem} .takeaway ul{margin-left:1.1rem} .takeaway li{margin-bottom:.32rem;color:var(--muted)} .note{font-size:.84rem;color:var(--soft);font-style:italic;margin-top:.7rem} .related{display:flex;gap:.55rem;flex-wrap:wrap} .rel{font-size:.84rem;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--glass-bd);border-radius:999px;padding:.42rem .85rem;text-decoration:none} .rel:hover{border-color:var(--accent);color:var(--accent-dark)} .copyr b{color:var(--muted)} footer:not(.sh-foot){margin-top:1.6rem;padding:1.4rem 0 4rem;text-align:center;color:var(--soft);font-size:.8rem} .lab{padding:1.2rem 1.3rem;margin-bottom:1rem} .lab h3{font-family:'Outfit';font-size:1.1rem;margin-bottom:.35rem} .lab .labsub{font-size:.88rem;color:var(--soft);margin-bottom:.7rem} .labgrid{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start} .labviz{flex:1 1 260px;min-width:0} .labviz svg{width:100%;height:auto;display:block;background:var(--bg-warm);border:1px solid var(--line);border-radius:12px} .labside{flex:1 1 220px;min-width:0} .meter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem} .mcell{flex:1 1 84px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem;text-align:center} .mcell .ml{font-family:'JetBrains Mono';font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)} .mcell .mv{font-family:'JetBrains Mono';font-size:1.15rem;font-weight:600;color:var(--accent-deep)} .formula{font-family:'JetBrains Mono';font-size:.85rem;background:var(--ch-mist);border:1px solid var(--ch-soft);border-radius:10px;padding:.55rem .75rem;color:var(--accent-deep);text-align:center;line-height:1.7} .formula b{color:var(--ink)} .slrow{margin:.5rem 0} .slrow label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:.25rem;font-weight:600} .slrow label b{font-family:'JetBrains Mono';color:var(--accent-deep)} .slrow input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;background:linear-gradient(var(--accent),var(--accent)) no-repeat,var(--line);background-size:var(--fill,50%) 100%;outline:none;cursor:pointer} .slrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:grab;box-shadow:0 2px 8px rgba(120,72,20,.28)} .slrow input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:grab} .ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.4rem} .ladstep{background:var(--bg-warm);border:1px solid var(--line);border-radius:10px;padding:.55rem;text-align:center;font-size:.82rem;font-weight:600;color:var(--muted)} .ladstep .lk{display:block;color:var(--ok);font-weight:800;font-size:.95rem} /* [2026-08-18] CTA ANCHORED TO THE RAIL, NOT THE VIEWPORT. right:16px pinned this to the window edge, so on a wide screen it floated far outside the 1200 rail. The reference (design/colour/colour-building-a-palette.html) anchors its fixed CTA at right:var(--sh-edge), and shell.css:286 defines --sh-edge as max(gutter,(100vw - rail)/2) - literally the rail edge. Same anchor here, so the button rides the rail at every width. */ /* [2026-08-18] THE CTA, TAKEN AS IS FROM THE GOLD: design/colour/colour-building-a-palette.html lines 347-356 + 666-668 + the dock script. Pawan: "cta has a lot of functional components in shared article as usual you never cared to read what Gold is and implement it as is" - correct; the earlier edit here changed one property and shipped. What our pages had was the PRE-FIX pill, and the gold's own comment describes our exact bug: "The pill was position:fixed right:16px - pinned to the WINDOW, so on desktop it floated ~200px outside the content column, aligned to nothing, and it never left." The gold fixed that on 2026-08-11 and the fix never travelled. Four behaviours, all of them load-bearing: (1) --sh-edge - rides the shared page edge, never the window edge (2) drag - pointer events, mouse and touch alike, stays inside the window (3) close - hover cross; always visible on touch, where the pill is most in the way (4) self-retire- IntersectionObserver on its own target; once the reader is there, it leaves Drop any one and it is not this component any more. */ .playfab-dock{position:fixed;right:var(--sh-edge,16px);bottom:16px;z-index:200;touch-action:none} .playfab-dock.is-gone{display:none} .playfab{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent);color:#fff;font-weight:800;border-radius:999px;padding:.66rem 1.05rem;text-decoration:none;box-shadow:var(--glow,0 12px 28px -8px rgba(234,122,39,.6));font-size:.86rem;cursor:grab;user-select:none} .playfab-dock.is-dragging .playfab{cursor:grabbing} .playfab-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line,var(--border));background:#fff;color:var(--muted);font:700 .82rem/1 'Inter',system-ui,sans-serif;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .18s ease;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)} .playfab-dock:hover .playfab-x,.playfab-x:focus-visible{opacity:1} /* touch has no hover - without this the close button would not exist on the phone, where the pill is most in the way */ @media(hover:none){.playfab-x{opacity:1}} .playfab:hover{background:var(--accent-dark)} .hero .subtitle{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.01em;color:var(--accent-deep);margin:.4rem 0 .1rem;line-height:1.55} .lo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .lo-grid h3{font-family:'Outfit';font-size:1.2rem;margin-bottom:.5rem;letter-spacing:-.01em} .examrow{display:flex;gap:.45rem;flex-wrap:wrap;margin:.3rem 0 .2rem} .examchip{font-size:.76rem;font-weight:600;color:var(--accent-deep);background:var(--ch-mist);border:1px solid var(--ch-soft);border-radius:999px;padding:.32rem .7rem} .projgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} .proj{padding:1.05rem 1.2rem;display:flex;flex-direction:column;gap:.35rem} .proj-top{display:flex;align-items:center;justify-content:space-between} .proj-ico{font-size:1.6rem;line-height:1} .lvl{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);background:var(--ch-mist);border:1px solid var(--ch-soft);border-radius:999px;padding:.2rem .6rem} .proj h3{font-family:'Outfit';font-size:1.08rem;margin-top:.05rem} .proj .shows{font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)} .proj p{font-size:.9rem;color:var(--muted);margin:0} .proj p b{color:var(--ink)} .ohm-calc{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden} .oc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem .8rem;flex-wrap:wrap;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--bg-warm)} .oc-head h3{font-family:'Outfit';font-size:1rem;margin:0;color:var(--ink)} .oc-read{display:flex;gap:.45rem;flex-wrap:wrap} .oc-cell{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.32rem .6rem;text-align:center;min-width:62px} .oc-cell .k{font-family:'JetBrains Mono';font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);display:block} .oc-cell .v{font-family:'JetBrains Mono';font-size:1rem;font-weight:600;color:var(--accent-deep)} .oc-cell.solve{background:var(--accent);border-color:var(--accent)} .oc-cell.solve .k,.oc-cell.solve .v{color:#fff} .oc-body{display:grid;grid-template-columns:232px minmax(0,1fr);gap:1rem;padding:1rem;align-items:start} .oc-stage{order:-1} .oc-ctrl{display:flex;flex-direction:column;gap:.7rem} .oc-lab{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)} .oc-seg{display:flex;background:var(--bg-warm);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px} .oc-seg button{flex:1;border:none;background:transparent;color:var(--muted);font-family:'JetBrains Mono';font-size:.78rem;font-weight:600;padding:.5rem .2rem;border-radius:7px;cursor:pointer;transition:.15s} .oc-seg button:hover{color:var(--accent-dark)} .oc-seg button[aria-pressed="true"]{background:var(--accent);color:#fff} .oc-field label{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.2rem} .oc-field label span{font-family:'JetBrains Mono';color:var(--soft);font-weight:500} .oc-field input{width:100%;padding:.5rem .65rem;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.95rem;background:var(--card);color:var(--ink)} .oc-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(234,122,39,.15)} .oc-tabs{flex:none} .oc-tabs button{font-size:.74rem;padding:.42rem 2px} .oc-screen{height:clamp(220px,46vh,360px);background:linear-gradient(135deg,#fbf7ef,#f1ece1);border:1px solid var(--line);border-radius:12px;overflow:hidden} .oc-screen svg{width:100%;height:100%;display:block} .oc-formula{font-family:'JetBrains Mono';font-size:.82rem;background:var(--ch-mist);border:1px solid var(--ch-soft);border-radius:10px;padding:.5rem .7rem;color:var(--accent-deep);text-align:center;line-height:1.6} .oc-formula b{color:var(--ink)} .oc-flow{stroke-dasharray:5 8;animation:ocflow var(--flowdur,1s) linear infinite} .calc-says{display:flex;gap:.7rem;align-items:flex-start;background:var(--ch-mist);border-top:1px solid var(--ch-soft);padding:.7rem 1rem;border-radius:0 0 16px 16px} .calc-says p{font-family:'Lora',serif;font-size:.95rem;color:var(--ink);line-height:1.5;margin:0;flex:1} .calc-says .listen{flex:none;border:1px solid var(--line);background:var(--card);color:var(--accent-deep);border-radius:999px;font-size:.7rem;font-weight:700;padding:.32rem .7rem;cursor:pointer;white-space:nowrap} .calc-says .listen:hover{border-color:var(--accent)} .calc-says .listen[data-on="1"]{background:var(--accent);color:#fff;border-color:transparent} .subnav{background:var(--bg-warm,#faf5ea);border-bottom:1px solid var(--border-soft,#f0ebe0)} /* [2026-08-18] Pawan: "i never have browse sequence center aligned or cta button beyond rail see CTA button: design/colour/colour-building-a-palette.html". Three rules below carry that. */ /* THE BREADCRUMB BAR. Was centred on a 1000px rail: the crumb neither started at the body's left edge nor shared its width. A browse sequence is never centred - it starts where the first line of the page starts. Left-aligned, standard 1200 rail, same gutter ramp as .wrap so the bar and the body under it cannot drift apart. */ .subnav-in{max-width:1200px;margin:0 auto;padding-block:.5rem;padding-inline:1.5rem;display:flex;justify-content:flex-start;align-items:center;gap:.6rem;flex-wrap:wrap} @media(min-width:640px){.subnav-in{padding-inline:2.5rem}} @media(min-width:1024px){.subnav-in{padding-inline:5.5rem}} @media(min-width:1440px){.subnav-in{padding-inline:7rem}} .subnav a{font:700 .82rem 'Inter',sans-serif;color:var(--muted,#404040);text-decoration:none;padding:.3rem .6rem;border-radius:8px} .subnav a:hover{color:var(--accent-dark,#b8500f);background:var(--ch-mist,#fdf8f1)} .subnav .sub-crumb{font:600 .8rem 'Inter',sans-serif;color:var(--soft,#737373)} /* [2026-08-10] Two rules were removed from this extracted sheet on the day it was written: .wrap{max-width:1000px;...} and .copyr{...}. Both came out of the six hand-built articles, and both are container decisions. HOW_WE_BUILD 3.7: the shell owns the single container width, and a page that ships its own .wrap gives the site a second left edge. Pawan found exactly that: "across entire page there is no left slide alignment between header, main body and everything" - five different left edges on one page, and this sheet was one cause. Removed here so no future article inherits it. */ /* ═══════════════════════════════════════════════════════════════════════════════════════════════ [2026-08-11] THE CONTAINER, taken from design/reference/gold_component_master.html. Pawan: "is left right margin of this refrence page better". Measured, and it was: reference container 1000px · gutter clamp(1rem,4vw,2.2rem) · prose 62ch · left 168 at 1280 our pages container 1180px · gutter fixed 1.2rem · prose 70ch · left 79 at 1280 Ours hugged the edge, and a fixed gutter stays put while the reference's grows with the window — so the wider the monitor, the worse ours looked. The reference numbers are used as they are. This lives in the shared sheet so all six articles inherit one decision instead of six. Also here because every article had them wrong the same way: · no rule under a section heading — it ran under part of the heading and stopped mid-word. Adobe and Milo separate sections with space and weight, not a line. · inline shapes get one size, a transparent frame, aspect ratio kept, overflow clipped so motion stays in frame (EXPRESSIVE_SHAPES.md §4). ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* [2026-08-18] Pawan: "any reason we are not following all gold best practices in layout, header-footer, alignment, margins, typography, like .../acrobat/index.html" - no good one. This .wrap was 1000px + clamp(1rem,4vw,2.2rem), lifted 2026-08-11 from gold_component_master's READING width and applied to the OUTER container. REFERENCE_PAGES.md:93 is the authority: 1200px + 1.5 -> 2.5(640) -> 5.5(1024) -> 7rem(1440), for header, body AND footer, and career/prompt_studio/tools/acrobat/index.html does exactly that. At 1000 the body hung off a different left edge than the shell's injected header and footer - the second-left-edge bug the 2026-08-10 comment above was written to prevent. The 62ch prose cap below STAYS: that is the reading column INSIDE the rail (Type B), which the standard permits. Put 1000 back on .wrap and the site has two left edges again. */ .wrap{max-width:1200px;margin:0 auto;padding-inline:1.5rem} @media(min-width:640px){.wrap{padding-inline:2.5rem}} @media(min-width:1024px){.wrap{padding-inline:5.5rem}} @media(min-width:1440px){.wrap{padding-inline:7rem}} .prose p,.rd,.lede,.sec-lede{max-width:62ch} .sec-head{border-bottom:0;padding-bottom:0} .sec-head h2{border-bottom:0;padding-bottom:0;box-shadow:none} .sec-head h2::after{display:none} /* [2026-08-18] Pawan: "why do i have this stupid alignment not following my own article standards ideally shouldnt it be left aligned". .hero-top is a HUB class (subject-hub.css: max-width 780, margin auto, text-align center) - correct for a hub, wrong for an article, where the first line has to start where every following line starts (HOW_WE_BUILD 3.0.2, gold_component_master.html .hero/h1/.lede - none centred). This exact fix existed once, inline, on the first article built from this template - lost when a later rebuild restored from a pre-fix backup. Promoted here so every article on this sheet gets it, permanently, instead of losing it again per-file. */ .hero-top{max-width:none;margin:0;text-align:left} .hero h1,.hero .hero-sub,.hero .by{margin-left:0;margin-right:0;text-align:left} .hero .hero-sub{max-width:70ch} /* [2026-08-18] Pawan: "where are expresisve shapes the heart of llos". One per-card shape slot, following gold_component_master.html's .secrow pattern (shape beside heading) at unit scale. Each shape is picked per unit meaning via tools/shape_match.py vector match, >=5-star verified in data/ratings.db, page-unique (scarcest-first greedy), and namespaced per unit (r1_/j1_ etc. prefix on every class/id/keyframe) so 24 animated SVGs on one page never collide. */ .c-name{display:flex;align-items:center;gap:.6rem} .c-name .ushape{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:9px;padding:4px;overflow:hidden} .c-name .ushape svg{width:100%;height:100%;display:block} @media(max-width:560px){.c-name .ushape{width:28px;height:28px}} /* [2026-08-18] Pawan: "buttons collide become 2 row which is general failure". subject-hub.css's .cont .c-foot is flex, no wrap, no gap - built for two items. This card now carries three (status badge, date, "see the full record" link), and on a narrow card they got crushed into one row with each one breaking mid-word ("failure / mode", "2026-07- / 15") instead of wrapping as a whole unit. Scoped here, not in the shared sheet - other .c-foot consumers still have two items and are unaffected. */ .c-foot{flex-wrap:wrap;row-gap:.35rem;column-gap:.6rem} .c-foot>*{white-space:nowrap} /* [2026-08-18] Pawan: "poll should be left aligned". .qopt/.popt are native