/* Copyright Pautinka 2026. All Rights Reserved. */

:root { --cyan: #67ceff; --violet: #ad8aff; --text: #eef5ff; --muted: #a5b6cb; --line: rgba(119,175,236,.2); --header-height: 84px; }
html { scroll-behavior: smooth; }
body { font-family: Arial, Helvetica, sans-serif; }
.header { padding: 14px max(28px, calc((100vw - 1560px) / 2)); gap: 30px; background: #05080deb; backdrop-filter: blur(20px); }
.brand, .brand img { width: 152px; }
.product-name { padding-left: 28px; border-left: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.product-name span { font-size: 10px; letter-spacing: .12em; }
.header-actions { gap: 12px; }
.language-menu { font-size: 13px; }
.language-menu summary { border-radius: 9px; background: #ffffff04; transition: border-color .2s, background .2s; }
.language-menu summary:hover { border-color: #67ceff65; background: #67ceff0b; }
.language-menu nav { box-shadow: 0 20px 60px #000a; }
.reading-progress { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px #67ceff70; }
.eyebrow { letter-spacing: .19em; font-size: 10px; }

/* Studio lighting belongs to the opening screen. Reading stays calm. */
.hero { isolation: isolate; overflow: clip; padding: 68px max(28px, calc((100vw - 1560px) / 2)) 54px; background: radial-gradient(ellipse at 75% 25%, #18295e65, transparent 56%), radial-gradient(ellipse at 20% 65%, #48297728, transparent 46%), linear-gradient(180deg, #070d18, #05080d); border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; pointer-events: none; background: linear-gradient(#81bdff26 1px, transparent 1px), linear-gradient(90deg, #81bdff26 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, transparent, #000 45%, transparent); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 600px; height: 600px; top: -260px; left: 55%; border-radius: 50%; background: radial-gradient(circle, #7565ff22, transparent 68%); pointer-events: none; animation: halo-drift 16s ease-in-out infinite alternate; }
.hero-inner { max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: minmax(330px,.8fr) minmax(0,1.55fr); gap: clamp(30px,4vw,72px); align-items: center; }
.hero-copy { min-width: 0; max-width: none; }
.hero-identity { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; }
.hero-identity .eyebrow { margin: 0; }
.product-logo { position: static; width: 58px; height: 58px; filter: drop-shadow(0 0 18px #66bbff26); }
h1 { font-size: clamp(40px,3.8vw,68px); line-height: 1.06; letter-spacing: -.055em; margin: 0 0 24px; padding: 0; }
h1 span { font-size: .76em; letter-spacing: -.04em; }
.tagline { font-size: clamp(18px,1.5vw,22px); line-height: 1.5; color: #e2efff; margin: 0 0 16px; }
.hero-copy > p:not(.eyebrow):not(.tagline) { font-size: 14px; line-height: 1.8; margin: 0; max-width: 460px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 26px; }
.primary-button { position: relative; overflow: hidden; margin: 0; gap: 22px; padding: 12px 20px; border-radius: 8px; background: #72d0ff; color: #05121e; font-size: 13px; box-shadow: 0 4px 24px #42baff14; transition: background .2s, box-shadow .2s, transform .2s; }
.primary-button::before { content: ""; position: absolute; inset: 0; width: 50%; background: linear-gradient(90deg,transparent,#ffffff80,transparent); transform: translateX(-220%) skewX(-25deg); transition: transform .65s; pointer-events: none; }
.primary-button:hover { color: #05121e; background: #a6e3ff; box-shadow: 0 6px 32px #42baff33; transform: translateY(-2px); }
.primary-button:hover::before { transform: translateX(350%) skewX(-25deg); }
.secondary-button { font-size: 12px; color: #bccce0; padding: 10px 0; border-bottom: 1px solid #7e94b540; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; color: #a9bdd4; font-size: 10px; }
.hero-meta span { padding: 4px 10px; border: 1px solid #819ac22e; border-radius: 5px; background: #ffffff03; }
.hero-art { position: relative; min-width: 0; margin: 0; border-radius: 14px; border-color: #7abaff44; box-shadow: 0 0 0 6px #98bcff04, 0 28px 80px #0008, 0 0 70px #5777f017; transform: translate3d(var(--art-x,0px),var(--art-y,0px),0); transition: box-shadow .3s, border-color .3s; }
.hero-art:hover { border-color: #7ad6ff80; box-shadow: 0 0 0 6px #98bcff06, 0 28px 80px #0008, 0 0 80px #5777f023; }
figcaption { font-size: 12px; line-height: 1.5; padding: 12px 16px; }
.hero-art figcaption { display: flex; align-items: center; gap: 10px; font-size: 11px; background: linear-gradient(90deg,#0d1b2b,#0b1020); }
.hero-art figcaption::before { content: ""; width: 5px; height: 5px; background: var(--cyan); box-shadow: 0 0 8px #67ceff77; border-radius: 50%; flex-shrink: 0; }
.media-link { display: block; position: relative; cursor: zoom-in; }
.media-link:focus-visible { outline-offset: -4px; }
.media-zoom { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border: 1px solid #b6dfff55; display: grid; place-items: center; border-radius: 8px; background: #071322dd; color: #d4edff; opacity: .8; transition: opacity .2s, transform .2s; }
.media-link:hover .media-zoom { opacity: 1; transform: scale(1.06); }
.media-zoom svg { width: 17px; height: 17px; }
.workspace-links { grid-template-columns: repeat(6,minmax(0,1fr)); max-width: 1560px; margin: 38px auto 0; padding: 0; }
.workspace-links a { position: relative; overflow: hidden; border-radius: 8px; padding: 16px 14px; align-items: center; font-size: 10px; background: linear-gradient(135deg,#101a2b99,#080d1480); transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.workspace-links a::after { content: "↗"; margin-left: auto; opacity: .5; }
.workspace-links b { font-size: 12px; }
.workspace-links a:hover { border-color: #67ceff70; transform: translateY(-3px); background: #13233a; box-shadow: 0 6px 22px #0004; }
.layout { grid-template-columns: 255px minmax(0,1fr); max-width: 1460px; }
.sidebar { padding-top: 34px; scrollbar-width: thin; scrollbar-color: #28425d transparent; }
.search { margin: 24px 0; }
.search div { border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
.search div:focus-within { border-color: #67ceff80; box-shadow: 0 0 0 3px #67ceff09; }
.toc a { border-radius: 0 5px 5px 0; line-height: 1.5; transition: color .2s, background .2s, border-color .2s; }
.toc a span { font-size: 10px; }
.print-button:hover { color: var(--cyan); }
.guide-section { border-top: 0; border-bottom: 1px solid var(--line); }
.section-number { display: inline-flex; font-size: 11px; align-items: center; gap: 10px; }
.section-number::after { content: ""; width: 38px; height: 1px; background: linear-gradient(90deg,#67ceff88,transparent); }
h2 { font-size: clamp(26px,3vw,36px); }
.lead { color: #bbcee3; line-height: 1.65; max-width: 810px; }
.illustration, .screenshot { border-radius: 12px; transition: border-color .25s, box-shadow .25s; }
.illustration:hover, .screenshot:hover { border-color: #67ceff55; box-shadow: 0 10px 30px #0004; }
.illustration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 28px 0; }
.illustration-grid.two-up { grid-template-columns: repeat(2,minmax(0,1fr)); }
.illustration-grid .illustration { margin: 0; }
.illustration-grid figcaption { min-height: 70px; font-size: 11px; }
.screenshot-hint { color: var(--cyan); font-size: 11px; }
.steps li::before { border-radius: 8px; border-color: #67ceff55; background: #67ceff08; }
.notes { border: 1px solid #ad8aff22; border-left: 2px solid #ad8aff88; border-radius: 0 9px 9px 0; padding: 6px 22px; color: #b5c7dd; background: linear-gradient(90deg,#ad8aff07,transparent); }
.faq-item[open] summary { color: var(--cyan); }
.search-status { margin-top: 30px; border: 1px solid var(--line); }
.footer { border: 0; }
.reveal-pending { opacity: 0; transform: translateY(18px); }
.reveal-ready { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
@keyframes halo-drift { from { transform: translate3d(-50px,0,0); } to { transform: translate3d(90px,55px,0); } }

/* Native dialog keeps keyboard focus inside the image viewer. */
body.viewer-open { overflow: hidden; }
.media-dialog { width: min(1500px,96vw); max-width: 96vw; max-height: 94dvh; padding: 0; border: 1px solid #7bb8ee55; border-radius: 14px; background: #070d17; color: var(--text); box-shadow: 0 30px 100px #000b; }
.media-dialog::backdrop { background: #010409ed; backdrop-filter: blur(8px); }
.media-dialog:not([open]) { display: none; }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.viewer-title { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.5; }
.viewer-close, .viewer-nav button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; border: 1px solid var(--line); background: #101c2d; font-size: 20px; flex-shrink: 0; }
.viewer-close:hover, .viewer-nav button:hover { background: #1b344e; }
.viewer-stage { overflow: auto; height: min(69dvh,840px); display: flex; align-items: center; justify-content: center; background: #03070d; }
.viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; flex-shrink: 0; }
.viewer-stage.is-zoomed { display: block; }
.viewer-stage.is-zoomed .viewer-image { max-width: none; max-height: none; width: max(140%,var(--native-width)); height: auto; cursor: zoom-out; }
.viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--line); }
.viewer-nav { display: flex; gap: 12px; align-items: center; }
.viewer-counter { font-size: 12px; color: var(--muted); min-width: 60px; text-align: center; }
.viewer-tools { display: flex; align-items: center; gap: 18px; font-size: 12px; }
.viewer-zoom { border: 0; padding: 6px 0; color: var(--cyan); background: none; }
.viewer-original { color: var(--muted); }

@media (max-width: 1180px) {
    .hero { padding-top: 48px; }
    .hero-inner { grid-template-columns: minmax(300px,.85fr) minmax(0,1.25fr); gap: 28px; }
    h1 { font-size: 46px; }
    .hero-meta { margin-top: 22px; }
    .workspace-links { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .layout { grid-template-columns: 235px minmax(0,1fr); }
    main { padding: 0 32px; }
    .sidebar { padding-inline: 16px; }
    .illustration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 850px) {
    :root { --header-height: 70px; }
    .header { padding: 10px 18px; gap: 18px; }
    .brand, .brand img { width: 105px; }
    .product-name { font-size: 12px; padding-left: 18px; }
    .product-name span { font-size: 9px; }
    .header-actions { gap: 8px; }
    .language-menu { font-size: 12px; }
    .hero { padding: 36px 26px; }
    .hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .hero-copy { max-width: 660px; }
    .hero-copy > p:not(.eyebrow):not(.tagline) { max-width: 620px; }
    .hero-identity { margin-bottom: 20px; }
    .product-logo { width: 48px; height: 48px; }
    h1 { font-size: clamp(40px,7vw,56px); }
    .hero-meta { margin-top: 22px; }
    .hero-art { transform: none; }
    .workspace-links { gap: 10px; margin-top: 28px; }
    .layout { display: block; }
    .sidebar { padding: 24px; width: min(340px,88vw); }
    .contents-toggle { max-width: 105px; }
    main { padding: 0 26px; }
    .illustration-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 550px) {
    .header { gap: 8px; padding-inline: 14px; }
    .product-name { display: none; }
    .brand, .brand img { width: 94px; }
    .hero { padding: 28px 20px 30px; }
    .hero-identity .eyebrow { font-size: 9px; letter-spacing: .13em; }
    .hero-identity { gap: 12px; }
    .product-logo { width: 42px; height: 42px; }
    h1 { font-size: clamp(34px,8.5vw,46px); margin: 0 0 18px; }
    .tagline { font-size: 19px; }
    .hero-actions { gap: 12px; margin-top: 22px; }
    .hero-art { border-radius: 10px; }
    .hero-art figcaption { font-size: 10px; padding: 10px 12px; }
    .workspace-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .workspace-links a { padding: 12px 10px; gap: 8px; }
    .workspace-links b { font-size: 11px; }
    main { padding-inline: 20px; }
    h2 { font-size: 28px; }
    .notes { padding-inline: 16px; }
    .illustration-grid, .illustration-grid.two-up { grid-template-columns: 1fr; gap: 18px; }
    .illustration-grid figcaption { min-height: 0; font-size: 12px; }
    .media-dialog { border-radius: 10px; }
    .viewer-header, .viewer-footer { padding: 10px 12px; }
    .viewer-title { font-size: 11px; }
    .viewer-footer { flex-wrap: wrap; justify-content: center; }
    .viewer-stage { height: 65dvh; }
    .viewer-tools { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hero-art, .reveal-pending { transform: none !important; }
    .reveal-pending { opacity: 1 !important; }
}
@media print {
    .hero-actions, .hero-meta, .hero-identity, .media-zoom, .media-dialog { display: none !important; }
    .hero { padding: 0 0 24px; background: none; border: 0; }
    .hero::before, .hero::after { display: none; }
    .hero-inner { display: block; }
    .hero-copy, .hero-copy > p { max-width: none; }
    h1 { font-size: 36px; }
    .section-number { color: black; }
    .illustration, .screenshot { box-shadow: none; background: white; }
    .illustration-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .illustration-grid.two-up { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .notes { background: none; }
    .reveal-pending { opacity: 1; transform: none; }
}