:root{
    --txt:#ececf0;
    --sub:#9b9ba4;
    --line:rgba(255,255,255,.09);
    --card:rgba(255,255,255,.04);
    --bar:rgba(255,255,255,.3);
    --barTxt:#fff
}

*{
    box-sizing:border-box;
    margin:0
}

html,
body{
    height:100%;
    overflow:hidden;
    font-family:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    -webkit-font-smoothing:antialiased;
    user-select:none
}

body{
    background:#222 var(--wp) center/cover
}

body{
    --wp:radial-gradient(
        ellipse at 30% 15%,
        #1d1d26 0%,
        #0b0b0f 55%,
        #000 100%
    )
}

body[data-wp="1"]{
    --wp:linear-gradient(
        160deg,
        #030708,
        #0c2528 60%,
        #05100f
    )
}

body[data-wp="2"]{
    --wp:linear-gradient(
        140deg,
        #06050d,
        #1a1450 60%,
        #0a0919
    )
}

#menubar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:28px;
    padding:env(safe-area-inset-top,0) 14px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:var(--barTxt);
    font-size:13px;
    z-index:9000;
    box-sizing:content-box;
    text-shadow:0 0 6px rgba(0,0,0,.25)
}

#menubar .l,
#menubar .r{
    display:flex;
    gap:16px;
    align-items:center
}

#menubar b{
    font-weight:600
}

@media(max-width:560px){
    #menubar .m{
        display:none
    }
}

#desk{
    position:absolute;
    inset:28px 0 0 0
}

.win{
    position:absolute;
    width:min(680px,94vw);
    height:min(460px,70vh);
    background:#0b0b0d;
    color:var(--txt);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    box-shadow:
        0 0 0 .5px rgba(0,0,0,.35),
        0 22px 60px rgba(0,0,0,.45);
    will-change:transform;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transform-origin:var(--ox,50%) 100%;
    animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        opacity .3s,
        width .25s,
        height .25s,
        left .25s,
        top .25s
}

.win.min{
    transform:scale(.08) translateY(60vh);
    opacity:0;
    pointer-events:none
}

.win.closing{
    transform:scale(.9);
    opacity:0
}

.win.full{
    left:0!important;
    top:0!important;
    width:100%!important;
    height:calc(100% - 96px)!important;
    border-radius:0
}

@keyframes pop{
    from{
        transform:scale(.88);
        opacity:0
    }
}

.win.drag{
    transition:none!important
}

.tb{
    height:48px;
    flex:none;
    display:flex;
    align-items:center;
    padding:0 14px;
    gap:8px;
    background:#111114;
    color:#d6d6dc;
    border-bottom:1px solid rgba(255,255,255,.08);
    cursor:default;
    touch-action:none
}

.tb .t{
    position:absolute;
    left:0;
    right:0;
    text-align:center;
    font-size:15px;
    font-weight:400;
    pointer-events:none
}

.lights{
    display:flex;
    gap:14px;
    z-index:1
}

.lights i{
    width:14px;
    height:14px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font:700 9px/1 sans-serif;
    color:transparent;
    cursor:default;
    border:.5px solid rgba(0,0,0,.2)
}

.lights:hover i{
    color:rgba(0,0,0,.55)
}

.lights i:nth-child(1){
    background:#ff5f57
}

.lights i:nth-child(2){
    background:#febc2e
}

.lights i:nth-child(3){
    background:#28c840
}

.body{
    flex:1;
    overflow:auto;
    padding:22px;
    user-select:text;
    -webkit-overflow-scrolling:touch
}

h1,
h2{
    font-family:"Geist",-apple-system,"Segoe UI",sans-serif
}

h1{
    font-size:26px;
    font-weight:700;
    letter-spacing:-.02em
}

h2{
    font-size:15px;
    font-weight:600
}

p,
li{
    font-size:14px;
    line-height:1.55;
    color:var(--sub)
}

