/* General reset and styling */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif; background: radial-gradient(circle at top, rgba(255,255,255,1) 0%, rgba(248,248,248,1) 35%, rgba(248,248,248,1) 100%); color: black; /* Fallback then dynamic viewport units to avoid iOS/Android URL bar issues */ min-height: 100vh; min-height: 100dvh; display: flex; justify-content: flex-start; align-items: center; /* Allow vertical scroll if browser UI reduces visible height */ overflow-y: auto; overflow-x: hidden; /* Respect device safe areas (notches/home indicators) */ padding-bottom: env(safe-area-inset-bottom); } /* Disable pull-to-refresh only in app contexts - Primary: via display-mode media query (supported on most modern browsers) - Fallback: when has .app-standalone (set by inline script) */ @media (display-mode: standalone), (display-mode: fullscreen) { html, body { overscroll-behavior-y: none; /* prevent pull-to-refresh / bounce */ } } html.app-standalone, html.app-standalone body { overscroll-behavior-y: none; } #layout { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); /* thirds */ height: 100vh; height: 100svh; width: 100%; } /* Allow each grid row to shrink within the fixed container height */ #layout > * { min-height: 0; } /* Logo container */ #logo-container { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding-top: 8px; /* small top breathing room */ } #logo { max-width: 200px; height: auto; } #app-title { margin-top: 4px; font-family: 'Anta', system-ui, sans-serif; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: 0.5px; color: #111; } /* Skip container */ #search-group { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; /* slightly more space between find and skip containers */ } #skip-container { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; gap: 8px; padding: 8px 16px; } /* Find container (matches skip container styling) */ #find-container { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; gap: 8px; padding: 8px 16px 0; } /* Labels removed in favor of placeholders */ .control-row { /* Center the input (wrapper) itself */ margin: 0 auto; position: relative; display: inline-block; /* width collapses to the input only */ } #skip-to-decimal { appearance: textfield; width: min(520px, 90vw); /* Leave room for the button when centered */ max-width: calc(100vw - 120px); padding: 12px 14px; border: 1px solid #d0d7de; border-radius: 10px; font-size: 1.5rem; /* Larger text inside input */ line-height: 1.2; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03) inset; } /* Match the find input styling to skip */ #find-sequence-input { appearance: textfield; width: min(520px, 90vw); max-width: calc(100vw - 120px); padding: 12px 14px; border: 1px solid #d0d7de; border-radius: 10px; font-size: 1.5rem; line-height: 1.2; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03) inset; } /* Remove spinners in number inputs (Firefox) */ input[type=number] { appearance: textfield; -moz-appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #go-button { padding: 10px 14px; font-size: 1rem; font-weight: 600; cursor: pointer; color: #fff; background: green; /* match .persistent-green color */ border: 1px solid darkgreen; border-radius: 10px; transition: transform 0.06s ease, box-shadow 0.2s ease, filter 0.2s ease; box-shadow: 0 6px 16px rgba(0, 128, 0, 0.25); position: relative; display: inline-flex; align-items: center; justify-content: center; will-change: transform; backface-visibility: hidden; transform: translateZ(0); } /* Find button shares styling */ #find-go-button { padding: 10px 14px; font-size: 1rem; font-weight: 600; cursor: pointer; color: #fff; background: green; border: 1px solid darkgreen; border-radius: 10px; transition: transform 0.06s ease, box-shadow 0.2s ease, filter 0.2s ease; box-shadow: 0 6px 16px rgba(0, 128, 0, 0.25); position: relative; display: inline-flex; align-items: center; justify-content: center; will-change: transform; backface-visibility: hidden; transform: translateZ(0); } /* Disabled state via aria-disabled to avoid mobile painting quirks */ #go-button[aria-disabled="true"], #find-go-button[aria-disabled="true"] { filter: grayscale(0.15) brightness(0.9); cursor: default; } #go-button[aria-disabled="true"]:active, #find-go-button[aria-disabled="true"]:active { transform: none; } /* Loading state: hide arrow icon and show a small spinner */ #go-button.loading, #find-go-button.loading { text-align: center; } #go-button.loading .icon, #find-go-button.loading .icon { opacity: 0; } /* Inline spinner element to avoid pseudo-element inconsistencies */ .btn-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.55); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; transform-origin: center center; pointer-events: none; z-index: 3; /* above icon/text */ } /* Position the button immediately to the right of the centered input */ .control-row #go-button { position: absolute; top: 0; left: 100%; margin-left: 8px; height: 100%; white-space: nowrap; } .control-row #find-go-button { position: absolute; top: 0; left: 100%; margin-left: 8px; height: 100%; white-space: nowrap; } #go-button .icon { width: 22px; height: 22px; display: block; } #find-go-button .icon { width: 22px; height: 22px; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #go-button:hover { filter: brightness(1.03); } #go-button:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(0, 128, 0, 0.2); } #find-go-button:hover { filter: brightness(1.03); } #find-go-button:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(0, 128, 0, 0.2); } #entry-range { padding-top: 0; font-size: 0.92rem; color: #6b7280; margin-top: -2px; margin: -2px 10px 4px 10px; } #find-entry-range { pointer-events: none; /* Disable pointer events for the app title */ font-size: 0.92rem; color: #6b7280; margin: -2px 10px 4px 10px; } #find-entry-range a, #entry-range a { pointer-events: auto; /* re-enable pointer events for the link inside */ } /* Range line links use footer link style */ #entry-range a, #find-entry-range a { color: inherit; text-decoration: none; font-weight: 700; text-underline-offset: 2px; } /* Make logo, title, and range notes non-interactive and non-selectable in all scenarios */ #logo, #app-title, #entry-range, #find-entry-range { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; /* disable clicks/taps on these elements (including links inside) */ } /* Prevent dragging the logo image */ #logo { -webkit-user-drag: none; } /* Pi container */ #bottom-group { display: flex; flex-direction: column; min-height: 0; /* allow flex children to size within grid cell */ overflow: hidden; /* prevent overlap of other rows */ position: relative; /* anchor status overlay */ } #pi-container { width: 100%; flex: 1 1 auto; /* fill remaining space above footer */ height: 100%; min-height: 0; overflow-x: scroll; overflow-y: hidden; background-color: #f0f0f0; /* Subtle off-gray */ /* Subtle oversized π watermark anchored top-left, independent of scroll */ background-image: url('data:image/svg+xml;utf8,π'); background-repeat: no-repeat; background-origin: border-box; background-position: left -100px top -100px; background-attachment: scroll; /* stay fixed to container while content scrolls */ background-size: 50vh; scroll-behavior: smooth; border-top: 1px solid #ddd; /* Subtle border for visual separation */ padding: 56px 16px 16px; /* extra top padding to make room for status and improve vertical balance */ display: flex; justify-content: flex-start; /* align content to left so 3.14 is reachable */ align-items: center; /* vertical center within bottom third (offset by top padding) */ /* Ensure the horizontal scroller isn't covered by mobile browser chrome */ padding-bottom: calc(16px + env(safe-area-inset-bottom)); position: relative; } #pi-digits { font-size: clamp(3.5rem, 12vw, 8.5rem); white-space: nowrap; font-family: 'Libre Baskerville', serif; line-height: 1; /* Remove extra line height */ /* Use tabular numbers where available to minimize width shifts per digit */ font-variant-numeric: tabular-nums lining-nums; text-align: center; position: relative; z-index: 4; /* ensure above watermark */ /* still show the digits if they overflow */ overflow: visible; } #pi-digits span { border-radius: 25px; cursor: pointer; /* indicate tappable/clickable digits */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Highlight for found range */ .highlight-range { /* No persistent background; only temporary glow via .glow-once */ outline: 0; } /* Add this class temporarily to trigger a one-time glow, then remove it */ .glow-once { animation: glow 2.5s ease-out; } .highlight { animation: glow 2.5s ease-out; } .persistent-green { color: green; transition: color 1s ease-out; } #pi-container::-webkit-scrollbar { height: 12px; } #pi-container::-webkit-scrollbar-thumb { background: #999; border-radius: 6px; } #pi-container::-webkit-scrollbar-track { background: #f0f0f0; } @keyframes glow { from { background-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 100px rgba(255, 215, 0, 1); } to { background-color: transparent; box-shadow: none; } } @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Treat widths up to ~tablet portrait as narrow for layout breathing room */ @media (max-width: 900px) { /* Rebalance thirds to give more space to the top/search areas and slightly shrink the bottom */ #layout { grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.75fr); } #pi-digits { font-size: 5rem; } /* Make each input+button row span full width with comfortable side padding */ .control-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 12px; margin: 0 auto; position: relative; } /* Inputs grow to fill the row; button sits to the right */ #skip-to-decimal, #find-sequence-input { width: 100%; max-width: none; } /* Slightly smaller placeholder text to avoid overflow */ #skip-to-decimal::placeholder, #find-sequence-input::placeholder { font-size: 0.9em; } /* Buttons are positioned inline (not absolute) on narrow screens */ .control-row #go-button, .control-row #find-go-button { position: static; height: 44px; padding: 10px 14px; flex: 0 0 auto; } /* Status/message can wrap with safe side margins */ #pi-status { white-space: normal; text-align: center; width: calc(100% - 24px); line-height: 1.2; padding: 8px 10px; } /* Give digits more headroom to accommodate wrapped status */ #pi-container { align-items: flex-start; padding-top: 44px; /* reduced top padding while keeping space for status */ padding-left: 12px; padding-right: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* Mobile watermark sizing and consistent pin */ background-size: 30vh; background-position: left -50px top -30px; } } /* Extra tweaks for compact phones */ @media (max-width: 480px) { #layout { grid-template-rows: minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 0.7fr); } #pi-container { padding-top: 36px; } } /* Smaller placeholder text on compact phones */ @media (max-width: 480px) { #skip-to-decimal::placeholder, #find-sequence-input::placeholder { font-size: 0.85em; } /* WebKit variant for iOS Safari */ #skip-to-decimal::-webkit-input-placeholder, #find-sequence-input::-webkit-input-placeholder { font-size: 0.85em; } } /* Extra-small phones */ @media (max-width: 380px) { #skip-to-decimal::placeholder, #find-sequence-input::placeholder { font-size: 0.75em; } #skip-to-decimal::-webkit-input-placeholder, #find-sequence-input::-webkit-input-placeholder { font-size: 0.75em; } } /* Landscape layout optimizations for short viewports (e.g., foldables/tablets in landscape) */ @media (orientation: landscape) and (max-height: 600px) { /* Reflow to a 2x2 grid: logo left, search right, pi spans bottom row */ #layout { display: grid; grid-template-columns: 1fr 3fr; /* ~33% / ~67% */ grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "logo search" "bottom bottom"; height: 100svh; } #logo-container { grid-area: logo; align-items: center; justify-content: center; padding: 0 12px; } #search-group { grid-area: search; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; } #bottom-group { grid-area: bottom; } /* Tighter top content and titles for short height */ #logo { max-width: 140px; } #app-title { margin-top: 6px; font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.35rem); text-align: center; } /* Give the pi scroller more vertical room in short landscape */ #pi-container { padding-top: 36px; /* a bit more headroom above the digits */ padding-bottom: calc(10px + env(safe-area-inset-bottom)); background-size: 24vh; /* smaller watermark to fit */ background-position: left -24px top -14px; align-items: center; /* keep digits centered vertically within the area */ } /* Prevent footer from clipping visible digits */ #site-footer { padding: 4px 12px calc(4px + env(safe-area-inset-bottom)); font-size: 0.75rem; } /* Scale digits relative to height in short landscape */ #pi-digits { font-size: clamp(2rem, 11vh, 4.75rem); } /* Make control rows fill the search column and keep buttons inline */ .control-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 8px; margin: 0 auto; position: relative; } #find-container { margin-top: 12px; } #skip-to-decimal, #find-sequence-input { width: 100%; max-width: none; } .control-row #go-button, .control-row #find-go-button { position: static; height: 44px; padding: 10px 14px; flex: 0 0 auto; } } /* Extra-compact landscape heights: shrink digits further */ @media (orientation: landscape) and (max-height: 420px) { #pi-digits { font-size: clamp(1.6rem, 9.5vh, 3.75rem); } } /* Footer */ #site-footer { background-color: #f0f0f0; width: 100%; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); text-align: center; font-size: 0.85rem; color: rgba(0, 0, 0, 0.2); margin-top: auto; /* push footer to bottom within bottom-group */ } #site-footer a { color: inherit; text-decoration: none; font-weight: 700; text-underline-offset: 2px; } /* Status/message: independent of horizontal scroll, top of bottom third */ #pi-status { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.85); color: #374151; font-size: 0.95rem; padding: 4px 36px 4px 8px; /* extra right padding for close button */ border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); pointer-events: auto; /* allow clicking Find next occurrence */ white-space: normal; /* allow wrapping on narrow screens */ overflow-wrap: anywhere; text-align: center; max-width: calc(100% - 24px); z-index: 5; transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease; } /* Error variant */ #pi-status.is-error { background: #fee2e2; /* light red */ color: #991b1b; /* dark red text */ border: 1px solid #fecaca; box-shadow: 0 2px 8px rgba(153, 27, 27, 0.15); } #pi-status.is-error .status-close { color: #991b1b; } /* Fading state */ #pi-status.is-fading { opacity: 0; filter: blur(0.3px); transform: translateX(-50%) translateY(-2px); } /* Link-like button inside the status overlay */ #pi-status .linklike { appearance: none; border: none; background: transparent; color: inherit; font: inherit; padding: 0 0 0 4px; margin: 0; cursor: pointer; text-decoration: underline; font-weight: 700; } #pi-status .linklike:focus { outline: 2px solid #4f46e5; /* visible keyboard focus */ outline-offset: 2px; border-radius: 4px; } /* Close (×) button inside status */ #pi-status .status-close { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: #374151; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #pi-status .status-close:focus { outline: 2px solid #4f46e5; outline-offset: 2px; } @media (max-width: 900px) { #pi-status { padding: 6px 38px 6px 10px; } #pi-status .status-close { right: 6px; } } /* ================= Loading Overlay ================= */ #loading-overlay { position: fixed; inset: 0; background:#fff; display:flex; align-items:center; justify-content:center; z-index:9999; transition: opacity .6s ease, visibility .6s ease; } #loading-overlay.is-fading { opacity:0; visibility:hidden; } #loader-wrapper { width:25vw; max-width:320px; aspect-ratio:1/1; position:relative; } #pi-loader { width:100%; height:100%; overflow:visible; } #pi-loader .diameter, #pi-loader .circle { fill:none; stroke:#000; stroke-width:4; } #pi-loader .diameter { stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation: draw-line 0.275s ease-out forwards; } /* Circle starts after line completes; use butt caps so initial rightmost point not visible */ #pi-loader .circle { stroke-linecap:butt; stroke-dasharray:0 1; stroke-dashoffset:0; animation: draw-circle 0.6s ease-out forwards 0.275s; } /* Spin entire symbol (line + circle) after drawing completes (0.275 + 0.6 = 0.875s) */ #pi-loader .pi-symbol { transform-origin:50% 50%; animation: loader-spin 1.5s linear infinite 0.875s; } @keyframes draw-line { to { stroke-dashoffset:0; } } /* Circle pathLength=1 so dashoffset 1->0 draws full circumference clockwise */ @keyframes draw-circle { from { stroke-dasharray:0 1; } to { stroke-dasharray:1 0; } } @keyframes loader-spin { to { transform: rotate(360deg); } } /* Reduce size on very small screens */ @media (max-width:480px) { #loader-wrapper { width:40vw; } }