/* Product stories: actual public photo assets and explicitly labelled demo data. */
.project-grid.filtered #project-diary{grid-column:1/-1}
.diary-art.real-preview{height:500px}
.real-phone{container-type:inline-size}
.diary-tour{position:absolute;inset:0;pointer-events:none}
.tour-screen{position:absolute;inset:0;background:linear-gradient(160deg,#f7faff,#eaf1ff);color:#12213c;opacity:0;padding:3cqw 5cqw;font-family:Arial,sans-serif;overflow:hidden}
.tour-schedule{animation:tour-schedule 18s ease-in-out infinite}
.tour-materials{animation:tour-materials 18s ease-in-out infinite}
.tour-status{display:flex;justify-content:space-between;font-size:4.3cqw;font-weight:600;letter-spacing:.1cqw;padding:0 1cqw}
.tour-status span{font-size:3.6cqw;letter-spacing:1cqw}
.tour-app-bar{display:flex;align-items:center;gap:3cqw;margin:6cqw 0 8cqw;font-size:4.1cqw;color:#74849f}
.tour-app-logo{display:grid;place-items:center;width:12cqw;height:12cqw;border-radius:4cqw;background:#1769ff;color:#fff;font-size:7cqw;font-weight:bold}
.tour-avatar{margin-left:auto;display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;background:#dbe8ff;color:#2165c4;font-weight:600}
.tour-kicker{display:block;font-size:3.6cqw;letter-spacing:.5cqw;color:#6780a8}
.tour-screen h4{font-size:10cqw;line-height:1.15;letter-spacing:-.5cqw;margin:2cqw 0 3cqw;font-weight:650}
.tour-date{font-size:4.3cqw;color:#7a8aa4;margin:0 0 7cqw}
.tour-week{display:flex;justify-content:space-between;margin:0 0 7cqw;gap:2cqw}
.tour-week>span{display:flex;flex-direction:column;align-items:center;gap:2cqw;font-size:3.6cqw;padding:3cqw 3.5cqw;border-radius:4cqw;color:#8390a7}
.tour-week b{font-size:6cqw;color:#374a68}.tour-week .tour-today{background:#1769ff;color:#b4d1ff}.tour-today b{color:#fff}
.tour-lesson{display:flex;gap:3cqw;align-items:center;padding:5cqw 3cqw;background:#e1edff;border:1px solid #cddfff;border-radius:4cqw;margin-bottom:3cqw;font-size:4.2cqw}
.tour-lesson>span{font-size:4cqw;color:#6b83a5}.tour-lesson div{flex:1}.tour-lesson b{display:block;font-size:5.2cqw}.tour-lesson small{display:block;color:#8493aa;font-size:3.8cqw;margin-top:1cqw}.tour-lesson i{width:1.5cqw;height:8cqw;background:#5594ff;border-radius:2cqw}
.tour-purple{background:#eee7fb;border-color:#e3d8f5}.tour-purple i{background:#b195d9}
.tour-summary{background:#fff;border:1px solid #e1e9f5;border-radius:4cqw;padding:5cqw;margin-top:7cqw}
.tour-summary>span{font-size:3.7cqw;color:#7485a0;display:block}.tour-summary b{font-size:5cqw;display:block;margin:2cqw 0}.tour-summary small{font-size:3.8cqw;color:#8391a7}
.tour-progress{height:1.7cqw;border-radius:2cqw;background:#e8effb;margin-top:4cqw;overflow:hidden}.tour-progress i{display:block;width:66%;height:100%;background:#5d99ff;transform-origin:left;animation:tour-progress 18s ease-in-out infinite}
.tour-bottom-nav{position:absolute;bottom:4cqw;left:5cqw;right:5cqw;display:flex;justify-content:space-around;border-top:1px solid #d9e5f5;padding-top:4cqw;background:#f0f5ff}
.tour-bottom-nav span{display:flex;flex-direction:column;align-items:center;color:#8b9cb8;font-size:8cqw;line-height:1.2;gap:2cqw}.tour-bottom-nav small{font-size:3.5cqw}.tour-bottom-nav .active{color:#1769ff}
.tour-book{position:relative;display:flex;align-items:center;gap:7cqw;background:linear-gradient(130deg,#194fb9,#3b8bf4);border-radius:5cqw;min-height:51cqw;padding:6cqw;color:white;box-shadow:0 4cqw 9cqw #1653c326;margin:8cqw 0}
.tour-book>span{font:italic 20cqw Georgia,serif;color:#b6d9ff}.tour-book small{font-size:3cqw;letter-spacing:1cqw}.tour-book strong{display:block;font-size:9cqw;line-height:1.08;margin:3cqw 0;letter-spacing:-.4cqw}.tour-book p{font-size:4cqw;color:#b6d9ff}
.tour-file{display:flex;gap:3cqw;align-items:center;padding:4cqw;border:1px solid #e1e9f8;border-radius:4cqw;margin-bottom:4cqw;background:#fff}.tour-file>span{width:12cqw;height:12cqw;border-radius:3cqw;background:#e7effe;color:#4b7bc3;display:grid;place-items:center;font-size:4cqw}.tour-file b{display:block;font-size:5cqw}.tour-file small{display:block;font-size:3.8cqw;color:#8493aa}.tour-file em{font-style:normal;font-size:6cqw;color:#6197e4;margin-left:auto}
.tour-tap{position:absolute;width:12cqw;height:12cqw;border:1.2cqw solid #70aeff;border-radius:50%;top:58%;left:44%;box-shadow:0 0 0 4cqw #76b8ff33;opacity:0;animation:tour-tap 18s ease-in-out infinite;pointer-events:none}
.tour-legend{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.5px;color:#6f8698;line-height:1.5;max-width:none}
.tour-legend span{display:flex;gap:12px;animation:tour-legend-login 18s ease-in-out infinite}.tour-legend b{font-weight:500}.tour-legend span:nth-child(2){animation-name:tour-legend-schedule}.tour-legend span:nth-child(3){animation-name:tour-legend-materials}
.diary-art .mockup-note{max-width:240px}

/* A new photographic composition: four distinct images from the live portfolio. */
.photo-art.real-preview.photo-v2,.fuel-art.fuel-v2{height:450px}
.photo-v2{background:linear-gradient(135deg,#c5b1a4,#a98b80)!important}
.photo-art.real-preview .browser-preview.photo-browser{height:365px;top:54px;left:6%;right:6%;background:#f7f1e9}
.photo-site-preview{padding:12px 16px;color:#49342e}
.photo-site-brand{font:15px Georgia,serif;display:flex;align-items:center;justify-content:space-between;gap:10px}.photo-site-brand>span{font:7px Arial,sans-serif;letter-spacing:1px;color:#95786b}
.photo-collection-title{font:27px/1.02 Georgia,serif;letter-spacing:-.5px;margin:12px 0}.photo-collection-title i{color:#a76165}
.photo-contact-sheet{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:repeat(3,1fr);height:180px;gap:5px}
.photo-contact-sheet figure{position:relative;margin:0;overflow:hidden;border-radius:4px;background:#bca693;min-height:0}
.photo-contact-sheet figure:first-child{grid-row:1/4}
.photo-contact-sheet img{width:100%;height:100%;object-fit:cover;animation:photo-life 15s ease-in-out infinite alternate}
.photo-contact-sheet figure:nth-child(2) img{object-position:50% 41%;animation-delay:-7s}.photo-contact-sheet figure:nth-child(3) img{object-position:50% 40%;animation-delay:-3s}.photo-contact-sheet figure:nth-child(4) img{object-position:50% 52%;animation-delay:-10s}
.photo-contact-sheet figure:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#281a1970);pointer-events:none}
.photo-contact-sheet figcaption{position:absolute;left:9px;bottom:6px;color:#fff;font:9px/1.4 Arial,sans-serif;z-index:1;text-shadow:0 1px 8px #0006}
.photo-preview-footer{display:flex;justify-content:space-between;gap:10px;font-size:7px;color:#9d8073;letter-spacing:.6px;margin-top:10px}
.photo-v2 .mockup-note{max-width:90%;color:#382e27;font-size:9px}

/* FuelWatch: a navigable-looking map and an editorial notification card. */
.fuel-v2{background:radial-gradient(ellipse at 20% 0%,#23464c,#11282e 65%);color:#e1f2ec}
.fuel-v2 .art-label{color:#a5c3bb}
.fuel-brand-row{position:absolute;left:7%;right:7%;top:57px;display:flex;align-items:center;gap:12px;z-index:2}
.fuel-brand-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;background:#d2eec7;color:#24463b;box-shadow:0 5px 20px #0c1e2420}.fuel-brand-icon svg{width:26px;height:26px}
.fuel-brand-row strong{display:block;font-size:22px;line-height:1.15;letter-spacing:-.5px}.fuel-brand-row small{display:block;font-size:10px;color:#89aaa3;margin-top:4px}
.fuel-signal{margin-left:auto;display:flex;gap:3px;align-items:end;height:18px}.fuel-signal i{width:3px;height:7px;background:#aedc9c;border-radius:3px;animation:station-signal 2.4s ease-in-out infinite}.fuel-signal i:nth-child(2){height:12px;animation-delay:.3s}.fuel-signal i:nth-child(3){height:18px;animation-delay:.6s}
.fuel-map-stage{position:absolute;inset:103px 0 auto;height:220px;overflow:hidden;mask-image:linear-gradient(#000 80%,transparent)}
.fuel-map-stage svg{width:100%;height:100%}.fuel-road{fill:none;stroke:#8cae9f;stroke-width:8;stroke-linecap:round;opacity:.15}.fuel-main-route{fill:none;stroke:#d2ed95;stroke-width:2;stroke-dasharray:6 8;animation:fuel-route-flow 3s linear infinite;opacity:.8}
.fuel-station-ring{fill:#d7efa909;stroke:#d1eaa7;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:station-ring 4s ease-out infinite}.fuel-station-ring.ring-two{animation-delay:-2s}.fuel-station-dot{fill:#e8f7bb}.fuel-station-muted{fill:#7e9e90}
.station-chip{position:absolute;padding:5px 8px;border:1px solid #bdd09b35;border-radius:6px;background:#243f3fe8;box-shadow:0 8px 20px #0002;font-size:8px;letter-spacing:.3px;animation:station-chip-float 6s ease-in-out infinite}.station-chip b{color:#e9d58d;font-size:9px;margin-left:5px}.station-one{left:44%;top:36px}.station-two{left:10%;top:135px;animation-delay:-3s}
.fuel-map-coordinate{position:absolute;right:7%;top:17px;color:#72958a;font-size:6px;letter-spacing:1px}
.fuel-v2 .fuel-message.fuel-live-card{display:block;top:auto;left:7%;right:7%;bottom:34px;padding:15px 17px;border-radius:14px;background:linear-gradient(135deg,#2b4b4e,#233f43);border-color:#a5cfbc38;box-shadow:0 17px 40px #051a2250;animation:fuel-card-update 11s ease-in-out infinite;z-index:3}
.fuel-live-head{display:flex;align-items:center;gap:9px;font-size:12px;color:#d4e6df}.fuel-tg-icon{display:grid;place-items:center;width:25px;height:25px;background:#d1e8d8;color:#26483e;border-radius:50%;font-size:14px;transform:rotate(-20deg)}
.fuel-live-head>span:nth-child(2){display:flex;align-items:center;gap:8px}.fuel-live-head small{font-size:8px;color:#83a49b}.fuel-found-dot{width:5px;height:5px;background:#c9e896;border-radius:50%;margin-left:auto;animation:signal-pulse 2.5s ease-in-out infinite}
.fuel-live-body{padding-top:11px}.fuel-live-body .fuel-pill{font-size:7px;letter-spacing:1px;color:#cadfa6}.fuel-live-body strong{display:block;font-size:25px;font-weight:450;line-height:1.12;letter-spacing:-.6px;margin:7px 0 12px}
.fuel-facts{display:flex;gap:6px;border-top:1px solid #9bbdae2b;padding-top:10px}.fuel-facts span{font-size:9px;padding:3px 7px;border-radius:5px;background:#ffffff08;color:#adc8bc}.fuel-facts span:last-child{margin-left:auto;color:#dbecb7}
.fuel-v2 .mockup-note{font-size:9px;left:7%;bottom:10px;color:#88aaa0}

/* Clinic: a real product flow, shown with deliberately non-personal demo content. */
.clinic-v2{height:450px;background:linear-gradient(135deg,#dbe5dc,#b7cdc1);color:#264a3d}
.clinic-halo{position:absolute;width:360px;height:360px;border-radius:50%;right:-90px;top:-110px;border:1px solid #ffffff70;box-shadow:0 0 0 35px #ffffff15,0 0 0 70px #ffffff08;animation:clinic-halo 16s ease-in-out infinite alternate}
.clinic-platform{position:absolute;left:7%;right:7%;top:65px;height:298px;background:#f4f8f3;border:1px solid #ffffffa0;border-radius:12px;overflow:hidden;box-shadow:0 18px 35px #36574725;transform:rotate(-3deg);animation:clinic-platform 10s ease-in-out infinite}
.clinic-topbar{height:43px;display:flex;align-items:center;gap:9px;padding:0 14px;border-bottom:1px solid #dde7dd;background:#fff9}.clinic-brand-cross{display:grid;place-items:center;width:25px;height:25px;background:#365d4b;color:#e5f1df;border-radius:7px;font-size:24px;line-height:1}.clinic-topbar>b{font-size:13px;letter-spacing:-.2px}.clinic-topbar>b>span{font-weight:400;margin-left:5px;font-size:9px;color:#859b8b}.clinic-topbar-dot{margin-left:auto;width:6px;height:6px;background:#9bb7a1;border-radius:50%;animation:signal-pulse 3s ease-in-out infinite}
.clinic-dashboard{display:flex;height:calc(100% - 43px)}.clinic-side-nav{width:43px;flex-shrink:0;display:flex;align-items:center;flex-direction:column;gap:12px;padding-top:15px;background:#e8efe6;border-right:1px solid #dde6d9}.clinic-side-nav span{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;font-size:14px;color:#8ba18e}.clinic-side-nav .active{background:#fff;color:#476b4f;box-shadow:0 3px 8px #42664a0b}
.clinic-workspace{flex:1;min-width:0;padding:15px 12px}.clinic-workspace-title{display:flex;align-items:center;justify-content:space-between;font-size:13px}.clinic-workspace-title>span{font-size:7px;padding:2px 5px;background:#e1ebd9;border-radius:4px;color:#78936e}
.clinic-mini-week{display:flex;justify-content:space-between;color:#96a68f;font-size:7px;margin:12px 0 9px}.clinic-mini-week span{padding:4px 7px;border-radius:4px}.clinic-mini-week .active{background:#deebd7;color:#527047}
.clinic-slot{display:flex;gap:9px;align-items:center;padding:8px 9px;border-top:1px solid #e6ece2;font-size:8px;color:#8a9a84}.clinic-slot i{height:4px;width:4px;background:#b1c3a4;border-radius:50%}.clinic-slot b{font-weight:400;font-size:9px;color:#667d5d}.clinic-slot em{font-style:normal;margin-left:auto;color:#486e3a}.clinic-slot.selected{background:#e1eed9;border-radius:5px;animation:clinic-appointment 9s ease-in-out infinite}
.clinic-source-chart{display:flex;gap:12px;align-items:end;justify-content:space-between;margin-top:14px;padding-top:11px;border-top:1px solid #e1e8dd}.clinic-source-chart>div>span{font-size:8px;color:#708463;display:block}.clinic-source-chart small{font-size:6px;color:#9aa990;display:block;margin-top:3px}.clinic-bars{display:flex;gap:4px;align-items:end;height:31px}.clinic-bars i{display:block;width:6px;height:23px;background:#abc698;border-radius:2px 2px 0 0;transform-origin:bottom;animation:clinic-chart 9s ease-in-out infinite}.clinic-bars i:nth-child(2n){height:16px;animation-delay:.3s}.clinic-bars i:nth-child(3n){height:29px;animation-delay:.6s}.clinic-bars i:last-child{height:31px;background:#6e9658;animation-delay:.9s}
.clinic-confirm{position:absolute;left:25%;right:4%;bottom:38px;display:flex;align-items:center;gap:10px;padding:14px 13px;background:#2f5846;border:1px solid #6a8d74;border-radius:12px;box-shadow:0 10px 25px #244e3a30;color:#e8f3df;animation:clinic-confirm 9s ease-in-out infinite}
.clinic-confirm-icon{display:grid;place-items:center;width:29px;height:29px;background:#d4e7be;border-radius:50%;color:#42633a;flex-shrink:0}.clinic-confirm-icon svg{width:20px;height:20px}.clinic-confirm b{display:block;font-size:11px;font-weight:500}.clinic-confirm small{display:block;font-size:8px;color:#a9c6ad;margin-top:3px}
.clinic-v2 .mockup-note{font-size:9px;left:7%;bottom:12px;color:#4d6c56}
.infra-art{height:450px}.infra-diagram{top:95px}

@keyframes tour-schedule{0%,18%,58%,100%{opacity:0;transform:translateX(8%)}25%,51%{opacity:1;transform:none}}
@keyframes tour-materials{0%,54%,94%,100%{opacity:0;transform:translateX(8%)}62%,87%{opacity:1;transform:none}}
@keyframes tour-tap{0%,12%,24%,100%{opacity:0;transform:scale(.7)}17%,20%{opacity:.8;transform:scale(1.2)}}
@keyframes tour-progress{0%,27%{transform:scaleX(.1)}47%,100%{transform:scaleX(1)}}
@keyframes tour-legend-login{0%,18%,96%,100%{color:#185aa4;transform:translateX(3px)}25%,89%{color:#7b90a0;transform:none}}
@keyframes tour-legend-schedule{0%,18%,58%,100%{color:#7b90a0;transform:none}25%,51%{color:#185aa4;transform:translateX(3px)}}
@keyframes tour-legend-materials{0%,54%,94%,100%{color:#7b90a0;transform:none}62%,87%{color:#185aa4;transform:translateX(3px)}}
@keyframes photo-life{to{transform:scale(1.12) translateY(-2%)}}
@keyframes station-signal{50%{opacity:.25;transform:scaleY(.65)}}
@keyframes fuel-route-flow{to{stroke-dashoffset:-56}}
@keyframes station-ring{0%{opacity:.8;transform:scale(.55)}90%,100%{opacity:0;transform:scale(1.5)}}
@keyframes station-chip-float{50%{transform:translateY(-5px)}}
@keyframes fuel-card-update{0%,100%{transform:translateY(6px) rotate(-1deg)}45%{transform:translateY(-5px) rotate(1deg)}}
@keyframes clinic-halo{to{transform:translate(-20px,15px) scale(1.1)}}
@keyframes clinic-platform{50%{transform:translateY(-6px) rotate(0deg)}}
@keyframes clinic-appointment{0%,25%{background:#f0f4ec}45%,85%{background:#d9eacb;box-shadow:inset 3px 0 #83a568}}
@keyframes clinic-chart{0%,20%{transform:scaleY(.2)}65%,95%{transform:scaleY(1)}}
@keyframes clinic-confirm{0%,35%{opacity:0;transform:translateY(15px) scale(.97)}48%,91%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}

@container(max-width:600px){
 .diary-art.real-preview{height:650px}.diary-preview-copy{top:64px;left:7%;width:86%}.diary-preview-copy strong{font-size:35px;line-height:1.12;margin:16px 0}.diary-preview-copy p{font-size:13px;max-width:280px}.real-phone{width:180px;top:240px;right:7%;border-width:6px;border-radius:26px}.tour-legend{position:absolute;top:250px;left:0;font-size:10px;gap:16px;margin:0;max-width:100px}.tour-legend span{gap:7px}.diary-art .mockup-note{max-width:104px;font-size:9px;line-height:1.5}.diary-signals{bottom:50px}.preview-orbit{width:320px;height:320px;right:-70px;top:265px}
 .photo-site-preview{padding-inline:12px}.photo-collection-title{font-size:25px}.photo-contact-sheet{height:180px}.photo-site-brand{font-size:13px}.photo-site-brand>span{font-size:6px}.photo-contact-sheet figcaption{font-size:8px;left:7px}.photo-preview-footer{font-size:6px}
 .fuel-brand-row strong{font-size:21px}.fuel-map-coordinate{font-size:5px}.fuel-live-body strong{font-size:25px}.fuel-v2 .fuel-message.fuel-live-card{padding:15px}.fuel-facts span{font-size:8px;padding:3px 6px}.clinic-confirm{left:17%;padding:13px 11px}.clinic-confirm b{font-size:10px}.clinic-confirm small{font-size:7px}.clinic-source-chart>div>span{font-size:7px}.clinic-bars{gap:3px}.clinic-bars i{width:5px}
}
@container(max-width:300px){.diary-preview-copy strong{font-size:31px}.diary-preview-copy p{max-width:240px}.real-phone{width:170px;right:5%;top:244px}.tour-legend{font-size:9px;max-width:75px;gap:17px;top:253px}.tour-legend span{gap:4px}.diary-art .mockup-note{max-width:80px;font-size:8px}.clinic-confirm b{font-size:9px}.clinic-confirm small{font-size:6px}.clinic-confirm{left:13%;gap:7px}.clinic-bars{gap:2px}.clinic-bars i{width:4px}.photo-site-brand>span{display:none}}
@media(max-width:640px){.photo-art.real-preview.photo-v2,.fuel-art.fuel-v2,.clinic-v2,.infra-art{height:440px}.photo-art.real-preview .browser-preview.photo-browser{height:355px;top:53px}.photo-contact-sheet{height:178px}.clinic-platform{top:63px;height:290px}.clinic-confirm{bottom:36px}.photo-v2 .mockup-note,.clinic-v2 .mockup-note{font-size:8px}.fuel-v2 .mockup-note{font-size:8px}.fuel-brand-row{top:56px}.fuel-v2 .fuel-message.fuel-live-card{bottom:33px}}
.motion-paused .tour-schedule{opacity:1!important;transform:none!important;animation:none!important}.motion-paused .tour-materials,.motion-paused .tour-tap{display:none}.motion-paused .clinic-confirm{opacity:1;transform:none;animation:none!important}
@media(prefers-reduced-motion:reduce){.tour-schedule{opacity:1!important;transform:none!important}.tour-materials,.tour-tap{display:none}.clinic-confirm{opacity:1;transform:none}*,*:before,*:after{animation:none!important;transition:none!important}}

.tour-screen{font-size:4cqw;line-height:1.4}
.tour-summary{padding:3cqw;margin-top:4cqw}
.tour-summary>span{font-size:3.4cqw}.tour-summary b{font-size:4.5cqw;margin:1cqw 0}.tour-summary small{font-size:3.6cqw}.tour-progress{height:1.2cqw;margin-top:2cqw}

.project-grid.filtered #project-diary .project-art{height:var(--diary-scene-height,500px)}
@container(max-width:600px){.diary-art.real-preview{--diary-scene-height:650px}}