/* Shared decorative layer for the original fish deck and its website scenes. */
:is(.source-fish,.presentation-shell) .scene-grid{pointer-events:none;background-image:radial-gradient(ellipse at 12% 82%,#9ebfaf52,transparent 58%),linear-gradient(#91b6a42b 1px,transparent 1px),linear-gradient(90deg,#91b6a42b 1px,transparent 1px);background-size:auto,64px 64px,64px 64px;mask-image:radial-gradient(ellipse at 20% 70%,#000 10%,#0008 50%,transparent 86%)}
:is(.source-fish,.presentation-shell) .scene-grid::before{content:'';position:absolute;width:76%;aspect-ratio:1;left:-23%;bottom:-71%;border:1px solid #86ad9866;border-radius:50%;box-shadow:0 0 0 32px #b4ccbc33,0 0 0 64px #abc7b52b,0 0 0 96px #a2c2af20}
/* The vertical page can give the photograph and dashboard more space. */
.source-fish .cover-scene{min-height:560px;height:auto;border:1px solid #c9ddd1;border-radius:26px;background:#dcebe3;box-shadow:0 20px 50px #183e2410}
.source-fish .cover-scene>img{width:100%;height:100%;max-height:none;inset:0;object-fit:cover;object-position:65% 45%;border-radius:inherit}
.source-fish .cover-scene::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#0a292c3b,transparent 72%),linear-gradient(0deg,#082d2e52,transparent 75%);border-radius:inherit}
.source-fish .cover-scene .scene-grid{z-index:1;background-image:linear-gradient(#d9fff016 1px,transparent 1px),linear-gradient(90deg,#d9fff016 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(35deg,#0008,transparent 75%)}
.source-fish .cover-console{z-index:2;top:auto;bottom:38px;left:38px;right:auto;width:min(580px,calc(100% - 76px));transform:none;border:1px solid #ffffffbd;border-radius:17px;background:#fbfdf9;box-shadow:0 22px 60px #08241d38,0 2px 5px #08241d15}
.source-fish .cover-console .browser-bar{height:34px;padding:0 16px;background:#eff5ef;border-bottom-color:#dce7dc;gap:5px}
.source-fish .cover-console .browser-bar i{width:5px;height:5px;background:#adbfaf}
.source-fish .cover-console .browser-bar span{font-size:10px;color:#637e6a}
.source-fish .cover-console .console-content{padding:23px 24px 20px}
.source-fish .cover-console .console-heading{margin-bottom:18px;gap:12px}
.source-fish .cover-console .console-heading h3{font-size:25px;line-height:1.2;letter-spacing:-.045em;color:#244b3d}
.source-fish .cover-console .console-heading>span{font-size:10px;background:#e7f0e6;padding:6px 9px;border-radius:999px;color:#648168}
.source-fish .cover-console .metric-row{gap:10px}
.source-fish .cover-console .metric{padding:15px;background:#edf3eb;border:1px solid #e2ebdf;border-radius:11px}
.source-fish .cover-console .metric strong{font-size:30px;line-height:1.2;color:#224d3d}
.source-fish .cover-console .metric small{font-size:10px;line-height:1.6;margin-top:7px;color:#6d8270}
.source-fish .cover-console .mini-bars{height:78px;gap:8px;margin-top:3px;padding-top:17px;border-bottom:1px solid #dbe7d8}
.source-fish .cover-console .mini-bars i{border-radius:5px 5px 0 0;background:linear-gradient(#b3ceb3,#95b79c)}
.source-fish .cover-console .mini-bars i:nth-child(3n){background:linear-gradient(#5b9975,#387357)}
.source-fish .cover-scene .floating-note{z-index:2;right:38px;bottom:55px;max-width:270px;padding:18px 20px;transform:none;background:#103b31eb;border:1px solid #b7dac251;border-radius:16px;box-shadow:0 12px 30px #09251d30;backdrop-filter:blur(14px);font-size:13px;line-height:1.65}
.source-fish .cover-scene .floating-note small{font-size:11px;margin-top:5px;color:#bed4c2}
.source-fish .cover-scene .scene-caption{z-index:2;top:25px;left:30px;right:auto;bottom:auto;max-width:calc(100% - 60px);padding:9px 13px;border:1px solid #ffffff38;border-radius:999px;background:#102c3266;backdrop-filter:blur(12px);color:#eff8f0;font-size:11px;line-height:1.5}
@media(max-width:900px){
 .source-fish .cover-scene{min-height:0;padding:230px 16px 18px;display:flex;flex-direction:column;gap:15px}
 .source-fish .cover-scene>img{height:310px;border-radius:24px 24px 0 0;object-position:center}
 .source-fish .cover-scene::after{background:linear-gradient(0deg,#dcebe3 38%,#dcebe300 78%)}
 .source-fish .cover-console{position:relative;inset:auto;width:100%;margin:0;flex:none}
 .source-fish .cover-scene .floating-note{position:relative;inset:auto;width:100%;max-width:none;margin:0;padding:15px 18px;background:#224e3f;box-shadow:none}
 .source-fish .cover-scene .scene-caption{top:18px;left:18px;max-width:calc(100% - 36px);font-size:10px}
}
@media(max-width:500px){
 .source-fish .cover-scene{padding:190px 12px 14px;gap:12px;border-radius:20px}
 .source-fish .cover-scene>img{height:255px;border-radius:18px 18px 0 0}
 .source-fish .cover-scene .scene-caption{top:13px;left:13px;max-width:calc(100% - 26px);font-size:9px;padding:8px 10px}
 .source-fish .cover-console .browser-bar{height:29px;padding:0 11px}
 .source-fish .cover-console .browser-bar span{font-size:8px}
 .source-fish .cover-console .console-content{padding:17px 12px 14px}
 .source-fish .cover-console .console-heading{gap:7px;margin-bottom:14px}
 .source-fish .cover-console .console-heading h3{font-size:19px}
 .source-fish .cover-console .console-heading>span{font-size:8px;padding:5px 7px}
 .source-fish .cover-console .metric-row{gap:6px}
 .source-fish .cover-console .metric{padding:12px 8px}
 .source-fish .cover-console .metric strong{font-size:22px}
 .source-fish .cover-console .metric small{font-size:9px;margin-top:6px}
 .source-fish .cover-console .mini-bars{gap:5px;height:63px}
 .source-fish .cover-scene .floating-note{font-size:12px}
}