.pastee{--paper:#f4f3ef;--accent:#726587;--ink:#393743;--muted:#77727e;--line:#ddd9e1}.pastee::selection{background:#dfd6ef}.hero{background:radial-gradient(ellipse at 76% 55%,#ded9eb80,transparent 53%)}.fan-symbol{width:33px;height:28px;position:relative}.fan-symbol i{position:absolute;width:18px;height:25px;border:1.5px solid var(--accent);border-radius:4px;background:var(--paper);transform-origin:bottom center;left:5px;transform:rotate(-25deg)}.fan-symbol i:nth-child(2){transform:rotate(0)}.fan-symbol i:nth-child(3){transform:rotate(25deg)}.hero-fan{position:relative;min-width:0;height:560px;margin-left:-25px;align-self:center}.fan-orbit{position:absolute;inset:45px -15px 20px;border:1px solid #b7afc447;border-radius:50%;transform:rotate(-25deg)}.fan-orbit:after{content:'';position:absolute;width:8px;height:8px;background:#a693b7;border-radius:50%;left:10%;top:15%}.fan{position:absolute;inset:10px -50px 0 -15px;perspective:1100px}.fan-card{position:absolute;top:110px;left:50%;width:230px;height:302px;transform-origin:50% 150%;padding:26px;text-align:left;border:1px solid #cbc5d747;border-radius:12px;box-shadow:0 12px 40px #3f364c15;display:flex;flex-direction:column;justify-content:space-between;transition:transform .8s var(--ease),box-shadow .7s,background .5s}.fan-card:nth-child(1){--angle:-30deg;--shift:-83px;background:#dde3db;color:#58715d}.fan-card:nth-child(2){--angle:-10deg;--shift:-28px;background:#e4ded2}.fan-card:nth-child(3){--angle:10deg;--shift:27px;background:#c9c3df}.fan-card:nth-child(4){--angle:29deg;--shift:81px;background:#fffdf5}.fan-card{transform:translateX(calc(-50% + var(--shift))) rotate(var(--angle))}.fan-card.selected,.fan-card:focus-visible{transform:translateX(calc(-50% + var(--shift))) translateY(-35px) rotate(calc(var(--angle) * .6));box-shadow:0 28px 50px #3f364c27;z-index:6}.card-type{font-family:var(--serif);font-size:25px}.fan-card strong{font-family:var(--serif);font-size:31px;font-weight:400;line-height:1.25;letter-spacing:-1px}.fan-card strong em{color:#857894}.fan-card strong>span{font-size:30px;margin-left:13px}.fan-card code{font-size:16px;line-height:1.8}.fan-card small{font-size:9px;color:#665f69}.landscape{position:relative;height:130px;background:#e8ccae;overflow:hidden;isolation:isolate}.landscape:before{content:'';position:absolute;width:33px;height:33px;background:#fff3cf;border-radius:50%;top:18px;left:28px}.landscape i,.landscape b{position:absolute;width:240px;height:160px;background:#8d9c90;border-radius:45% 70% 0 0;transform:rotate(-20deg);left:-70px;top:60px}.landscape b{left:40px;top:90px;background:#5b7669;transform:rotate(20deg)}.fan-instruction{position:absolute;bottom:17px;right:0;font-size:10px;color:var(--muted);text-align:right}.pointer-mark{position:absolute;bottom:70px;left:46%;font-size:35px;color:var(--accent);animation:pointer-drift 5s ease-in-out infinite}.hero:not(.on-screen) .pointer-mark{animation-play-state:paused}@keyframes pointer-drift{50%{transform:translate(10px,-8px)}}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}.clip-shelf{min-width:0}.shelf-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:24px}.shelf-top>span:last-child{border:1px solid var(--line);padding:4px 10px;border-radius:5px;color:var(--muted)}.filters{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:10px}.filters button{padding:9px 16px;font-size:12px;border-radius:20px}.filters button[aria-pressed=true]{background:#e1dbe8;color:#4b3d60}.sample-list{min-height:284px}.sample-list>button{width:100%;display:flex;gap:15px;text-align:left;align-items:center;padding:19px 12px;border-bottom:1px solid var(--line);transition:background .3s,transform .3s;font-size:12px;min-height:70px}.sample-list>button>span:first-child{flex:0 0 28px;color:var(--accent);font:21px var(--serif)}.sample-list>button>span:nth-child(2){flex:1}.sample-list>button>b{font-weight:400;opacity:0;transition:opacity .3s}.sample-list>button[aria-pressed=true]{background:#e9e4ed;transform:translateX(5px)}.sample-list>button[aria-pressed=true]>b{opacity:1}.sample-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}.pin-button{font-size:11px;padding:10px 0}.pin-button[aria-pressed=true]{color:var(--accent);text-decoration:underline;text-underline-offset:5px}.sample-paper{background:#fffdf8;min-height:400px;max-height:490px;padding:28px 35px 55px;transform:rotate(2deg);box-shadow:12px 18px 35px #3530400b;position:relative;border:1px solid #ebe5dc;overflow:auto}.paper-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5dfd6;padding-bottom:10px;margin-bottom:26px}.paper-dots{font-size:8px;letter-spacing:5px;color:#c8c0b0}.sample-paper h3{font-family:var(--serif);font-size:25px;max-width:230px;margin-bottom:22px}.placeholder{font-size:13px;font-style:italic;color:#aaa292}.output-item{padding:10px 0;font-size:13px;border-bottom:1px solid #ece7df;animation:paste-in .5s var(--ease)}.output-item .landscape{height:90px;max-width:150px}.output-item .landscape i,.output-item .landscape b{top:45px}.paper-sign{position:absolute;bottom:20px;right:25px;font:italic 17px var(--serif);color:#a49b8e}@keyframes paste-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.demo-footer{display:flex;justify-content:space-between;gap:25px;margin-top:28px;min-height:38px}.keepers{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.keepers .body-copy{margin-top:30px}.pin-exhibit{height:440px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:radial-gradient(#b8b1c5 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(transparent,black 12% 88%,transparent)}.pin-exhibit>.label{margin-bottom:32px;color:var(--muted)}.pinned-paper{width:285px;min-height:205px;background:#eeeadf;padding:38px 30px 22px;position:relative;transform:rotate(-6deg);box-shadow:5px 12px 22px #443b4812}.pinned-paper p{font-family:var(--serif);font-size:21px;line-height:1.55}.pin-head{position:absolute;top:-7px;left:48%;width:13px;height:13px;border-radius:50%;background:#9b8eac;box-shadow:2px 4px 3px #34313433}.pinned-paper .landscape{margin-top:5px}.pinned-paper .text-button{margin-top:20px}.pin-loop{position:absolute;bottom:18px;left:0;width:90%;fill:none;stroke:#9f90b6;stroke-width:1.2}.pin-cross{position:absolute;color:#bdb5ca}.pin-cross.one{left:0;top:50px}.pin-cross.two{right:0;bottom:45px}.keyboard-shortcut{display:flex;gap:14px;justify-content:center;margin:30px 0 55px}.keyboard-shortcut kbd{font:29px var(--sans);padding:12px 20px;background:linear-gradient(#faf9f5,#e4e2df);border:1px solid #d9d6d5;border-radius:10px;box-shadow:0 5px 0 #cfcbcd,0 8px 18px #48424f10;transform:rotate(-7deg);transition:transform .3s}.keyboard-shortcut kbd:nth-child(2){transform:rotate(3deg)}.keyboard-shortcut kbd:nth-child(3){transform:rotate(9deg)}.keyboard-shortcut:hover kbd{transform:translateY(3px)}
@media(max-width:1100px){.hero-fan{transform:scale(.8);transform-origin:center}.fan-card{width:210px;height:282px}.hero-copy h1{font-size:72px}.workspace{gap:4vw}.sample-paper{padding-inline:25px}.filters{gap:0}.filters button{padding-inline:13px}}
@media(max-width:700px){.hero-fan{height:445px;margin:5px -4vw 0;transform:scale(.85);transform-origin:center top}.fan{inset:0}.fan-card{top:60px;width:185px;height:250px;padding:20px}.fan-card strong{font-size:26px}.fan-card:nth-child(1){--shift:-58px;--angle:-28deg}.fan-card:nth-child(2){--shift:-20px;--angle:-9deg}.fan-card:nth-child(3){--shift:20px;--angle:10deg}.fan-card:nth-child(4){--shift:58px;--angle:28deg}.fan-orbit{inset:0 0 25px}.fan-instruction{bottom:0;left:0;right:0;text-align:center;font-size:11px}.pointer-mark{bottom:30px}.hero-copy h1{font-size:61px}.workspace{grid-template-columns:1fr;gap:36px}.sample-paper{min-height:350px;max-height:410px;transform:rotate(1deg);padding-inline:24px}.demo-footer{display:block}.demo-footer #paste-status{margin-top:6px;min-height:18px}.keepers{grid-template-columns:1fr;gap:35px}.keepers>div:last-child{grid-row:1}.pin-exhibit{height:365px}.keepers .body-copy{margin-top:22px}.sample-list{min-height:280px}.filters button{padding-inline:16px}.keyboard-shortcut{margin-bottom:45px}.playground{padding-top:35px}}
@media(max-width:360px){.hero-fan{transform:scale(.75);margin-bottom:-40px}.hero-copy h1{font-size:54px}.filters button{padding-inline:12px}.solid-button{padding-inline:14px}.sample-actions{gap:13px}}
@media(max-width:700px){.hero-fan{transform:scale(.72);height:410px;margin-bottom:-30px}}