.hero{
    display:flex;
    gap:18px;
    align-items:center;
    margin-bottom:18px
}

.av{
    width:84px;
    height:84px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #5ac8fa,
        #007aff 60%,
        #5856d6
    );
    display:grid;
    place-items:center;
    color:#fff;
    font-size:32px;
    font-weight:600;
    flex:none
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:12px
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px
}

.tags span{
    font-size:12px;
    padding:3px 9px;
    border-radius:99px;
    background:rgba(34,211,160,.1);
    color:#3ddc97
}

.row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:14px
}

.row:last-child{
    border:0
}

.row a{
    color:#3ddc97;
    text-decoration:none
}

.sw{
    display:flex;
    gap:10px
}

.sw button{
    width:64px;
    height:42px;
    border-radius:8px;
    border:2px solid transparent;
    cursor:pointer
}

.sw button.on{
    border-color:#22d3a0
}

.tog{
    width:42px;
    height:26px;
    border-radius:99px;
    background:#9a9aa0;
    position:relative;
    border:0;
    cursor:pointer;
    transition:.2s
}

.tog:after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    transition:.2s;
    box-shadow:0 1px 3px rgba(0,0,0,.3)
}

.tog.on{
    background:#34c759
}

.tog.on:after{
    left:18px
}

#dockwrap{
    position:fixed;
    left:0;
    right:0;
    bottom:calc(8px + env(safe-area-inset-bottom,0));
    display:flex;
    justify-content:center;
    z-index:8000;
    pointer-events:none
}

#dock{
    pointer-events:auto;
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:8px 10px;
    border-radius:26px;
    background:rgba(22,22,26,.78);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(0,0,0,.3)
}

.app{
    position:relative;
    width:56px;
    height:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    cursor:pointer
}

.app .ic{
    width:100%;
    height:100%;
    border-radius:22%;
    display:grid;
    place-items:center;
    box-shadow:
        0 2px 6px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.4);
    overflow:hidden
}

.app svg{
    width:58%;
    height:58%
}

.app .lb{
    position:absolute;
    bottom:calc(100% + 10px);
    padding:4px 10px;
    border-radius:7px;
    background:rgba(40,40,44,.85);
    color:#fff;
    font-size:12px;
    white-space:nowrap;
    opacity:0;
    transform:translateY(4px);
    transition:.15s;
    pointer-events:none
}

.app:hover .lb{
    opacity:1;
    transform:none
}

.app .dot{
    position:absolute;
    bottom:-6px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#fff;
    opacity:0
}

.app.run .dot{
    opacity:.9
}

.app.bounce .ic{
    animation:bn .5s ease 2
}

@keyframes bn{
    50%{
        transform:translateY(-22px)
    }
}

@media(max-width:480px){
    #dock{
        gap:6px
    }

    .app{
        width:50px;
        height:50px
    }
}

#home{
    position:absolute;
    inset:0;
    z-index:1;
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.45)
}

#big{
    position:absolute;
    left:50%;
    top:42%;
    transform:translate(-50%,-50%);
    text-align:center;
    font-family:"Geist",sans-serif;
    width:90%;
    pointer-events:none
}

#big .tm{
    font-size:clamp(64px,13vw,150px);
    font-weight:600;
    letter-spacing:-.04em;
    line-height:1;
    opacity:.9
}

#big .dt{
    font-size:clamp(14px,2vw,20px);
    opacity:.8;
    margin-top:6px
}

#big .hi{
    margin-top:16px;
    font-size:13px;
    opacity:.6
}

.wg{
    position:absolute;
    left:18px;
    width:210px;
    padding:14px;
    border-radius:18px;
    background:rgba(32,32,36,.62);
    font-size:11px;
    text-shadow:none;
    box-shadow:0 8px 24px rgba(0,0,0,.3)
}

.wg .mo{
    color:#ff453a;
    font:600 12px "Geist",sans-serif;
    margin-bottom:8px
}

.cal{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:2px;
    text-align:center;
    color:#ddd
}

