.dor{color:#fffdfb;background:#240b21;height:220vh;position:relative}.dor-stage{background:radial-gradient(at 72%,#39133366,#0000 65%);height:100svh;min-height:760px;position:sticky;top:0;overflow:hidden}.dor-intro{z-index:3;opacity:calc(1 - var(--reveal) * 1.5);transform:translateY(calc(var(--reveal) * -60px));pointer-events:none;position:absolute;top:12%;left:6%}.dor-intro h1{font:400 clamp(65px, 8vw, 130px) / .94 var(--font-body);letter-spacing:-.07em;margin:26px 0!important}.dor-intro p{color:#d6bfd0;font-size:20px;line-height:1.6}.dor-intro a{color:#fff;pointer-events:auto;border-bottom:1px solid #a87888;align-items:center;gap:30px;padding:24px 0;text-decoration:none;display:inline-flex}.dor-eyebrow{letter-spacing:.17em;font-size:11px}.dor-object{aspect-ratio:1;width:min(66vw,880px);transform:translateY(-50%) scale(calc(1 + var(--reveal) * .2));pointer-events:none;opacity:calc(1 - var(--reveal));filter:drop-shadow(0 0 28px #d6a5bd66)drop-shadow(0 0 56px #c995a848);position:absolute;top:50%;right:-3%}.dor-slice{will-change:transform;place-items:center;display:grid;position:absolute;inset:0}.dor-mark{aspect-ratio:1;color:#f3d4de;background:radial-gradient(at 28% 18%,#c995a8,#916a70 38%,#391333 68%,#240b21 92%);border-radius:28%;place-items:center;width:78%;display:grid;box-shadow:inset 1px 1px 3px #f8e4ea66,inset -3px -4px 10px #180a1e,0 0 36px #d6a5bd55}.dor-mark svg{filter:drop-shadow(0 0 8px #e8b6c4aa);width:62%;height:62%}.dor-slice-0{clip-path:inset(0 65% 0 0);transform:translateX(calc(var(--reveal) * -220px)) rotate(calc(var(--reveal) * -12deg))}.dor-slice-1{clip-path:inset(0 30% 0 35%);transform:translateY(calc(var(--reveal) * -190px))}.dor-slice-2{clip-path:inset(0 0 0 70%);transform:translateX(calc(var(--reveal) * 220px)) rotate(calc(var(--reveal) * 12deg))}.dor-work{opacity:var(--reveal);transform:perspective(1400px) translateY(calc((1 - var(--reveal)) * 170px)) rotateX(calc((1 - var(--reveal)) * 12deg));color:#240b21;background:#f5f1f2;border:1px solid #b88a96;border-radius:20px;padding:25px;position:absolute;inset:7% 6% 12%;overflow:auto;box-shadow:0 0 100px #c995a825}.dor-work:focus-within{opacity:1;transform:none}.dor-work>header{letter-spacing:.1em;border-bottom:1px solid #d6bfd0;justify-content:space-between;gap:20px;padding-bottom:20px;font-size:11px;display:flex}.dor-parts{grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;display:grid}.dor-parts fieldset{border:0;grid-column:1/-1;gap:12px;padding:0;display:flex}.dor-parts legend{margin-bottom:12px;font-size:14px}.dor button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:1px solid #d6bfd0;border-radius:8px;padding:10px 14px}.dor button:focus-visible,.dor a:focus-visible{outline-offset:4px;outline:3px solid #916a70}.dor-parts button[aria-pressed=true]{color:#fff;background:#240b21}.dor-workarea{background:#f0e6ea;border-radius:12px;grid-row:span 2;min-height:320px;padding:20px;position:relative}.dor-paper{background:#fffdfb;max-width:82%;padding:25px;box-shadow:0 10px 40px #240b2120}.dor-paper small{letter-spacing:.12em;font-size:10px}.dor-paper p{font-size:16px;line-height:1.7;margin:18px 0!important}.dor-paper button{background:#f5e8ee;font-size:12px}.dor .dor-drag{color:#f3d4de;touch-action:none;cursor:grab;background:#240b21;border-radius:22px;width:70px;height:70px;position:absolute;top:35%;right:12%;box-shadow:0 0 28px #ce82ac90}.dor-drag svg{width:100%;height:100%}.dor-drag-note{font-size:11px;display:block;position:absolute;bottom:18px;left:20px;right:20px}.dor-context,.dor-result{border:1px solid #d6bfd0;border-radius:10px;padding:18px}.dor h2{font:400 17px var(--font-body);margin-bottom:12px!important}.dor-context p,.dor-result p{font-size:13px;line-height:1.6;margin:12px 0!important}.dor-context small{color:#654a4e;margin-top:10px;font-size:10px;line-height:1.5;display:block}.dor-context button{font-size:12px}.dor .dor-text-button{border:0;text-decoration:underline}.dor-result label{font-size:11px}.dor-result textarea{resize:vertical;width:100%;min-height:80px;font:12px/1.6 var(--font-body);background:#fffdfb;border:1px solid #c9a8b0;margin-top:8px;padding:10px;display:block}.dor .dor-build{color:#fff;background:#240b21;justify-content:space-between;align-items:center;gap:18px;width:100%;margin-top:12px;font-size:13px;display:flex}.dor-controls{color:#d6bfd0;justify-content:space-between;align-items:center;font-size:12px;display:flex;position:absolute;bottom:4%;left:6%;right:6%}.dor-controls div{gap:8px;display:flex}.dor-controls button{display:flex}.dor-static{height:auto}.dor-static .dor-stage{height:auto;padding:50px 6% 90px;position:relative}.dor-static .dor-intro{opacity:1;margin-bottom:30px;position:relative;inset:auto;transform:none}.dor-static .dor-object{display:none}.dor-static .dor-work{opacity:1;position:relative;inset:auto;transform:none}.dor-static .dor-controls{bottom:25px}@media (max-width:760px){.dor{height:auto}.dor-stage{height:auto;padding:45px 5% 85px;position:relative}.dor-intro{opacity:1;position:relative;inset:auto;transform:none}.dor-intro h1{font-size:76px}.dor-intro p{font-size:16px}.dor-object{opacity:1;width:100%;margin:-20px auto;position:relative;inset:auto;transform:none}.dor-slice{transform:none}.dor-work{opacity:1;padding:18px;position:relative;inset:auto;transform:none}.dor-work>header{flex-direction:column;gap:8px}.dor-parts{grid-template-columns:1fr}.dor-parts fieldset{flex-wrap:wrap}.dor-parts fieldset button{font-size:12px}.dor-workarea{grid-row:auto;min-height:350px}.dor-paper{max-width:90%}.dor-controls{bottom:25px}.dor-intro a{padding-top:15px}}@media (prefers-reduced-motion:reduce){.dor *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media (max-width:760px){.dor-static .dor-object{opacity:1;aspect-ratio:1;width:100%;margin:0 auto;display:block;position:relative;inset:auto;transform:none}.dor-static .dor-slice{transform:none}.dor-workarea{min-height:430px;padding-bottom:65px}.dor-paper{max-width:100%}.dor-drag-note{bottom:18px}.dor .dor-drag{top:48%;right:5%}}.dor-intro h1{color:#fffdfb}.dor-object img{filter:hue-rotate(58deg)saturate(.85)brightness(1.04);-webkit-mask-image:radial-gradient(#000 42%,#0000 72%);mask-image:radial-gradient(#000 42%,#0000 72%)}
