*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#eeece7;color:var(--ink);font:14px 'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.example-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;height:58px;padding:0 32px;background:#fffdf7;color:#38362f;font-size:11px;border-bottom:1px solid #ddd9d0}.example-nav span{font-size:9px;color:#827a6a;text-transform:uppercase;letter-spacing:1px}.page{max-width:570px;margin:35px auto;background:var(--paper);box-shadow:0 15px 70px #0001;overflow:hidden}.page-header{padding:25px 30px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px;border-bottom:1px solid var(--line)}.monogram{font:italic 35px Georgia;letter-spacing:-3px}.hero{padding:32px 30px}.eyebrow{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}h1{font-size:67px;line-height:.97;letter-spacing:-3.5px;font-weight:500;margin:22px 0}h2{font-size:33px;line-height:1.06;letter-spacing:-1.2px;font-weight:500;margin:13px 0 25px}p{font-size:13px;line-height:1.8;color:var(--muted)}.hero p{max-width:340px}.action{display:flex;justify-content:space-between;align-items:center;width:100%;padding:17px 20px;background:var(--accent);color:var(--on-accent);border:1px solid var(--ink);border-radius:6px;font-size:12px;margin-top:28px}.action:hover{filter:brightness(1.08)}.scene{margin:0;height:350px}.scene img{width:100%;height:100%;object-fit:cover}.quick-links{padding:0 30px;display:flex;flex-direction:column}.quick-links a{padding:21px 0;border-bottom:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between}.section{padding:44px 30px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.tile{background:transparent;border:0;padding:0;text-align:left;color:var(--ink)}.art{height:185px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--accent);color:var(--on-accent);border-radius:5px;font:italic 34px/1 Georgia;letter-spacing:-1.5px;text-align:center}.tile-title{display:flex;justify-content:space-between;padding:13px 0 4px;font-size:13px}.tile small{font-size:10px;color:var(--muted)}.rows article{padding:21px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:15px}.rows h3{font-size:15px;margin:0 0 5px;font-weight:500}.rows p{font-size:11px;margin:0}.number{font-size:10px;color:var(--muted)}.round{margin-left:auto;flex-shrink:0;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;color:var(--ink);background:transparent}.note{font-size:10px}.page-footer{padding:25px 30px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px}.page-footer span{font-size:9px;color:var(--muted)}details{border-bottom:1px solid var(--line);padding:20px 0}summary{font-size:13px;cursor:pointer}details p{font-size:12px}.tag{font-size:9px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;display:inline-block}.art-disc:before{content:'';position:absolute;width:145px;height:145px;border:35px solid #0b184b;border-radius:50%;box-shadow:0 0 0 3px #9eaff9,0 0 0 8px #233770}.art-disc:after{content:'';width:20px;height:20px;border-radius:50%;background:#e2f09d;z-index:1}.art-bowl:before{content:'';position:absolute;top:50px;width:120px;height:86px;background:#c0aa8d;border-radius:20% 20% 48% 48%;box-shadow:inset -15px -10px 20px #76574450,0 20px 15px #5e3d2d25}.art-bowl:after{content:'';position:absolute;top:45px;width:120px;height:25px;border-radius:50%;background:#7d6852;box-shadow:inset 0 5px 6px #4b392e55;border:5px solid #cdb797}.art-vase:before{content:'';width:84px;height:128px;border-radius:24% 24% 38% 38%;background:#c77b57;box-shadow:inset -15px 0 20px #863d3650,12px 14px 15px #52251a25;transform:rotate(-7deg)}.art-vase:after{content:'';position:absolute;top:29px;width:49px;height:12px;border-radius:50%;background:#683b30;transform:rotate(-7deg);border:4px solid #c77b57}.art-print{background:#cad4b5}.art-print:before{content:'';width:108px;height:134px;background:radial-gradient(ellipse at 45% 100%,#5d6f47 0 20%,transparent 21%),linear-gradient(150deg,#f1d8b5 48%,#8b9f6a 49% 65%,#324c37 66%);border:9px solid #f6f1e2;box-shadow:8px 12px 20px #14351522;transform:rotate(-8deg)}.art-type{background:#143e2b;color:#d7ed9d;font:bold 29px/1 'DM Sans'}.art-wave{background:repeating-radial-gradient(ellipse at bottom,#b896c9 0 9px,#492654 10px 18px);color:#fff4df;font:600 23px/1 'DM Sans';text-shadow:0 2px 8px #35213d}.art-two{filter:hue-rotate(22deg)}dialog{border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:35px;max-width:430px;width:calc(100% - 36px)}dialog::backdrop{background:#17161688;backdrop-filter:blur(6px)}dialog h2{font-size:32px;margin-top:25px}dialog p{font-size:13px}.close{position:absolute;right:14px;top:9px;border:0;background:none;color:var(--ink);font-size:26px}.stereo{--paper:#10299e;--ink:#f8f5e7;--muted:#bbc7f7;--line:#6477ce;--accent:#e5ed92;--on-accent:#102252}.stereo h1,.podcast h1{font-family:'Dela Gothic One';font-size:54px;letter-spacing:-2px;line-height:1.15}.stereo .art{background:#3c54b2}.form{--paper:#f5e9db;--ink:#713f2b;--muted:#9a735d;--line:#d9bdab;--accent:#ad5337;--on-accent:#fff4df}.form h1,.form h2{font-family:Georgia;font-weight:400}.form .art{background:#dfc8ac}.frame{--paper:#dceaaf;--ink:#163d2a;--muted:#5b7150;--line:#b4c58e;--accent:#173d2a;--on-accent:#eef3d0}.frame h1{font-size:74px;font-weight:600;letter-spacing:-5px}.podcast{--paper:#3a2042;--ink:#f8edda;--muted:#c2accb;--line:#72567e;--accent:#dac0e7;--on-accent:#392141}.podcast .art{background:#9472a8}.podcast h2{font-family:Georgia;font-size:40px}dialog .action{margin-top:24px}.fiction{padding:0 30px 30px;font-size:10px;color:var(--muted)}@media(max-width:640px){.example-nav{font-size:9px;padding:0 17px;height:53px}.example-nav span{font-size:7px}.page{margin:0 auto;box-shadow:none}.hero{padding:25px}h1{font-size:58px}.stereo h1,.podcast h1{font-size:44px}.frame h1{font-size:65px}.section{padding:38px 25px}.scene{height:300px}.art{height:155px}.quick-links{padding:0 25px}.page-header{padding:22px 25px}.page-footer{padding:23px 25px}.fiction{padding:0 25px 25px}.action{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.action{justify-content:center}.round{width:auto;min-width:45px;height:30px;padding:0 10px;border-radius:5px;font-size:10px}.tile-title{display:block}