.cal b{
    color:#888;
    font-weight:400
}

.cal .td{
    background:#ff453a;
    color:#fff;
    border-radius:50%;
    font-weight:500
}

.wg.nt{
    background:#f6d65b;
    color:#3b2f00;
    top:236px
}

.wg.nt h3{
    font:700 13px "Geist",sans-serif;
    margin-bottom:6px
}

.wg.nt p{
    color:#4a3c00;
    font-size:11px;
    line-height:1.5
}

.di{
    position:absolute;
    right:14px;
    width:84px;
    text-align:center;
    cursor:default;
    font-size:12px
}

.di .ic{
    width:54px;
    height:54px;
    margin:0 auto 4px;
    display:grid;
    place-items:center
}

.di span{
    display:inline-block;
    padding:1px 6px;
    border-radius:5px;
    line-height:1.3
}

.di.sel span{
    background:#0a64d6
}

.di.sel .ic{
    filter:brightness(.8)
}

@media(max-width:720px){
    .wg{
        display:none
    }

    .di{
        right:4px;
        width:72px
    }
}

/* =========================================================
   CONTACT WINDOW
   ========================================================= */

.win.contact .body{
    padding:0
}

.win.contact{
    width:min(500px,94vw);
    height:min(620px,calc(100% - 110px))
}

/* =========================================================
   MACOS MAIL STYLE CONTACT
   ========================================================= */

.mail-shell{
    min-height:100%;
    display:flex;
    flex-direction:column;
    background:linear-gradient(
        180deg,
        #111114,
        #09090b
    )
}

/* Mail header */

.mail-header{
    padding:22px 24px 18px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,0)
    )
}

.mail-title{
    display:flex;
    align-items:center;
    gap:12px
}

.mail-icon{
    width:42px;
    height:42px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:linear-gradient(
        135deg,
        #4da3ff,
        #0878e8
    );
    box-shadow:0 6px 18px rgba(0,100,220,.25)
}

.mail-icon svg{
    width:23px;
    height:23px
}

.mail-title h1{
    font-family:"Geist",sans-serif;
    font-size:20px;
    font-weight:600;
    letter-spacing:-.02em
}

.mail-title p{
    margin-top:3px;
    font-size:12px
}

/* Mail form */

.mail-form{
    padding:20px 24px 24px;
    display:flex;
    flex-direction:column;
    gap:14px
}

/* Input fields */

.mail-field{
    border:1px solid rgba(255,255,255,.11);
    background:#151518;
    border-radius:12px;
    overflow:hidden;
    transition:
        border-color .2s,
        box-shadow .2s
}

.mail-field:focus-within{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.12)
}

.mail-field label{
    display:block;
    padding:10px 14px 0;
    color:#777983;
    font-size:10px;
    letter-spacing:.1em;
    font-weight:500
}

.mail-field input,
.mail-field textarea{
    display:block;
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#f5f5f7;
    font:15px "Geist Mono",monospace;
    padding:7px 14px 13px;
    user-select:text
}

.mail-field input::placeholder,
.mail-field textarea::placeholder{
    color:#55565d
}

.mail-field textarea{
    min-height:140px;
    resize:vertical;
    line-height:1.55
}

/* Send button */

.mail-send{
    margin-top:2px;
    width:100%;
    border:0;
    border-radius:12px;
    padding:13px 16px;
    background:linear-gradient(
        180deg,
        #1684ef,
        #0867d1
    );
    color:#fff;
    font:600 14px "Geist",sans-serif;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(10,100,214,.25);
    transition:
        transform .15s,
        filter .15s
}

.mail-send:hover{
    filter:brightness(1.08);
    transform:translateY(-1px)
}

.mail-send:active{
    transform:scale(.985)
}

.mail-send:disabled{
    opacity:.6;
    cursor:wait;
    transform:none
}

/* Status message */

.mail-note{
    min-height:18px;
    text-align:center;
    font-size:12px;
    color:var(--sub)
}

