small constellation + pds based little profile viewer
karitham.tngl.io/gpreview?user=karitham.dev
gleam
bsky-profile
1/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-xl:1.25rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--ease-out:cubic-bezier(0, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.lowercase{text-transform:lowercase}}:root{--rose:#f5c2e7;--flamingo:#f2cdcd;--pink:#f5c2e7;--mauve:#cba6f7;--red:#f38ba8;--maroon:#eba0ac;--peach:#fab387;--yellow:#f9e2af;--green:#a6e3a1;--teal:#94e2d5;--cyan:#89dceb;--blue:#89b4fa;--lavender:#b4befe;--text:#cdd6f4;--subtext1:#bac2de;--subtext0:#a6adc8;--overlay2:#9399b2;--overlay1:#7f849c;--overlay0:#6c7086;--surface2:#585b70;--surface1:#45475a;--surface0:#313244;--crust:#11111b;--mantle:#181825;--base:#1e1e2e;--bg:var(--base);--surface:var(--surface0);--surface-hover:var(--surface1);--surface-active:var(--surface2);--surface-elevated:var(--surface0);--text-primary:var(--text);--text-secondary:var(--subtext1);--text-muted:var(--subtext0);--text-on-brand:var(--crust);--border:var(--surface1);--border-focus:var(--blue);--brand:var(--blue);--brand-hover:var(--lavender);--brand-glow:var(--blue);--accent-magenta:var(--mauve);--accent-magenta-subtle:var(--surface1);--accent-cyan:var(--cyan);--accent-emerald:var(--green);--shadow-card:0 1px 2px #0000004d;--shadow-card-hover:0 4px 8px #0006;--shadow-glow:0 0 8px var(--brand-glow);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-xl:8px;--radius-full:9999px;--font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-body:"Sora", ui-sans-serif, system-ui, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:2rem;--text-body:var(--text-base);--text-caption:var(--text-xs);--text-heading:var(--text-xl);--ease-out:cubic-bezier(.2, .8, .2, 1);--ease-spring:cubic-bezier(.15, .9, .35, 1);--duration-fast:.12s;--duration-normal:.2s;--duration-slow:.35s}body{background-color:var(--base);font-family:var(--font-body);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.6}.app-shell{max-width:840px;padding:var(--space-5) var(--space-4);margin:0 auto}@media (min-width:640px){.app-shell{padding:var(--space-7) var(--space-6)}}.input-zone{gap:var(--space-4);margin-bottom:var(--space-7);flex-direction:column;display:flex}.input-zone__row{gap:var(--space-3);align-items:stretch;display:flex}.input-field{min-width:0;padding:var(--space-4) var(--space-5);font-family:var(--font-body);color:var(--text);background:var(--surface0);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-fast) var(--ease-out);flex-grow:1;font-size:1rem}.input-field::placeholder{color:var(--subtext0)}.input-field:focus{border-color:var(--blue);box-shadow:var(--shadow-glow);background-color:var(--surface1);outline:none}.btn-show{padding:var(--space-4) var(--space-6);font-family:var(--font-display);color:var(--crust);background:var(--blue);border-radius:var(--radius-md);white-space:nowrap;cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out), filter var(--duration-fast) var(--ease-out);border:none;flex-shrink:0;font-size:1rem;font-weight:700;box-shadow:0 2px 8px #0000004d}.btn-show:hover{filter:brightness(1.1);box-shadow:0 4px 16px #89b4fa66}.btn-show:active{transform:scale(.97)}.btn-show:focus-visible{outline:2px solid var(--lavender);outline-offset:2px}.post-card{background:var(--surface0);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);transition:transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out);border:1px solid var(--border);overflow:hidden}.post-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.post-header{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5) var(--space-3);border-bottom:1px solid var(--surface1);display:flex}.post-header__info{flex-direction:column;min-width:0;display:flex}.post-header__name{font-family:var(--font-display);color:var(--text);font-size:1.05rem;font-weight:700;line-height:1.3}.post-header__handle{font-size:var(--text-sm);color:var(--subtext0);margin-top:2px;line-height:1.3}.post-header__bio{color:var(--subtext1);margin-top:var(--space-1);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1.3;overflow:hidden}.avatar-ring{object-fit:cover;background:var(--mauve);border-radius:50%;flex-shrink:0;width:3.5rem;height:3.5rem;padding:2px}.avatar-fallback{background:var(--mauve);width:3.5rem;height:3.5rem;color:var(--crust);font-family:var(--font-display);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;font-weight:800;display:flex}.post-body{padding:var(--space-4) var(--space-5);color:var(--text);white-space:pre-wrap;word-break:break-word;text-wrap:pretty;font-size:1.05rem;line-height:1.7}.post-embed{padding:0 var(--space-5) var(--space-4)}.image-grid{gap:var(--space-2);border-radius:var(--radius-md);margin-top:var(--space-3);display:grid;overflow:hidden}.image-grid--1{grid-template-columns:1fr}.image-grid--2{grid-template-columns:1fr 1fr}.image-grid--3{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}.image-grid--3 img:first-child{grid-row:1/3}.image-grid--4{grid-template-columns:1fr 1fr}.image-grid img{object-fit:cover;outline:1px solid var(--surface1);width:100%;height:100%;transition:transform var(--duration-normal) var(--ease-out), filter var(--duration-normal) var(--ease-out)}.image-grid img:hover{filter:brightness(1.1);transform:scale(1.02)}.external-link-card{border:1px solid var(--border);border-radius:var(--radius-lg);color:inherit;transition:background-color var(--duration-normal) var(--ease-out);margin-top:var(--space-3);flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.external-link-card:hover{background-color:var(--surface1)}.external-link-card__thumb{object-fit:cover;width:100%;height:200px}.external-link-card__content{padding:var(--space-3)}.external-link-card__title{font-family:var(--font-display);margin-bottom:var(--space-1);text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;font-weight:600;line-height:1.4;overflow:hidden}.external-link-card__desc{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-2);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;display:-webkit-box;overflow:hidden}.external-link-card__domain{color:var(--text-muted);font-size:.75rem}.quote-post{border:none;border-left:3px solid var(--mauve);padding:var(--space-3) var(--space-4);margin-top:var(--space-3);background:var(--surface1);box-shadow:none;border-radius:0}.quote-post:before{content:"Quoted post";font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2);display:block}.quote-post--stub{opacity:.8;font-style:italic}.quote-post__header{gap:var(--space-2);margin-bottom:var(--space-2);flex-wrap:wrap;align-items:baseline;display:flex}.quote-post__author{font-family:var(--font-display);font-size:.9rem;font-weight:600}.quote-post__handle{color:var(--text-muted);word-break:break-all;font-size:.8rem}.quote-post__text{color:var(--text);margin:0;font-size:.9rem;line-height:1.5}.record-with-media{gap:var(--space-3);margin-top:var(--space-3);flex-direction:column;display:flex}.post-footer{margin-top:var(--space-4);padding:var(--space-3) var(--space-5);border-top:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.post-footer__badges{align-items:center;gap:var(--space-3);display:flex}.post-footer__timestamp{font-size:var(--text-xs);color:var(--subtext0);white-space:nowrap}.badge{border-radius:var(--radius-sm);background:var(--surface1);color:var(--peach);border:1px solid var(--surface2);align-items:center;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.tag-badge{border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;font-family:var(--font-display);background:var(--surface1);color:var(--mauve);border:1px solid var(--mauve);transition:background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);align-items:center;padding:3px 10px;text-decoration:none;display:inline-flex}.tag-badge:hover{background:var(--mauve);color:var(--crust);transform:scale(1.03)}.mention-link{color:var(--blue);text-decoration:underline;-webkit-text-decoration-color:var(--surface2);-webkit-text-decoration-color:var(--surface2);text-decoration-color:var(--surface2);text-underline-offset:2px;transition:color var(--duration-fast) var(--ease-out);font-weight:600}.mention-link:hover{color:var(--lavender);-webkit-text-decoration-color:var(--lavender);-webkit-text-decoration-color:var(--lavender);text-decoration-color:var(--lavender)}.link-facet{color:var(--green);text-decoration:underline;-webkit-text-decoration-color:var(--surface2);-webkit-text-decoration-color:var(--surface2);text-decoration-color:var(--surface2);text-underline-offset:2px;transition:color var(--duration-fast) var(--ease-out);font-weight:500}.link-facet:hover{color:var(--teal);-webkit-text-decoration-color:var(--teal);-webkit-text-decoration-color:var(--teal);text-decoration-color:var(--teal)}.tag-link{color:var(--mauve);font-weight:600}.tag-link a{color:inherit;transition:color var(--duration-fast) var(--ease-out);text-decoration:none}.tag-link a:hover{color:var(--pink)}.reply-context{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);color:var(--text-muted);background:var(--surface1);border-left:3px solid var(--mauve)}.reply-context__label{color:var(--subtext0);opacity:.7}.loading-skeleton{background:var(--surface1);border-radius:var(--radius-md);border:1px solid var(--border);position:relative;overflow:hidden}.loading-skeleton:after{content:"";background:var(--surface2);width:50%;height:100%;animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;left:-150%}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(300%)}}.error-state{padding:var(--space-5);color:var(--red);text-align:center;background:var(--surface1);border-radius:var(--radius-lg);border:1px solid var(--red);font-weight:500}.empty-state{padding:var(--space-8) var(--space-5);text-align:center;color:var(--subtext0)}.empty-state__title{font-family:var(--font-display);color:var(--subtext1);text-wrap:balance;margin-bottom:var(--space-2);font-size:1.25rem;font-weight:700}.empty-state__desc{text-wrap:pretty;font-size:.95rem;line-height:1.6}@keyframes fadeSlideIn{0%{opacity:0;filter:blur(4px);transform:translateY(12px)}to{opacity:1;filter:blur();transform:translateY(0)}}.stagger-1{animation:fadeSlideIn var(--duration-slow) var(--ease-out) both;animation-delay:0s}.stagger-2{animation:fadeSlideIn var(--duration-slow) var(--ease-out) both;animation-delay:60ms}.stagger-3{animation:fadeSlideIn var(--duration-slow) var(--ease-out) both;animation-delay:.12s}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.error-badge{margin-top:var(--space-3);color:var(--red);background:var(--surface0);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:.8rem}.image-cover{object-fit:cover;width:100%;height:auto}.badge-group{gap:var(--space-1);flex-wrap:wrap;display:flex}.profile-card{background:var(--surface0);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);transition:transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out);border:1px solid var(--border);animation:fadeInUp var(--duration-slow) var(--ease-out) both;margin-bottom:var(--space-7);overflow:hidden}.profile-card--loading{background:var(--surface1)}.profile-card--error{border-left:4px solid var(--red);padding:var(--space-4);background-color:#f38ba81a}.profile-card__content{padding:var(--space-5);gap:var(--space-4);align-items:flex-start;display:flex}.profile-card__info{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.profile-banner{background:var(--surface1);height:120px;position:relative;overflow:hidden}.profile-banner--skeleton{background:linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);background-size:200px 100%;animation:1.5s ease-in-out infinite shimmer}.profile-banner--empty{background:var(--surface1)}.profile-banner__image{object-fit:cover;width:100%;height:100%}.profile-avatar{object-fit:cover;border:3px solid var(--surface0);background:var(--mauve);border-radius:50%;flex-shrink:0;width:5rem;height:5rem}.profile-avatar--skeleton{background:linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);background-size:200px 100%;border-radius:50%;width:5rem;height:5rem;animation:1.5s ease-in-out infinite shimmer}.profile-avatar--fallback{background:var(--mauve);width:5rem;height:5rem;color:var(--crust);font-family:var(--font-display);border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;font-weight:800;display:flex}.profile-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--text);margin:0;line-height:1.3}.profile-name--empty{color:var(--subtext0)}.profile-bio{color:var(--subtext1);text-wrap:pretty;margin:0;font-size:.95rem;line-height:1.6}.profile-joined{color:var(--subtext0);margin:0;font-size:.85rem}.loading-text{color:var(--subtext0);text-align:center;margin-top:var(--space-3);font-size:.9rem}.skeleton-line{background:linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);border-radius:var(--radius-sm);background-size:200px 100%;height:1rem;animation:1.5s ease-in-out infinite shimmer}.skeleton-line-md{width:70%;height:1.25rem}.skeleton-line-sm{width:50%;height:.875rem}.skeleton-circle{background:linear-gradient(90deg, var(--surface1) 25%, var(--surface2) 50%, var(--surface1) 75%);background-size:200px 100%;border-radius:50%;flex-shrink:0;width:2.5rem;height:2.5rem;animation:1.5s ease-in-out infinite shimmer}.feed-container{gap:var(--space-3);flex-direction:column;display:flex}.feed-loading-header{text-align:center;padding:var(--space-4)}.feed-item{background:var(--surface0);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:var(--space-4) var(--space-5);border:1px solid var(--border);transition:transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out);animation:fadeInUp var(--duration-slow) var(--ease-out) both}.feed-item:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.feed-item--loading{background:var(--surface1);pointer-events:none}.feed-item--error{border-left:4px solid var(--red);padding:var(--space-4);background-color:#f38ba81a}.feed-item__content{gap:var(--space-3);flex-direction:column;display:flex}.feed-item__header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.feed-item__header-info{gap:var(--space-1);flex-direction:column;min-width:0;display:flex}.feed-item__body{gap:var(--space-2);margin-bottom:var(--space-3);flex-direction:column;display:flex}.feed-item__text{color:var(--text);text-wrap:pretty;word-break:break-word;font-size:1rem;line-height:1.6}.feed-item__footer{gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--surface1);flex-direction:column;display:flex}.feed-item__timestamp{color:var(--subtext0);font-size:.8rem}.error-message{color:var(--red);margin-bottom:var(--space-3);font-weight:500}.btn-retry{padding:var(--space-3) var(--space-5);font-family:var(--font-display);color:var(--crust);background:var(--red);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);border:none;font-size:.9rem;font-weight:600}.btn-retry:hover{background:var(--maroon);transform:translateY(-1px)}.btn-retry:active{transform:translateY(0)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.stagger-1{animation-delay:0s}.stagger-2{animation-delay:60ms}.stagger-3{animation-delay:.12s}.stagger-4{animation-delay:.18s}.stagger-5{animation-delay:.24s}@media (max-width:640px){.app-shell{padding:var(--space-4) var(--space-3)}.profile-card__content{padding:var(--space-4);text-align:center;flex-direction:column;align-items:center}.profile-card__info{align-items:center}.profile-name{font-size:1.25rem}.profile-avatar,.profile-avatar--skeleton,.profile-avatar--fallback{width:4rem;height:4rem}.input-zone__row{gap:var(--space-3);flex-direction:column}.input-field{width:100%}.btn-show,.btn-retry{justify-content:center;width:100%}.feed-item{padding:var(--space-3) var(--space-4)}.feed-item__text{font-size:.95rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}