.laser-product { --laser-red:#ff304b; --laser-blue:#007aff; --laser-green:#238636; --laser-graphite:#53535d; max-width:1180px; }
.laser-product :target { scroll-margin-top:16px; }
.laser-hero { display:grid; gap:34px; padding:12px 0 48px; }
.laser-hero-copy { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:50px; align-items:center; }
.laser-hero-heading, .laser-hero-message { min-width:0; }
.laser-brand { display:flex; align-items:center; gap:13px; margin-bottom:26px; }
.laser-brand img { width:54px; flex-shrink:0; filter:drop-shadow(0 6px 14px rgb(0 0 0 / 8%)); }
.laser-brand p { margin:0; font-size:14.5px; font-weight:600; letter-spacing:-.2px; }
.laser-brand span { display:block; margin-top:2px; color:var(--muted); font-size:11px; font-weight:400; letter-spacing:0; }
.laser-hero h1 { margin:0 0 20px; color:var(--green); font:clamp(40px,4.5vw,64px)/1.08 var(--serif); letter-spacing:-1.9px; }
.laser-hero h1 span { position:relative; white-space:nowrap; }
.laser-hero h1 span::after { position:absolute; right:-3px; bottom:-4px; left:-2px; height:4px; border-radius:50%; background:var(--laser-red); clip-path:polygon(0 65%,12% 28%,38% 8%,62% 35%,88% 20%,100% 48%,88% 72%,58% 94%,29% 60%,11% 80%); transform:rotate(-2.5deg); content:""; }
.laser-intro { max-width:520px; margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.8; }
.laser-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.laser-action { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:11px 18px; border:1px solid var(--green); border-radius:8px; background:var(--green); color:#fff; text-decoration:none; font-size:12.5px; font-weight:600; transition:background .15s, border-color .15s, transform .15s; }
.laser-action:hover { background:#1d4535; border-color:#1d4535; color:#fff; transform:translateY(-1px); }
.laser-action .icon { width:16px; height:16px; }
.laser-showcase { min-width:0; width:100%; margin:0; scroll-margin-top:16px; }
.laser-showcase figcaption { display:block; padding:15px 2px 0; color:var(--muted); font-size:12px; line-height:1.6; }
.laser-product strong { color:var(--ink); font-weight:600; }
.laser-product kbd { display:inline-block; margin:0; padding:3px 7px; border:1px solid #cfd5cb; border-bottom-width:2px; border-radius:5px; background:#ffffff; color:var(--ink); font:600 10px/1.35 var(--mono); }
.laser-eyebrow { margin:0 0 10px; color:var(--green); font:600 10.5px/1.4 var(--mono); letter-spacing:1.1px; text-transform:uppercase; }
.laser-product h2 { margin:0 0 18px; font:34px/1.18 var(--serif); letter-spacing:-.9px; }

.laser-setup { margin:8px 0 48px; padding:clamp(24px,4vw,44px); border:1px solid #d5dece; border-radius:18px; background:linear-gradient(135deg,#f1f5e9,#f8f9f3 70%); scroll-margin-top:16px; }
.laser-setup-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px 32px; margin-bottom:30px; }
.laser-setup-heading > div { max-width:640px; }
.laser-setup-heading h2 { margin:0 0 16px; color:var(--green); font:clamp(34px,3.6vw,48px)/1.12 var(--serif); letter-spacing:-1.2px; }
.laser-setup-heading h2 span { position:relative; display:inline-block; }
.laser-setup-heading h2 span::after { position:absolute; inset:auto -.02em -.06em; height:.08em; background:var(--laser-red); clip-path:polygon(0 60%,14% 22%,50% 0,81% 15%,100% 60%,85% 90%,42% 100%,12% 80%); content:""; transform:rotate(-2deg); }
.laser-setup-intro { max-width:460px; margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
.laser-setup-heading > a { flex-shrink:0; font-size:11.5px; }
.laser-setup-browser { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-bottom:20px; font-size:12px; color:var(--muted); }
.laser-setup-select { position:relative; }
.laser-setup-select select { appearance:none; min-height:44px; max-width:100%; padding:10px 38px 10px 14px; border:1px solid #cbd8c3; border-radius:8px; background:var(--paper); color:var(--green); font:600 12px var(--sans); cursor:pointer; }
.laser-setup-select > .icon { position:absolute; right:12px; top:15px; width:14px; height:14px; pointer-events:none; color:var(--green); }
.laser-setup-select select:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.laser-setup-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0; padding:24px 0 28px; border-block:1px solid #d5dece; list-style:none; }
.laser-setup-steps li { min-width:0; }
.laser-setup-number { display:block; margin-bottom:15px; color:#6b8865; font:11px/1 var(--mono); letter-spacing:1px; }
.laser-setup-steps h3 { margin:0 0 12px; color:var(--green); font:24px/1.2 var(--serif); letter-spacing:-.5px; }
.laser-setup-steps p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.85; }
.laser-setup-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding-top:16px; }
.laser-setup-shortcuts { display:flex; flex-wrap:wrap; gap:12px 24px; }
.laser-setup-shortcuts > span { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.laser-setup-footer .laser-text-link { font-size:11px; }
.laser-setup-ipad-note, .laser-setup-noscript { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.laser-setup [hidden] { display:none; }
@media(max-width:950px) {
  .laser-setup-heading { align-items:flex-start; flex-direction:column; gap:10px; }
  .laser-setup-heading > div { max-width:none; }
  .laser-setup-steps { gap:20px; }
  .laser-setup-steps h3 { font-size:22px; }
}
@media(max-width:650px) {
  .laser-setup { margin-bottom:34px; padding:28px 22px 20px; }
  .laser-setup-heading { margin-bottom:18px; }
  .laser-setup .laser-setup-heading h2 { font-size:36px; letter-spacing:-.9px; }
  .laser-setup-intro { font-size:13px; }
  .laser-setup-browser { gap:8px; padding-bottom:16px; }
  .laser-setup-select select { font-size:11px; padding-left:11px; }
  .laser-setup-steps { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 0; }
  .laser-setup-steps li { position:relative; padding-left:31px; }
  .laser-setup-number { position:absolute; top:6px; left:0; margin:0; font-size:10px; }
  .laser-setup-steps h3 { margin-bottom:8px; }
  .laser-setup-steps p { font-size:12px; }
  .laser-setup-shortcuts { gap:12px; }
}

.laser-platforms { padding:46px 0 48px; border-top:1px solid var(--line); scroll-margin-top:16px; }
.laser-section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:14px 28px; margin-bottom:28px; }
.laser-section-heading h2 { margin:0; }
.laser-platforms-summary { max-width:390px; margin:0; color:var(--muted); font-size:12.5px; line-height:1.7; }
.laser-platform-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.laser-platform-card { display:flex; flex-direction:column; padding:20px; border:1px solid #d8dfd4; border-radius:14px; background:#ffffff; }
.laser-platform-card.is-available { border-color:#a8c5a2; background:#f7fbf5; }
.laser-platform-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.laser-platform-identity { display:flex; align-items:center; gap:10px; }
.laser-browser-icon { flex-shrink:0; }
.laser-browser-icon img { display:block; width:40px; height:40px; object-fit:contain; }
.laser-status-badge { display:inline-flex; align-items:center; padding:4px 9px; border:1px solid var(--line); border-radius:999px; background:var(--sidebar); color:var(--muted); font:600 10px/1.3 var(--mono); letter-spacing:.4px; text-transform:uppercase; }
.laser-status-badge.is-live { border-color:#a3c29d; background:var(--tint); color:var(--green); }
.laser-platform-price { text-align:right; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.25; }
.laser-platform-card h3 { margin:0 0 10px; font:20px/1.25 var(--serif); letter-spacing:-.4px; }
.laser-platform-note { margin:0 0 18px; color:var(--muted); font-size:12.5px; line-height:1.75; }
.laser-platform-footer { margin-top:auto; padding-top:4px; }
.laser-coming-note { display:inline-block; color:var(--muted); font-size:11.5px; line-height:1.6; }
.laser-coming-note a { color:var(--green); font-weight:500; }
.laser-text-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--green); font-size:12.5px; font-weight:500; text-decoration:none; }
.laser-text-link:hover { text-decoration:underline; }
.laser-action:focus-visible, .laser-text-link:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.laser-text-link .icon { width:15px; height:15px; }
.laser-support { padding-top:42px; border-top:1px solid var(--line); scroll-margin-top:16px; }
.laser-support-header { margin-bottom:14px; }
.laser-support-header h2 { margin-bottom:8px; }
.laser-support details { border-bottom:1px solid var(--line); }
.laser-support details:first-of-type { border-top:1px solid var(--line); }
.laser-support summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:16px 0; list-style:none; font-size:13.5px; font-weight:600; }
.laser-support summary::-webkit-details-marker { display:none; }
.laser-support summary .icon { width:17px; height:17px; color:var(--muted); }
.laser-support details[open] summary .icon { transform:rotate(180deg); }
.laser-support-content { max-width:720px; padding:0 0 16px; color:var(--muted); font-size:13px; line-height:1.8; }
.laser-support-content p { margin:0 0 14px; }
.laser-support-content p:last-child, .laser-support-content ul:last-child { margin-bottom:0; }
.laser-support-content ul { margin:0 0 14px; padding-left:18px; }
.laser-support-content li { margin-bottom:6px; }
.laser-support-content a { color:var(--green); }
.laser-privacy { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; padding-top:20px; color:var(--muted); font-size:11.5px; }
.laser-privacy a { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--green); font-weight:500; text-decoration:none; }
.laser-privacy a:hover { text-decoration:underline; }
.laser-privacy .icon { width:14px; height:14px; }
@media (min-width:651px) and (max-width:1150px) {
  .laser-hero { gap:24px; }
  .laser-hero h1 { font-size:38px; letter-spacing:-1.3px; }
  .laser-intro { font-size:13px; }
}
@media (max-width:650px) {
  .laser-hero { gap:28px; padding-top:0; padding-bottom:27px; }
  .laser-hero-copy { grid-template-columns:minmax(0,1fr); gap:18px; }
  .laser-brand { margin-bottom:22px; }
  .laser-hero h1 { font-size:clamp(38px,8.2vw,52px); letter-spacing:-1.5px; }
  .laser-intro { max-width:420px; }
  .laser-showcase { width:100%; margin:0; }
  .laser-showcase figcaption { font-size:10px; }
  .laser-product h2 { font-size:29px; }
  .laser-platforms { padding:34px 0 36px; }
  .laser-platform-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
}
@media (prefers-reduced-motion:reduce) { .laser-action { transition:none; } }

/* Three supporting features; the walkthrough above carries the main story. */
.laser-essentials { padding:0 0 36px; scroll-margin-top:16px; }
.laser-essential-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.laser-essential { min-width:0; overflow:hidden; border:1px solid #dfe1d3; border-radius:16px; background:#fff; }
.laser-essential-art { background:#faf9f6; border-bottom:1px solid var(--line); }
.laser-essential-art svg { display:block; width:100%; height:auto; }
.laser-essential-copy { padding:22px 24px 26px; }
.laser-essential-copy h2 { margin:0 0 10px; font:26px/1.2 var(--serif); letter-spacing:-.5px; }
.laser-essential-copy p { max-width:440px; margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.laser-pencil-feature { margin-top:24px; padding:clamp(36px,5vw,64px); border:1px solid #dfe1d3; border-radius:18px; background:#f5f6f0; scroll-margin-top:16px; }
.laser-pencil-copy { max-width:860px; }
.laser-pencil-copy h2 { margin:0 0 24px; color:var(--green); font:clamp(36px,4.6vw,56px)/1.14 var(--serif); letter-spacing:-1.3px; }
.laser-pencil-copy p { max-width:760px; margin:0; color:var(--muted); font-size:16px; line-height:1.85; }
.laser-pencil-copy .laser-pencil-note { margin-top:16px; font-size:12px; }
.laser-pencil-word { position:relative; display:inline-block; white-space:nowrap; }
.laser-pencil-mark { position:absolute; left:-.06em; bottom:-.01em; width:calc(100% + .12em); height:.22em; pointer-events:none; }
.laser-pencil-mark svg { display:block; width:100%; height:100%; }
.laser-trust { margin:28px 0 0; color:var(--muted); font-size:12px; line-height:1.7; text-align:center; }
@media(max-width:1150px) {
  .laser-platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .laser-essential-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .laser-essential-copy { padding:20px; }
  .laser-essential-copy h2 { font-size:26px; }
  .laser-pencil-feature { padding:32px 20px; }
  .laser-pencil-copy h2 { margin-bottom:20px; font-size:clamp(22px,7.2vw,36px); letter-spacing:-.7px; }
  .laser-pencil-copy p { font-size:14px; }
  .laser-platform-grid { grid-template-columns:minmax(0,1fr); }
  .laser-trust { font-size:11px; }
}

/* One quiet player strip: playback, current step, chapter track, hands-on mode. */
.laser-walkthrough { display:grid; grid-template-columns:88px minmax(150px,1fr) 160px auto; grid-template-areas:"navigation step progress actions"; align-items:center; gap:16px; min-height:64px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.laser-demo-step { grid-area:step; min-width:0; }
.laser-demo-step-title { margin:0; font-size:12px; line-height:1.5; }
.laser-demo-step-title strong { display:block; color:var(--green); }
.laser-demo-step-title > span { color:var(--muted); font:10px/1.5 var(--mono); }
.laser-demo-step-instruction { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.laser-demo-navigation { grid-area:navigation; display:flex; align-items:center; }
.laser-demo-nav { display:grid; place-items:center; width:44px; height:44px; padding:12px; border:0; border-radius:50%; background:transparent; color:var(--green); cursor:pointer; }
.laser-demo-nav span { display:inline-flex; }
.laser-demo-nav .icon { display:block; width:18px; height:18px; }
.laser-demo-motion { background:#e7eee2; }
.laser-demo-nav:hover { background:#dce7d6; }
.laser-demo-actions { grid-area:actions; }
.laser-demo-chapters { grid-area:progress; display:flex; align-items:center; gap:3px; }
.laser-demo-chapters button { display:grid; place-items:center; flex:1; min-width:24px; height:44px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--green); cursor:pointer; }
.laser-demo-chapters button::before { width:100%; height:3px; border-radius:3px; background:#d7dfd1; content:""; }
.laser-demo-chapters button[aria-current="step"]::before { background:var(--green); }
.laser-demo-chapters button:hover::before { background:#8da887; }
.laser-demo-nav:focus-visible, .laser-demo-chapters button:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.laser-demo-note { margin:8px 0 0; color:var(--muted); font-size:10.5px; }
.laser-walkthrough [hidden], [data-laser-controls][hidden] { display:none; }
.is-interactive .laser-walkthrough { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"step actions"; }
@media (max-width:850px) {
  .laser-hero-copy { grid-template-columns:minmax(0,1fr); gap:12px; }
  .laser-hero-message { max-width:650px; }
  .laser-intro { max-width:none; }
  .laser-walkthrough { grid-template-columns:88px minmax(120px,1fr) 130px auto; gap:10px; }
}
@media (max-width:650px) {
  .laser-walkthrough { grid-template-columns:88px minmax(0,1fr) auto; grid-template-areas:"navigation step step" "progress progress actions"; gap:0 10px; padding:8px 10px; }
  .laser-demo-step { padding-left:4px; }
  .laser-demo-step-title strong { display:inline; margin-right:7px; }
  .laser-demo-step-title > span { display:inline-block; }
  .laser-demo-chapters { gap:5px; }
  .laser-demo-note { font-size:10px; }
  .is-interactive .laser-demo-step { padding-left:0; }
}

/* A real webpage and the unmodified extension renderer replace the SVG mockup. */
.laser-live-browser { position:relative; overflow:hidden; border:1px solid #526166; border-radius:16px; background:#3b5057; box-shadow:0 18px 48px -28px rgb(22 32 25 / 35%); color-scheme:dark; }
.laser-browser-toolbar { position:relative; display:flex; align-items:center; gap:12px; height:40px; padding:0 13px; border-bottom:1px solid #5b686b44; background:linear-gradient(115deg,#2b3031,#25292a); }
.laser-window-dots { display:flex; gap:6px; padding-right:10px; }
.laser-window-dots i { width:8px; height:8px; border-radius:50%; background:#ff6058; }
.laser-window-dots i:nth-child(2) { background:#ffbd2e; }
.laser-window-dots i:nth-child(3) { background:#28c840; }
.laser-browser-address { position:absolute; left:50%; width:40%; height:24px; transform:translateX(-50%); border:1px solid #71808566; border-radius:999px; background:#3d4b4f99; }
.laser-browser-address::after { content:""; position:absolute; top:8px; left:18px; width:33%; height:6px; border-radius:4px; background:#a2afae30; }
.laser-toolbar-ring { position:relative; display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; margin-left:auto; padding:4px; border:0; border-radius:7px; background:transparent; cursor:pointer; transition:background-color 280ms ease; }
.laser-toolbar-ring:hover { background:#3f4948; }
.laser-toolbar-ring svg { position:relative; }
.laser-toolbar-ring.is-on { background:#ff304b20; }
.laser-toolbar-ring.is-paused { background:transparent; }
.laser-toolbar-pulse { position:absolute; inset:0; border:2px solid #ff304b; border-radius:8px; pointer-events:none; opacity:0; }
.laser-toolbar-dot { opacity:0; transition:opacity 240ms ease; }.laser-toolbar-ring.is-on .laser-toolbar-dot { opacity:1; }
.laser-demo-viewport { position:relative; height:610px; overflow:hidden; background:#3b5057; }
.laser-demo-viewport iframe { display:block; border:0; max-width:none; transform-origin:0 0; pointer-events:none; }
.is-interactive .laser-demo-viewport iframe { pointer-events:auto; }
.laser-access-popup { position:absolute; z-index:4; top:45px; right:13px; width:348px; padding:22px; border:1px solid #ffffff36; border-radius:13px; background:rgba(36,39,41,.98); color:#f5f5f7; box-shadow:0 12px 28px #0003; font:13px/1.5 -apple-system,BlinkMacSystemFont,sans-serif; }
.laser-access-popup h3 { margin:0 0 6px; font-size:20px; letter-spacing:-.4px; }
.laser-access-explanation { margin:0 0 13px; color:#c5c5cc; }
.laser-access-button { display:block; min-height:36px; padding:9px 14px; border-radius:999px; background:#0068d9; color:white; text-align:center; font-weight:600; }
.laser-replay-cursor { position:absolute; top:0; left:0; z-index:5; pointer-events:none; }
.laser-access-popup[hidden],.laser-replay-cursor[hidden] { display:none; }
.laser-demo-try { min-height:44px; padding:8px 13px; border:1px solid #c8d4c1; border-radius:8px; background:transparent; color:var(--green); font:600 11px var(--sans); white-space:nowrap; cursor:pointer; }
.laser-demo-try:hover { background:#e7eee2; }
.laser-demo-try:focus-visible,.laser-toolbar-ring:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
@media(max-width:650px) {
  .laser-access-popup { left:12px; width:calc(100% - 24px); }
  .laser-browser-toolbar { gap:8px; padding:0 11px; }
  .laser-window-dots { gap:4px; padding-right:2px; }
  .laser-window-dots i { width:6px; height:6px; }
}

/* A reserved cue row keeps the illustration clear and the frame steady. */
.laser-demo-instructions { display:flex; align-items:center; justify-content:center; min-height:74px; padding:10px 0 4px; }
.laser-demo-cue { display:flex; align-items:center; justify-content:center; gap:11px; min-height:48px; max-width:100%; color:var(--muted); pointer-events:none; font-size:13px; text-align:center; will-change:opacity,transform; }
.laser-demo-cue kbd { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:108px; height:46px; padding:10px 18px; border:1px solid #aab8a5; border-radius:8px; background:#fff; color:#304535; box-shadow:0 4px 0 #ced8c8; font:650 16px/1 var(--mono); transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease,border-color 180ms ease; }
.laser-demo-cue.is-pressed kbd { transform:translateY(3px); border-color:#829779; box-shadow:0 1px 0 #a8b99f,0 0 0 4px #b7cfa44d; background:#dcebcf; }
.laser-demo-cue[hidden] { display:none; }
.laser-demo-cue [hidden] { display:none; }
.laser-demo-signature { position:absolute; z-index:6; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; background:radial-gradient(ellipse at 50% 35%,#293c39,#152526 75%); color:#f2f4e9; text-align:center; pointer-events:none; }
.laser-demo-signature[hidden] { display:none; }
.laser-demo-signature img { display:block; width:84px; height:84px; margin-bottom:15px; filter:drop-shadow(0 8px 20px #0003); }
.laser-demo-signature p { margin:0 0 9px; color:inherit; font:400 40px/1.1 var(--serif); letter-spacing:-1.1px; }
.laser-demo-signature span { color:#bdcfc0; font:400 14px/1.5 var(--sans); }
.laser-toolbar-ring.is-cued { box-shadow:0 0 0 3px #ff304b16; }
@media(max-width:650px) {
  .laser-demo-instructions { min-height:66px; }
  .laser-demo-cue { gap:9px; font-size:11px; }
  .laser-demo-cue kbd { min-width:96px; height:44px; padding:9px 16px; font-size:15px; }
  .laser-demo-signature { padding:20px; }
  .laser-demo-signature img { width:68px; height:68px; margin-bottom:12px; }
  .laser-demo-signature p { font-size:32px; }
  .laser-demo-signature span { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .laser-demo-cue kbd { transition:none; } }
.laser-toolbar-ring.is-clicked,.laser-toolbar-ring:active { transform:scale(.93); }
.laser-access-button.is-pressed { filter:brightness(.9); transform:translateY(1px); }