/* Direction 02. Apple-inspired restraint, optical type and light materials.
   Reference: github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md */
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  --bg: #fff;
  --panel: #fff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #0000000c;
  --blue: #0769dc;
  --bright: #0066cc;
  --art: 40, 117, 221;
  --field: #fff;
  --toolbar: #ffffffe0;
  --art-opacity: 1;
  --ease-fluid: cubic-bezier(.32,.72,0,1);
  --shadow-soft: 0 2px 5px #11244a05, 0 18px 50px #11244a09;
  --shadow-overlay: 0 2px 8px #11244a0a, 0 25px 70px #11244a12;
}
body[data-theme=glacier] { --bg:#f5f5f7; --line:#0000000d; }
body[data-theme=azur] { --bg:#eef5ff; --line:#1d53a410; --blue:#1659db; --bright:#1659db; }
body { background:var(--bg); transition:background .4s var(--ease-fluid),color .4s var(--ease-fluid); }
.header { height:76px; padding:0 max(5%,calc((100% - 1180px)/2)); background:#ffffffcc; backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid transparent; position:sticky; top:0; z-index:10; transition:border-color .3s,box-shadow .3s; }
.header.scrolled { border-bottom-color:var(--line); box-shadow:0 1px 12px #00000003; }
.brand { font-size:25px; font-weight:650; letter-spacing:-1.4px; gap:10px; }
.brand>svg { width:23px; height:27px; }
.brand-slash { color:#97979c; font-weight:400; }
nav { margin-left:auto; gap:36px; }
nav button { font-size:13px; font-weight:400; min-height:44px; color:#515154; }
.header-cta { margin-left:42px; font-size:13px; color:var(--bright); gap:8px; min-height:44px; padding:0; }
.header-cta span { font-size:17px; }
.hero { min-height:560px; height:66svh; max-height:720px; overflow:hidden; align-items:flex-start; }
.vertical-line { display:none; }
.hero-content { width:min(820px,69%); padding:60px 0 96px; }
.intro { margin:0 0 27px; font-size:17px; font-weight:500; letter-spacing:-.25px; color:var(--bright); }
h1 { font-size:clamp(64px,6.35vw,100px); line-height:1.055; font-weight:650; letter-spacing:-.063em; margin:0 0 28px; }
.hero-description { color:var(--muted); font-size:20px; line-height:1.55; letter-spacing:-.4px; margin:0 auto 36px; max-width:640px; text-wrap:balance; }
.site-form { max-width:590px; padding:7px; border-radius:999px; border:1px solid #d2d2d780; background:var(--field); box-shadow:var(--shadow-soft); transition:box-shadow .25s var(--ease-fluid),border-color .25s; }
.site-form:focus-within { border-color:#0071e399; box-shadow:0 0 0 4px #0071e30e,var(--shadow-soft); }
.input-globe { width:22px; height:22px; margin:0 13px 0 17px; stroke:#86868b; }
.site-form input { font-size:16px; padding:12px 0; letter-spacing:-.2px; }
.site-form input::placeholder { color:#6e6e73; opacity:1; }
.site-form button { min-height:48px; border-radius:999px; padding:14px 22px; gap:17px; font-size:14px; font-weight:500; background:var(--blue); transition:transform .3s var(--ease-fluid),background .2s; }
.site-form button:hover { background:#0878ec; }
.site-form button:active,.text-button:active { transform:scale(.97); transition:transform .1s ease-out; }
.form-note { color:#6e6e73; margin-top:17px; font-size:12px; letter-spacing:.03px; }
.form-error { color:#ba2435; line-height:1.5; }
.hero-bottom { left:0; right:0; bottom:25px; display:flex; align-items:center; justify-content:center; gap:13px; color:#86868b; font-size:11px; }
.hero-bottom>span:last-child { color:#515154; font-weight:500; letter-spacing:.5px; }
.hero-bottom>span:last-child span { padding:0 5px; color:var(--bright); }
.connections { opacity:.4; }
.connection { stroke:rgba(var(--art),.12); }
.connection.faint { stroke:rgba(var(--art),.06); }
.signal { stroke:rgba(var(--art),.45); animation-duration:18s; }
.signal-two { animation-duration:22s; }
.search-art { left:clamp(18px,3.8vw,90px); top:47%; width:222px; transform:rotate(-8deg); opacity:.9; }
.art-caption { justify-content:center; margin-bottom:17px; font-size:10px; color:#6e6e73; gap:0; letter-spacing:.1px; }
.tiny-cross { display:none; }
.ranking-window { height:183px; border:1px solid #e5e8ef; border-radius:15px; padding:0 14px; background:#fff; box-shadow:0 2px 4px #1d407c05,0 20px 45px #1d407c0b; }
.window-bar { height:33px; margin-bottom:10px; border-color:#00000008; gap:5px; }
.window-bar span { width:4px; height:4px; background:#aeb7c7; opacity:.65; }
.window-bar i { height:3px; width:40px; background:#e2e6ed; }
.rank-row { height:40px; padding:5px 7px; }
.rank-icon { border-color:#e1e7f0; border-radius:6px; }
.rank-row.secondary { opacity:.65; }
.rank-row i { background:#c8d2e2; }
.rank-row b { color:#a9b4c6; }
.rank-row.selected { left:9px; right:-18px; bottom:9px; height:44px; background:#fff; color:var(--ink); border:1px solid #bad5ff; border-radius:9px; box-shadow:0 2px 3px #1d407c04,0 8px 20px #1d407c09; animation-duration:12s; }
.rank-row.selected strong { font-size:11px; font-weight:600; }
.rank-row.selected .rank-icon { background:#eaf3ff; border:0; width:26px; height:26px; display:grid; place-items:center; }
.rank-icon svg { stroke:var(--blue); width:18px; height:18px; }
.rank-row.selected b { color:var(--blue); font-weight:600; }
.rank-row.selected i { background:#c4d9f7; margin-top:5px; }
.scan-line { background:rgba(var(--art),.23); animation-duration:12s; }
.art-coordinates { display:none; }
.globe-art { top:37%; width:290px; right:clamp(10px,2.2vw,60px); opacity:.85; }
.globe-art .art-caption { padding:0; margin-bottom:5px; }
.globe-art canvas { width:320px; height:320px; margin:-18px 0 -12px -15px; }
.citation { background:#ffffffdb; color:var(--bright); border:1px solid #ffffff; box-shadow:0 1px 4px #11244a05,0 10px 30px #11244a0a; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:11px 14px; font-size:10px; border-radius:999px; animation-duration:12s; }
.citation-one { top:72px; left:2px; }
.citation-two { right:1px; bottom:53px; }
.citation-dot { background:var(--blue); }
.toolbox { background:#f5f5f7; border:0; padding:29px 8% 104px; }
.toolbox>p { font-size:12px; color:#6e6e73; margin:0 0 27px; }
.tools { max-width:980px; }
.tool { color:#515154; opacity:.85; border:0; font-size:25px; font-weight:600; gap:10px; height:35px; letter-spacing:-.8px; white-space:nowrap; }
.tool.claude { font-size:24px; }
.tool.codex { font-size:25px; font-weight:500; }
footer { padding:23px max(5%,calc((100% - 1180px)/2)) 87px; background:#f5f5f7; color:#86868b; font-size:10px; }
.design-lab { position:relative; bottom:auto; left:auto; transform:none; width:max-content; margin:-70px auto 16px; padding:4px 5px 4px 17px; gap:7px; border:1px solid #fff; background:#ffffffc9; backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); box-shadow:0 1px 4px #11244a06,0 8px 30px #11244a12; }
.lab-label { color:#6e6e73; }
.theme-options { gap:1px; }
.theme-options button { min-height:44px; font-size:11px; padding:10px 13px; border-radius:999px; color:#6e6e73; transition:background .25s var(--ease-fluid),color .25s; }
.theme-options button[aria-pressed=true] { color:#1d1d1f; background:#e9e9eeaa; }
.swatch { width:9px; height:9px; border:1px solid #b6becb; }
.swatch.white { background:#fff; }
.swatch.ice { background:#dfe5ee; }
.swatch.azure { background:#94bfff; border-color:#7aa7e7; }
#motion-toggle { min-width:44px; min-height:44px; padding:10px; border-left:1px solid #00000008; color:#515154; }
#motion-toggle:disabled { opacity:.4; cursor:default; }
.info-dialog { padding:46px; border:1px solid #fff; border-radius:24px; background:#ffffffef; box-shadow:0 2px 8px #00000008,0 30px 80px #00000024; }
.info-dialog::backdrop { background:#15223838; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.info-dialog h2 { font-size:36px; font-weight:600; letter-spacing:-1.4px; }
.info-dialog p { font-size:15px; line-height:1.7; }
.info-dialog h3 { font-size:17px; font-weight:600; }
.close-dialog { right:12px; top:10px; width:44px; height:44px; padding:0; font-weight:300; }
.text-button { padding:14px 20px; min-height:44px; border-radius:999px; font-size:14px; }
.loading-view { background:var(--bg); }
.loading-center h2 { font-weight:600; letter-spacing:-.055em; }
.loader-mark span { border-radius:5px; }
.back-home { min-height:44px; color:var(--bright); }
.loading-track { background:#dbe5f2; }
.skip-link { border-radius:999px; }
@media(min-width:1700px) {
  .hero-content { width:920px; }
  h1 { font-size:112px; }
  .search-art { width:255px; left:7%; }
  .globe-art { right:6%; width:320px; }
  .globe-art canvas { width:360px; height:360px; }
}
@media(max-width:1180px) {
  .hero-content { width:76%; }
  h1 { font-size:clamp(62px,7.2vw,84px); }
  .search-art { left:-65px; width:210px; opacity:.6; top:52%; }
  .globe-art { right:-76px; opacity:.6; top:42%; }
  .header { padding:0 5%; }
  .header-cta { margin-left:32px; }
  .tool,.tool.codex { font-size:21px; gap:8px; }
  .tool.claude { font-size:20px; }
  .tool svg,.tool.claude svg { width:23px; height:23px; }
}
@media(max-width:760px) {
  .header { height:66px; padding:0 23px; }
  .brand { font-size:23px; gap:8px; }
  .brand>svg { width:21px; height:25px; }
  .header-cta { font-size:11px; margin-left:auto; gap:6px; }
  .hero { height:auto; min-height:650px; max-height:none; padding:34px 22px 240px; align-items:flex-start; }
  .hero-content { width:100%; padding:0; }
  .intro { font-size:14px; margin-bottom:23px; }
  h1 { font-size:clamp(42px,9.5vw,68px); line-height:1.075; font-weight:650; letter-spacing:-.058em; margin-bottom:23px; }
  .hero-description { font-size:17px; line-height:1.55; letter-spacing:-.35px; margin-bottom:30px; }
  .site-form { padding:6px; border-radius:999px; max-width:500px; }
  .input-globe { width:18px; min-width:18px; height:18px; margin:0 8px 0 10px; }
  .site-form input { font-size:16px; width:100%; padding:11px 0; }
  .site-form button { min-height:46px; font-size:12px; padding:13px 15px; gap:7px; }
  .site-form button svg { display:none; }
  .form-note { margin-top:15px; font-size:11px; }
  .hero-bottom { bottom:22px; left:0; right:0; width:auto; transform:none; display:flex; gap:9px; font-size:10px; line-height:1.5; }
  .hero-bottom>span { display:inline; }
  .connections { opacity:.25; }
  .search-art { left:calc(50% - 175px); top:auto; bottom:93px; width:180px; transform:rotate(-8deg) scale(.78); transform-origin:left bottom; opacity:.78; }
  .search-art .art-caption { display:none; }
  .ranking-window { height:174px; }
  .globe-art { right:calc(50% - 183px); top:auto; bottom:48px; width:195px; opacity:.75; }
  .globe-art canvas { width:210px; height:210px; margin:0; }
  .globe-art .art-caption { display:none; }
  .citation-one { top:65px; left:-3px; font-size:8px; padding:8px 10px; }
  .citation-two { display:none; }
  .toolbox { padding:27px 22px 104px; }
  .toolbox>p { font-size:11px; margin-bottom:25px; }
  .tools { row-gap:24px; }
  .tool { font-size:22px; }
  .tool.claude { font-size:21px; }
  .tool.codex { font-size:23px; }
  footer { padding:15px 23px 96px; font-size:9px; }
  .design-lab { padding:3px 4px 3px 12px; gap:3px; }
  .lab-label { font-size:9px; }
  .theme-options button { font-size:10px; padding:10px 9px; }
  .info-dialog { padding:38px 26px; }
  .info-dialog h2 { font-size:31px; }
}
@media(max-width:370px) {
  h1 { font-size:36px; }
  .hero { padding-left:18px; padding-right:18px; }
  .hero-description { font-size:15px; }
  .site-form button { padding:13px 10px; font-size:11px; }
  .input-globe { margin-left:7px; margin-right:7px; }
  .header { padding:0 19px; }
  .header-cta { font-size:10px; }
  .search-art { left:calc(50% - 145px); transform:rotate(-8deg) scale(.7); }
  .globe-art { right:calc(50% - 158px); width:180px; }
  .globe-art canvas { width:190px; height:190px; }
  .lab-label { display:none; }
}
@media(prefers-reduced-transparency:reduce) {
  .header,.design-lab,.citation,.info-dialog { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .info-dialog::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(prefers-contrast:more) {
  :root { --muted:#424245; --line:#00000030; }
  .header,.design-lab,.citation,.info-dialog { background:#fff; border-color:#00000055; }
  .form-note,.hero-bottom,footer,.toolbox>p,.tool { color:#424245; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}