/* Animated wall displays for Transformamos. Position monitor buttons in the scene markup. */
.workshop-showcase{position:relative;isolation:isolate;min-width:0;container-type:inline-size}
.workshop-scene-image{display:block;width:100%;height:auto;border-radius:4px}
.workshop-showcase .workshop-monitor{position:absolute;z-index:2;display:block;appearance:none;box-sizing:border-box;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;overflow:hidden;text-align:left;cursor:zoom-in}
.workshop-monitor:focus-visible{outline:3px solid #168de2;outline-offset:3px}
.workshop-display{position:relative;isolation:isolate;display:block;width:100%;height:100%;overflow:hidden;container-type:inline-size;background:#fff;color:#172347;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;line-height:1.2;text-transform:none;letter-spacing:normal}
.workshop-display-inner{position:relative;z-index:1;display:block;box-sizing:border-box;width:100%;height:100%;padding:4cqw 5cqw 6cqw}
.workshop-screen-header{position:relative;display:flex;align-items:center;gap:4cqw;min-height:11cqw;margin:0 0 3cqw}
.workshop-display .workshop-logo{display:block;box-sizing:border-box;width:52cqw;height:auto;flex:0 0 auto;margin:0;padding:0;border-radius:0;background:#fff;object-fit:contain}
.workshop-screen-heading{display:block;flex:1;min-width:0;margin:0;font-size:5.4cqw;font-weight:600;line-height:1.1;letter-spacing:-.025em}
.workshop-checklist{display:grid;gap:1.1cqw;margin:0;padding:0}
.workshop-check-row{display:flex;align-items:center;gap:2.5cqw;box-sizing:border-box;min-height:8.2cqw;padding:.8cqw 1.4cqw;border:0;border-radius:1cqw;background:#f2f5f9;font-size:4.1cqw;line-height:1.25;opacity:0;transform:translateX(-1.5cqw);transition:opacity .5s ease,transform .5s ease}
.workshop-check-row.is-visible{opacity:1;transform:translateX(0)}
.workshop-check-mark{display:grid;place-items:center;flex:0 0 auto;width:6cqw;height:6cqw;border-radius:50%;background:#fff0bb;color:#202753;font-size:4.7cqw;font-weight:700;line-height:1}
.workshop-five-content{position:relative;display:block;min-height:21cqw;padding-top:.4cqw}
.workshop-five-watermark{position:absolute;right:3.5cqw;top:-.5cqw;color:#202753;font-size:6cqw;font-weight:700;letter-spacing:0;line-height:1;pointer-events:none}
.workshop-five-words{position:relative;display:block;padding-right:18cqw;opacity:1;transform:none;transition:opacity .28s ease,transform .28s ease}
.workshop-five-words.is-changing{opacity:0;transform:translateY(.9cqw)}
.workshop-five-japanese{display:block;margin:0 0 .7cqw;color:#17649b;font-size:2.7cqw;font-weight:500;line-height:1.2;letter-spacing:.13em}
.workshop-five-title{display:block;margin:0;font-size:7.5cqw;font-weight:600;line-height:1.12;letter-spacing:-.025em}
.workshop-five-caption{display:block;max-width:100%;margin:1cqw 0 0;color:#334155;font-size:4.1cqw;font-weight:400;line-height:1.3}
.workshop-five-dots{position:absolute;right:4cqw;bottom:4.4cqw;left:4cqw;display:flex;gap:1cqw}
.workshop-five-dots span{display:block;flex:1;height:.55cqw;background:#dce5ee}
.workshop-five-dots span.is-active{background:#e6b725}
.workshop-screen-progress{position:absolute;right:4cqw;bottom:1.5cqw;left:4cqw;display:block;height:.4cqw;overflow:hidden;background:#dce5ee}
.workshop-screen-progress span{display:block;width:100%;height:100%;background:#17649b;transform:scaleX(0);transform-origin:left}
.workshop-dialog{box-sizing:border-box;width:min(1120px,calc(100% - 24px),calc((94svh - 88px) * 1.65));max-height:94vh;max-height:94svh;margin:auto;padding:12px;border:1px solid #d1d8e3;border-radius:7px;background:#f1f4f8;color:#172347;overflow:auto}
.workshop-dialog::backdrop{background:#07101dd6}
.workshop-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}
.workshop-dialog-heading{margin:0;color:#172347;font-family:Arial,Helvetica,sans-serif;font-size:1rem;font-weight:700;line-height:1.3}
.workshop-dialog-close{display:block;flex:0 0 auto;min-height:40px;margin:0;padding:7px 12px;border:1px solid #acb6c7;border-radius:4px;background:#fff;color:#172347;font:600 14px/1.3 Arial,Helvetica,sans-serif;cursor:pointer}
.workshop-dialog-close:hover{background:#e3e9f2}
.workshop-dialog-close:focus-visible{outline:3px solid #168de2;outline-offset:2px}
.workshop-dialog-slot{display:block;aspect-ratio:1.65;overflow:hidden;border:5px solid #10151d;border-radius:2px;background:#10151d}
.workshop-dialog .workshop-screen-heading{font-size:max(15px,5.4cqw)}
.workshop-dialog .workshop-check-row,.workshop-dialog .workshop-five-caption{font-size:max(12px,4.1cqw)}
.workshop-dialog .workshop-five-japanese{font-size:max(11px,2.7cqw)}
.workshop-dialog .workshop-display{height:100%}
@media(max-width:600px){
 .workshop-dialog{width:calc(100% - 16px);padding:8px}
 .workshop-dialog-header{gap:10px;margin-bottom:8px}
 .workshop-dialog-slot{aspect-ratio:1.65;border-width:3px}
 .workshop-dialog .workshop-display-inner{padding:4cqw}
 .workshop-dialog .workshop-screen-header{margin-bottom:3cqw}
 .workshop-dialog .workshop-checklist{gap:2cqw}
 .workshop-dialog .workshop-check-row{min-height:8cqw;padding:1.2cqw 1.4cqw}
 .workshop-dialog .workshop-five-title{font-size:7cqw}
 .workshop-dialog .workshop-five-content{padding-top:2cqw}
 .workshop-dialog .workshop-five-caption{margin-top:2cqw}
 .workshop-dialog .workshop-five-dots{bottom:6cqw}
 .workshop-dialog .workshop-screen-progress{bottom:3cqw}
}
@media(prefers-reduced-motion:reduce){
 .workshop-check-row,.workshop-five-words{transition:none}
}


/* Fine reflection and edge light stay above the presentation, inside the glass. */
.workshop-display::before{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:none;box-shadow:inset 0 0 0 1px #17234714,inset 0 0 5px #1723470a}

/* Presentation accents keep the original logo unobstructed. */
.workshop-screen-header::after{content:"";position:absolute;left:0;right:0;bottom:-1.5cqw;height:.85cqw;background:#efc344}
.workshop-check-mark svg{display:block;width:78%;height:78%}
.workshop-five-art{position:absolute;right:0;top:7.5cqw;display:grid;place-items:center;box-sizing:border-box;width:16cqw;height:16cqw;border:.85cqw solid #efc344;border-radius:50%;background:#f2f5f9;color:#202753}
.workshop-five-art svg{display:block;width:70%;height:70%}

/* Shared expansion arrow, also available beside the mobile screen labels. */
.workshop-mobile-controls button{display:flex;align-items:center;justify-content:space-between;gap:8px}
.workshop-mobile-controls .screen-expand-icon{position:static;flex:0 0 24px;opacity:1}