/* kethiwelmowrath.com: a Song blue-green hanging scroll. Azurite and malachite over ink on silk, two-colour brocade
   mounting, cinnabar seals; matte, shadowless room light, mist = bare silk.
   Breakpoints: <768 mobile (Figma 360), 768-1199 tablet, >=1200 desktop with side rail (Figma 1368). */
:root{
  --silk:#E8EBE3;--silk2:#DCE2D9;--paint:#EEF0E8;--ink:#1D2321;--ink2:#4A5652;
  --azurite:#1F4E6B;--malachite:#3E8A72;--malachite2:#7DB59A;--ochre:#B98B4E;
  --brocade:#22343A;--brocade2:#36565A;--pale:#C9D6CF;--wood:#3A2A1F;--cinnabar:#B23A2A;
  --f:'Zen Old Mincho','Times New Roman',serif;--pad:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--silk);color:var(--ink);font:400 15px/1.65 var(--f);overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cinnabar);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--brocade);color:var(--silk);padding:10px 16px}
.skip:focus{top:12px}
.w{width:min(100%,1240px);margin-inline:auto;padding-inline:var(--pad)}

/* cinnabar seal */
.seal{--s:34px;flex:none;display:inline-grid;place-items:center;width:var(--s);height:var(--s);background:var(--cinnabar);box-shadow:0 2px 4px rgba(29,35,33,.14)}
.seal>span{display:grid;place-items:center;width:84%;height:84%;border:max(1px,calc(var(--s)*.03)) solid var(--silk);color:var(--silk);font:900 calc(var(--s)*.4)/1 var(--f)}
.s40{--s:30px}.s44{--s:32px}.s52{--s:34px}.s56{--s:44px}
/* pale ridge ground, anchored to the bottom edge of a section */
.rg{position:absolute;left:0;right:0;bottom:0;z-index:-1;height:var(--rh,90px);background:var(--rm) center bottom/100% 100% no-repeat;pointer-events:none}

/* ghost button: an empty title slip with an ink line */
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 15px/1.3 var(--f);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
.ghost:hover{background:var(--ink);color:var(--silk)}

/* chrome: brocade top bar (<1200) or side rail (>=1200) */
.bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--brocade);color:var(--silk)}
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font:700 13px/1.3 var(--f);text-decoration:none}
.bar ul{display:flex;gap:10px}
.bar a{font-size:13px;text-decoration:none;opacity:.8}
.bar nav a[aria-current]{font-weight:700;opacity:1;text-decoration:underline}
.bar nav a:hover{opacity:1;text-decoration:underline}
.bar nav i{display:none}
.shell{display:flex;align-items:stretch}
.rail{display:none}
.col{flex:1;min-width:0}