.mail-note.success{
    color:#34c759
}

.mail-note.error{
    color:#ff6961
}

/* =========================================================
   WALLPAPER
   ========================================================= */

body[data-wp="3"]{
    --wp:linear-gradient(
        160deg,
        #050505,
        #262629 60%,
        #0b0b0c
    )
}

body[data-wp="4"]{
    --wp:linear-gradient(
        150deg,
        #070303,
        #3a0f12 65%,
        #120606
    )
}

/* =========================================================
   TOGGLES / ACCESSIBILITY
   ========================================================= */

.tog.on{
    background:#2f7bf5
}

body.rm *{
    animation:none!important;
    transition:none!important
}

/* =========================================================
   DOCK POSITION
   ========================================================= */

body[data-dock=left] #dockwrap,
body[data-dock=right] #dockwrap{
    top:28px;
    bottom:0;
    align-items:center;
    left:8px;
    right:auto
}

body[data-dock=right] #dockwrap{
    left:auto;
    right:8px
}

body[data-dock=left] #dock,
body[data-dock=right] #dock{
    flex-direction:column;
    align-items:center
}

body[data-dock=left] .app .lb{
    bottom:auto;
    left:calc(100% + 12px)
}

body[data-dock=right] .app .lb{
    bottom:auto;
    left:auto;
    right:calc(100% + 12px)
}

body[data-dock=left] .app .dot{
    bottom:auto;
    top:calc(50% - 2px);
    left:-7px
}

body[data-dock=right] .app .dot{
    bottom:auto;
    top:calc(50% - 2px);
    right:-7px
}

body[data-dock=left] .wg{
    left:96px
}

body[data-dock=right] .di{
    right:96px
}

body[data-dock=left] .win.full{
    left:92px!important;
    width:calc(100% - 92px)!important;
    height:100%!important
}

body[data-dock=right] .win.full{
    left:0!important;
    width:calc(100% - 92px)!important;
    height:100%!important
}

/* =========================================================
   SETTINGS WINDOW
   ========================================================= */

.win.sett .body{
    padding:0
}

.win.sett{
    height:min(560px,calc(100% - 110px))
}

.srow{
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    background:var(--card);
    border-radius:18px;
    margin:0 20px 12px;
    cursor:pointer
}

.srow:hover{
    background:rgba(255,255,255,.07)
}

.stile{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    flex:none
}

.srow b{
    display:block;
    font:600 16px "Geist",sans-serif
}

.srow small{
    display:block;
    margin-top:2px;
    color:var(--sub);
    font-size:12px;
    line-height:1.4
}

.chev{
    margin-left:auto;
    color:#777;
    font-size:22px
}

.snav{
    display:flex;
    align-items:center;
    height:52px;
    padding:0 16px;
    border-bottom:1px solid var(--line);
    position:relative
}

.snav .bk{
    color:#4d8dff;
    cursor:pointer;
    font:500 15px "Geist",sans-serif;
    z-index:1
}

.snav .tt{
    position:absolute;
    left:0;
    right:0;
    text-align:center;
    font:600 16px "Geist",sans-serif;
    pointer-events:none
}

.sec{
    padding:20px
}

.sec h2{
    font-size:20px
}

.sec>p{
    margin:4px 0 18px
}

.sh{
    font:600 14px "Geist",sans-serif;
    margin:20px 0 10px
}

.opts{
    display:grid;
    gap:10px
}

.opt{
    border:2px solid transparent;
    border-radius:14px;
    padding:10px;
    text-align:center;
    font-size:12px;
    cursor:pointer;
    background:var(--card);
    color:var(--sub)
}

.opt.on{
    border-color:#4d8dff;
    color:#fff
}

.thumb{
    height:56px;
    border-radius:8px;
    margin-bottom:8px
}

.pv{
    position:relative;
    height:44px;
    border-radius:8px;
    background:#232326;
    margin-bottom:8px
}

