/* A standalone making chapter between the two original scroll narratives. */
.app-showroom{background:#f3e44b;color:#242421;padding:48px 0 28px;position:relative;overflow:clip;isolation:isolate;scroll-margin-top:0px}
.showroom-head{max-width:1280px;margin:auto;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;gap:45px}.showroom-head h2{font-size:clamp(34px,3.3vw,49px);line-height:1.3;margin:0}.showroom-head .eyebrow{font-size:12px;margin-bottom:17px}.showroom-intro p{font-size:16px;margin:0}.showroom-intro .read-link{margin-top:7px}.showroom-anchor{position:absolute;top:0;left:0;width:1px;height:1px}.ring-stage{--ring-radius:clamp(280px,49vw,1000px);--card-width:clamp(420px,42vw,760px);--card-height:calc(var(--card-width) * .7);position:relative;height:clamp(520px,41vw,740px);max-width:none;margin:5px auto 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:-8px}.ring-stage.is-dragging,.ring-stage.is-dragging button{cursor:grabbing}.ring-drag-label{position:absolute;left:2vw;top:50%;writing-mode:vertical-rl;font:600 12px var(--display);letter-spacing:.16em;opacity:.55;pointer-events:none}.ring-scene{position:absolute;inset:0;perspective:max(1400px,180vw);perspective-origin:50% 42%;pointer-events:none}.ring-orbit{position:absolute;left:50%;top:40%;width:0;height:0;transform-style:preserve-3d;will-change:transform}.ring-card{position:absolute;left:calc(var(--card-width) / -2);top:calc(var(--card-height) / -2);width:var(--card-width);height:var(--card-height);transform:rotateY(calc(var(--card-index)*var(--ring-step))) translateZ(var(--ring-radius));transform-style:preserve-3d;appearance:none;padding:0;border:0;border-radius:16px;background:none;color:#242421;text-align:left;pointer-events:auto;cursor:grab;font-family:inherit}.ring-face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;pointer-events:none;border:1px solid #24242166;box-shadow:3px 4px 0 #24242135,0 14px 20px #2424211a}.ring-front{transform:translateZ(2px);background:#fffaf0;padding:14px}.ring-back{transform:rotateY(180deg) translateZ(2px);padding:22px;background:#263cca;color:#fffaf0;border:7px solid #fffaf0;align-items:center;justify-content:space-between;text-align:center;outline:1px solid #24242155;outline-offset:-1px}.ring-back:before{content:'';position:absolute;inset:12px;border:1px solid #fffaf070;border-radius:6px;pointer-events:none}.ring-back>span{font:500 11px var(--display);letter-spacing:.13em;position:relative}.ring-back>strong{font:800 155px/.8 var(--display);letter-spacing:-.06em;position:relative}.ring-back>b{font:700 34px var(--display);letter-spacing:.05em;position:relative}.ring-card:nth-child(2) .ring-back{background:#e84132}.ring-card:nth-child(3) .ring-back{background:#244f42}.ring-card:nth-child(4) .ring-back{background:#7339a5}.ring-edge{position:absolute;left:calc(100% - 2px);top:13px;width:4px;height:calc(100% - 26px);background:#aaa89f;transform:rotateY(90deg);pointer-events:none}.ring-ground{position:absolute;left:50%;bottom:19px;width:92%;height:140px;border-radius:50%;transform:translateX(-50%);border:1px solid #24242120;box-shadow:inset 0 0 50px #bdab1412;pointer-events:none}.ring-selector{display:flex;align-items:center;justify-content:center;gap:35px;margin-top:-5px;position:relative}.ring-arrow{width:46px;height:46px;border:1px solid #24242160;border-radius:50%;background:transparent;font-size:25px;line-height:1}.ring-arrow:hover{background:#242421;color:#fffaf0}.ring-selected{min-width:240px;text-align:center}.ring-selected>span{font:600 14px var(--display);letter-spacing:.1em}.ring-selected h3{font-size:24px;margin:5px 0 0;line-height:1.5}.ring-actions{display:flex;align-items:center;justify-content:center;gap:30px;margin:18px 20px 0}.ring-actions>span{font-size:13px;opacity:.7}.showroom-enlarge{display:flex;gap:20px;align-items:center;justify-content:center;border:1px solid #24242170;border-radius:26px;background:#fffaf0;color:#242421;padding:12px 20px;font-size:14px}.showroom-enlarge:hover{background:#242421;color:#fffaf0}.showroom-enlarge>span{font-size:20px;line-height:1}.ring-picks{display:flex;justify-content:center;gap:10px;margin:20px 20px 0;flex-wrap:wrap}.ring-picks button{font:600 14px var(--display);letter-spacing:.03em;padding:8px 16px;border:1px solid #24242133;border-radius:25px;background:transparent;min-height:36px}.ring-picks button>span{opacity:.55;padding-right:5px}.ring-picks button[aria-pressed=true]{background:#242421;color:#fffaf0;border-color:#242421}.showroom-foot{max-width:1280px;padding:0 6vw;margin:30px auto 0;display:flex;justify-content:space-between;gap:25px}.showroom-foot p{font-size:12px;line-height:1.8;opacity:.66;margin:0}.app-showroom button:focus-visible,.ring-stage:focus-visible{outline:3px solid #e84132;outline-offset:5px}.ring-card:focus-visible{outline:0}.ring-card:focus-visible .ring-face{outline:4px solid #e84132;outline-offset:3px}.showroom-dialog{max-width:1280px;width:92vw;max-height:92dvh;padding:20px;background:#fffaf0;color:#242421;border:0;border-radius:12px;box-shadow:0 30px 100px #0005}.showroom-dialog::backdrop{background:#071033de;backdrop-filter:blur(8px)}.showroom-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}.showroom-dialog-head h3{font-size:20px;margin:0}.showroom-close{border:1px solid #24242155;border-radius:25px;padding:10px 18px;font-size:14px;background:transparent;white-space:nowrap}.showroom-dialog>img{display:block;width:100%;height:auto;max-height:calc(92dvh - 155px);object-fit:contain}.showroom-dialog>p{font-size:13px;line-height:1.7;margin:15px 0 0}
@media(max-width:1000px){.showroom-head{padding-inline:5vw;gap:30px}.showroom-head h2{font-size:35px}.showroom-intro p{font-size:14px}.ring-stage{--ring-radius:45vw;--card-width:clamp(350px,56vw,540px);--card-height:calc(var(--card-width) * .7);height:460px}.ring-back>strong{font-size:135px}.ring-ground{width:92%}.showroom-foot{display:block}.showroom-foot p+p{margin-top:8px}}
@media(max-width:550px){.app-showroom{padding:34px 0 30px;scroll-margin-top:0px}.showroom-head{display:block;padding:0 22px}.showroom-head h2{font-size:31px;line-height:1.4}.showroom-head .eyebrow{margin-bottom:15px}.showroom-intro{margin-top:20px}.showroom-intro p{font-size:14px}.showroom-intro .read-link{font-size:13px}.ring-stage{--ring-radius:calc(var(--card-width) * .82);--card-width:clamp(250px,70vw,360px);--card-height:calc(var(--card-width) * .7);height:330px;margin-top:15px}.ring-scene{perspective:900px}.ring-orbit{top:44%}.ring-front{padding:9px}.ring-face{border-radius:10px}.ring-back{border-width:5px;padding:17px 10px}.ring-back:before{inset:8px}.ring-back>strong{font-size:94px}.ring-back>b{font-size:26px}.ring-back>span{font-size:8px}.ring-ground{width:94%;height:65px;bottom:13px}.ring-drag-label{display:none}.ring-selector{gap:15px;margin-top:0}.ring-selected{min-width:190px}.ring-selected h3{font-size:21px}.ring-arrow{width:44px;height:44px;font-size:23px}.ring-actions{flex-direction:column;gap:12px;margin-top:15px}.ring-actions>span{font-size:12px}.showroom-enlarge{font-size:14px;padding:12px 20px}.ring-picks{gap:6px;margin-inline:15px}.ring-picks button{font-size:12px;padding:8px 10px}.showroom-foot{margin-top:24px;padding:0 22px}.showroom-foot p{font-size:12px}.showroom-dialog{width:96vw;padding:15px}.showroom-dialog-head h3{font-size:17px}.showroom-close{font-size:13px;padding:9px 12px}}
@media(max-width:360px){.ring-stage{--ring-radius:calc(var(--card-width) * .82);--card-width:230px;--card-height:161px;height:300px}.ring-selector{gap:10px}.ring-selected{min-width:174px}.ring-selected h3{font-size:19px}.ring-arrow{width:40px;height:40px}.ring-picks button{padding-inline:8px}.ring-ground{width:94%}}

/* Landscape tablet frames: the screenshot is the main surface. */
.ring-front{padding:11px;background:#fffaf0;gap:0}.ring-image{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;border:1px solid #24242126;border-radius:7px;background:var(--card-color)}.ring-image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.ring-caption{flex:none;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 3px 1px;min-height:35px}.ring-caption>span:first-child{display:flex;align-items:baseline;gap:13px;min-width:0}.ring-caption b{font:700 21px/1 var(--display);letter-spacing:.02em}.ring-caption small{font:500 12px/1.4 'Noto Sans JP',sans-serif}.ring-demo{font:400 11px/1.3 'Noto Sans JP',sans-serif;white-space:nowrap;opacity:.65}.ring-back{padding:18px}.ring-back>strong{font-size:clamp(70px,11vw,155px)}.ring-back>b{font-size:clamp(22px,3vw,34px)}
@media(max-width:1000px){.ring-front{padding:9px}.ring-caption{padding-top:8px;min-height:32px}.ring-caption>span:first-child{gap:10px}.ring-caption b{font-size:18px}.ring-caption small{font-size:11px}.ring-demo{font-size:10px}.ring-back>strong{font-size:90px}.ring-back>b{font-size:25px}}
@media(max-width:550px){.ring-stage{height:290px}.ring-front{padding:7px}.ring-image{border-radius:4px}.ring-caption{padding:7px 2px 0;min-height:25px;gap:6px}.ring-caption>span:first-child{gap:8px}.ring-caption b{font-size:15px}.ring-caption small{display:none}.ring-demo{font-size:9px}.ring-back{padding:13px;border-width:5px}.ring-back>strong{font-size:59px}.ring-back>b{font-size:20px}.ring-back>span{font-size:8px}}
@media(max-width:360px){.ring-stage{height:265px}.ring-back>strong{font-size:50px}.ring-back>b{font-size:18px}}

/* Real screens retain their own proportions inside the landscape cards. */
.ring-image.landscape-layout{background:var(--card-color);border:0;display:flex;padding:18px}
.phone-landscape{display:block;position:relative;width:100%;padding:8px 20px;box-sizing:border-box;border:2px solid #535c5a;border-radius:26px;background:#202625;box-shadow:0 12px 18px #16222035,inset 0 0 0 2px #101716;flex:none}
.phone-landscape:before{content:'';position:absolute;left:7px;top:50%;width:5px;height:5px;border-radius:50%;background:#090d0d;box-shadow:inset 0 0 0 1px #53625e;transform:translateY(-50%)}
.phone-landscape:after{content:'';position:absolute;right:6px;top:38%;height:24%;width:3px;border-radius:3px;background:#525b58}
.phone-landscape .app-capture{border-radius:12px;background:#101515}
.app-capture{display:block;position:relative;overflow:hidden;aspect-ratio:var(--capture-ratio);flex:none;width:100%}
.app-capture img{position:absolute;left:var(--capture-left);top:var(--capture-top);width:var(--capture-width);height:auto;max-width:none;object-fit:initial}
.ring-image.portrait-layout{display:flex;padding:16px 22px;gap:24px;align-items:center;justify-content:center;border:0}
.portrait-layout .app-capture{height:100%;width:auto;max-width:43%;border-radius:12px;outline:5px solid #222a29;box-shadow:0 9px 18px #16222030;background:#15191b}
.portrait-copy{display:flex;flex-direction:column;flex:1;min-width:0;gap:16px;text-align:left;max-width:280px}
.portrait-copy>small{font:600 11px/1.5 var(--display);letter-spacing:.12em;opacity:.7}
.portrait-copy>strong{font-size:clamp(21px,2.1vw,32px);font-weight:800;line-height:1.45;letter-spacing:-.05em}
.portrait-copy>span{font-size:clamp(12px,1vw,15px);line-height:1.9}
.portrait-copy>b{font:600 10px/1.5 var(--display);letter-spacing:.1em;margin-top:8px;border-top:1px solid #24242140;padding-top:14px}
.ring-card:nth-child(5) .ring-back{background:#326247}
.ring-description{text-align:center;font-size:14px;line-height:1.85;max-width:640px;min-height:26px;margin:14px auto 0;padding:0 24px;text-wrap:pretty}
.showroom-dialog-image{overflow:auto;max-height:calc(92dvh - 155px);overscroll-behavior:contain;scrollbar-gutter:stable;background:#141717;border-radius:7px}
.showroom-dialog-image img{display:block;width:100%;height:auto;object-fit:contain;margin:auto}
.showroom-dialog.is-portrait{max-width:600px}.showroom-dialog.is-portrait .showroom-dialog-image{background:#e8e8e1}.showroom-dialog.is-portrait .showroom-dialog-image img{max-width:440px}
.showroom-dialog-image:focus-visible{outline:3px solid #e84132;outline-offset:3px}
.showroom-dialog[open]{display:flex;flex-direction:column;overflow:hidden}.showroom-dialog-head,.showroom-dialog-description{flex:none}.showroom-dialog-image{flex:0 1 auto;min-height:0}
@media(max-width:1000px){.ring-image.portrait-layout{padding:13px 18px;gap:22px}.portrait-copy{gap:12px}.portrait-copy>strong{font-size:23px}.portrait-copy>span{font-size:12px}.portrait-copy>b{padding-top:10px;margin-top:0}.ring-caption b{font-size:17px}}
@media(max-width:550px){.ring-image.portrait-layout{padding:9px 12px;gap:14px}.portrait-layout .app-capture{border-radius:6px;outline-width:3px;max-width:43%}.portrait-copy{gap:8px}.portrait-copy>small{font-size:7px;letter-spacing:.05em}.portrait-copy>strong{font-size:16px;line-height:1.5}.portrait-copy>span,.portrait-copy>b{display:none}.ring-caption b{font-size:13px}.ring-caption{gap:4px}.ring-demo{font-size:8px}.ring-description{font-size:13px;margin-top:12px;min-height:48px}.showroom-dialog-image{max-height:calc(92dvh - 160px)}.ring-selected{min-width:0;width:220px}.ring-selected h3{font-size:19px}.ring-picks button{font-size:11px;padding:8px 9px}}
@media(max-width:360px){.portrait-copy>strong{font-size:14px}.ring-caption b{font-size:11px}.ring-demo{font-size:7px}.ring-image.portrait-layout{gap:12px;padding:8px 11px}}

@media(max-width:1000px){.ring-image.landscape-layout{padding:14px}.phone-landscape{padding:6px 16px;border-radius:21px}.phone-landscape:before{left:5px;width:4px;height:4px}.phone-landscape:after{right:5px;width:2px}.phone-landscape .app-capture{border-radius:9px}}
@media(max-width:550px){.ring-image.landscape-layout{padding:9px}.phone-landscape{padding:4px 11px;border-width:1px;border-radius:14px;box-shadow:0 6px 10px #16222035,inset 0 0 0 1px #101716}.phone-landscape:before{left:4px;width:3px;height:3px}.phone-landscape:after{right:4px;width:2px}.phone-landscape .app-capture{border-radius:6px}}
@media(max-width:360px){.ring-image.landscape-layout{padding:7px}}

/* Five cards need radius > width / (2 * tan(36deg)); .82 leaves room for the faces and shadows on mobile. */

/* Landscape phones use the same title hierarchy as portrait works. */
.ring-image.landscape-layout{flex-direction:column;gap:12px}
.phone-landscape{width:96%}
.landscape-title{display:block;flex:none;font-size:clamp(21px,2.1vw,32px);font-weight:800;line-height:1.4;letter-spacing:-.05em;text-align:center}
@media(max-width:1000px){.ring-image.landscape-layout{gap:8px}.phone-landscape{width:90%}.landscape-title{font-size:23px}}
@media(max-width:550px){.ring-image.landscape-layout{gap:6px}.phone-landscape{width:92%}.landscape-title{font-size:16px}}
@media(max-width:360px){.ring-image.landscape-layout{gap:5px}.phone-landscape{width:86%}.landscape-title{font-size:14px}}