.atelier{padding:100px 4vw 60px;background:radial-gradient(ellipse at 28% 45%,#241019 0,transparent 55%),#08090b;scroll-margin-top:70px;border-top:1px solid var(--line)}
.atelier-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;gap:24px}.atelier-heading h2{font:600 clamp(44px,5vw,80px)/.95 var(--display);margin:14px 0}.atelier-heading h2 span{display:block;color:#a5a4aa;font:400 18px var(--sans);letter-spacing:0;margin-top:16px}.atelier-heading>p{font-size:14px;color:#aaa;max-width:260px;line-height:1.6}.atelier-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:stretch}.atelier-viewport{position:relative;min-width:0;overflow:hidden;border-radius:22px;border:1px solid #ffffff25;isolation:isolate;background:#111316;align-self:center;box-shadow:0 24px 90px #0008}.atelier-camera{position:relative;transform-origin:50% 50%;transition:transform 1.45s cubic-bezier(.16,1,.3,1);will-change:transform}.atelier-camera>img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transition:opacity .35s;user-select:none}.atelier-viewport.is-changing .atelier-camera>img{opacity:.3}.atelier-topline{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:18px;background:linear-gradient(#0009,transparent);pointer-events:none;gap:10px}.atelier-topline>span{font-size:12px;letter-spacing:.14em;text-shadow:0 1px 8px #000}.atelier-topline button{pointer-events:auto;border:1px solid #ffffff40;border-radius:30px;padding:10px 14px;background:#10101588;backdrop-filter:blur(18px);font-size:13px;cursor:pointer}.atelier-hotspot{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;padding:8px;color:white;cursor:pointer;display:flex;align-items:center;gap:8px;z-index:2}.atelier-hotspot b{display:grid;place-items:center;width:38px;height:38px;border:1px solid #fff9;border-radius:50%;background:#13131c88;backdrop-filter:blur(14px);font:600 13px var(--sans);box-shadow:0 0 0 5px #ffffff10,0 4px 15px #0006;transition:.3s}.atelier-hotspot:hover b,.atelier-hotspot:focus-visible b{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 8px #f5df2522}.atelier-hotspot span{position:absolute;left:52px;white-space:nowrap;font-size:12px;opacity:0;transform:translateX(-8px);background:#101015b8;border:1px solid #fff3;backdrop-filter:blur(18px);padding:9px 12px;border-radius:8px;transition:.25s;pointer-events:none}.atelier-hotspot:hover span,.atelier-hotspot:focus-visible span{opacity:1;transform:none}.is-focused .atelier-hotspot{opacity:0;pointer-events:none}.atelier-caption{position:absolute;bottom:18px;left:18px;right:18px;color:#ddd;font-size:13px;text-shadow:0 1px 10px #000;pointer-events:none}.atelier-detail{padding:26px;border-radius:22px;display:flex;flex-direction:column;justify-content:center}.atelier-detail>span{font:500 12px var(--sans);letter-spacing:.18em;color:#aaa}.atelier-detail h3{font:600 36px/1 var(--display);margin:18px 0}.atelier-detail>p{font-size:14px;line-height:1.7;color:#aaa}.atelier-part-list{margin:16px 0 22px}.atelier-part-list button{width:100%;display:flex;align-items:center;gap:12px;background:transparent;border:0;border-bottom:1px solid #ffffff18;padding:14px 0;cursor:pointer;text-align:left;font-size:14px;color:#a5a5ae;transition:color .3s}.atelier-part-list button span{font-size:12px;color:#666}.atelier-part-list i{margin-left:auto;font-style:normal}.atelier-part-list button[aria-pressed=true]{color:#fff}.atelier-part-list button[aria-pressed=true] span{color:var(--accent)}.atelier-product{border:1px solid #fff3;border-radius:10px;background:linear-gradient(130deg,#ffffff1c,#ffffff05);padding:15px;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;text-align:left}.atelier-product:hover{border-color:var(--accent)}.atelier-detail .atelier-note{font-size:12px;line-height:1.5;color:#8e8e98;margin:15px 0 0}.atelier-views{display:flex;gap:10px;overflow-x:auto;padding:24px 0 10px;scrollbar-color:#555 transparent}.atelier-views button{flex:0 0 125px;padding:5px;border-radius:12px;background:#ffffff05;border:1px solid #ffffff18;text-align:left;cursor:pointer;transition:.3s}.atelier-views button[aria-pressed=true]{border-color:var(--accent);background:#f5df2510}.atelier-views img{display:block;width:100%;height:68px;object-fit:cover;border-radius:8px}.atelier-views span{display:block;padding:9px 3px 5px;font-size:12px;color:#bbb}.atelier :focus-visible{outline:2px solid #ff559d;outline-offset:4px}.dialog-meta[hidden]{display:none}
@media(max-width:1000px){.atelier-layout{grid-template-columns:minmax(0,1fr) 275px}.atelier-detail{padding:20px}.atelier-hotspot b{width:32px;height:32px}.atelier-topline{padding:12px}.atelier-topline>span{font-size:10px}}
@media(max-width:760px){.atelier{padding:70px 16px 36px}.atelier-heading{display:block}.atelier-heading>p{max-width:none}.atelier-layout{grid-template-columns:1fr}.atelier-viewport{border-radius:16px}.atelier-detail{padding:22px}.atelier-detail h3{font-size:32px}.atelier-part-list{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.atelier-topline>span{font-size:10px;max-width:44%}.atelier-caption{font-size:12px;bottom:10px;left:12px}.atelier-topline button{font-size:12px;padding:8px 10px}.atelier-hotspot b{width:28px;height:28px;font-size:11px}.atelier-hotspot span{display:none}.atelier-camera>img{min-height:230px;object-fit:fill}.atelier-views button{flex-basis:112px}}
.atelier-camera>img{min-height:0;object-fit:contain}.atelier-detail .atelier-product{min-height:48px}
@media(prefers-reduced-motion:reduce){.atelier *{transition:none!important}}