:root{--ink:#172033;--blue:#2563eb;--soft:#f8fafc;--line:#dbe3ef;--accent:#f97316}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.5 Arial,sans-serif;color:var(--ink);background:var(--soft)}h1,h2,h3,h4{margin-top:0}.site-header{position:sticky;top:0;z-index:10;padding:1.2rem 5%;color:white;background:#172554;box-shadow:0 2px 8px #0003}.site-header h1{margin-bottom:.2rem}.site-header nav{display:flex;gap:1rem;flex-wrap:wrap}.site-header a{color:#bfdbfe;text-decoration:none}.workbook{max-width:1100px;margin:auto;padding:1rem}.workbook>section{margin:2rem 0}.workbook>section>h2{padding:.6rem 1rem;color:#1e3a8a;border-left:6px solid var(--accent);background:#e0e7ff}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.grid-2 article{min-height:150px;padding:1rem;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 5px #17203312}.grid-2 h3{font-size:1.05rem;color:#1d4ed8}.external-demo{color:#166534;background:#dcfce7;padding:.6rem}.selector-demo{color:#9333ea}#special{font-weight:bold;color:#be123c}input,textarea,button{font:inherit;padding:.55rem;border:1px solid #94a3b8;border-radius:5px}button{color:white;background:var(--blue);cursor:pointer}.color-box{padding:1rem;color:white;background:#0f766e;border:4px solid #f59e0b}.gradient-box,.gradient-row i:first-child{height:50px;background:linear-gradient(90deg,#2563eb,#f97316)}.typography{font:bold italic 1.25rem Georgia;text-transform:uppercase;letter-spacing:.1em;text-decoration:underline}.box-model{margin:1rem;padding:1rem;border:8px solid #f59e0b;background:#bfdbfe;text-align:center}.sizing{width:min(100%,220px);height:70px;resize:both;overflow:auto;background:#ddd6fe;padding:1rem}.position-stage{position:relative;height:80px;background:#f1f5f9}.relative{position:relative;left:15px;top:10px}.absolute{position:absolute;right:10px;bottom:10px;background:#fed7aa}.static{position:static}.fixed-badge{position:fixed;right:1rem;bottom:1rem;z-index:9;padding:.4rem;background:#dc2626;color:white;border-radius:50%;font-size:.7rem}.sticky-demo{position:sticky;top:7rem;padding:.4rem;background:#fef3c7}.float-image{float:left;margin:0 1rem 1rem 0;padding:1rem;background:#fca5a5}.clear{clear:both;padding:.5rem;background:#dbeafe}.dark-nav{display:flex;gap:1rem;padding:.7rem;background:#111827}.dark-nav a{color:white}.pseudo-link:hover{color:red}.pseudo-link:active{color:orange}.pseudo-link:visited{color:purple}.focus-input:focus{outline:3px solid #93c5fd}.pseudo-elements::first-letter{font-size:2rem;color:#dc2626}.pseudo-elements::first-line{font-weight:bold}.styled-list{list-style-type:square;color:#7c3aed}table{border-collapse:collapse;width:100%}th,td{padding:.4rem;border:1px solid #64748b;text-align:left}th{background:#dbeafe}.form,.login,.contact-form{display:grid;gap:.6rem}.flex-demo,.card-row,.three-column,.auth-row{display:flex;gap:.6rem;flex-wrap:wrap}.flex-demo b,.card-row div,.three-column div{flex:1;padding:1rem;background:#bfdbfe;text-align:center}.grid-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.grid-demo b,.gallery div,.shop-row div,.news-grid>*{padding:1rem;text-align:center;background:#c7d2fe}.responsive-box{padding:1rem;background:#fecdd3}@media(max-width:600px){.grid-2{grid-template-columns:1fr}.site-header{position:static}.responsive-box{background:#bbf7d0}.auth-row{flex-direction:column}}.transition-box,.transition-long{display:inline-block;padding:1rem;background:#fed7aa;transition:transform .4s,background .4s}.transition-box:hover,.transition-long:hover{transform:scale(1.1) rotate(2deg);background:#fdba74}.pulse,.keyframe{display:inline-block;padding:1rem;background:#a7f3d0;animation:pulse 1.5s infinite}@keyframes pulse{50%{transform:scale(1.15);opacity:.6}}.mobile-nav{padding:.5rem;background:#e0e7ff}.mobile-nav a{display:block}.mini-portfolio,.profile,.product-card,.homepage,.college-home,.restaurant,.travel,.variables,.background-art,.shadow-box,.dark-mode{padding:1rem;background:#eff6ff;border-radius:8px}.avatar{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#2563eb;color:white}.login input,.contact-form input,.contact-form textarea{width:100%}.product-image,.image-hover,.object-fit{display:grid;place-items:center;height:80px;background:#93c5fd}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.gallery-wide{grid-template-columns:repeat(4,1fr)}.inherit{font-family:Georgia;color:#166534}.combinators p{margin:.2rem;padding:.3rem;background:#fef3c7}.combinators>p:first-child{font-weight:bold}.combinators p+span{color:#dc2626}.variables{--card:#fef3c7;background:var(--card);color:#854d0e}.background-art{background:linear-gradient(135deg,#1e3a8a,#60a5fa);color:white;height:90px}.gradient-row{display:flex;gap:5px}.gradient-row i{display:block;flex:1;height:50px;background:radial-gradient(circle,#facc15,#dc2626)}.shadow-box{box-shadow:5px 5px 0 #94a3b8;text-shadow:2px 2px #bfdbfe}.shapes{display:flex;gap:5px}.shapes i{width:45px;height:45px;background:#fb7185}.shapes i:nth-child(2){border-radius:50%}.shapes i:nth-child(3){border-radius:50% 0}.opacity-row{display:flex;gap:5px}.opacity-row i{padding:.7rem;background:#2563eb;color:white}.opacity-row i:nth-child(2){opacity:.5}.opacity-row i:nth-child(3){opacity:.2}.overflow-box{height:45px;overflow:hidden;background:#fde68a;padding:.4rem}.stack{position:relative;height:60px}.stack i{position:absolute;padding:1rem;background:#fca5a5}.stack i+ i{z-index:2;left:35px;top:15px;background:#93c5fd}.display-block{display:block;background:#bbf7d0}.display-inline-block{display:inline-block;padding:.4rem;background:#ddd6fe}.display-none,.gone{display:none}.hidden-space{visibility:hidden}.dropdown{position:relative;display:inline-block}.dropdown>div{display:none;position:absolute;background:white;box-shadow:0 2px 8px #0003}.dropdown:hover>div{display:block}.dropdown a{display:block;padding:.5rem;white-space:nowrap}.image-hover{transition:.4s}.image-hover:hover{filter:brightness(.6);transform:scale(1.05)}.tooltip{position:relative;padding:.5rem;background:#e0e7ff}.tooltip span{display:none;position:absolute;bottom:120%;left:0;padding:.3rem;background:#111827;color:white;white-space:nowrap}.tooltip:hover span{display:block}.animated-button span{display:inline-block;transition:transform .3s}.animated-button:hover span{transform:translateX(8px)}.filter-row{display:flex;gap:4px}.filter-row i{padding:.8rem;background:#fca5a5}.filter-row i:nth-child(1){filter:blur(1px)}.filter-row i:nth-child(2){filter:grayscale(1)}.filter-row i:nth-child(3){filter:brightness(1.5)}.filter-row i:nth-child(4){filter:contrast(2)}.object-fit{object-fit:cover;object-position:right}.dashboard{display:grid;grid-template-columns:1fr 2fr;gap:4px}.dashboard>*{padding:.8rem;background:#c4b5fd}.two-column{display:grid;grid-template-columns:2fr 1fr;gap:5px}.two-column>*{padding:1rem;background:#bae6fd}.sticky-header{position:sticky;top:0;padding:1rem;background:#fde68a}.fixed-sidebar{float:left;margin-right:1rem;padding:.7rem;background:#c4b5fd}.responsive-footer{display:flex;justify-content:space-around;padding:1rem;background:#e2e8f0}.shop-row{display:flex;gap:5px}.shop-row div{flex:1}.travel{background:linear-gradient(120deg,#0e7490,#67e8f9);color:white}.news-grid{display:grid;grid-template-columns:2fr 1fr;gap:4px}.portfolio-sections{display:flex;gap:4px;flex-wrap:wrap}.portfolio-sections b{padding:.8rem;background:#ddd6fe}.areas{display:grid;grid-template-areas:"head head" "nav main" "foot foot";grid-template-columns:1fr 2fr}.areas>*{padding:.5rem;background:#bae6fd}.areas header{grid-area:head}.areas nav{grid-area:nav}.areas main{grid-area:main}.areas footer{grid-area:foot}.flex-order{display:flex;gap:4px}.flex-order>*{padding:.5rem;background:#fbcfe8}.flex-order b:nth-child(2){order:-1}.adaptive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.adaptive-grid div{padding:1rem;background:#bbf7d0}.mobile-first{padding:1rem;background:#fef3c7}@media(min-width:700px){.mobile-first{width:70%;margin:auto}.adaptive-grid{grid-template-columns:repeat(3,1fr)}}.transform-3d{display:inline-block;padding:1rem;background:#f9a8d4;transition:transform .5s}.transform-3d:hover{transform:rotateY(180deg)}.keyframe{animation:slide 2s infinite alternate}@keyframes slide{to{transform:translateX(80px)}}.spinner{width:35px;height:35px;border:5px solid #bfdbfe;border-top-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.slide-card{display:inline-block;padding:1rem;background:#fdba74;animation:slidecard 3s infinite alternate}@keyframes slidecard{to{transform:translateX(100px)}}.modal{display:none;position:fixed;inset:0;place-items:center;background:#0008;z-index:20}.modal:target{display:grid}.modal div{padding:2rem;background:white}.dark-mode{background:#111827;color:#e5e7eb}.responsive-type{font-size:clamp(1rem,3vw,2rem)}.css-functions{width:min(100%,300px);height:max(50px,10vw);font-size:clamp(1rem,2vw,1.5rem);background:#bae6fd}.calc-demo{width:calc(100% - 2rem);padding:.5rem;background:#fed7aa}.final-site{overflow:hidden;border:2px solid #1d4ed8}.final-site header,.final-site footer{padding:.8rem;background:#1e3a8a;color:white}.final-site main{padding:1.5rem;background:linear-gradient(135deg,#dbeafe,#fef3c7)}.page-footer{text-align:center;padding:2rem;color:white;background:#172554}