/* V1.12: lightweight home previews, deliberate 3D layout exploration. */
.home-card-media .card-addons{display:contents}
.card-enter,.compare-toggle{position:absolute;z-index:10;bottom:10px;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:6px 10px;border-radius:18px;font-size:10px;font-weight:500;box-shadow:0 1px 5px #0001}
.card-enter{right:10px;background:#fffffff5;border:1px solid #ddd;color:#181818}
.compare-toggle{left:10px;background:#fffffff0;border:1px solid #ffffffc9;color:#181818}
.compare-toggle svg{width:14px;height:14px}
.home-card-media .sequence-reset{bottom:47px!important}
.home-card-media .sequence-hint{max-width:calc(100% - 130px);font-size:9px}
.comparison-surface{position:absolute;inset:0;z-index:5;isolation:isolate;overflow:hidden;touch-action:pan-y;background:#ececec}
.comparison-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
.comparison-before{clip-path:inset(0 calc(100% - var(--compare-position,50%)) 0 0)}
.comparison-divider{position:absolute;top:0;bottom:0;left:var(--compare-position,50%);width:2px;background:white;box-shadow:0 0 3px #0002;transform:translateX(-50%);pointer-events:none}
.comparison-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;white-space:nowrap;width:33px;height:33px;border-radius:50%;background:white;color:#181818;box-shadow:0 1px 6px #0003;font-size:21px;font-weight:500}
.comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;z-index:3}
.comparison-surface:focus-within{outline:3px solid #737373;outline-offset:-3px}
body[data-page=experience] .screen{padding:0;display:flex;flex-direction:column;background:#f7f7f7;padding-bottom:18px}
.experience-top{padding:4px 13px;height:53px;min-height:53px;background:#fff}
.experience-top>div{display:block;text-align:center}
.experience-top strong{font-size:14px;display:block}.experience-top small{display:block;color:#8c8c8c;font-size:9px;margin-top:2px}
.layout-experience{display:flex;flex-direction:column;flex:1;min-height:600px}
.experience-stage{position:relative;flex:1;min-height:245px;background:#e8e8e8}
.experience-stage .viewer-tools{bottom:43px;gap:4px}.experience-stage .viewer-tools button{width:28px;height:28px}
.experience-stage .view-status{font-size:8px;right:42px;line-height:1.4}.experience-stage .view-load{font-size:9px;max-width:65%}
.experience-helper{font-size:9px;line-height:20px;padding:0 13px;color:#828282;background:#e8e8e8}
.layout-panel{position:relative;padding:15px 14px 9px;border-radius:17px 17px 0 0;background:#fff;flex-shrink:0;border-top:1px solid #ececec}
.layout-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.layout-heading h2{font-size:19px;line-height:1.2;letter-spacing:-.5px}.layout-heading .eyebrow{font-size:8px;letter-spacing:.8px;color:#939393;display:block;margin-bottom:4px}
.layout-preview-label{font-size:9px;padding:4px 7px;border-radius:7px;background:#f2f2f2;color:#7e7e7e}
.layout-options{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin;scroll-snap-type:x proximity}
.layout-option{flex:0 0 calc((100% - 16px)/3);min-width:84px;padding:3px;border:1px solid #eaeaea;border-radius:9px;background:#fff;overflow:hidden;position:relative;scroll-snap-align:start}
.layout-option.selected{border-color:#181818;box-shadow:inset 0 0 0 1px #181818}
.layout-option.selected:after{content:'';background-image:url(./ui-check.svg);background-repeat:no-repeat;background-position:center;background-size:12px 12px;position:absolute;right:7px;top:7px;display:grid;place-items:center;background-color:#181818;color:white;border-radius:50%;width:15px;height:15px;font-size:10px}
.layout-thumb{display:block;width:100%;height:69px;border-radius:5px;background:#f7f7f7;stroke:none;fill:none}
.layout-option>span{display:block;text-align:center;padding:6px 1px;font-size:10px;line-height:1.3}
.layout-description{font-size:11px;line-height:1.5;color:#181818;min-height:33px;margin:10px 0 5px}
.layout-note{font-size:9px;line-height:1.5;color:#8f8f8f;margin:0 0 10px}
.layout-actions{display:grid;gap:3px}.layout-actions .primary{min-height:42px;font-size:12px;border-radius:9px;background:#181818}
.layout-actions .secondary{min-height:28px;border:0;text-decoration:underline;background:none;font-size:10px;color:#7a7a7a;padding:6px}
.layout-actions .layout-use-home{min-height:42px;margin-top:5px;border:1px solid #dbdbdb;border-radius:9px;background:#f6f6f6;color:#181818;font-size:12px;text-decoration:none;padding:10px 12px}
.layout-actions .layout-use-home:hover{background:#eeeeee}
.layout-actions .layout-use-home:focus-visible{outline:2px solid #737373;outline-offset:2px}
@media(max-width:350px){.compare-toggle,.card-enter{font-size:9px;padding:5px 8px}.layout-panel{padding:12px}.layout-heading h2{font-size:17px}}
@media(max-height:710px){.layout-experience{min-height:555px}.experience-stage{min-height:220px}.layout-panel{padding-top:11px}.layout-thumb{height:55px}.layout-heading{margin-bottom:8px}.layout-description{margin-top:6px}}

/* Shared platform-independent SVG glyph sizing. */
.ui-symbol{display:inline-block;width:20px;height:20px;min-width:20px;flex:none;vertical-align:middle;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.7}
.chat-designer-mark .ui-symbol,.designer-mark .ui-symbol{width:20px;height:20px}