.nameplate-demo{display:grid;grid-template-columns:clamp(260px,30vw,340px) minmax(0,1fr);grid-template-areas:"door intro" "door controls";grid-template-rows:auto 1fr;gap:28px clamp(48px,8vw,112px);align-items:start;max-width:1080px;margin-inline:auto}.nameplate-demo .nameplate-intro{grid-area:intro;padding-top:clamp(8px,3vw,40px)}.nameplate-demo .nameplate-title{max-width:11em}.nameplate-demo h3.nameplate-title{font:500 clamp(2.125rem,1.5rem + 1.9vw,3rem)/1.06 var(--display);letter-spacing:-.015em;text-wrap:balance}.nameplate-demo .nameplate-title em{font-style:italic;color:var(--accent)}.nameplate-demo .nameplate-lead{margin-top:16px;max-width:30em;color:var(--muted);font-size:1.0625rem}.nameplate-demo .door-frame{grid-area:door;position:relative;container-type:inline-size;width:100%;padding:10px;border-radius:var(--arch);background:linear-gradient(180deg,var(--white),#ebe2d2);box-shadow:0 0 0 1px var(--line),0 44px 60px -40px rgb(25 24 22/55%)}.nameplate-demo .door-opening{position:relative;aspect-ratio:5/8;overflow:hidden;isolation:isolate;border-radius:999px 999px 4px 4px;background:#0f0e0c;perspective:1100px;box-shadow:0 0 0 1px rgb(185 154 96/70%)}.nameplate-demo .door-interior{position:absolute;inset:0;z-index:0}.nameplate-demo .door-interior:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 48px rgb(15 14 12/45%)}.nameplate-demo .door-scene{position:absolute;inset:0;opacity:0;transform:scale(1.08);filter:brightness(.55);transition:opacity .5s var(--ease-out),transform 1.4s var(--ease-out),filter 1.2s var(--ease-out)}.nameplate-demo .door-scene[data-active=true]{opacity:1}.nameplate-demo[data-door=open] .door-scene{transform:none;filter:none}.nameplate-demo .door-badge{position:absolute;z-index:2;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:5px 10px;border-radius:3px;background:var(--stone);color:var(--ink);font-size:.75rem;line-height:1.3;opacity:0;transition:opacity .4s var(--ease-out)}.nameplate-demo[data-door=open] .door-badge{opacity:1;transition-delay:.7s}.nameplate-demo .door-panel{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;transform-origin:0 50%;backface-visibility:hidden;background:radial-gradient(120% 70% at 28% 6%,rgb(255 255 255/8%),transparent 60%),linear-gradient(90deg,rgb(0 0 0/38%),transparent 14%,transparent 86%,rgb(0 0 0/42%)),repeating-linear-gradient(90deg,rgb(255 255 255/2.2%) 0 1px,transparent 1px 3px,rgb(0 0 0/14%) 3px 4px,transparent 4px 9px),repeating-linear-gradient(90deg,transparent 0 23px,rgb(255 255 255/1.8%) 23px 24px,transparent 24px 41px),var(--ink);box-shadow:inset 0 0 0 1px rgb(185 154 96/22%),inset 0 0 26px rgb(0 0 0/55%);transition:transform .85s cubic-bezier(.55,.05,.3,1)}.nameplate-demo .door-panel:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgb(0 0 0/10%),rgb(0 0 0/75%));opacity:0;transition:opacity .85s var(--ease-out)}.nameplate-demo[data-door=open] .door-panel{transform:rotateY(105deg);transition:transform 1s cubic-bezier(.4,.1,.2,1)}.nameplate-demo[data-door=open] .door-panel:after{opacity:1}.nameplate-demo .door-recess{position:absolute;left:14%;right:14%;border:1px solid rgb(185 154 96/38%);background:linear-gradient(180deg,rgb(0 0 0/30%),rgb(255 255 255/2%));box-shadow:inset 0 3px 7px rgb(0 0 0/60%),inset 0 -1px 0 rgb(255 255 255/5%),0 1px 0 rgb(255 255 255/5%)}.nameplate-demo .door-recess-upper{top:9%;height:37%;border-radius:999px 999px 3px 3px}.nameplate-demo .door-recess-lower{bottom:7%;height:25%;border-radius:3px}.nameplate-demo .nameplate{position:absolute;left:17%;right:17%;top:57%;transform:translateY(-50%);display:grid;justify-items:center;gap:4px;padding:3.2cqi 5cqi;border:1px solid #7f6535;border-radius:3px;text-align:center;color:#1f190f;background:linear-gradient(180deg,rgb(255 255 255/38%) 0,rgb(255 255 255/6%) 42%,rgb(0 0 0/0) 58%,rgb(0 0 0/10%) 100%),repeating-linear-gradient(180deg,rgb(255 255 255/9%) 0 1px,transparent 1px 3px),repeating-linear-gradient(180deg,rgb(90 64 24/7%) 0 1px,transparent 1px 5px),linear-gradient(100deg,#a88a52 0,#d6bf8c 26%,var(--brass) 50%,#dcc797 72%,#a88a52 100%);box-shadow:0 1px 0 rgb(255 255 255/6%),0 3px 7px rgb(0 0 0/55%),inset 0 1px 0 rgb(255 247 225/60%),inset 0 -1px 0 rgb(70 52 22/35%)}.nameplate-demo .nameplate:after,.nameplate-demo .nameplate:before{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f3e6c4,#8a6f3c 70%);box-shadow:0 0 0 1px rgb(60 45 20/35%)}.nameplate-demo .nameplate:before{left:5px}.nameplate-demo .nameplate:after{right:5px}.nameplate-demo .nameplate-mark{font:600 clamp(.5rem,2.6cqi,.625rem)/1 var(--text);letter-spacing:.28em;text-transform:uppercase;color:#3a2f1a;text-shadow:0 1px 0 rgb(255 255 255/30%)}.nameplate-demo .nameplate strong{max-width:100%;font:500 clamp(1.0625rem,7.4cqi,1.75rem)/1.08 var(--display);letter-spacing:.01em;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 1px 0 rgb(255 255 255/42%),0 -1px 0 rgb(0 0 0/22%)}.nameplate-demo .nameplate.is-long strong{font-size:clamp(.9375rem,6.2cqi,1.5rem)}.nameplate-demo .nameplate.is-longest strong{font-size:clamp(.875rem,5.3cqi,1.3rem)}.nameplate-demo .nameplate[data-empty] strong{font-style:italic}.nameplate-demo .door-handle{position:absolute;right:6.5%;top:47%;width:max(6px,2.4cqi);height:21%;border-radius:99px;background:linear-gradient(90deg,#7d6434,#e7d6a8 38%,#c4a66c 58%,#6f5830);box-shadow:3px 4px 8px rgb(0 0 0/55%),inset 0 1px 0 rgb(255 255 255/35%)}.nameplate-demo .door-handle:before{content:"";position:absolute;z-index:-1;left:50%;top:-6px;width:calc(100% + 5px);height:calc(100% + 12px);transform:translateX(-50%);border-radius:99px;background:linear-gradient(90deg,#4f3f20,#9c7f49 50%,#4f3f20);box-shadow:0 2px 4px rgb(0 0 0/45%)}.nameplate-demo .nameplate-controls{grid-area:controls;display:grid;gap:24px;max-width:460px}.nameplate-demo .nameplate-craft{min-inline-size:0;margin:0;padding:0;border:0}.nameplate-demo .nameplate-craft legend{margin-bottom:8px;padding:0;font-size:.9375rem;font-weight:500}.nameplate-demo .nameplate-options{display:flex;flex-wrap:wrap;gap:8px}.nameplate-demo .nameplate-option{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #8f8472;border-radius:999px;background:var(--white);font-size:.9375rem;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}.nameplate-demo .nameplate-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.nameplate-demo .nameplate-option:hover{border-color:var(--ink)}.nameplate-demo .nameplate-option:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--stone)}.nameplate-demo .nameplate-option:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.nameplate-demo .nameplate-toggle{justify-self:start}.nameplate-demo .nameplate-reveal{display:grid;gap:16px;justify-items:start}.nameplate-demo .nameplate-closing{font:italic 500 clamp(1.5rem,1.2rem + 1vw,2rem)/1.15 var(--display)}.nameplate-demo[data-door=open] .nameplate-closing,.nameplate-demo[data-door=open] .nameplate-next{animation:nameplate-rise .6s var(--ease-out) .45s both}@keyframes nameplate-rise{0%{opacity:0;transform:translateY(10px)}}@media (max-width:819px){.nameplate-demo{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "door" "controls";grid-template-rows:auto;row-gap:32px}.nameplate-demo .nameplate-intro{padding-top:0}.nameplate-demo .door-frame{justify-self:center;width:min(100%,300px)}.nameplate-demo .nameplate-controls{max-width:none}}@media (max-width:640px){.nameplate-demo .door-frame{width:min(100%,252px);padding:8px}.nameplate-demo .nameplate-option{flex:1 1 auto}.nameplate-demo .nameplate-next,.nameplate-demo .nameplate-next .button,.nameplate-demo .nameplate-toggle{width:100%}.nameplate-demo .nameplate-reveal{justify-items:stretch}}@media (prefers-reduced-motion:reduce){.nameplate-demo .door-badge,.nameplate-demo .door-panel,.nameplate-demo .door-panel:after,.nameplate-demo .door-scene{transition:none}.nameplate-demo .door-scene{transform:none;filter:none}.nameplate-demo[data-door=open] .door-panel{transform:none;visibility:hidden}.nameplate-demo[data-door=open] .nameplate-closing,.nameplate-demo[data-door=open] .nameplate-next{animation:none}}