:root { --blue:#0c338d; --mid:#225eb2; --ink:#091326; --paper:#fffdf7; --page-bg:#0c338d; --page-background-image:none; --page-background-size:420px 390px; --page-background-repeat:repeat; --page-background-position:center 160px; --card-bg:#fffdf7; --section-line:#fff; --section-header:#ffd23f; --line:#000000; --yellow:#f9d63e; --shadow:6px 7px 0 var(--line); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--page-bg); }
body { position:relative; isolation:isolate; min-height:100vh; margin:0; color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; background:transparent; }
body::before { content:""; position:fixed; z-index:0; inset:-160px; pointer-events:none; background-color:var(--page-bg); background-image:var(--page-background-image); background-size:var(--page-background-size); background-repeat:var(--page-background-repeat); background-position:var(--page-background-position); transform:translateZ(0); backface-visibility:hidden; }
button,input,textarea,select,code,pre { font-family:inherit; }
.config-loader { display:none; position:fixed; z-index:5; inset:0; align-items:center; justify-content:center; gap:9px; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }
.config-loader span { color:var(--yellow); font-size:22px; animation:loader-pulse .8s ease-in-out infinite alternate; }
.config-loading .config-loader { display:flex; }
.page-shell { z-index:1; width:min(100% - 32px, 500px); margin:0 auto; padding:48px 0 30px; position:relative; opacity:1; transition:opacity .18s ease; }
.config-loading .page-shell { opacity:0; pointer-events:none; }
@keyframes loader-pulse { to { transform:scale(1.3) rotate(18deg); } }
.profile-card { position:relative; text-align:center; padding:67px 27px 28px; background:var(--paper); border:3px solid var(--line); border-radius:34px 29px 38px 27px; box-shadow:8px 9px 0 var(--line); overflow:visible; }
.profile-card.no-avatar { padding-top:36px; }
.avatar-wrap { position:relative; z-index:2; width:156px; height:156px; margin:0 auto 15px; border:4px solid var(--line); border-radius:50%; overflow:hidden; background:var(--blue); box-shadow:5px 6px 0 var(--line); }
.avatar-wrap::after { content:""; position:absolute; inset:0; border:4px solid rgba(255,255,255,.22); border-radius:inherit; pointer-events:none; }
.avatar-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 14%; transform:scale(1.04); }
.doodle { position:absolute; z-index:1; display:grid; place-items:center; color:var(--mid); font-weight:800; }
.doodle-star { left:34px; top:38px; font-size:34px; }
.doodle-plus { right:37px; top:178px; font-size:35px; color:#ef8bb7; }
.eyebrow { margin:0 0 5px; color:var(--mid); font-size:12px; font-weight:800; letter-spacing:.18em; }
h1 { position:relative; display:inline-block; margin:0; font-size:43px; line-height:1; letter-spacing:-.065em; font-weight:800; } h1 span { position:absolute; left:calc(100% + 5px); top:-4px; color:#f4c914; font-size:27px; }
.intro { max-width:370px; margin:13px auto 15px; color:#44506a; font-size:15px; line-height:1.6; font-weight:500; }
.social-links { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; max-width:410px; margin:0 auto; }
.social-pill { display:inline-flex; align-items:center; gap:6px; min-height:31px; padding:5px 9px; border:2px solid var(--line); border-radius:9px; background:#dfeeff; box-shadow:2px 2px 0 #000; color:#000; font-size:9px; font-weight:800; line-height:1; letter-spacing:.02em; text-decoration:none; transition:transform .15s,box-shadow .15s; }.social-pill:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 #000; }.social-pill svg { flex:0 0 14px; width:14px; height:14px; fill:currentColor; }.social-pill b { display:grid; place-items:center; flex:0 0 14px; width:14px; height:14px; font-size:11px; }.social-pill span { overflow-wrap:anywhere; }
.currently { display:flex; align-items:center; gap:10px; max-width:370px; margin:22px auto 0; padding:12px 14px; border:2px dashed #8fa7cb; border-radius:15px; background:#f3f7fd; text-align:left; }
.currently p { margin:0; }.currently small { display:block; margin-bottom:3px; color:var(--mid); font-size:9px; font-weight:800; letter-spacing:.12em; }.currently strong { display:block; color:#39445c; font-size:11px; line-height:1.45; font-weight:600; }
.status-dot { flex:0 0 11px; width:11px; height:11px; border:2px solid var(--line); border-radius:50%; background:#55d98b; box-shadow:0 0 0 3px rgba(85,217,139,.23); }
.link-section { margin-top:34px; }.section-heading { display:flex; align-items:center; gap:11px; margin:27px 4px 11px; }.section-heading span { padding:5px 12px; border:2px solid #000; border-radius:999px; background:var(--section-header); box-shadow:2px 2px 0 var(--line); color:#000; font-size:11px; font-weight:700; line-height:1; letter-spacing:0; }.section-heading i { height:2px; flex:1; border-radius:2px; background:repeating-linear-gradient(90deg,var(--section-line) 0 8px,transparent 8px 14px); }
.link-card { position:relative; display:flex; align-items:center; gap:15px; width:100%; height:76px; padding:12px 16px; margin:15px 0; border:3px solid var(--line); border-radius:22px; background:var(--card-bg); box-shadow:4px 4px 0 #000; color:var(--ink); text-decoration:none; transition:transform .15s,box-shadow .15s; }.link-card.featured { background:var(--card-bg); }.link-card:hover { transform:translate(-4px,-5px); box-shadow:8px 9px 0 #000; }.link-card strong { display:block; font-size:17px; line-height:1.25; letter-spacing:-.025em; }.link-card small { display:block; margin-top:5px; color:#5a6478; font-size:12px; line-height:1.4; font-weight:500; }.icon { display:grid; place-items:center; flex:0 0 49px; width:49px; height:49px; border:2.5px solid var(--line); border-radius:14px; font-size:23px; font-weight:800; }.blue { background:#71b7ff; }.yellow { background:#f8d758; }.pink { background:#f19dc1; }.orange { background:#ffbc64; }.aqua { background:#84e5dc; }.purple { background:#bca3ef; }.arrow { flex:0 0 24px; width:24px; height:24px; margin-left:auto; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }.link-card:hover .arrow { transform:scale(1.12); }
.card-badge { position:absolute; right:15px; top:-10px; padding:4px 8px; border:2px solid var(--line); border-radius:8px; background:var(--yellow); box-shadow:2px 2px 0 var(--line); color:var(--ink); font-size:8px; font-style:normal; font-weight:800; letter-spacing:.1em; }.card-badge.popular { background:#f19dc1; }
.tiny-note { display:flex; align-items:center; gap:13px; margin:34px 1px 0; padding:16px 17px; border:3px solid var(--line); border-radius:22px; background:#dcecff; box-shadow:5px 6px 0 var(--line); }.tiny-note[hidden] { display:none; }.tiny-note>span { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:2px solid var(--line); border-radius:50%; background:var(--yellow); }.tiny-note>span svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.tiny-note p { min-width:0; margin:0; }.tiny-note strong { display:block; font-size:17px; line-height:1.25; letter-spacing:-.025em; }.tiny-note small { display:block; margin-top:5px; color:#5a6478; font-size:12px; line-height:1.4; font-weight:500; }
footer { max-width:440px; margin:38px auto 0; padding:0 12px; color:#e4f0ff; text-align:center; overflow-wrap:anywhere; } footer div, footer small { line-height:1.55; text-wrap:balance; } footer div { font-size:11px; font-weight:800; letter-spacing:.055em; } footer span { color:#f8d758; } footer small { display:block; margin-top:7px; color:#b6d3f6; font-size:9px; font-weight:600; letter-spacing:.055em; }
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} }
@media (max-width:480px){ .page-shell{width:min(100% - 24px,500px);padding-top:40px}.profile-card{padding:58px 18px 24px;border-radius:28px}.avatar-wrap{width:142px;height:142px}.doodle-star{left:21px;top:32px}.doodle-plus{right:21px;top:174px}h1{font-size:38px}.intro{font-size:14px}.link-card{height:76px;padding:12px;gap:12px}.link-card strong{font-size:15px}.link-card small{font-size:11px}.card-badge{right:12px} }