/* home hero: headline on bare silk, the six games on a mounted strip, the scroll hanging beside */
.hero{position:relative;isolation:isolate;z-index:2;padding:32px 0 40px;--rh:150px}
.hw{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero h1{order:1;font:900 46px/1.02 var(--f);letter-spacing:-.015em;max-width:560px}
.sf{order:2;font-size:16px;line-height:1.5;color:var(--ink2);max-width:500px}
.hw>.ghost{order:3}
.sp{display:none}
.scr{position:relative;container-type:inline-size}
.scr>img{width:100%}
.scr i{position:absolute;display:block;pointer-events:none}
.scr .gm{background:url(/assets/img/grain.png) 0 0/90px;opacity:.22;mix-blend-mode:overlay}
.scr .gs{background:url(/assets/img/grain.png) 0 0/100px;opacity:.16;mix-blend-mode:multiply}
.scr .rsh{height:10px;border-radius:50%;background:rgba(29,35,33,.22);filter:blur(6px);z-index:-1}
.scr .seal{position:absolute}
.sd{display:none}
.sm{order:4;align-self:center;width:168px;margin:-6px 0 10px}
.sm .gm{left:8.33%;top:22.97%;width:83.3%;height:70.95%}
.sm .gs{left:16.67%;top:44%;width:66.67%;height:38.04%}
.sm .sk1{--s:17.86cqw;left:63.1%;top:46%;transform:rotate(1.5deg)}
.sm .rsh{left:11.9%;top:98%;width:76.2%}
.gst{order:5;align-self:stretch;display:grid;gap:10px;max-width:560px;padding:16px 0;border-block:2px solid var(--brocade)}
.gst a{display:flex;align-items:center;gap:12px;text-decoration:none}
.fr{flex:none;background:var(--brocade);padding:3px}
.gst img{width:52px;height:52px;object-fit:cover}
.gst b{display:block;font-size:15px;line-height:1.25}
.gst small{display:block;font-size:13px;line-height:1.3;color:var(--ink2)}
.gst a:hover b{text-decoration:underline}

/* M: how a game page is laid out */
.method{position:relative;isolation:isolate;z-index:1;background:var(--silk2);padding:56px 0 120px;--rh:110px}
.hd{display:grid;gap:18px}
.h2{font:700 30px/1.1 var(--f);color:var(--azurite)}
.hd p{font-size:15px;line-height:1.55;color:var(--ink2)}
.method .hd{max-width:560px}
.method .hd p{max-width:540px}
.ms{position:absolute;right:16px;top:30px;transform:rotate(-2deg)}
.steps{display:grid;gap:18px;max-width:600px;padding-top:30px}
.steps li{display:flex;gap:20px;padding-top:18px;border-top:3px solid var(--brocade)}
.steps .n{font:900 34px/1 var(--f);color:var(--malachite)}
.steps h3{font:700 17px/1.3 var(--f)}
.steps p{margin-top:6px;color:var(--ink2);line-height:1.55}

/* G: covers in a brocade mounting */
.gs{padding:56px 0 64px}
.gs .hd{gap:12px;max-width:760px}
.gs .hd p{max-width:620px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 14px;padding-top:24px;margin-top:12px}
.tile{position:relative;display:block;background:var(--brocade);padding:6px;text-decoration:none;color:var(--ink)}
.pal{position:relative;display:block;background:var(--pale);padding:3px;overflow:hidden}
.pal>img{width:100%;aspect-ratio:1;object-fit:cover}
.stamp{position:absolute;right:-6px;top:-10px;padding:3px 8px;background:var(--cinnabar);border:1.5px solid var(--cinnabar);color:var(--silk);font:600 12px/1.3 var(--f);transform:rotate(2deg)}
/* hover / focus: mist rises from the bottom of the cover, the name appears on it */
.mist{position:absolute;inset:3px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:0 12px 14px;background:linear-gradient(180deg,rgba(232,235,227,0) 35%,rgba(232,235,227,.85) 80%,rgba(232,235,227,.97));clip-path:inset(100% 0 0 0);opacity:0;transition:clip-path .28s ease-out,opacity .28s ease-out}
.mist b{font:900 18px/1.1 var(--f);color:var(--ink)}
.mist small{font-size:13px;line-height:1.4;color:var(--ink2)}
.tile:hover .mist,.tile:focus-visible .mist,.card:focus-within .mist,.card:hover .mist{clip-path:inset(0);opacity:1}
.tile:focus-visible{outline:3px solid var(--cinnabar);outline-offset:0}
.card:focus-within .tile{outline:3px solid var(--cinnabar);outline-offset:0}
.card:focus-within .rd{outline:none}

/* footer: brocade, every page numbered */
.foot{background:var(--brocade);color:var(--silk);padding:40px 0 28px}
.foot .w{display:grid;gap:28px}
.ft{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ft p{font:600 17px/1.35 var(--f);flex:1}
.fm{padding:10px 16px;border:1.5px solid rgba(232,235,227,.6);font:500 15px/1.3 var(--f);text-decoration:none}
.fm:hover{background:rgba(232,235,227,.1)}
.fp{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}
.fp li{padding-top:12px;border-top:3px solid rgba(232,235,227,.35)}
.fp span{display:block;font:700 12px/1.4 var(--f);color:var(--malachite2)}
.fp a{font-size:14px;line-height:1.35;text-decoration:none}
.fp a:hover{text-decoration:underline}
.fb{display:grid;gap:8px;padding-top:20px;border-top:1px solid rgba(232,235,227,.2);font-size:13px}
.fb p{opacity:.75}
.fb button{background:none;border:0;padding:0;font-size:13px;text-decoration:underline;cursor:pointer}

/* inner page head over a pale ridge ground */
.ph{position:relative;isolation:isolate;overflow:hidden;padding:24px 0 48px;--rh:90px}
.ph .w{display:grid;gap:14px}
.crumbs ol{display:flex;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.crumbs li+li::before{content:"›";margin:0 .7em}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.ph h1{font:900 34px/1.08 var(--f);max-width:860px;padding-right:44px}
.ph p{font-size:16px;line-height:1.5;color:var(--ink2);max-width:680px}
.phs{position:absolute;right:16px;top:22px;transform:rotate(-1.5deg)}
.flt{display:flex;flex-wrap:wrap;gap:10px;padding-top:10px}
.flt[hidden]{display:none}
.chip{padding:5px 10px;border:1.5px solid var(--cinnabar);background:transparent;color:var(--cinnabar);font:600 13px/1.3 var(--f);cursor:pointer}
.chip:hover{background:rgba(178,58,42,.08)}
.chip[aria-pressed=true]{background:var(--cinnabar);color:var(--silk)}

/* games catalogue */
.cat{padding:12px 0 56px}
.cards{display:grid;gap:32px;padding-top:12px}
.card{display:grid;gap:10px;align-content:start}
.card[hidden]{display:none}
.card h2{font:700 22px/1.15 var(--f);margin-top:4px}
.card .mt{font-size:13px;line-height:1.4;color:var(--ink2)}
.card p{line-height:1.5}
.rd{font:600 15px/1.4 var(--f);color:var(--azurite);text-decoration:underline}
.rd:hover{text-decoration-thickness:2px}
.none{padding-top:24px;color:var(--ink2)}

/* game page */
.gh{position:relative;isolation:isolate;overflow:hidden;padding:24px 0 32px;--rh:100px}
.ghw{display:flex;flex-direction:column;gap:20px}
.ght{display:grid;gap:12px}
.gh h1{font:900 38px/1.04 var(--f)}
.ght>p{font-size:16px;line-height:1.5;color:var(--ink2)}
.ght>.mt{font:500 14px/1.5 var(--f);color:var(--azurite)}
.gh .tile{align-self:stretch}
.band{background:var(--brocade);color:var(--silk);padding:18px 0}
.band dl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px}
.band dt{font:700 12px/1.4 var(--f);color:var(--malachite2)}
.band dd{font:500 14px/1.4 var(--f)}
.gbody{position:relative;isolation:isolate;overflow:hidden;padding:36px 0 96px;--rh:80px}
.gc{display:grid;gap:16px;max-width:720px}
.gsec{display:grid;gap:14px;padding-top:18px}
.gsec h2{font:700 24px/1.18 var(--f);color:var(--azurite)}
.keys div{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1.5px solid var(--pale)}
.keys dt{flex:none}
kbd{display:inline-block;padding:4px 10px;border:1.5px solid var(--ink);font:700 14px/1.4 var(--f)}
.tips{display:grid;gap:14px}
.tips li{display:flex;gap:16px}
.tips span{font:900 26px/1.1 var(--f);color:var(--malachite)}
.wg{display:grid;gap:14px}
.qa>div{display:grid;gap:4px;padding:10px 0;border-top:1.5px solid var(--pale)}
.qa h3{font:700 16px/1.35 var(--f)}
.qa p{color:var(--ink2)}
.sim{display:grid;gap:20px}
.sim a{display:flex;align-items:flex-start;gap:12px;text-decoration:none}
.sim img{width:72px;height:72px;object-fit:cover}
.sim b{display:block;font-size:16px;line-height:1.4}
.sim small{display:block;font-size:14px;line-height:1.4;color:var(--ink2)}
.sim a:hover b{text-decoration:underline}
.where{display:grid;gap:10px;padding:22px 24px;margin-top:6px;background:var(--silk2);border-top:6px solid var(--brocade)}
.where h2{font:700 17px/1.4 var(--f)}
.where p{color:var(--ink2)}
.where a{font:600 15px/1.4 var(--f);color:var(--azurite);text-decoration:underline}
.where a:hover{text-decoration-thickness:2px}

/* about */
.abody,.lbody{position:relative;isolation:isolate;overflow:hidden;padding:24px 0 56px;--rh:80px}
.abody .w{display:grid;gap:28px}
.asec{display:grid;gap:12px;max-width:720px}
.asec h2,.kc h2{font:700 24px/1.18 var(--f);color:var(--azurite)}
.kc{display:grid;gap:14px;max-width:840px;padding:24px 18px;background:var(--brocade);color:var(--silk)}
.kc h2{color:var(--silk)}
.kc ul{display:flex;flex-wrap:wrap;gap:10px}
.kc li{padding:5px 10px;border:1.5px solid var(--malachite2);font:600 13px/1.3 var(--f)}
.kc dl div{display:flex;gap:16px;padding-top:8px;margin-top:8px;border-top:1px solid rgba(232,235,227,.25)}
.kc dt{flex:none;width:96px;font:700 13px/1.6 var(--f);color:var(--malachite2)}
.kc dd{font-size:15px}

/* legal */
.ph.lg h1{max-width:860px}
.lbody{padding:20px 0 56px;--rh:70px}
.lc{display:grid;gap:22px;max-width:720px}
.sum{padding:18px 22px;background:var(--silk2);border-top:6px solid var(--brocade);font-weight:500}
.lc section{display:grid;gap:10px}
.lc h2{font:700 21px/1.2 var(--f);color:var(--azurite)}
.ls{transform:rotate(1.5deg)}

/* cookie: a small mounted panel */
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;max-width:500px;max-height:calc(100vh - 24px);overflow:auto;padding:10px;background:var(--brocade)}
.cookie[hidden]{display:none}
.ck-p{background:var(--pale);padding:3px}
.ck-i{display:grid;gap:14px;padding:20px 18px;background:var(--paint)}
.ck-t{display:flex;align-items:center;gap:14px}
.ck-t .seal{--s:32px;transform:rotate(1deg)}
.cookie h2{font:700 19px/1.2 var(--f)}
.cookie p{line-height:1.5;color:var(--ink2)}
.ck-acts{display:flex;gap:10px}
.ck-acts .ghost{flex:1;padding-inline:10px}
.ck-manage{display:grid;gap:8px;padding:10px 0;border-block:1.5px solid var(--pale)}
.ck-manage[hidden]{display:none}
.ck-manage label{display:flex;align-items:center;gap:10px}
.ck-manage input{width:18px;height:18px;accent-color:var(--cinnabar)}
.ck-manage .ghost{justify-self:start}
.ck-l{justify-self:start;font-size:14px;color:var(--azurite);text-decoration:underline}

/* reveal: panels of the scroll appear gently on scroll */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease-out,transform .7s ease-out}
html.js .rv.in{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media (min-width:768px){
  :root{--pad:40px}
  body{font-size:16px}
  .bar{padding:14px 40px;gap:14px}
  .bar .seal{--s:38px}
  .brand,.bar a{font-size:15px}
  .bar ul{gap:20px}
  .hero{padding:56px 0 48px;min-height:calc(clamp(200px,28vw,300px)*2.18 + 40px);--rh:200px}
  .hero h1{font-size:60px;max-width:calc(100% - clamp(200px,28vw,300px) - 40px)}
  .sf{font-size:18px;max-width:min(500px,calc(100% - clamp(200px,28vw,300px) - 40px))}
  .sm{display:none}
  .sd{display:block;position:absolute;right:var(--pad);top:-40px;width:clamp(200px,28vw,300px)}
  .gst{max-width:min(560px,calc(100% - clamp(200px,28vw,300px) - 40px));grid-template-columns:repeat(2,1fr);gap:10px 12px}
  .gst img{width:60px;height:60px}
  .gst b{font-size:16px}
  .ghost{padding:15px 24px;font-size:16px}
  .method{padding:88px 0 180px;--rh:200px}
  .h2{font-size:42px}
  .hd p{font-size:17px}
  .ms{--s:44px;right:40px;top:auto;bottom:200px}
  .steps{gap:26px}
  .steps .n{font-size:42px}
  .steps h3{font-size:20px}
  .gs{padding:80px 0 88px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:40px 28px}
  .tile{padding:8px}
  .mist{padding:0 16px 18px}
  .mist b{font-size:22px}
  .foot{padding:56px 0 36px}
  .foot .w{gap:36px}
  .ft{flex-direction:row;align-items:center;gap:24px}
  .ft p{font-size:20px}
  .s56{--s:52px}
  .fp{grid-template-columns:repeat(4,1fr);gap:20px 24px}
  .fp a{font-size:15px}
  .fb{display:flex;gap:24px}
  .fb p:first-child{flex:1}
  .ph{padding:40px 0 64px;--rh:150px}
  .ph .w{gap:18px}
  .ph h1{font-size:52px}
  .ph p{font-size:18px}
  .s40{--s:38px}
  .phs{right:40px;top:40px}
  .cat{padding:20px 0 88px}
  .cards{grid-template-columns:repeat(3,1fr);gap:48px 28px}
  .card h2{font-size:24px}
  .gh{padding:40px 0 48px;--rh:170px}
  .ghw{flex-direction:row;gap:40px}
  .ght{flex:1;gap:16px;align-content:start}
  .gh h1{font-size:56px}
  .ght>p{font-size:18px}
  .gh .tile{flex:0 0 40%;align-self:flex-start}
  .band{padding:24px 0}
  .band dl{display:flex;flex-wrap:wrap;gap:14px 36px}
  .band dd{font-size:15px}
  .band .lg dd{max-width:260px}
  .gbody{padding:56px 0 96px;--rh:140px}
  .gc{gap:20px}
  .gsec h2{font-size:28px}
  body .gc p,body .gc li,.asec p,.lc p{font-size:17px}
  .sim{grid-template-columns:repeat(2,minmax(0,350px))}
  .abody{padding:36px 0 96px;--rh:140px}
  .abody .w{gap:36px}
  .asec h2{font-size:28px}
  .kc{padding:32px 36px}
  .kc h2{font-size:28px}
  .kc dt{width:140px}
  .lbody{padding:28px 0 96px;--rh:130px}
  .lc{gap:28px}
  .lc h2{font-size:24px}
  .cookie{left:24px;right:auto;bottom:24px;width:min(500px,calc(100% - 48px));padding:12px}
  .ck-i{padding:28px}
  .ck-t .seal{--s:40px}
  .cookie h2{font-size:22px}
  .rg{background-image:var(--rd)}
}

/* ---------- desktop: side rail + content column (Figma 1368) ---------- */
@media (min-width:1200px){
  :root{--pad:72px}
  body{font-size:17px}
  .bar{display:none}
  .rail{display:block;flex:0 0 128px;background:var(--brocade);color:var(--silk)}
  .ri{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;gap:44px;padding:32px 0 40px}
  .rs{display:block;text-decoration:none}
  .rs .seal{--s:64px;transform:rotate(1deg)}
  .rail ul{display:grid;gap:22px;justify-items:center}
  .rail a{display:flex;flex-direction:column;align-items:center;gap:8px;font:500 15px/1.55 var(--f);text-decoration:none;opacity:.78}
  .rail i{width:8px;height:8px}
  .rail a[aria-current]{font-weight:700;opacity:1}
  .rail a[aria-current] i{background:var(--cinnabar)}
  .rail a:hover{opacity:1;text-decoration:underline}
  .dom{margin-top:auto;writing-mode:vertical-rl;transform:rotate(180deg);font:500 14px/1.55 var(--f);opacity:.7}
  .hero{min-height:820px;padding:80px 0 24px;--rh:260px}
  .hw{gap:26px}
  .hero h1{font-size:80px;max-width:500px}
  .sf{font-size:19px;max-width:500px}
  .sd{left:calc(var(--pad) + 648px);right:auto;top:-80px;width:408px;z-index:2}
  .gst{max-width:560px;width:560px;grid-template-columns:246px 246px}
  .method{padding:110px 0 220px;--rh:240px}
  .h2{font-size:52px}
  .hd p{font-size:18px}
  .method .hd{gap:28px}
  .ms{--s:52px;right:calc(max(0px,(100% - 1240px)/2) + 72px);top:640px;bottom:auto}
  .steps{padding-top:40px;gap:26px}
  .steps .n{font-size:48px}
  .steps h3{font-size:21px}
  .gs{padding:96px 0 104px}
  .gs .hd{gap:18px}
  .tiles{gap:48px 40px}
  .tile{padding:10px}
  .stamp{font-size:13px;padding:5px 10px}
  .mist{padding:0 20px 22px}
  .mist b{font-size:26px}
  .mist small{font-size:14px}
  .foot{padding:64px 0 40px}
  .foot .w{gap:40px}
  .ft{gap:32px}
  .ft p{font-size:22px}
  .s56{--s:56px}
  .ph{padding:48px 0 72px;--rh:170px}
  .ph .w{gap:20px}
  .ph h1{font-size:64px;padding-right:0}
  .ph.lg h1{font-size:60px}
  .ph p{font-size:19px}
  .s40{--s:40px}
  .phs{right:calc(max(0px,(100% - 1240px)/2) + 72px);top:48px}
  .cat{padding:24px 0 104px}
  .cards{gap:56px 40px}
  .card h2{font-size:26px}
  .gh{padding:48px 0 56px;--rh:200px}
  .ghw{gap:48px}
  .ght{gap:18px}
  .gh h1{font-size:72px}
  .ght>p{font-size:19px}
  .gh .tile{flex:0 0 426px;padding:10px}
  .band{padding:26px 0}
  .gbody{padding:64px 0 96px;--rh:160px}
  .gc{gap:22px}
  .gsec h2{font-size:32px}
  .qa h3{font-size:18px}
  .abody{padding:40px 0 96px;--rh:160px}
  .abody .w{gap:40px}
  .asec h2,.kc h2{font-size:32px}
  .kc{padding:36px 40px}
  .lbody{padding:32px 0 96px;--rh:150px}
  .lc{gap:32px}
  .lc h2{font-size:26px}
  .s44{--s:44px}
}
/* desktop scroll geometry (percent of the 408 x 890 artwork) */
.sd .gm{left:3.43%;top:7.64%;width:93.14%;height:90.34%}
.sd .gs{left:8.82%;top:27.76%;width:82.35%;height:60.14%}
.sd .sk1{--s:11.27cqw;left:75.98%;top:30.24%;transform:rotate(1.5deg)}
.sd .sk2{--s:7.35cqw;left:10.29%;top:82.06%;transform:rotate(-1deg)}
.sd .sk2>span,.sm .sk1>span{font-size:calc(var(--s)*.4)}
.sd .rsh{left:4.9%;top:99.3%;width:90.2%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .mist,.ghost{transition:none}
}

/* social icons (footer) */
.soc{display:flex;gap:10px}
.sic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;transition:background .16s,color .16s,border-color .16s;border:1px solid rgba(232,235,227,.35);border-radius:50%;color:var(--silk)}
.sic:hover{background:var(--malachite);border-color:var(--malachite);color:var(--silk)}
.sic .si{width:17px;height:17px}