.pv i{
    position:absolute;
    border-radius:3px;
    background:#6b6b73
}

.opt.on .pv i{
    background:#4d8dff
}

.seg{
    display:inline-flex;
    background:var(--card);
    border-radius:12px;
    padding:4px
}

.seg button{
    border:0;
    background:none;
    color:var(--sub);
    padding:8px 16px;
    border-radius:9px;
    font:500 14px "Geist",sans-serif;
    cursor:pointer
}

.seg button.on{
    background:#3a3a3e;
    color:#fff
}

.trow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:20px 0 0
}

.trow b{
    display:block;
    font:600 15px "Geist",sans-serif
}

.trow small{
    color:var(--sub);
    font-size:12px
}

.info{
    background:var(--card);
    border-radius:16px;
    overflow:hidden
}

.info div{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    font-size:13px
}

.info div:last-child{
    border:0
}

.info span{
    color:var(--sub)
}

.info em{
    font-style:normal;
    text-align:right
}

.abic{
    width:96px;
    height:96px;
    margin:0 auto;
    border-radius:26px;
    background:linear-gradient(
        135deg,
        #5ac8fa,
        #007aff 60%,
        #5856d6
    );
    display:grid;
    place-items:center;
    font:700 44px "Geist",sans-serif;
    color:#fff
}

/* =========================================================
   RESPONSIVE WINDOW / DOCK
   ========================================================= */

@media(max-width:720px){

    .win{
        width:94vw;
        height:calc(100% - 110px)
    }

    .win.contact{
        width:94vw
    }

    body[data-dock=left] .win,
    body[data-dock=right] .win{
        height:calc(100% - 20px)
    }

    body[data-dock=left] .win{
        margin-left:70px;
        width:calc(94vw - 70px)
    }

    body[data-dock=right] .win{
        width:calc(94vw - 70px)
    }
}

/* =========================================================
   MOBILE MAIL CONTACT
   ========================================================= */

@media(max-width:480px){

    .win.contact{
        width:94vw;
        height:calc(100% - 90px);
        border-radius:18px
    }

    .mail-header{
        padding:18px 16px 15px
    }

    .mail-form{
        padding:16px
    }

    .mail-field textarea{
        min-height:120px
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *{
        animation:none!important;
        transition:none!important
    }
}

/* =========================================================
   AXIOM OS — PREMIUM WINDOW POLISH
   ========================================================= */

.win{
    background:
        linear-gradient(
            145deg,
            rgba(30,30,34,.96),
            rgba(9,9,11,.98)
        );

    border:1px solid rgba(255,255,255,.14);

    box-shadow:
        0 1px 2px rgba(0,0,0,.35),
        0 18px 45px rgba(0,0,0,.38),
        0 35px 90px rgba(0,0,0,.22);

    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
}

.tb{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    border-bottom:1px solid rgba(255,255,255,.10);
}

.win:not(.min):not(.closing){
    animation:axiomWindowIn .32s cubic-bezier(.16,1,.3,1);
}

@keyframes axiomWindowIn{
    from{
        opacity:0;
        transform:scale(.94) translateY(10px);
        filter:blur(4px);
    }

    to{
        opacity:1;
        transform:scale(1) translateY(0);
        filter:blur(0);
    }
}

/* =========================================================
   AXIOM OS — ABOUT ME
   ========================================================= */

.axiom-about{
    min-height:100%;
    color:#d8d8de;
    font-family:inherit;
}

.about-profile{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 24px 18px;
}

.about-avatar{
    width:86px;
    height:86px;
    flex:none;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #25252b,
            #111116
        );

    border:3px solid #242429;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 10px 25px rgba(0,0,0,.35);

    font-size:34px;
    font-weight:700;
    color:#fff;

    position:relative;
}

.about-avatar span{
    position:absolute;

    width:16px;
    height:16px;

    right:1px;
    bottom:5px;

    border-radius:50%;

    background:#22c55e;

    border:3px solid #111;
}

