/* ОКО · a quiet optical instrument, with ornament kept outside training stimuli. */ body.kd-oko-design { background: #0c0d16; color-scheme: dark; } body.kd-oko-design .kd-up { display: none; } body.kd-oko-design .kd-top { background: #0c0d16ed; border-color: #cfb47b24; } body.kd-oko-design .kd-top-in { max-width: 1440px; } body.kd-oko-design:has(.oko-session, .oko-result) { overflow: hidden; } body.kd-oko-design:has(.oko-session, .oko-result) .kd-top { visibility: hidden; pointer-events: none; } body.kd-oko-design.oko-active-view > .wrap { display: none; } body.kd-oko-design.oko-active-view .triband, body.kd-oko-design.oko-active-view .kd-map, body.kd-oko-design.oko-active-view .kd-foot { display: none; } #oko-root { --oko-bg: #0c0d16; --oko-panel: #141520; --oko-gold: #d5bd88; --oko-text: #eee7d8; --oko-muted: #aaa6b7; --oko-line: #d3b98428; --oko-serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif; --oko-sans: 'Golos Text', system-ui, sans-serif; font-family: var(--oko-sans); color: var(--oko-text); } #oko-root * { box-sizing: border-box; } #oko-root *, body.kd-oko-design { scrollbar-color: #756345 #10111b; scrollbar-width: thin; } #oko-root ::-webkit-scrollbar { width: 5px; height: 5px; } #oko-root ::-webkit-scrollbar-track { background: #10111b; } #oko-root ::-webkit-scrollbar-thumb { background: #756345; border-radius: 5px; } #oko-root button, #oko-root a { -webkit-tap-highlight-color: transparent; } #oko-root button { cursor: pointer; font: inherit; } #oko-root button:focus-visible, #oko-root a:focus-visible { outline: 2px solid #e4c991; outline-offset: 5px; } #oko-root .oko-app-shell { background: var(--oko-bg) !important; } #oko-root h1, #oko-root h2, #oko-root h3 { font-family: var(--oko-serif); font-weight: 500; color: var(--oko-text); } #oko-root em { font-style: italic; color: var(--oko-gold); } #oko-root .oko-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em; line-height: 1.7; text-transform: uppercase; color: var(--oko-gold); } #oko-root .oko-experience { max-width: 1440px; margin: auto; padding: 0 56px; overflow: clip; } #oko-root .oko-hero { display: grid; grid-template-columns: 1fr 1fr; position: relative; align-items: center; gap: 8px; min-height: 680px; border-bottom: 1px solid var(--oko-line); isolation: isolate; } #oko-root .oko-hero::before { content: ''; position: absolute; inset: 0 -56px; z-index: -1; background: radial-gradient(ellipse at 80% 45%, #69788314, transparent 54%), radial-gradient(ellipse at 15% 10%, #8b6e3510, transparent 40%); pointer-events: none; } #oko-root .oko-hero-copy { z-index: 1; padding: 52px 0 75px; } #oko-root .oko-hero h1 { font-size: clamp(110px, 10.2vw, 152px); letter-spacing: .1em; line-height: .93; margin: 28px 0 24px; background: linear-gradient(110deg, #f1e1be, #e2c899 48%, #987742); background-clip: text; -webkit-text-fill-color: transparent; } #oko-root .oko-hero h2 { font-size: clamp(35px, 3.1vw, 48px); letter-spacing: -.015em; line-height: 1.13; margin: 0 0 24px; } #oko-root .oko-hero-description { max-width: 450px; font-size: 16px; line-height: 1.9; color: var(--oko-muted); margin: 0 0 30px; } #oko-root .oko-hero-actions { display: flex; align-items: center; gap: 26px; } #oko-root .oko-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 56px; padding: 17px 26px; border: 1px solid #e8d1a480; border-radius: 5px; background: linear-gradient(115deg, #e7d2a9, #c5a774); color: #241e13; font-weight: 600; font-size: 13px; box-shadow: 0 10px 45px #c6a56e17; transition: transform .25s, box-shadow .25s; } #oko-root .oko-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 45px #c6a56e35; } #oko-root .oko-primary span { font-size: 19px; } #oko-root .oko-text-link { text-decoration: none; font-size: 12px; color: #c4bea9; border-bottom: 1px solid #d3b98430; padding-block: 8px; white-space: nowrap; } #oko-root .oko-hero-footnote { margin-top: 24px; color: #938e9d; font-size: 11px; letter-spacing: .02em; } #oko-root .oko-hero-footnote > span { font-size: 17px; color: #b59b6c; margin-right: 10px; } #oko-root .oko-hero-visual { width: calc(100% + 80px); margin-left: -60px; margin-top: -15px; } #oko-root .oko-eye-art { display: block; width: 100%; height: auto; overflow: visible; } #oko-root .eye-iris { transform-origin: 360px 300px; animation: okoIris 75s linear infinite; } #oko-root .eye-orbit { transform-origin: 360px 300px; animation: okoOrbit 90s linear infinite reverse; } #oko-root .oko-eye-caption { font-family: var(--oko-serif); font-size: 24px; display: flex; justify-content: center; gap: 7px; margin-top: -29px; color: #bcb3a0; } #oko-root .oko-eye-caption em { color: #c2b793; } #oko-root .oko-hero-index { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: space-between; gap: 20px; color: #948264; letter-spacing: .16em; font-size: 9px; } #oko-root .oko-dashboard { display: flex; gap: 30px; align-items: center; padding: 27px 0; border-bottom: 1px solid var(--oko-line); } #oko-root .oko-dashboard-title { margin-right: auto; max-width: 370px; } #oko-root .oko-dashboard-title .oko-eyebrow { font-size: 9px; } #oko-root .oko-dashboard-title h2 { font-size: 26px; margin: 9px 0 0; line-height: 1.15; } #oko-root .oko-week { display: flex; gap: 13px; } #oko-root .oko-week > div { display: flex; align-items: center; flex-direction: column; gap: 9px; font-size: 9px; color: #92899c; } #oko-root .oko-week i { width: 7px; height: 7px; border: 1px solid #716443; border-radius: 50%; background: #1b1926; } #oko-root .oko-week .today i { border-color: var(--oko-gold); } #oko-root .oko-week .practiced i { background: var(--oko-gold); box-shadow: 0 0 9px #d1b17630; } #oko-root .oko-dashboard-stat { display: flex; align-items: baseline; gap: 8px; } #oko-root .oko-dashboard-stat strong { color: var(--oko-gold); font-size: 31px; font-family: var(--oko-serif); font-weight: 500; } #oko-root .oko-dashboard-stat > span { font-size: 10px; color: #9691a2; } #oko-root .oko-journal-link { border: 1px solid var(--oko-line); background: #d5bd8805; color: #c9b88f; font-size: 12px; padding: 14px 18px; border-radius: 5px; white-space: nowrap; } #oko-root .oko-journal-link > span { margin-left: 17px; } #oko-root .oko-journal-link:hover { border-color: #d5bd8870; } #oko-root .oko-entry-route { display: grid; grid-template-columns: 1fr 2fr; gap: 45px; align-items: center; padding: 40px 32px; margin: 47px 0 76px; border: 1px solid var(--oko-line); border-radius: 5px; background: linear-gradient(120deg, #c3a77608, #17172277 45%, #11121b); } #oko-root .oko-route-title .oko-eyebrow { font-size: 9px; } #oko-root .oko-route-title h2 { font-size: 32px; line-height: 1.1; margin: 10px 0; } #oko-root .oko-route-title p { font-size: 12px; line-height: 1.7; color: #9994a4; margin: 0; } #oko-root .oko-route-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } #oko-root .oko-route-steps > button { display: flex; gap: 15px; text-align: left; align-items: center; background: transparent; color: var(--oko-text); border: 0; border-bottom: 1px solid #d3b98425; padding: 19px 0; } #oko-root .route-number { font-family: var(--oko-serif); color: #ab9465; font-size: 28px; } #oko-root .oko-route-steps strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; } #oko-root .oko-route-steps > button > div > span { font-size: 10px; color: #9791a2; } #oko-root .route-arrow { color: #bba16f; margin-left: auto; font-size: 15px; } #oko-root .oko-route-steps > button:hover { border-color: var(--oko-gold); } #oko-root .oko-practices { scroll-margin-top: 90px; } #oko-root .oko-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 31px; } #oko-root .oko-section-head h2 { font-size: clamp(42px, 4vw, 58px); letter-spacing: -.02em; line-height: 1.1; margin: 16px 0 0; } #oko-root .oko-section-head p { color: #a5a0b0; font-size: 13px; margin-bottom: 5px; max-width: 290px; line-height: 1.7; } #oko-root .oko-filter { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 25px; margin-bottom: 13px; border-bottom: 1px solid var(--oko-line); } #oko-root .oko-filter > button { background: transparent; border: 1px solid transparent; color: #9b95a8; font-size: 13px; padding: 12px 18px; border-radius: 4px; transition: color .2s, border-color .2s, background .2s; } #oko-root .oko-filter > button[aria-pressed=true] { color: #e1c58f; border-color: #d3b98450; background: #d3b9840b; } #oko-root .oko-filter > button > span { margin-left: 10px; color: #ad9466; font-size: 10px; } #oko-root .oko-filter > button:hover { color: var(--oko-gold); } #oko-root .oko-exercise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } #oko-root .oko-exercise-card { position: relative; display: flex; flex-direction: column; min-width: 0; text-align: left; color: var(--oko-text); background: linear-gradient(135deg, #191b2670, #10111b); border: 1px solid #d3b98425; border-radius: 5px; padding: 22px 27px; min-height: 325px; transition: transform .3s, border-color .3s, background .3s; text-decoration: none; overflow: hidden; isolation: isolate; } #oko-root .oko-exercise-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 52% 28%, #b59a6420, transparent 65%); opacity: 0; transition: opacity .4s; } #oko-root .oko-exercise-card:hover { border-color: #d3b98470; transform: translateY(-4px); } #oko-root .oko-exercise-card:hover::before { opacity: 1; } #oko-root .oko-card-top { display: flex; align-items: center; gap: 15px; width: 100%; font-size: 9px; letter-spacing: .09em; color: #968979; } #oko-root .oko-card-top > span:first-child { color: #c3a974; font-size: 11px; letter-spacing: .06em; } #oko-root .oko-card-arrow { margin-left: auto; font-size: 16px; color: #b99f6e; } #oko-root .oko-card-art { position: relative; align-self: center; width: 120px; height: 125px; margin: 8px 0 7px; color: #c4aa77; } #oko-root .oko-preview { width: 100%; height: 100%; overflow: visible; } #oko-root .oko-exercise-card:hover .preview-spiral { transform-origin: center; animation: okoPreviewSpin 15s linear infinite; } #oko-root .oko-card-copy { flex: 1; } #oko-root .oko-card-copy h3 { font-size: 31px; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 12px; } #oko-root .oko-card-copy p { font-size: 14px; line-height: 1.7; color: #a6a1b1; margin: 0 0 20px; } #oko-root .oko-card-bottom { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #d3b9841a; padding-top: 14px; font-size: 10px; color: #b9a983; width: 100%; } #oko-root .oko-companion { background: linear-gradient(130deg, #17202675, #11141c); } #oko-root .oko-companion .oko-eyebrow { font-size: 9px; letter-spacing: .1em; color: #a9b2ab; } #oko-root .oko-companion-symbol { font-family: var(--oko-serif); font-size: 59px; line-height: 1.2; color: #b7c0ac; margin: 35px 0 17px; } #oko-root .oko-companion h3 { font-size: 35px; margin: 0 0 12px; line-height: 1; } #oko-root .oko-companion p { font-size: 14px; color: #a5a6b0; line-height: 1.8; margin: 0 0 20px; } #oko-root .oko-companion .oko-card-bottom { margin-top: auto; } #oko-root .oko-method { display: grid; grid-template-columns: .8fr 1fr; gap: 80px; align-items: center; border-block: 1px solid var(--oko-line); margin-top: 86px; padding: 42px 50px; background: radial-gradient(ellipse at 25% 50%, #d5bd8806, transparent 55%); } #oko-root .oko-method > svg { width: 100%; } #oko-root .oko-method h2 { font-size: 49px; line-height: 1.06; margin: 18px 0 24px; } #oko-root .oko-method p { font-size: 14px; line-height: 1.9; max-width: 430px; color: #a6a1b1; } #oko-root .oko-method .eye-iris, #oko-root .oko-method .eye-orbit { animation: none; } #oko-root .oko-bottom-rule { display: flex; justify-content: space-between; padding: 28px 0 46px; font-size: 9px; letter-spacing: .15em; color: #8e8065; } /* Preparation is outside the visual training field. */ #oko-root .oko-prepare { max-width: 1120px; margin: 0 auto; padding: 32px 44px 80px; } #oko-root .oko-back { background: transparent; border: 0; border-bottom: 1px solid var(--oko-line); padding: 10px 0; color: #c8b88d; font-size: 13px; } #oko-root .oko-prepare-head { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 40px 0 28px; border-bottom: 1px solid var(--oko-line); } #oko-root .oko-prepare-head h1 { font-size: clamp(44px, 5vw, 65px); line-height: 1.05; letter-spacing: -.02em; margin: 18px 0 0; max-width: 740px; } #oko-root .oko-prepare-head .oko-preview { color: #c5aa75; width: 120px; height: 120px; flex: none; } #oko-root .oko-prepare-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 58px; align-items: start; margin-top: 35px; } #oko-root .oko-instruction { display: flex; align-items: baseline; gap: 20px; margin: 0 0 34px; } #oko-root .instruction-number { font-family: var(--oko-serif); font-size: 25px; color: #a98e60; flex: none; } #oko-root .oko-instruction h2 { font-size: 30px; line-height: 1.1; margin: 0 0 18px; } #oko-root .oko-instruction p { font-size: 16px; line-height: 1.95; color: #bbb5c7; margin: 0; } #oko-root .oko-prepare-note { color: #9d94a5; font-size: 12px; line-height: 1.8; border-top: 1px solid var(--oko-line); padding-top: 24px; } #oko-root .oko-prepare-note span { color: #bda16e; margin-right: 10px; font-size: 18px; } #oko-root .oko-settings { padding: 29px; border: 1px solid #d3b98435; border-radius: 5px; background: linear-gradient(150deg, #1d1c2a, #11131e); } #oko-root .oko-settings > .oko-eyebrow { padding-bottom: 23px; border-bottom: 1px solid var(--oko-line); } #oko-root .oko-settings-controls { display: flex; flex-direction: column; gap: 25px; padding: 25px 0; } #oko-root .oko-control-row > div:first-child { color: #b4adbe !important; font-size: 12px; margin-bottom: 4px; } #oko-root .oko-settings button { min-height: 42px; border-radius: 4px; } #oko-root .oko-settings .oko-chip { font-size: 12px; padding: 12px 14px; background: #10111b !important; border-color: #d3b98425 !important; color: #aaa4b8 !important; } #oko-root .oko-settings .oko-chip[aria-pressed=true] { background: #d3b98412 !important; border-color: #d3b98480 !important; color: #e4ca95 !important; } #oko-root .oko-big-btn { border-radius: 5px; font-size: 13px; min-height: 54px; padding: 16px 22px; background: linear-gradient(110deg, #e5d0a6, #bfa26d) !important; color: #251f14 !important; border: 1px solid #ddc58a60; } #oko-root .oko-big-btn[data-ghost=true] { background: transparent !important; color: #d2ba88 !important; border: 1px solid #d3b98440 !important; } #oko-root .oko-big-btn:hover { box-shadow: 0 5px 30px #b89c5b20; } #oko-root .oko-settings-note { color: #8f899c; font-size: 11px; line-height: 1.8; margin: 20px 0 0; text-align: center; } /* Colour fields and fixation targets stay plain. Tables get clearer type and responsive frames. */ #oko-root .oko-session, #oko-root .oko-result { z-index: 10000; } #oko-root .oko-session-exit { right: max(20px, env(safe-area-inset-right)); top: max(18px, env(safe-area-inset-top)); display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 8px 12px; min-height: 38px; border: 1px solid currentColor; border-radius: 4px; background: transparent; font-size: 11px; opacity: .7; } #oko-root .oko-session-exit > span { font-size: 19px; line-height: 1; } #oko-root .oko-session-exit:hover { opacity: 1; } #oko-root .oko-session-heading { position: absolute; left: 28px; top: 22px; text-align: left; } #oko-root .oko-session-heading > span { display: block; color: #9f8b66; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; } #oko-root .oko-session-heading > strong { display: block; font-family: var(--oko-serif); font-size: 27px; font-weight: 500; color: #d9cfbc; margin-top: 9px; } #oko-root .oko-session > .absolute.bottom-8 { font-size: 12px; letter-spacing: .04em; } #oko-root .oko-session button:not(.oko-session-exit) { border-radius: 5px; } #oko-root .oko-session--schulte .grid, #oko-root .oko-session--memory .grid { padding: 9px; background: #11111d; border: 1px solid #d3b98435; border-radius: 5px; box-shadow: 0 15px 50px #0003; } #oko-root .oko-session .grid button { aspect-ratio: 1; border-radius: 4px; font-variant-numeric: tabular-nums; } #oko-root .oko-session--schulte .grid button { font-family: var(--oko-sans) !important; font-weight: 500 !important; } #oko-root .oko-session--memory .grid { max-width: min(360px, calc(100dvh - 180px)) !important; } #oko-root .oko-session--schulte > .relative.w-full { max-width: min(480px, calc(100dvh - 190px)) !important; } #oko-root .oko-session--gorbov > .relative.w-full { max-width: min(480px, calc(100dvh - 190px)) !important; } #oko-root .oko-session--gorbov[data-grid-size="7"] > .relative.w-full { max-width: min(520px, calc(100dvh - 190px)) !important; } #oko-root .oko-session[data-grid-size="5"] .grid button:nth-child(13), #oko-root .oko-session--schulte[data-grid-size="3"] .grid button:nth-child(5), #oko-root .oko-session--gorbov[data-grid-size="7"] .grid button:nth-child(25) { align-items: flex-start; padding-top: 9px; line-height: 1.2; } #oko-root .oko-session--gorbov .grid button { font-family: var(--oko-sans) !important; } #oko-root .oko-session--gorbov .rounded-xl { border-radius: 5px; } #oko-root .oko-candle-art { overflow: visible; } #oko-root .oko-candle-art .oko-flame1, #oko-root .oko-candle-art .oko-flame2 { transform-origin: 60px 144px; } #oko-root .oko-tattva-art { filter: none; } /* Rotation is the stimulus of a user-started exercise; global decoration settings must not stop it. */ body.kd-oko-design #oko-root .oko-spiral-art g[style] { animation: okoRot 7s linear infinite !important; animation-direction: var(--oko-direction, normal) !important; animation-play-state: running !important; } /* Results and journal. */ #oko-root .oko-result { background: radial-gradient(ellipse at 50% 10%, #65542c17, transparent 60%), #0c0d16; padding: 45px 24px; display: flex; align-items: center; justify-content: center; } #oko-root .oko-result-card { max-width: 610px; width: 100%; text-align: center; border: 1px solid #d3b98430; border-radius: 5px; padding: 35px 45px; background: linear-gradient(135deg, #191822bb, #10111bcc); } #oko-root .oko-result-seal { display: block; font-size: 44px; color: #c5aa74; line-height: 1; margin-bottom: 24px; } #oko-root .oko-result h1 { font-size: 35px; line-height: 1.15; margin: 16px 0 25px; } #oko-root .oko-result-value { font-family: var(--oko-serif); font-size: 100px; line-height: 1; color: #e7d0a5; margin-bottom: 16px; } #oko-root .oko-result-value > span { font-size: 30px; color: #a79b88; margin-left: 8px; } #oko-root .oko-result-record { color: #c6af7b; font-size: 13px; margin: 0 0 22px; } #oko-root .oko-result-note { color: #ada7ba; font-size: 14px; line-height: 1.9; margin: 0 0 30px; } #oko-root .oko-note-form { text-align: left; border-top: 1px solid var(--oko-line); padding-top: 23px; margin: 20px 0 27px; } #oko-root .oko-note-form label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #cbb58c; margin-bottom: 12px; } #oko-root .oko-note-form textarea { display: block; width: 100%; resize: vertical; min-height: 94px; background: #0b0d16; border: 1px solid #d3b98430; border-radius: 4px; padding: 15px; font: inherit; font-size: 13px; line-height: 1.7; color: var(--oko-text); } #oko-root .oko-note-form textarea:focus { outline: 1px solid #c8ac77; } #oko-root .oko-note-save { display: block; background: #c8ac7710; border: 1px solid #c8ac7760; border-radius: 4px; padding: 10px 16px; color: #d2ba87; font-size: 12px; margin: 12px 0 0 auto; } #oko-root .oko-note-saved { font-size: 13px; color: #c8ae7a; margin-block: 25px; } #oko-root .oko-result-actions { display: flex; gap: 14px; } #oko-root .oko-journal-screen { max-width: 880px; padding: 48px 35px 80px; } #oko-root .oko-journal-screen h1 { font-size: 54px; line-height: 1.1; } #oko-root .oko-journal-screen > div:first-child { padding-bottom: 30px; border-bottom: 1px solid var(--oko-line); } #oko-root .oko-journal-screen > div:first-child > button { color: #cdb383 !important; min-width: 40px; border-radius: 4px; border: 1px solid #d3b98425; } #oko-root .oko-journal-screen .rounded-2xl { border-radius: 5px; } #oko-root .oko-journal-screen .text-sm { font-size: 15px; line-height: 1.7; } #oko-root .oko-journal-screen .text-xs { font-size: 12px; line-height: 1.7; } #oko-root .oko-journal-screen > .flex.gap-3 > div { padding: 25px; background: linear-gradient(135deg, #1b1b29, #11131e) !important; border-color: #d3b98430 !important; } body.kd-oko-design > .wrap { max-width: 920px; padding-inline: 30px; } body.kd-oko-design > .wrap h2 { font-size: 35px; } body.kd-oko-design > .wrap .art { font-size: 15px; line-height: 1.95; color: #b8b1c4; } body.kd-oko-design > .wrap .faq { border-color: #d3b98430; background: #11121c; border-radius: 5px; } @keyframes okoIris { to { transform: rotate(360deg); } } @keyframes okoOrbit { to { transform: rotate(360deg); } } @keyframes okoPreviewSpin { to { transform: rotate(360deg); } } @media (min-width: 1700px) { #oko-root .oko-hero { min-height: 720px; } } @media (max-width: 1150px) { #oko-root .oko-experience { padding-inline: 36px; } #oko-root .oko-hero { min-height: 650px; grid-template-columns: 1.1fr .9fr; } #oko-root .oko-hero h1 { font-size: 125px; } #oko-root .oko-hero h2 { font-size: 40px; } #oko-root .oko-hero-description { font-size: 14px; max-width: 370px; } #oko-root .oko-hero-visual { width: calc(100% + 100px); margin-left: -65px; } #oko-root .oko-hero-actions { gap: 18px; } #oko-root .oko-primary { gap: 25px; padding-inline: 20px; } #oko-root .oko-eye-caption { font-size: 21px; } #oko-root .oko-dashboard { gap: 20px; } #oko-root .oko-dashboard-title { max-width: 260px; } #oko-root .oko-week { gap: 10px; } #oko-root .oko-dashboard-stat { flex-direction: column; gap: 1px; } #oko-root .oko-entry-route { gap: 25px; padding: 30px 25px; } #oko-root .oko-route-title h2 { font-size: 28px; } #oko-root .oko-route-steps { gap: 15px; } #oko-root .oko-route-steps > button { gap: 10px; } #oko-root .oko-route-steps strong { font-size: 12px; } #oko-root .oko-exercise-card { padding: 20px; min-height: 330px; } #oko-root .oko-card-copy h3 { font-size: 28px; } #oko-root .oko-card-top { font-size: 8px; gap: 9px; } #oko-root .oko-method { gap: 35px; padding: 35px 20px; } #oko-root .oko-method h2 { font-size: 41px; } #oko-root .oko-prepare-layout { gap: 35px; } #oko-root .oko-prepare { padding-inline: 35px; } } @media (max-width: 900px) { #oko-root .oko-hero { grid-template-columns: 1fr 1fr; min-height: 610px; } #oko-root .oko-hero-copy { grid-column: 1/-1; max-width: 450px; padding-top: 45px; } #oko-root .oko-hero-visual { position: absolute; right: -65px; top: 80px; width: 510px; z-index: -1; opacity: .5; } #oko-root .oko-eye-caption { display: none; } #oko-root .oko-hero::before { background: linear-gradient(90deg, #0c0d16 0%, #0c0d1680 65%, transparent); } #oko-root .oko-dashboard { flex-wrap: wrap; } #oko-root .oko-dashboard-title { max-width: none; flex: 1 1 50%; } #oko-root .oko-week { margin-right: auto; } #oko-root .oko-entry-route { grid-template-columns: 1fr; gap: 15px; margin-block: 35px 55px; } #oko-root .oko-route-title p { display: none; } #oko-root .oko-exercise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #oko-root .oko-section-head { align-items: flex-start; flex-direction: column; gap: 15px; } #oko-root .oko-section-head p { max-width: none; } #oko-root .oko-filter { gap: 5px; } #oko-root .oko-filter > button { padding: 11px 13px; font-size: 12px; } #oko-root .oko-method { gap: 25px; padding-inline: 0; } #oko-root .oko-method h2 { font-size: 36px; } #oko-root .oko-prepare-layout { grid-template-columns: 1fr; gap: 15px; } #oko-root .oko-instruction { margin-bottom: 30px; } #oko-root .oko-prepare-note { display: none; } #oko-root .oko-settings { max-width: 100%; } #oko-root .oko-result { align-items: flex-start; } } @media (max-width: 540px) { #oko-root .oko-experience { padding-inline: 23px; overflow: hidden; } #oko-root .oko-hero { display: flex; flex-direction: column; min-height: 0; align-items: stretch; gap: 0; } #oko-root .oko-hero-copy { padding: 32px 0 15px; } #oko-root .oko-hero .oko-eyebrow { font-size: 9px; letter-spacing: .13em; } #oko-root .oko-hero h1 { font-size: 98px; margin-block: 24px 22px; } #oko-root .oko-hero h2 { font-size: 35px; line-height: 1.14; } #oko-root .oko-hero-description { font-size: 15px; line-height: 1.9; margin-bottom: 24px; max-width: none; } #oko-root .oko-hero-actions { flex-wrap: wrap; gap: 13px 20px; } #oko-root .oko-primary { min-height: 52px; font-size: 12px; padding: 15px 20px; gap: 24px; } #oko-root .oko-text-link { font-size: 11px; } #oko-root .oko-hero-footnote { font-size: 10px; margin-top: 21px; } #oko-root .oko-hero-visual { position: relative; inset: auto; width: calc(100% + 46px); margin: -20px -23px 57px; opacity: 1; z-index: 0; } #oko-root .oko-eye-caption { display: flex; font-size: 20px; margin-top: -17px; } #oko-root .oko-hero-index { font-size: 7px; bottom: 18px; letter-spacing: .08em; } #oko-root .oko-hero-index > span:last-child { text-align: right; max-width: 220px; } #oko-root .oko-dashboard { gap: 22px 20px; padding: 27px 0; } #oko-root .oko-dashboard-title { flex-basis: 100%; } #oko-root .oko-dashboard-title h2 { font-size: 28px; } #oko-root .oko-week { gap: 13px; } #oko-root .oko-dashboard-stat strong { font-size: 28px; } #oko-root .oko-dashboard-stat > span { font-size: 9px; } #oko-root .oko-journal-link { width: 100%; text-align: left; display: flex; justify-content: space-between; padding: 15px 18px; } #oko-root .oko-entry-route { padding: 25px 20px; margin: 30px 0 55px; } #oko-root .oko-route-title h2 { font-size: 31px; } #oko-root .oko-route-steps { grid-template-columns: 1fr; gap: 0; } #oko-root .oko-route-steps > button { gap: 18px; padding: 15px 0; } #oko-root .oko-route-steps strong { font-size: 14px; margin-bottom: 5px; } #oko-root .oko-route-steps > button > div > span { font-size: 11px; } #oko-root .oko-section-head .oko-eyebrow { font-size: 9px; letter-spacing: .1em; } #oko-root .oko-section-head h2 { font-size: 42px; } #oko-root .oko-section-head p { font-size: 12px; } #oko-root .oko-filter { gap: 6px; padding-bottom: 22px; } #oko-root .oko-filter > button { border-color: #d3b98416; padding: 10px 12px; font-size: 12px; } #oko-root .oko-exercise-grid { grid-template-columns: 1fr; gap: 14px; } #oko-root .oko-exercise-card { padding: 23px; min-height: 315px; } #oko-root .oko-card-top { font-size: 9px; gap: 13px; } #oko-root .oko-card-art { width: 115px; height: 125px; margin-top: 8px; } #oko-root .oko-card-copy h3 { font-size: 33px; } #oko-root .oko-card-copy p { font-size: 14px; } #oko-root .oko-card-bottom { font-size: 11px; } #oko-root .oko-companion { min-height: 310px; } #oko-root .oko-method { grid-template-columns: 1fr; gap: 0; padding: 5px 0 30px; margin-top: 50px; } #oko-root .oko-method > svg { width: 90%; margin: 0 auto; } #oko-root .oko-method .oko-eyebrow { font-size: 9px; } #oko-root .oko-method h2 { font-size: 39px; } #oko-root .oko-method p { font-size: 13px; } #oko-root .oko-bottom-rule { gap: 15px; font-size: 7px; letter-spacing: .08em; padding-bottom: 30px; } #oko-root .oko-prepare { padding: 23px 23px 45px; } #oko-root .oko-prepare-head { padding: 27px 0; gap: 15px; } #oko-root .oko-prepare-head .oko-preview { width: 65px; height: 65px; } #oko-root .oko-prepare-head .oko-eyebrow { font-size: 9px; } #oko-root .oko-prepare-head h1 { font-size: 41px; overflow-wrap: anywhere; margin-top: 13px; } #oko-root .oko-prepare-layout { margin-top: 27px; gap: 7px; } #oko-root .oko-instruction { gap: 15px; } #oko-root .instruction-number { font-size: 24px; } #oko-root .oko-instruction h2 { font-size: 29px; margin-bottom: 14px; } #oko-root .oko-instruction p { font-size: 15px; line-height: 1.9; } #oko-root .oko-settings { padding: 24px 20px; } #oko-root .oko-settings > .oko-eyebrow { font-size: 10px; } #oko-root .oko-settings .oko-chip { font-size: 11px; } #oko-root .oko-session-exit { right: 12px; top: max(12px, env(safe-area-inset-top)); min-height: 36px; font-size: 10px; gap: 6px; padding: 7px 9px; } #oko-root .oko-session-heading { left: 18px; top: 18px; } #oko-root .oko-session-heading > span { font-size: 7px; } #oko-root .oko-session-heading > strong { font-size: 22px; margin-top: 6px; } #oko-root .oko-session[data-grid-size="5"] .grid button:nth-child(13), #oko-root .oko-session--gorbov[data-grid-size="7"] .grid button:nth-child(25) { padding-top: 5px; font-size: 18px !important; } #oko-root .oko-session--gorbov[data-grid-size="7"] .grid button:nth-child(25) { padding-top: 4px; font-size: 12px !important; } #oko-root .oko-session--schulte .grid, #oko-root .oko-session--memory .grid { padding: 6px; } #oko-root .oko-result { padding: 22px 15px; } #oko-root .oko-result-card { padding: 28px 22px; } #oko-root .oko-result .oko-eyebrow { font-size: 10px; } #oko-root .oko-result h1 { font-size: 32px; } #oko-root .oko-result-value { font-size: 84px; } #oko-root .oko-result-actions { flex-direction: column; } #oko-root .oko-result-note { font-size: 13px; } #oko-root .oko-journal-screen { padding: 28px 23px 45px; } #oko-root .oko-journal-screen h1 { font-size: 41px; } #oko-root .oko-journal-screen .text-sm { font-size: 13px; } #oko-root .oko-journal-screen .text-xs { font-size: 11px; } #oko-root .oko-journal-screen > .flex.gap-3 > div { padding: 20px 10px; } body.kd-oko-design > .wrap { padding-inline: 23px; } } @media (prefers-reduced-motion: reduce) { #oko-root .eye-iris, #oko-root .eye-orbit, #oko-root .preview-spiral { animation: none !important; } #oko-root .oko-primary, #oko-root .oko-exercise-card, #oko-root .oko-exercise-card::before { transition: none; } #oko-root .oko-primary:hover, #oko-root .oko-exercise-card:hover { transform: none; } }