/* FIELD NOTES — expressive editorial system, no framework required. */
:root { color-scheme:light; --paper:#f4f0e8; --paper-deep:#e9e3d8; --ink:#201b31; --ink-soft:#504b61; --muted:#777184; --rule:rgba(32,27,49,.18); --rule-strong:rgba(32,27,49,.38); --violet:#7658e8; --violet-pale:#ded5ff; --lime:#d9f96c; --blue:#9bdcff; --coral:#ff7b62; --dark:#201b31; --wrap:1220px; --ease:cubic-bezier(.2,.8,.2,1); --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
html[data-theme="dark"] { color-scheme:dark; --paper:#171423; --paper-deep:#201b31; --ink:#f4f0e8; --ink-soft:#c8c1d9; --muted:#a39bb6; --rule:rgba(244,240,232,.17); --rule-strong:rgba(244,240,232,.38); --violet:#ad98ff; --violet-pale:#30274e; --lime:#d9f96c; --blue:#74c9f4; --coral:#ff8b77; --dark:#0f0d19; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:6rem; background:var(--paper); } body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection { background:var(--lime); color:#201b31; } a { color:inherit; text-decoration-thickness:.08em; text-underline-offset:.18em; } button,input { font:inherit; } button { color:inherit; } img,svg { max-width:100%; } :focus-visible { outline:3px solid var(--violet); outline-offset:4px; } [hidden] { display:none!important; }
.wrap { width:min(var(--wrap),calc(100% - 3.5rem)); margin-inline:auto; } .grain { pointer-events:none; position:fixed; inset:0; z-index:20; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:40; padding:.65rem 1rem; background:var(--lime); color:#201b31; font-weight:800; border-radius:.4rem; } .skip-link:focus { top:1rem; } .site-header { position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--paper) 91%,transparent); border-bottom:1px solid var(--rule); backdrop-filter:blur(18px); }
.header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; } .wordmark { display:flex; align-items:center; gap:.8rem; text-decoration:none; flex-shrink:0; } .mark { display:grid; place-items:center; width:44px; height:44px; background:var(--violet); color:white; border-radius:50% 44% 48% 39%; font-size:.94rem; font-weight:950; letter-spacing:-.12em; transform:rotate(-7deg); } .mark span,.footer-mark span { color:var(--lime); }
.wordmark-copy { display:grid; font:850 .86rem/1.15 var(--mono); letter-spacing:.08em; } .wordmark-copy small { margin-top:.35rem; color:var(--muted); font-size:.56rem; font-weight:600; letter-spacing:.08em; } .main-nav { display:flex; align-items:center; gap:clamp(.8rem,2.4vw,2.2rem); } .main-nav a { font-size:.78rem; font-weight:750; text-decoration:none; white-space:nowrap; } .main-nav a span { margin-right:.32rem; color:var(--violet); font:.68rem var(--mono); } .header-actions { display:flex; align-items:center; gap:.7rem; } .icon-button { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .7rem; border:1px solid var(--rule); background:transparent; border-radius:100px; cursor:pointer; font-size:.74rem; font-weight:750; } #theme-glyph { color:var(--violet); font-size:1.1rem; } .header-github { text-decoration:none; background:var(--ink); color:var(--paper); padding:.66rem .9rem; border-radius:.45rem; font-size:.76rem; font-weight:800; white-space:nowrap; } .header-github span { color:var(--lime); padding-left:.3rem; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.92fr); gap:clamp(2.4rem,5vw,5rem); padding-top:clamp(4.5rem,8vw,7rem); padding-bottom:2rem; } .hero-copy { position:relative; z-index:2; align-self:center; }
.eyebrow,.section-kicker,.meta-label,.card-label,.study-strip-label,.art-topline,.caption-index,.card-tags,.hobby-top,.hobby-foot,.data-provenance,.repo-footnote>span,.back-top { font-family:var(--mono); text-transform:uppercase; letter-spacing:.105em; font-size:.65rem; font-weight:800; } .eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:.62rem; margin:0 0 1.5rem; color:var(--ink-soft); } .eyebrow-dot,.live-dot { width:8px; height:8px; display:inline-block; background:#55a66c; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,#55a66c 18%,transparent); } .issue { padding:.3rem .44rem; border:1px solid var(--rule); border-radius:.25rem; font-size:.56rem; } h1,h2,h3,p { margin-top:0; }
.hero h1 { max-width:760px; margin:0; font-size:clamp(4.15rem,8vw,7.8rem); line-height:.91; letter-spacing:-.092em; font-weight:900; } .ink-highlight { position:relative; z-index:0; white-space:nowrap; } .ink-highlight::before { content:""; position:absolute; left:-.025em; right:-.06em; bottom:.02em; height:.32em; z-index:-1; background:var(--lime); transform:rotate(-1.5deg); }
.hero-lede { max-width:600px; margin:2rem 0 1.2rem; color:var(--ink-soft); font-size:clamp(1.04rem,1.3vw,1.2rem); line-height:1.72; } .hero-note { display:flex; align-items:flex-start; gap:.65rem; max-width:560px; color:var(--ink); font-size:.85rem; font-weight:650; } .asterisk { color:var(--violet); font-size:1.25rem; line-height:1.2; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.45rem; margin:1.7rem 0 2.8rem; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:.8rem; text-decoration:none; border:0; border-radius:.45rem; padding:.87rem 1.15rem; font-size:.8rem; font-weight:850; cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease); } .button:hover { transform:translateY(-2px); box-shadow:0 8px 0 color-mix(in srgb,var(--ink) 12%,transparent); } .button-dark { background:var(--ink); color:var(--paper); } .button-dark span { color:var(--lime); } .button-lime { background:var(--lime); color:#201b31; } .button-small { padding:.52rem .7rem; font-size:.7rem; background:var(--ink); color:var(--paper); }
.text-link { font-size:.77rem; font-weight:800; text-decoration:none; border-bottom:1px solid var(--rule-strong); padding-bottom:.32rem; } .text-link span { margin-left:.25rem; color:var(--violet); } .hero-meta { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem 1.5rem; padding-top:1.2rem; border-top:1px solid var(--rule); } .hero-meta>div { display:grid; gap:.24rem; } .meta-label { color:var(--muted); font-size:.55rem; } .hero-meta strong { font-size:.77rem; line-height:1.5; font-weight:800; }
.hero-art { min-width:0; position:relative; align-self:center; padding:.85rem; border:1px solid var(--rule-strong); background:var(--paper-deep); border-radius:1.1rem; box-shadow:12px 14px 0 color-mix(in srgb,var(--violet) 19%,transparent); transform:rotate(1deg); } .art-topline { display:flex; justify-content:space-between; padding:.45rem .4rem .75rem; color:var(--muted); font-size:.55rem; } .hero-art img { display:block; width:100%; height:auto; border-radius:.72rem; } .art-caption { display:flex; gap:.7rem; align-items:center; padding:.95rem .45rem .4rem; } .art-caption p { margin:0; font-size:.75rem; line-height:1.45; } .art-caption strong { font-size:1rem; } .caption-star { color:var(--violet); font-size:1.8rem; } .caption-index { margin-left:auto; font-size:.58rem; color:var(--muted); } .orbit-stamp { position:absolute; right:-1.4rem; top:3.7rem; display:grid; place-content:center; width:90px; height:90px; text-align:center; font:900 .67rem/1.45 var(--mono); color:var(--dark); background:var(--lime); border:2px solid var(--dark); border-radius:50%; transform:rotate(11deg); box-shadow:3px 5px 0 var(--dark); }
.hero-bottomline { grid-column:1/-1; display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 0 .2rem; margin-top:1.25rem; border-top:1px solid var(--rule); font:700 .59rem var(--mono); letter-spacing:.14em; color:var(--muted); }
.section { padding:clamp(4.6rem,8vw,7.5rem) 0; } .interests-section { background:var(--dark); color:#f4f0e8; position:relative; overflow:hidden; } .interests-section::before { content:"✳"; position:absolute; top:-2.7rem; right:5%; font-size:22rem; color:rgba(217,249,108,.055); line-height:1; pointer-events:none; } .section-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,.65fr); align-items:end; gap:3rem; margin-bottom:2.8rem; } .section-kicker { margin-bottom:1.05rem; color:var(--muted); font-size:.63rem; } .section-kicker span { color:var(--violet); } .interests-section .section-kicker { color:#b9b1cb; } .interests-section .section-kicker span { color:var(--lime); } .section-heading h2,.question-lead h2,.closing-inner h2 { margin:0; font-size:clamp(2.9rem,5.7vw,5.3rem); line-height:.98; letter-spacing:-.075em; font-weight:900; } .section-heading h2 em,.question-lead h2 em,.closing-inner h2 em { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.08em; } .section-intro { margin:0 0 .35rem; max-width:470px; color:var(--ink-soft); font-size:.98rem; line-height:1.8; } .interests-section .section-intro { color:#c3bad5; }
.interest-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; } .interest-card { min-height:350px; position:relative; display:flex; flex-direction:column; padding:1.15rem 1.1rem 1.25rem; border-radius:.8rem; overflow:hidden; isolation:isolate; color:#201b31; transition:transform .22s var(--ease); } .interest-card:hover { transform:translateY(-6px) rotate(-.35deg); } .card-violet { background:#d6c9ff; } .card-lime { background:#dcf78d; } .card-blue { background:#b6e9ff; } .card-coral { background:#ffb5a3; } .card-head { display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); } .card-number { font-size:.73rem; font-weight:800; } .card-glyph { font-size:1.7rem; } .card-label { position:relative; margin:2.2rem 0 .85rem; font-size:.53rem; letter-spacing:.12em; } .interest-card h3 { position:relative; margin:0 0 .9rem; font-size:clamp(1.45rem,2vw,2.05rem); line-height:1; letter-spacing:-.06em; font-weight:900; } .interest-card>p:not(.card-label) { position:relative; margin:0 0 1.25rem; color:rgba(32,27,49,.83); font-size:.78rem; line-height:1.7; } .card-tags { position:relative; display:flex; flex-wrap:wrap; gap:.32rem; margin-top:auto; font-size:.52rem; letter-spacing:.01em; text-transform:none; } .card-tags span { padding:.3rem .38rem; border:1px solid rgba(32,27,49,.28); border-radius:99px; } .card-watermark { position:absolute; right:-.22em; bottom:-.45em; font:950 8.5rem/.9 var(--sans); letter-spacing:-.1em; opacity:.08; z-index:-1; transform:rotate(-13deg); }
.study-strip { display:grid; grid-template-columns:1.25fr 1fr 1.5fr 1.65fr 1fr; align-items:center; gap:1.2rem; margin-top:1.1rem; padding:1.25rem 1.1rem; border:1px solid rgba(244,240,232,.25); border-radius:.75rem; } .study-strip-label { color:var(--lime); font-size:.55rem; line-height:1.6; } .study-strip-label .live-dot { margin-right:.45rem; background:var(--lime); box-shadow:none; } .study-item { display:grid; gap:.3rem; } .study-item span { color:#a79bbd; font:.61rem var(--mono); } .study-item strong { font-size:.71rem; line-height:1.45; } .study-aside { padding-left:.9rem; border-left:1px solid rgba(244,240,232,.25); color:var(--lime); font:.67rem/1.6 var(--mono); }
.questions-section { background:var(--violet-pale); } html[data-theme="dark"] .questions-section { background:#211b34; } .question-layout { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); gap:clamp(3rem,8vw,8rem); } .question-lead { position:relative; } .question-lead .section-kicker { color:var(--ink-soft); } .question-lead h2 { font-size:clamp(3rem,5.5vw,5.5rem); } .question-lead h2 em { color:var(--violet); } .question-lead>p:not(.section-kicker) { max-width:340px; margin-top:1.5rem; color:var(--ink-soft); } .small-stamp { display:inline-block; margin-top:2rem; padding:.65rem .8rem; border:1px solid var(--rule-strong); border-radius:.2rem; color:var(--ink-soft); font:800 .54rem/1.65 var(--mono); letter-spacing:.09em; transform:rotate(-4deg); }
.question-list { border-top:1px solid var(--rule-strong); } .question-list details { border-bottom:1px solid var(--rule-strong); } .question-list summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:2.5rem 1fr 1.5rem; gap:.7rem; align-items:center; padding:1.4rem .2rem; } .question-list summary::-webkit-details-marker { display:none; } .question-list summary>span:first-child { color:var(--violet); font:.72rem var(--mono); } .question-list summary strong { font-size:clamp(1.1rem,2vw,1.55rem); letter-spacing:-.035em; } .details-plus { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--rule); border-radius:50%; font-size:1.2rem; transition:transform .2s; } details[open] .details-plus { transform:rotate(45deg); background:var(--lime); border-color:var(--lime); color:var(--dark); } .details-body { padding:0 3rem 1.4rem; animation:reveal .25s var(--ease); } .details-body p { max-width:610px; margin:0 0 .8rem; color:var(--ink-soft); } .details-body span { font:700 .57rem var(--mono); letter-spacing:.09em; color:var(--violet); } @keyframes reveal { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.library-section { background:var(--paper); } .library-heading .section-intro { max-width:430px; } .repo-toolbar { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.8rem; border:1px solid var(--rule); border-radius:.8rem; background:var(--paper-deep); } .search-box { display:flex; align-items:center; gap:.65rem; flex:1 1 250px; min-width:180px; padding:0 .65rem; } .search-box>span { color:var(--violet); font:2rem/1 var(--sans); } .search-box input { min-width:0; width:100%; padding:.65rem .1rem; background:transparent; border:0; outline:0; color:var(--ink); font-size:.83rem; } .search-box input::placeholder { color:var(--muted); } .clear-search { border:0; background:transparent; cursor:pointer; color:var(--muted); font-size:.75rem; } .language-filters { display:flex; gap:.35rem; overflow-x:auto; max-width:100%; padding:.12rem; scrollbar-width:thin; } .filter-chip { flex:0 0 auto; border:1px solid var(--rule); background:transparent; padding:.46rem .65rem; border-radius:99px; font:700 .64rem var(--mono); cursor:pointer; } .filter-chip:hover,.filter-chip.is-active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.repo-status-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.2rem 0 .85rem; } #result-line { margin:0; font-size:.75rem; font-weight:800; } .data-provenance { display:flex; align-items:center; gap:.55rem; margin:0; color:var(--muted); font-size:.55rem; } .data-provenance .live-dot { width:6px; height:6px; box-shadow:none; } .api-note { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; margin-bottom:1rem; border:1px dashed var(--coral); border-radius:.6rem; background:color-mix(in srgb,var(--coral) 9%,var(--paper)); } .api-note p { margin:0; color:var(--ink-soft); font-size:.78rem; }
.repo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; } .repo-card { min-width:0; min-height:220px; display:flex; flex-direction:column; padding:1.15rem; border:1px solid var(--rule); border-radius:.8rem; background:var(--paper); transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; } .repo-card:hover { transform:translateY(-4px); border-color:var(--violet); box-shadow:5px 6px 0 color-mix(in srgb,var(--violet) 22%,transparent); } .repo-card-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:var(--muted); font:700 .58rem var(--mono); text-transform:uppercase; letter-spacing:.07em; } .repo-state { padding:.25rem .35rem; border-radius:.2rem; background:var(--paper-deep); color:var(--muted); } .repo-state.archived { background:color-mix(in srgb,var(--coral) 18%,var(--paper)); color:var(--ink); } .repo-card h3 { margin:1.6rem 0 .7rem; font-size:1.12rem; letter-spacing:-.045em; overflow-wrap:anywhere; } .repo-card h3 a { text-decoration:none; } .repo-card h3 a:hover { text-decoration:underline; text-decoration-color:var(--violet); } .repo-description { margin:0 0 auto; color:var(--muted); font-size:.73rem; line-height:1.65; } .repo-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem; padding-top:1rem; margin-top:1.1rem; border-top:1px solid var(--rule); color:var(--ink-soft); font:.6rem var(--mono); } .repo-language { display:inline-flex; align-items:center; gap:.35rem; } .language-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--violet); } .repo-arrow { color:var(--violet); font-size:1rem; } .repo-skeleton { min-height:220px; border-radius:.8rem; border:1px solid var(--rule); background:linear-gradient(100deg,var(--paper-deep) 20%,var(--paper) 40%,var(--paper-deep) 60%); background-size:220% 100%; animation:shimmer 1.3s linear infinite; } @keyframes shimmer { to { background-position-x:-220%; } } .empty-state { grid-column:1/-1; padding:3rem 1rem; text-align:center; border:1px dashed var(--rule-strong); border-radius:.75rem; color:var(--muted); } .repo-footnote { display:grid; grid-template-columns:5.5rem 1fr auto; align-items:center; gap:1rem; margin-top:1.1rem; padding:1rem 1.1rem; border:1px solid var(--rule); border-radius:.65rem; } .repo-footnote>span { color:var(--violet); font-size:.57rem; } .repo-footnote p { margin:0; color:var(--muted); font-size:.72rem; line-height:1.65; } .repo-footnote a { font-size:.7rem; font-weight:800; text-decoration:none; white-space:nowrap; } .noscript-note { padding:1rem; background:var(--paper-deep); border-radius:.5rem; }
.offscreen-section { background:var(--paper-deep); } .hobby-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; } .hobby-card { display:flex; min-width:0; flex-direction:column; min-height:350px; padding:1.1rem; border:1px solid var(--rule); border-radius:.85rem; background:var(--paper); overflow:hidden; } .hobby-top { display:flex; justify-content:space-between; color:var(--muted); font-size:.58rem; } .hobby-top span+span { font-size:1.25rem; color:var(--violet); } .waveform { height:95px; display:flex; align-items:center; justify-content:space-between; gap:3px; margin:1.4rem 0; padding:.5rem .1rem; border-block:1px solid var(--rule); } .waveform i { display:block; width:3px; height:23%; border-radius:5px; background:var(--violet); transform-origin:center; animation:wave 1.1s ease-in-out infinite alternate; } .waveform i:nth-child(5n+1) { height:75%; background:var(--coral); animation-delay:-.4s; } .waveform i:nth-child(3n) { height:48%; animation-delay:-.8s; } .waveform i:nth-child(4n) { height:95%; background:var(--lime); animation-delay:-.2s; } @keyframes wave { to { transform:scaleY(.28); } }
.genre-cloud { min-height:95px; display:flex; align-content:center; align-items:center; justify-content:center; flex-wrap:wrap; gap:.38rem; margin:1.4rem 0; padding:.7rem .25rem; border-block:1px solid var(--rule); } .genre-cloud span { display:inline-block; padding:.3rem .4rem; border-radius:3px; background:var(--violet-pale); color:var(--ink); font:800 .55rem var(--mono); transform:rotate(-2deg); } .genre-cloud span:nth-child(2n) { background:var(--lime); transform:rotate(2deg); } .genre-cloud span:nth-child(3n) { background:var(--coral); } .visual-toy { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; place-items:center; position:relative; min-height:95px; margin:1.4rem 0; border-block:1px solid var(--rule); overflow:hidden; } .visual-toy span { width:45px; height:45px; border:2px solid var(--violet); border-radius:50%; } .visual-toy span:nth-child(2) { background:var(--lime); border-color:var(--lime); transform:translateX(-9px); } .visual-toy span:nth-child(3) { border-radius:0; background:var(--coral); border-color:var(--coral); transform:rotate(12deg); } .visual-toy span:nth-child(4) { border-radius:0 90% 0 0; background:var(--blue); border-color:var(--blue); transform:rotate(-15deg); } .visual-toy b { position:absolute; text-align:center; font:950 .6rem/1.2 var(--mono); letter-spacing:.04em; color:var(--ink); mix-blend-mode:multiply; } html[data-theme="dark"] .visual-toy b { mix-blend-mode:normal; color:#171423; }
.terminal-card { display:flex; flex-direction:column; min-height:95px; margin:1.4rem 0; padding:.7rem; background:var(--dark); color:#e4dff0; border-radius:.35rem; font:.53rem/1.8 var(--mono); } .terminal-card>span:first-child { color:var(--lime); font-size:.5rem; } .terminal-card p { margin:0; } .terminal-card .cursor { color:var(--coral); } .hobby-card h3 { margin:.35rem 0 .6rem; font-size:1.25rem; letter-spacing:-.055em; } .hobby-card>p { margin:0 0 1.2rem; color:var(--ink-soft); font-size:.75rem; line-height:1.75; } .hobby-foot { margin-top:auto; padding-top:.8rem; border-top:1px solid var(--rule); color:var(--muted); font-size:.53rem; }
.closing-section { background:var(--violet); color:#fffdf5; overflow:hidden; } .closing-inner { position:relative; padding-top:clamp(4rem,8vw,7rem); padding-bottom:clamp(4rem,8vw,7rem); } .closing-inner .section-kicker { color:rgba(255,253,245,.75); } .closing-inner .section-kicker span { color:var(--lime); } .closing-inner h2 { position:relative; z-index:1; max-width:920px; font-size:clamp(3.5rem,7.7vw,7rem); } .closing-inner h2 em { color:var(--lime); } .closing-inner>p:not(.section-kicker) { position:relative; z-index:1; max-width:600px; margin:1.8rem 0 1.4rem; color:rgba(255,253,245,.88); } .closing-actions { position:relative; z-index:1; display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap; margin-top:1.8rem; } .closing-link { color:#fffdf5; font-size:.78rem; font-weight:800; } .closing-art { position:absolute; right:-.03em; bottom:-.37em; color:rgba(255,255,255,.095); font:950 clamp(15rem,37vw,37rem)/.9 var(--sans); letter-spacing:-.17em; pointer-events:none; } .closing-art span { color:var(--lime); opacity:.25; }
.site-footer { background:var(--dark); color:#f4f0e8; } .footer-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; } .footer-mark { font:950 1.2rem var(--sans); letter-spacing:-.12em; text-decoration:none; } .footer-inner p { margin:0; color:#b8b0c8; font:700 .57rem var(--mono); letter-spacing:.06em; text-transform:uppercase; } .footer-inner p span { color:var(--lime); } .back-top { color:var(--lime); font-size:.57rem; text-decoration:none; white-space:nowrap; }
.not-found { min-height:100vh; padding-block:clamp(4rem,10vw,9rem); } .not-found h1 { font-size:clamp(3.5rem,10vw,7rem); line-height:.95; letter-spacing:-.08em; } .not-found h1 em { color:var(--violet); font-family:Georgia,"Times New Roman",serif; font-weight:400; } .not-found>p:not(.section-kicker) { max-width:540px; color:var(--ink-soft); margin-block:1.4rem; } .not-found img { display:block; width:min(100%,900px); margin-top:3rem; border-radius:1rem; }
@media (max-width:1050px) { .hero { grid-template-columns:minmax(0,1fr) minmax(290px,.9fr); gap:2rem; } .hero h1 { font-size:clamp(4rem,8vw,6rem); } .interest-grid,.hobby-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .interest-card { min-height:310px; } .study-strip { grid-template-columns:1fr 1fr 1.3fr; } .study-aside { display:none; } .repo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .wrap { width:min(var(--wrap),calc(100% - 2rem)); } .header-inner { min-height:68px; gap:.5rem; } .wordmark-copy small { display:none; } .main-nav { display:none; } .header-actions { margin-left:auto; } .hero { grid-template-columns:1fr; padding-top:3rem; gap:2rem; } .hero h1 { font-size:clamp(3.75rem,15vw,6rem); } .hero-art { width:min(100%,580px); margin:0 auto; } .hero-bottomline { margin-top:.25rem; font-size:.51rem; } .section-heading { grid-template-columns:1fr; gap:1.1rem; margin-bottom:2rem; } .section-heading h2,.question-lead h2 { font-size:clamp(2.9rem,12vw,4.6rem); } .interest-grid,.hobby-grid { grid-template-columns:1fr 1fr; gap:.55rem; } .interest-card { min-height:340px; padding:.95rem; } .interest-card h3 { font-size:clamp(1.4rem,5.7vw,2rem); } .card-label { margin-top:1.8rem; } .card-tags span { font-size:.47rem; } .study-strip { grid-template-columns:1fr 1fr; gap:1rem; } .study-strip-label { grid-column:1/-1; padding-bottom:.75rem; border-bottom:1px solid rgba(244,240,232,.25); } .study-item strong { font-size:.67rem; } .question-layout { grid-template-columns:1fr; gap:2.4rem; } .small-stamp { margin-top:.8rem; } .repo-toolbar { align-items:stretch; } .language-filters { width:100%; padding-bottom:.25rem; } .repo-status-row { align-items:flex-start; flex-direction:column; gap:.4rem; } .repo-grid { grid-template-columns:1fr 1fr; gap:.55rem; } .repo-card { min-height:224px; padding:.85rem; } .repo-card h3 { font-size:.97rem; margin-top:1.2rem; } .repo-description { font-size:.7rem; } .repo-meta { gap:.35rem .55rem; font-size:.54rem; } .repo-footnote { grid-template-columns:1fr auto; gap:.45rem .8rem; } .repo-footnote>span { grid-column:1/-1; } .repo-footnote p { font-size:.68rem; } .repo-footnote a { font-size:.65rem; } .hobby-card { min-height:335px; padding:.9rem; } .hobby-card h3 { font-size:1.1rem; } .hobby-card>p { font-size:.71rem; } .genre-cloud { gap:.25rem; } .genre-cloud span { font-size:.47rem; } .visual-toy span { width:36px; height:36px; } .visual-toy b { font-size:.53rem; } .closing-inner h2 { font-size:clamp(3.35rem,13vw,5.5rem); } .footer-inner { padding-block:1.2rem; display:grid; grid-template-columns:auto 1fr; gap:.55rem 1rem; } .footer-inner p { font-size:.51rem; } .footer-inner p:nth-of-type(2) { grid-column:2; } .back-top { grid-column:2; } .closing-art { font-size:24rem; right:-.3em; } }
@media (max-width:430px) { .theme-label { display:none; } .icon-button { padding:.5rem .6rem; } .header-github { padding:.59rem .65rem; font-size:.7rem; } .wordmark-copy { font-size:.72rem; } .hero h1 { font-size:3.65rem; } .hero-actions { align-items:flex-start; flex-direction:column; } .hero-meta { grid-template-columns:1fr 1fr; gap:.9rem; } .hero-meta strong { font-size:.7rem; } .orbit-stamp { width:72px; height:72px; right:-.65rem; top:2.7rem; font-size:.55rem; } .interest-grid,.hobby-grid { grid-template-columns:1fr; } .interest-card { min-height:285px; padding:1.1rem; } .interest-card h3 { font-size:2rem; } .hobby-card { min-height:300px; padding:1.1rem; } .repo-grid { grid-template-columns:1fr; } .repo-card { min-height:190px; padding:1.05rem; } .repo-card h3 { font-size:1.1rem; } .study-strip { padding:1rem; } .question-list summary { grid-template-columns:2rem 1fr 1.2rem; gap:.35rem; } .question-list summary strong { font-size:1.05rem; } .details-body { padding-left:2.4rem; padding-right:.5rem; } .hero-bottomline { letter-spacing:.06em; } .hero-bottomline span:nth-child(2) { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (prefers-contrast:more) { :root { --rule:rgba(32,27,49,.55); --muted:#514b60; } html[data-theme="dark"] { --rule:rgba(244,240,232,.5); --muted:#dbd5e7; } }
@media print { .site-header,.hero-actions,.repo-toolbar,.closing-actions,.grain { display:none!important; } body,.interests-section,.questions-section,.closing-section,.site-footer { background:white!important; color:black!important; } .wrap { width:100%; } .hero,.section { padding:1rem 0; } .interest-grid,.hobby-grid,.repo-grid { grid-template-columns:repeat(2,1fr); } .interest-card { break-inside:avoid; } }