.about-identity h1{
    margin:0 0 4px;
    font-size:24px;
    color:#fff;
}

.about-identity p{
    margin:0;
    font-size:16px;
    color:#888890;
}

.about-location{
    display:flex;
    align-items:center;
    gap:8px;

    margin-top:12px;

    color:#8c8c94;
    font-size:13px;
    line-height:1.25;
}

.about-location>span:first-child{
    font-size:20px;
}

.about-tz{
    margin-left:18px;
    color:#77777f;
}

.about-social{
    display:flex;
    justify-content:center;
    gap:14px;

    padding:14px 20px 20px;
}

.about-social a{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:#151517;

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .2s ease,
        background .2s ease;
}

.about-social a:hover{
    transform:translateY(-3px);
    background:#202024;
}

.about-social svg{
    width:25px;
    height:25px;
}

.about-tabs{
    display:flex;

    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.about-tab{
    flex:1;

    padding:16px 8px;

    border:0;
    background:none;

    color:#77777f;

    font:inherit;
    font-weight:600;

    cursor:pointer;

    position:relative;
}

.about-tab.active{
    color:#fff;
}

.about-tab.active::after{
    content:'';

    position:absolute;

    left:18%;
    right:18%;
    bottom:-1px;

    height:2px;

    background:#fff;
}

.about-content{
    padding:24px;
}

.about-panel{
    display:none;
}

.about-panel.active{
    display:block;
}

.about-panel h2{
    margin:0 0 22px;

    font-size:21px;

    color:#bdbdc5;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}

.about-intro{
    margin:0 0 24px;

    color:#a5a5ad;

    font-size:15px;
    line-height:1.7;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;

    padding-bottom:22px;

    border-bottom:1px solid rgba(255,255,255,.07);
}

.about-grid div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.about-grid span,
.stack-row span{
    color:#73737b;
    font-size:13px;
}

.about-grid strong,
.stack-row strong{
    color:#c8c8cf;
    font-size:14px;
    line-height:1.5;
}

.about-focus{
    margin-top:22px;
    padding:16px;

    border-radius:14px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.06);
}

.about-focus h3{
    margin:0 0 7px;
    color:#fff;
    font-size:15px;
}

.about-focus p{
    margin:0;
    color:#85858d;
    line-height:1.55;
    font-size:14px;
}

.stack-row{
    display:grid;
    grid-template-columns:145px 1fr;
    gap:18px;

    padding:13px 0;

    border-bottom:1px solid rgba(255,255,255,.055);
}

.stack-row strong{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    font-weight:400;
}

.experience-item{
    display:flex;
    gap:16px;

    padding:0 0 25px;
    margin-bottom:25px;

    border-bottom:1px solid rgba(255,255,255,.055);
}

.experience-dot{
    width:10px;
    height:10px;

    margin-top:7px;

    flex:none;

    border-radius:50%;

    background:#34c759;

    box-shadow:
        0 0 10px rgba(52,199,89,.5);
}

.experience-item h3{
    margin:0 0 5px;

    color:#fff;
    font-size:16px;
}

.experience-item span{
    color:#77777f;
    font-size:13px;
}

.experience-item p{
    margin:10px 0 0;

    color:#92929a;

    font-size:14px;
    line-height:1.6;
}

.experience-status{
    display:flex;
    align-items:center;
    gap:8px;

    color:#8d8d95;
    font-size:13px;
}

.experience-status span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#34c759;
}


/* Mobile */

@media(max-width:600px){

    .about-profile{
        padding:18px 16px;
        gap:14px;
    }

    .about-avatar{
        width:70px;
        height:70px;
        font-size:27px;
    }

    .about-identity h1{
        font-size:20px;
    }

    .about-social a{
        width:50px;
        height:50px;
    }

    .about-content{
        padding:18px 16px;
    }

    .stack-row{
        grid-template-columns:105px 1fr;
        gap:10px;
    }

}