HungNguyen29/digit-recognition
0
1/* Active polished scrolling page */2:root {3 --ink: #171717;4 --muted: #62666f;5 --surface: rgba(255, 255, 255, 0.92);6 --line: rgba(23, 23, 23, 0.12);7 --teal: #0f766e;8 --coral: #e85d4f;9 --sun: #f0b429;10 --violet: #6d5bd0;11 --shadow: 0 24px 70px rgba(21, 21, 21, 0.14);12 --heading-font: "Outfit", sans-serif;13 --hand-font: "Caveat", "Segoe Print", cursive;14 --ui-font: "Inter", sans-serif;15}16 17* {18 box-sizing: border-box;19}20 21html {22 scroll-behavior: smooth;23}24 25body {26 align-items: stretch;27 background: #f7f1e5;28 color: var(--ink);29 display: block;30 font-family: var(--ui-font);31 line-height: 1.6;32 margin: 0;33 min-height: 100vh;34 overflow-x: hidden;35 padding: 0;36}37 38body::before {39 background-image: linear-gradient(rgba(247, 241, 229, 0.92), rgba(247, 241, 229, 0.96)), url('MNIST_background.jpg');40 background-position: center;41 background-size: cover;42 content: "";43 inset: 0;44 pointer-events: none;45 position: fixed;46 z-index: -2;47}48 49.site-nav {50 align-items: center;51 backdrop-filter: blur(18px);52 background: rgba(255, 250, 240, 0.84);53 border-bottom: 1px solid var(--line);54 display: flex;55 gap: 24px;56 justify-content: space-between;57 left: 0;58 padding: 16px clamp(18px, 4vw, 56px);59 position: sticky;60 right: 0;61 top: 0;62 z-index: 20;63}64 65.brand {66 color: var(--ink);67 font-family: var(--heading-font);68 font-size: clamp(22px, 3vw, 34px);69 font-weight: 700;70 text-decoration: none;71}72 73.site-nav nav {74 display: flex;75 flex-wrap: wrap;76 gap: 8px;77 justify-content: flex-end;78}79 80.site-nav nav a,81.primary-link,82button {83 border-radius: 999px;84 text-decoration: none;85 transition: background 0.2s, color 0.2s;86}87 88.site-nav nav a {89 color: var(--muted);90 font-size: 14px;91 font-weight: 700;92 padding: 8px 12px;93 transition: background 180ms ease, color 180ms ease, transform 180ms ease;94}95 96.site-nav nav a:hover {97 background: rgba(15, 118, 110, 0.1);98 color: var(--teal);99 transform: translateY(-1px);100}101 102main {103 margin: 0 auto;104 width: 100%;105}106 107.hero-section,108.section {109 padding: clamp(72px, 9vw, 118px) clamp(18px, 5vw, 72px);110}111 112.hero-section {113 align-items: center;114 display: grid;115 gap: clamp(32px, 6vw, 84px);116 grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);117 min-height: calc(100vh - 72px);118}119 120.hero-copy,121.section-heading,122.architecture-map,123.logic-grid,124.container {125 margin-left: auto;126 margin-right: auto;127 max-width: 1120px;128}129 130.eyebrow,131.panel-label {132 color: var(--teal);133 font-size: 12px;134 font-weight: 800;135 letter-spacing: 0.08em;136 margin: 0 0 10px;137 text-transform: uppercase;138}139 140.hero-copy h1,141.section-heading h2,142.title h1 {143 color: var(--ink);144 font-family: var(--heading-font);145 font-weight: 800;146 line-height: 1.08;147 margin: 0;148}149 150.hero-copy h1 {151 font-size: clamp(48px, 9vw, 108px);152 font-family: var(--hand-font);153 font-weight: 500;154 max-width: 820px;155}156 157.hero-copy .eyebrow {158 font-family: var(--hand-font);159 font-size: 24px;160 font-weight: 700;161 text-transform: none;162 letter-spacing: normal;163}164 165 166.hero-copy p {167 color: #3f4249;168 font-size: clamp(17px, 2vw, 21px);169 max-width: 710px;170}171 172.primary-link {173 background: var(--ink);174 box-shadow: 0 14px 30px rgba(23, 23, 23, 0.2);175 color: #fffaf0;176 display: inline-flex;177 font-weight: 800;178 margin-top: 16px;179 padding: 13px 20px;180 transition: transform 180ms ease, box-shadow 180ms ease;181}182 183.primary-link:hover {184 box-shadow: 0 18px 40px rgba(23, 23, 23, 0.26);185 transform: translateY(-2px);186}187 188.hero-visual {189 display: grid;190 min-height: 430px;191 place-items: center;192}193 194.digit-sheet {195 aspect-ratio: 1;196 background: linear-gradient(90deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px), linear-gradient(rgba(23, 23, 23, 0.08) 1px, transparent 1px), rgba(255, 255, 255, 0.82);197 background-size: 25% 25%;198 border: 1px solid rgba(23, 23, 23, 0.14);199 border-radius: 8px;200 box-shadow: var(--shadow);201 display: grid;202 grid-template-columns: repeat(4, 1fr);203 max-width: 430px;204 overflow: hidden;205 rotate: -2deg;206 width: min(100%, 430px);207}208 209.digit-sheet span {210 align-items: center;211 border-bottom: 1px solid rgba(23, 23, 23, 0.08);212 border-right: 1px solid rgba(23, 23, 23, 0.08);213 color: #151515;214 display: flex;215 font-family: var(--hand-font);216 font-size: clamp(42px, 7vw, 78px);217 font-weight: 900;218 justify-content: center;219 min-height: 104px;220}221 222.digit-sheet span:nth-child(4n) {223 border-right: 0;224}225 226.section {227 border-top: 1px solid rgba(23, 23, 23, 0.08);228}229 230.section-heading {231 margin-bottom: 36px;232 text-align: center;233}234 235.section-heading h2 {236 font-size: clamp(38px, 6vw, 72px);237}238 239.section-heading p {240 color: var(--muted);241 font-size: 17px;242 margin: 14px auto 0;243 max-width: 760px;244}245 246.hero-copy h1,247.section-heading h2,248.title h1 {249 font-style: italic;250 letter-spacing: 0;251 text-shadow: 0 2px 0 rgba(232, 93, 79, 0.12);252}253 254.section-heading h2 {255 position: relative;256}257 258.section-heading h2::after {259 background: linear-gradient(90deg, transparent, var(--coral), var(--sun), transparent);260 border-radius: 999px;261 bottom: -10px;262 content: "";263 height: 5px;264 left: 50%;265 position: absolute;266 transform: translateX(-50%) rotate(-1deg);267 width: min(420px, 72%);268}269 270.cnn-simulation {271 align-items: center;272 display: grid;273 gap: 16px;274 grid-template-columns: minmax(160px, 1fr) 58px minmax(190px, 1.2fr) 58px minmax(160px, 1fr) 58px minmax(180px, 1.1fr);275 margin: 42px auto 0;276 max-width: 1180px;277}278 279.cnn-stage {280 background: rgba(255, 255, 255, 0.94);281 border: 1px solid var(--line);282 border-radius: 8px;283 box-shadow: 0 22px 58px rgba(21, 21, 21, 0.12);284 min-height: 310px;285 overflow: hidden;286 padding: 18px;287 position: relative;288}289 290.cnn-stage::before {291 background: linear-gradient(90deg, currentColor, transparent);292 content: "";293 height: 6px;294 inset: 0 0 auto;295 position: absolute;296}297 298.input-stage {299 color: var(--teal);300}301 302.conv-stage {303 color: var(--coral);304}305 306.pool-stage {307 color: var(--sun);308}309 310.dense-stage {311 color: var(--violet);312}313 314.stage-kicker {315 color: currentColor;316 font-size: 12px;317 font-weight: 900;318 letter-spacing: 0.08em;319 margin: 6px 0 14px;320 text-transform: uppercase;321}322 323.cnn-stage strong {324 color: var(--ink);325 display: block;326 font-size: 22px;327 line-height: 1.2;328 margin-top: 16px;329}330 331.cnn-stage small {332 color: var(--muted);333 display: block;334 font-size: 14px;335 line-height: 1.45;336 margin-top: 6px;337}338 339.mnist-matrix {340 background: #fff;341 border: 1px solid rgba(23, 23, 23, 0.2);342 border-radius: 8px;343 display: grid;344 gap: 3px;345 grid-template-columns: repeat(6, 1fr);346 margin: 10px auto 0;347 max-width: 170px;348 padding: 10px;349}350 351.mnist-matrix span {352 aspect-ratio: 1;353 background: #f0eee7;354 border-radius: 3px;355}356 357.mnist-matrix span.on {358 background: #171717;359 box-shadow: 0 0 14px rgba(23, 23, 23, 0.2);360}361 362.mnist-matrix span.soft {363 opacity: 0.48;364}365 366.kernel-demo {367 align-items: center;368 display: grid;369 gap: 12px;370 grid-template-columns: 1fr 86px;371 margin-top: 2px;372}373 374.scan-window {375 aspect-ratio: 1;376 background:377 linear-gradient(90deg, rgba(23, 23, 23, 0.12) 1px, transparent 1px),378 linear-gradient(rgba(23, 23, 23, 0.12) 1px, transparent 1px),379 radial-gradient(circle at 44% 36%, #171717 0 7px, transparent 8px),380 radial-gradient(circle at 57% 52%, #171717 0 9px, transparent 10px),381 radial-gradient(circle at 42% 66%, #171717 0 7px, transparent 8px),382 #fff;383 background-size: 33.3% 33.3%, 33.3% 33.3%, auto, auto, auto, auto;384 border: 2px solid var(--coral);385 border-radius: 8px;386 box-shadow: inset 0 0 0 16px rgba(232, 93, 79, 0.08);387 min-width: 104px;388 position: relative;389}390 391.scan-window::after {392 animation: scanKernel 2.8s ease-in-out infinite;393 border: 3px solid var(--coral);394 border-radius: 6px;395 content: "";396 height: 36%;397 left: 12%;398 position: absolute;399 top: 12%;400 width: 36%;401}402 403.kernel-grid {404 background: #fff;405 border: 1px solid rgba(23, 23, 23, 0.16);406 border-radius: 8px;407 display: grid;408 grid-template-columns: repeat(3, 1fr);409 overflow: hidden;410}411 412.kernel-grid span {413 align-items: center;414 border-bottom: 1px solid rgba(23, 23, 23, 0.1);415 border-right: 1px solid rgba(23, 23, 23, 0.1);416 color: var(--ink);417 display: flex;418 font-size: 12px;419 font-weight: 800;420 height: 28px;421 justify-content: center;422}423 424.kernel-grid span:nth-child(3n) {425 border-right: 0;426}427 428.feature-stack,429.pool-stack {430 height: 82px;431 margin: 18px 0 0 12px;432 position: relative;433}434 435.feature-stack i,436.pool-stack i {437 background:438 radial-gradient(circle at 32% 38%, rgba(23, 23, 23, 0.9) 0 8px, transparent 9px),439 radial-gradient(circle at 64% 62%, rgba(23, 23, 23, 0.68) 0 10px, transparent 11px),440 linear-gradient(135deg, rgba(232, 93, 79, 0.18), rgba(255, 255, 255, 0.96));441 border: 1px solid rgba(23, 23, 23, 0.14);442 border-radius: 7px;443 height: 72px;444 left: calc(var(--i, 0) * 18px);445 position: absolute;446 top: calc(var(--i, 0) * 5px);447 width: 92px;448}449 450.feature-stack i:nth-child(1),451.pool-stack i:nth-child(1) {452 --i: 0;453}454 455.feature-stack i:nth-child(2),456.pool-stack i:nth-child(2) {457 --i: 1;458}459 460.feature-stack i:nth-child(3),461.pool-stack i:nth-child(3) {462 --i: 2;463}464 465.pool-stack i {466 background:467 linear-gradient(90deg, rgba(240, 180, 41, 0.42) 0 50%, transparent 50%),468 linear-gradient(rgba(23, 23, 23, 0.14) 1px, transparent 1px),469 linear-gradient(90deg, rgba(23, 23, 23, 0.14) 1px, transparent 1px),470 #fff;471 background-size: auto, 50% 50%, 50% 50%, auto;472 height: 66px;473 width: 86px;474}475 476.neural-head {477 align-items: center;478 display: grid;479 gap: 16px;480 grid-template-columns: 52px 1fr;481 min-height: 150px;482}483 484.vector-dots {485 display: grid;486 gap: 8px;487}488 489.vector-dots i {490 aspect-ratio: 1;491 background: var(--violet);492 border-radius: 50%;493 box-shadow: 36px 0 0 rgba(109, 91, 208, 0.22);494 display: block;495 width: 12px;496}497 498.softmax-bars {499 align-items: end;500 background: #fff;501 border: 1px solid rgba(23, 23, 23, 0.14);502 border-radius: 8px;503 display: grid;504 gap: 5px;505 grid-template-columns: repeat(10, 1fr);506 height: 136px;507 padding: 12px;508}509 510.softmax-bars b {511 background: linear-gradient(180deg, var(--violet), var(--teal));512 border-radius: 999px 999px 3px 3px;513 display: block;514 min-height: 8px;515}516 517.cnn-connector {518 align-items: center;519 display: flex;520 justify-content: center;521 min-height: 70px;522 position: relative;523}524 525.cnn-connector::before {526 background: rgba(23, 23, 23, 0.18);527 content: "";528 height: 2px;529 left: 0;530 position: absolute;531 right: 0;532 top: 50%;533}534 535.cnn-connector::after {536 border-bottom: 8px solid transparent;537 border-left: 11px solid rgba(23, 23, 23, 0.28);538 border-top: 8px solid transparent;539 content: "";540 position: absolute;541 right: 0;542 top: calc(50% - 7px);543}544 545.cnn-connector span {546 background: #f7f1e5;547 border: 1px solid rgba(23, 23, 23, 0.1);548 border-radius: 999px;549 color: var(--muted);550 font-size: 11px;551 font-weight: 900;552 padding: 5px 8px;553 position: relative;554 text-transform: uppercase;555 z-index: 1;556}557 558.architecture-map {559 display: none;560}561 562@keyframes scanKernel {563 564 0%,565 100% {566 left: 10%;567 top: 10%;568 }569 570 35% {571 left: 52%;572 top: 22%;573 }574 575 70% {576 left: 30%;577 top: 52%;578 }579}580 581.architecture-map {582 align-items: stretch;583 display: grid;584 gap: 14px;585 grid-template-columns: minmax(180px, 1fr) 34px minmax(180px, 1fr) 34px minmax(180px, 1fr) 34px minmax(180px, 1fr);586 margin-top: 24px;587}588 589.layer-card,590.logic-item,591.title,592#result {593 background: var(--surface);594 border: 1px solid var(--line);595 border-radius: 8px;596 box-shadow: 0 18px 52px rgba(21, 21, 21, 0.1);597}598 599.layer-card {600 min-height: 240px;601 overflow: hidden;602 padding: 24px;603 position: relative;604}605 606.layer-card::after {607 background: currentColor;608 bottom: 0;609 content: "";610 height: 8px;611 left: 0;612 position: absolute;613 right: 0;614}615 616.input-layer {617 color: var(--teal);618}619 620.conv-layer {621 color: var(--coral);622}623 624.pool-layer {625 color: var(--sun);626}627 628.dense-layer {629 color: var(--violet);630}631 632.layer-card strong {633 color: var(--ink);634 display: block;635 font-size: 24px;636 margin-top: 46px;637}638 639.layer-card small {640 color: currentColor;641 display: block;642 font-weight: 800;643 margin-top: 4px;644}645 646.layer-card p {647 color: var(--muted);648 margin: 16px 0 0;649}650 651.layer-index {652 color: rgba(23, 23, 23, 0.12);653 font-family: var(--heading-font);654 font-size: 62px;655 font-weight: 900;656 left: 18px;657 line-height: 1;658 position: absolute;659 top: 14px;660}661 662.flow-arrow {663 align-self: center;664 background: var(--line);665 height: 2px;666 position: relative;667}668 669.flow-arrow::after {670 border-bottom: 7px solid transparent;671 border-left: 9px solid rgba(23, 23, 23, 0.28);672 border-top: 7px solid transparent;673 content: "";674 position: absolute;675 right: -1px;676 top: -6px;677}678 679.logic-grid {680 display: grid;681 gap: 18px;682 grid-template-columns: repeat(4, minmax(0, 1fr));683}684 685.logic-item {686 padding: 22px;687 transition: transform 180ms ease, box-shadow 180ms ease;688}689 690.logic-item:hover {691 box-shadow: 0 22px 58px rgba(21, 21, 21, 0.14);692 transform: translateY(-4px);693}694 695.logic-item h3 {696 font-family: var(--heading-font);697 font-size: 28px;698 line-height: 1.15;699 margin: 18px 0 10px;700}701 702.logic-item p {703 color: var(--muted);704 margin: 0;705}706 707.mini-visual {708 border: 1px solid var(--line);709 border-radius: 8px;710 height: 116px;711 overflow: hidden;712}713 714.pixels {715 background: linear-gradient(90deg, transparent 19%, rgba(23, 23, 23, .12) 20%, transparent 21%), linear-gradient(transparent 19%, rgba(23, 23, 23, .12) 20%, transparent 21%), radial-gradient(circle at 48% 46%, #171717 0 7px, transparent 8px), radial-gradient(circle at 56% 58%, #171717 0 8px, transparent 9px), #fff;716 background-size: 20% 20%, 20% 20%, auto, auto, auto;717}718 719.kernels {720 background: conic-gradient(from 45deg, #171717 0 25%, #fff 0 50%, #171717 0 75%, #fff 0), linear-gradient(135deg, rgba(232, 93, 79, .22), rgba(15, 118, 110, .18));721 background-size: 38px 38px, auto;722}723 724.pooling {725 background: linear-gradient(90deg, rgba(240, 180, 41, .55) 0 34%, transparent 34% 66%, rgba(240, 180, 41, .55) 66%), linear-gradient(rgba(23, 23, 23, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 23, 23, .13) 1px, transparent 1px), #fff;726 background-size: auto, 25% 25%, 25% 25%, auto;727}728 729.softmax {730 background: linear-gradient(90deg, var(--teal) 0 18%, transparent 18%), linear-gradient(90deg, var(--coral) 0 42%, transparent 42%), linear-gradient(90deg, var(--violet) 0 76%, transparent 76%), linear-gradient(90deg, var(--sun) 0 58%, transparent 58%), #fff;731 background-position: 18px 22px, 18px 44px, 18px 66px, 18px 88px, 0 0;732 background-repeat: no-repeat;733 background-size: calc(100% - 36px) 12px, calc(100% - 36px) 12px, calc(100% - 36px) 12px, calc(100% - 36px) 12px, auto;734}735 736.predictor-section {737 padding-bottom: clamp(70px, 10vw, 130px);738}739 740.container {741 align-items: stretch;742 background: transparent;743 box-shadow: none;744 display: grid !important;745 gap: 22px;746 grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);747 justify-content: stretch;748 max-width: 1040px;749 padding: 0;750 text-align: left;751 transform: none;752 transition: none;753 width: min(100%, 1040px);754}755 756.container:hover {757 transform: none;758}759 760.title,761#result {762 padding: clamp(22px, 3vw, 32px);763}764 765.title {766 display: flex;767 flex-direction: column;768 height: auto;769}770 771.title h1 {772 font-size: clamp(34px, 4vw, 52px);773 margin-bottom: 2px;774}775 776.title h3 {777 color: var(--muted);778 font-size: 14px;779 font-weight: 700;780 margin: 0 0 18px;781}782 783canvas.paint {784 aspect-ratio: 1;785 background: linear-gradient(90deg, rgba(23, 23, 23, 0.06) 1px, transparent 1px), linear-gradient(rgba(23, 23, 23, 0.06) 1px, transparent 1px), #fff;786 background-size: 28px 28px;787 border: 2px solid rgba(23, 23, 23, 0.78);788 border-radius: 8px;789 box-shadow: inset 0 0 0 8px rgba(247, 241, 229, 0.78);790 cursor: crosshair;791 margin: 12px auto 18px;792 max-width: 360px;793 touch-action: none;794 width: 100%;795}796 797.upload-panel,798.controls {799 align-items: center;800 display: flex;801 flex-wrap: wrap;802 gap: 10px;803 justify-content: center;804 margin: 0;805}806 807.upload-panel {808 margin-bottom: 12px;809 min-height: 42px;810}811 812#uploadStatus {813 color: var(--muted);814 font-size: 13px;815 line-height: 1.35;816 max-width: 190px;817}818 819button {820 background: var(--ink);821 border: 0;822 color: #fffaf0;823 cursor: pointer;824 font-size: 15px;825 font-weight: 800;826 margin: 0;827 padding: 12px 18px;828 transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;829}830 831button:hover {832 background: var(--teal);833 box-shadow: 0 12px 26px rgba(15, 118, 110, 0.24);834 color: #fffaf0;835 transform: translateY(-2px);836}837 838#eraseBtn {839 background: #fff;840 border: 1px solid var(--line);841 color: var(--ink);842}843 844#result {845 display: grid;846 grid-template-rows: auto auto 1fr;847 min-width: 0;848 padding-left: clamp(22px, 3vw, 32px);849 padding-right: clamp(22px, 3vw, 32px);850}851 852.predict {853 margin: 0;854}855 856#result h3.predict {857 color: var(--teal);858 font-size: 12px;859 font-weight: 800;860 letter-spacing: 0.08em;861 text-transform: uppercase;862}863 864#predictedDigit {865 color: var(--ink);866 font-family: var(--heading-font);867 font-size: clamp(32px, 5vw, 62px);868 font-weight: 900;869 line-height: 1;870 margin: 8px 0 28px;871}872 873#probChart {874 background: #fff;875 border: 1px solid var(--line);876 border-radius: 8px;877 margin: 14px 0 0;878 max-height: 340px;879 padding: 14px;880}881 882.prob-fallback {883 background: #fff;884 border: 1px solid var(--line);885 border-radius: 8px;886 display: grid;887 gap: 9px;888 margin-top: 14px;889 padding: 16px;890}891 892.prob-row {893 align-items: center;894 display: grid;895 gap: 10px;896 grid-template-columns: 22px minmax(0, 1fr) 54px;897}898 899.prob-row span,900.prob-row strong {901 color: var(--ink);902 font-size: 13px;903 font-weight: 800;904}905 906.prob-row strong {907 text-align: right;908}909 910.prob-track {911 background: rgba(23, 23, 23, 0.08);912 border-radius: 999px;913 height: 10px;914 overflow: hidden;915}916 917.prob-track i {918 background: linear-gradient(90deg, var(--teal), var(--coral), var(--sun));919 border-radius: inherit;920 display: block;921 height: 100%;922 transition: width 260ms ease;923}924 925.architecture-section .architecture-map {926 display: none;927}928 929.reveal {930 opacity: 0;931 transform: translateY(26px);932 transition: opacity 600ms ease, transform 600ms ease;933}934 935.reveal.is-visible {936 opacity: 1;937 transform: translateY(0);938}939 940@media (max-width: 980px) {941 942 .hero-section,943 .container,944 .logic-grid {945 grid-template-columns: 1fr;946 }947 948 .cnn-simulation {949 grid-template-columns: 1fr;950 max-width: 520px;951 }952 953 .cnn-connector {954 min-height: 46px;955 }956 957 .cnn-connector::before {958 bottom: 0;959 height: auto;960 left: 50%;961 right: auto;962 top: 0;963 width: 2px;964 }965 966 .cnn-connector::after {967 border-left: 8px solid transparent;968 border-right: 8px solid transparent;969 border-top: 11px solid rgba(23, 23, 23, 0.28);970 bottom: 0;971 left: calc(50% - 7px);972 right: auto;973 top: auto;974 }975 976 .architecture-map {977 grid-template-columns: 1fr;978 }979 980 .flow-arrow {981 height: 28px;982 justify-self: center;983 width: 2px;984 }985 986 .flow-arrow::after {987 border-left: 7px solid transparent;988 border-right: 7px solid transparent;989 border-top: 9px solid rgba(23, 23, 23, 0.28);990 left: -6px;991 right: auto;992 top: 20px;993 }994 995 .hero-section {996 min-height: auto;997 padding-top: 54px;998 }999}1000 1001@media (max-width: 640px) {1002 .site-nav {1003 align-items: flex-start;1004 flex-direction: column;1005 gap: 8px;1006 }1007 1008 .site-nav nav {1009 justify-content: flex-start;1010 }1011 1012 .hero-section,1013 .section {1014 padding-left: 16px;1015 padding-right: 16px;1016 }1017 1018 .hero-visual {1019 min-height: 320px;1020 }1021 1022 .digit-sheet span {1023 min-height: 78px;1024 }1025 1026 .layer-card {1027 min-height: 210px;1028 }1029 1030 #predictedDigit {1031 font-size: 34px;1032 }1033}1034 1035 1036/* Reference-inspired interactive CNN visualizer */1037.architecture-section .cnn-simulation {1038 display: none;1039}1040 1041.cnn-visualizer {1042 display: grid;1043 gap: 24px;1044 grid-template-columns: minmax(520px, 1.35fr) minmax(300px, 0.65fr);1045 margin: 44px auto 0;1046 max-width: 1180px;1047}1048 1049.cnn-scene-panel,1050.cnn-inspector {1051 background: rgba(255, 255, 255, 0.92);1052 border: 1px solid var(--line);1053 border-radius: 8px;1054 box-shadow: 0 22px 62px rgba(21, 21, 21, 0.13);1055}1056 1057.cnn-scene-panel {1058 overflow: hidden;1059 padding: 22px;1060}1061 1062.cnn-scene {1063 background:1064 linear-gradient(90deg, rgba(23, 23, 23, 0.05) 1px, transparent 1px),1065 linear-gradient(rgba(23, 23, 23, 0.05) 1px, transparent 1px),1066 radial-gradient(circle at 30% 25%, rgba(15, 118, 110, 0.12), transparent 28%),1067 radial-gradient(circle at 76% 70%, rgba(232, 93, 79, 0.11), transparent 32%),1068 #fffaf0;1069 background-size: 34px 34px, 34px 34px, auto, auto, auto;1070 border: 1px solid rgba(23, 23, 23, 0.1);1071 border-radius: 8px;1072 height: 470px;1073 overflow: hidden;1074 perspective: 1200px;1075 position: relative;1076}1077 1078.cnn-scene::before {1079 background: linear-gradient(90deg, transparent, rgba(23, 23, 23, 0.2), transparent);1080 content: "";1081 height: 2px;1082 left: 9%;1083 position: absolute;1084 right: 9%;1085 top: 53%;1086}1087 1088.cnn-scene::after {1089 color: rgba(23, 23, 23, 0.32);1090 content: "pixel grid -> learned maps -> probabilities";1091 font-size: 12px;1092 font-weight: 800;1093 left: 28px;1094 letter-spacing: 0.08em;1095 position: absolute;1096 text-transform: uppercase;1097 top: 22px;1098}1099 1100.cnn-layer-plane {1101 color: var(--teal);1102 filter: saturate(0.8);1103 height: 190px;1104 opacity: 0.56;1105 position: absolute;1106 top: 145px;1107 transform-style: preserve-3d;1108 transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;1109 width: 138px;1110}1111 1112.cnn-layer-plane.is-focused {1113 filter: saturate(1.2);1114 opacity: 1;1115 transform: translateY(-16px) scale(1.04);1116 z-index: 5;1117}1118 1119.cnn-layer-plane.is-hidden {1120 opacity: 0.12;1121 pointer-events: none;1122}1123 1124.input-plane {1125 left: 4%;1126 color: var(--teal);1127}1128 1129.conv1-plane {1130 left: 22%;1131 color: var(--coral);1132}1133 1134.pool1-plane {1135 left: 40%;1136 color: var(--sun);1137}1138 1139.conv2-plane {1140 left: 56%;1141 color: #4f9f5f;1142}1143 1144.dense-plane {1145 left: 72%;1146 color: var(--violet);1147 width: 112px;1148}1149 1150.output-plane {1151 left: 86%;1152 color: var(--ink);1153 width: 86px;1154}1155 1156.plane-label {1157 background: rgba(255, 255, 255, 0.9);1158 border: 1px solid rgba(23, 23, 23, 0.1);1159 border-radius: 999px;1160 color: currentColor;1161 display: inline-flex;1162 font-size: 11px;1163 font-weight: 900;1164 left: 0;1165 padding: 5px 8px;1166 position: absolute;1167 text-transform: uppercase;1168 top: -38px;1169 white-space: nowrap;1170}1171 1172.plane-grid {1173 align-items: center;1174 aspect-ratio: 1;1175 background:1176 linear-gradient(90deg, rgba(23, 23, 23, 0.1) 1px, transparent 1px),1177 linear-gradient(rgba(23, 23, 23, 0.1) 1px, transparent 1px),1178 #fff;1179 background-size: 14.2% 14.2%;1180 border: 3px solid currentColor;1181 border-radius: 8px;1182 box-shadow: 16px 18px 0 rgba(23, 23, 23, 0.06);1183 display: flex;1184 justify-content: center;1185 transform: rotateY(-22deg) rotateX(8deg);1186}1187 1188.digit-nine::before {1189 color: #171717;1190 content: "9";1191 font-size: 104px;1192 font-style: italic;1193 font-weight: 900;1194 line-height: 1;1195 transform: rotate(-8deg);1196}1197 1198.map-stack,1199.pool-stack,1200.output-bars,