.icon-lab-hero{display:grid;grid-template-columns:1fr .55fr;gap:36px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(236,230,255,.72))}.icon-lab-hero h1{max-width:8ch}.icon-note{max-width:42ch;padding-left:12px;border-left:3px solid var(--purple);font-size:.82rem}.icon-lab-orbit{position:relative;min-height:230px;border:1px dashed rgba(107,66,168,.5);border-radius:50%;background:radial-gradient(circle,rgba(107,66,168,.18),transparent 63%);transform:rotate(-7deg)}.icon-lab-orbit::before,.icon-lab-orbit::after{content:"";position:absolute;inset:15%;border:1px solid rgba(107,66,168,.25);border-radius:50%;transform:rotate(45deg) scaleX(.68)}.icon-lab-orbit::after{inset:30%;transform:rotate(-25deg) scaleX(.78)}.icon-lab-orbit span{position:absolute;padding:10px 13px;border-radius:999px;color:#fff;background:var(--blue);font-size:.72rem;font-weight:900;letter-spacing:.1em}.icon-lab-orbit span:first-child{left:34%;top:-5%}.icon-lab-orbit span:nth-child(2){right:-3%;top:44%;background:var(--purple)}.icon-lab-orbit i{position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 8px rgba(107,66,168,.16),0 0 30px rgba(107,66,168,.7);transform:translate(-50%,-50%);animation:lab-pulse 3.6s ease-in-out infinite}
.icon-option-section{overflow:hidden}.icon-option-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.icon-option-head h2{margin:5px 0 8px;font-size:clamp(1.8rem,4vw,3rem)}.icon-option-head p{max-width:55ch;margin-bottom:0}.option-badge{display:inline-grid;place-items:center;width:33px;height:33px;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));font-weight:900}.ai-badge{background:linear-gradient(135deg,var(--orange),#cd5f7e)}.icon-choice-status{min-height:1.2em;margin-top:8px!important;color:var(--blue);font-size:.75rem!important;text-align:right}.icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.icon-card{position:relative;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.7);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.icon-card:hover{transform:translateY(-5px);border-color:rgba(8,126,164,.3);box-shadow:0 18px 32px rgba(15,23,42,.11)}.icon-card h3{margin:12px 2px 4px;font-size:.86rem;line-height:1.16}.icon-card .category-label{display:block;margin:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.62rem}.icon-tile{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#edfaff,#f5efff)}.script-tile .feature-glyph{width:64px;height:64px}.script-tile .feature-glyph svg{width:37px;height:37px}.ai-tile{background:linear-gradient(145deg,#eefaff,#f6efff)}.ai-tile img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transform:scale(1.04);transition:transform .35s ease}.icon-card:hover .ai-tile img{transform:scale(1.1) rotate(2deg)}.icon-card[data-spin] .ai-tile{perspective:700px}.icon-card[data-spin]:hover .ai-tile{animation:icon-tile-spin-3d 900ms cubic-bezier(.3,.7,.3,1)}@keyframes icon-tile-spin-3d{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}.icon-rating{display:flex;gap:1px;margin:9px 0 1px}.icon-rating button{width:23px;height:23px;padding:0;border:0;border-radius:5px;color:#b9c1cc;background:transparent;font-size:1rem;line-height:1}.icon-rating button:hover,.icon-rating button:focus-visible,.icon-rating button.is-rated{color:#e39a35;background:#fff5df;outline:0}.icon-next-step{display:grid;justify-items:start;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(226,248,255,.68))}.icon-next-step h2{max-width:12ch;margin-bottom:10px}.icon-next-step p{max-width:50ch}
@media(max-width:900px){.icon-lab-hero{grid-template-columns:1fr}.icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.icon-option-head{align-items:flex-start;flex-direction:column}.icon-choice-status{text-align:left}.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.icon-card{padding:9px}.icon-card h3{font-size:.78rem}.icon-rating button{width:20px;height:20px;font-size:.86rem}.icon-lab-orbit{min-height:190px}}@media(prefers-reduced-motion:reduce){.icon-lab-orbit i,.ai-tile img,.icon-card[data-spin]:hover .ai-tile{animation:none!important;transition:none!important}}

/* Logo camera-hover effect: shutter click + comic flash + page glitch */
.camera-flash-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: #fff; }
.camera-flash-overlay.is-active { animation: cameraFlashPage 320ms ease-out; }
@keyframes cameraFlashPage {
  0%   { opacity: 0;    filter: blur(0px) saturate(1) hue-rotate(0deg); }
  8%   { opacity: .55;  filter: blur(2px) saturate(1.5) hue-rotate(6deg); }
  20%  { opacity: 1;    filter: blur(7px) saturate(2.2) hue-rotate(-10deg); }
  38%  { opacity: .8;   filter: blur(3px) saturate(1.6) hue-rotate(8deg); }
  60%  { opacity: .35;  filter: blur(1px) saturate(1.1); }
  100% { opacity: 0;    filter: blur(0px) saturate(1); }
}
.brand-mark, .footer img { cursor: pointer; }
.logo-comic-flash { position: absolute; inset: -60%; z-index: 5; pointer-events: none; opacity: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,214,10,.55) 35%, transparent 68%); }
.logo-comic-flash::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0deg 4deg, transparent 4deg 18deg); mix-blend-mode: screen; }
.logo-comic-flash.is-active { animation: logoComicFlash 340ms ease-out; }
@keyframes logoComicFlash {
  0%   { opacity: 0;   transform: scale(.3) rotate(0deg); }
  22%  { opacity: 1;   transform: scale(1.05) rotate(8deg); }
  100% { opacity: 0;   transform: scale(1.7) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .camera-flash-overlay, .logo-comic-flash { animation: none !important; } }