:root{
  color-scheme: light;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f9f9;
  --border:#eff3f4;
  --border-2:#dfe3e4;
  --text:#0f1419;
  --muted:#536471;
  --muted-2:#8b98a5;
  --header:rgba(255,255,255,.92);
  --accent:#1d9bf0;
  --accent-2:#7856ff;
  --accent-3:#20d7ee;
  --danger:#f4212e;
  --shadow:0 12px 30px rgba(15,20,25,.12);
  --radius:18px;
  --radius-sm:14px;
  --center:600px;
  --left:275px;
  --right:350px;
  --mobile-topbar:56px;
}

body.theme-dim{
  color-scheme: dark;
  --bg:#15202b;
  --surface:#15202b;
  --surface-2:#1c2b3a;
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --text:#f7f9f9;
  --muted:#8b98a5;
  --muted-2:#6b7f90;
  --header:rgba(21,32,43,.86);
  --shadow:0 12px 30px rgba(0,0,0,.45);
}

body.theme-dark{
  color-scheme: dark;
  --bg:#000000;
  --surface:#000000;
  --surface-2:#0a0a0a;
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.16);
  --text:#f7f9f9;
  --muted:#8b98a5;
  --muted-2:#6b7f90;
  --header:rgba(0,0,0,.72);
  --shadow:0 12px 30px rgba(0,0,0,.60);
}

@media (prefers-color-scheme: dark){
  body.theme-auto{
    color-scheme: dark;
    --bg:#15202b;
    --surface:#15202b;
    --surface-2:#1c2b3a;
    --border:rgba(255,255,255,.08);
    --border-2:rgba(255,255,255,.14);
    --text:#f7f9f9;
    --muted:#8b98a5;
    --muted-2:#6b7f90;
    --header:rgba(21,32,43,.86);
    --shadow:0 12px 30px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;}

.material-symbols-rounded{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: middle;
}

.navicon.material-symbols-rounded{
  font-size: 22px;
}

.iconbtn .material-symbols-rounded{
  font-size: 22px;
}

.mobile-link .material-symbols-rounded{
  font-size: 26px;
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;transition:none !important;}
}

a{color:inherit;text-decoration:none;}
button,input,textarea{font:inherit;color:inherit;}

[hidden]{display:none !important;}

.app{min-height:100%;display:flex;flex-direction:column;}

.topbar{display:none;position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border);background:rgba(255,255,255,.86);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
.topbar-inner{max-width:1260px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;}

.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-0.03em;}
.brand-text{font-size:1.05rem;}
.brand-dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--accent-2),var(--accent-3));box-shadow:0 0 18px rgba(120,86,255,.25);}

.topbar-right{display:flex;align-items:center;gap:10px;}


.layout{flex:1;max-width:1260px;margin:0 auto;width:100%;display:grid;grid-template-columns: var(--left) minmax(0, var(--center)) minmax(0, var(--right));gap:22px;padding:0 12px 0;}

.left{position:sticky;top:0;align-self:start;height:100dvh;padding:10px 0;display:flex;flex-direction:column;gap:4px;}

.navitem{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:999px;color:var(--text);font-weight:800;letter-spacing:-0.01em;width:100%;}
.navitem .navicon{width:26px;display:grid;place-items:center;color:var(--text);font-size:18px;}
.navitem:hover{background:rgba(15,20,25,.06);}
.navitem.is-active{font-weight:900;}

.btn-wide{width:100%;border-radius:999px;padding:12px 16px;margin-top:10px;}

.me{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:12px 6px 6px;}
.me-row{display:flex;gap:12px;align-items:center;}
.me-meta{min-width:0;display:flex;flex-direction:column;gap:2px;}
.me-name{font-weight:900;}
.me-handle{color:var(--muted);font-size:0.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.center{border-left:1px solid var(--border);border-right:1px solid var(--border);min-height:100dvh;background:var(--surface);width:100%;justify-self:stretch;min-width:0;}

.center-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--header);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
.center-title{font-weight:900;letter-spacing:-0.02em;}


.composer{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);}
.composer-row{display:flex;gap:12px;align-items:flex-start;}
.composer-input{width:100%;resize:none;min-height:72px;border-radius:16px;padding:12px 0;background:transparent;border:1px solid transparent;outline:none;line-height:1.35;font-size:1.15rem;}
.composer-input::placeholder{color:var(--muted-2);}
.composer-input:focus{border-color:transparent;box-shadow:none;}
.composer-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}

.replybox{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);}
.replybox .composer-input{min-height:54px;font-size:1.05rem;}

.profile{display:block;min-width:0;}
.profile-banner{height:140px;background:linear-gradient(135deg, rgba(29,155,240,.25), rgba(120,86,255,.22));border-bottom:1px solid var(--border);}
.profile-info{padding:12px 16px 0;}
.profile-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:-38px;}
.profile-avatar{width:86px;height:86px;border:4px solid var(--surface);box-shadow:none;}
.profile-actions{display:flex;align-items:center;gap:10px;}
.profile-name{margin-top:10px;font-weight:900;letter-spacing:-0.02em;font-size:1.25rem;line-height:1.15;}
.profile-handle{margin-top:4px;color:var(--muted);}
.profile-bio{margin-top:12px;line-height:1.35;overflow-wrap:anywhere;}
.profile-tabs{margin-top:14px;border-bottom:1px solid var(--border);display:flex;}
.profile-tab{flex:1;text-align:center;padding:14px 10px;font-weight:900;color:var(--muted);cursor:default;}
.profile-tab.is-active{color:var(--text);position:relative;}
.profile-tab.is-active:after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:4px;border-radius:999px;background:var(--accent);}

.feed{display:flex;flex-direction:column;min-width:0;}
.feed-empty{color:var(--muted);padding:10px 2px;}

.settings{padding:6px 0;}
.settings-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
.settings-item:hover{background:rgba(15,20,25,.03);}
body.theme-dim .settings-item:hover, body.theme-dark .settings-item:hover{background:rgba(255,255,255,.04);}
.settings-left{display:flex;flex-direction:column;gap:2px;min-width:0;}
.settings-title{font-weight:900;letter-spacing:-0.01em;}
.settings-sub{color:var(--muted);font-size:0.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.settings-chevron{color:var(--muted);}

.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 16px;}
.theme-card{border:1px solid var(--border-2);border-radius:16px;background:var(--surface);padding:14px 12px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:76px;font-weight:900;cursor:pointer;position:relative;}
.theme-card:hover{background:rgba(15,20,25,.03);}
body.theme-dim .theme-card:hover, body.theme-dark .theme-card:hover{background:rgba(255,255,255,.04);}
.theme-card.is-active{border-color:rgba(29,155,240,.95);box-shadow:0 0 0 2px rgba(29,155,240,.25) inset;}
.theme-radio{width:22px;height:22px;border-radius:999px;border:2px solid rgba(83,100,113,.7);display:grid;place-items:center;flex:0 0 auto;}
.theme-card.is-active .theme-radio{border-color:rgba(29,155,240,.95);}
.theme-dot{width:10px;height:10px;border-radius:999px;background:rgba(29,155,240,.95);opacity:0;}
.theme-card.is-active .theme-dot{opacity:1;}

.theme-card.is-preview-light{background:#ffffff;color:#0f1419;border-color:rgba(15,20,25,.12);}
.theme-card.is-preview-light:hover{background:#f7f9f9 !important;}

.theme-card.is-preview-dim{background:#15202b;color:#f7f9f9;border-color:rgba(255,255,255,.18);}
.theme-card.is-preview-dim:hover{background:#1c2b3a !important;}

.theme-card.is-preview-dark{background:#000000;color:#f7f9f9;border-color:rgba(255,255,255,.22);}
.theme-card.is-preview-dark:hover{background:#0a0a0a !important;}

.theme-card.is-preview-dim .theme-radio, .theme-card.is-preview-dark .theme-radio{border-color:rgba(255,255,255,.32);}
.theme-card.is-preview-dim.is-active .theme-radio, .theme-card.is-preview-dark.is-active .theme-radio{border-color:rgba(29,155,240,.95);}

.settings-item input[type="checkbox"]{width:46px;height:28px;accent-color:var(--accent);}
.settings-item select.input{padding:10px 10px;border-radius:12px;}

.explore{display:flex;flex-direction:column;min-width:0;}
.explore-search{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);}
.explore-search .material-symbols-rounded{color:var(--muted);font-size:22px;}
.explore-input{width:100%;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:10px 14px;outline:none;font-weight:700;}
.explore-input:focus{border-color:rgba(29,155,240,.65);box-shadow:0 0 0 4px rgba(29,155,240,.12);background:var(--surface);}
.explore-clear{border:0;background:transparent;color:var(--muted);width:34px;height:34px;border-radius:999px;display:grid;place-items:center;cursor:pointer;}
.explore-clear:hover{background:rgba(15,20,25,.06);color:var(--text);}

.explore-tabs{position:sticky;top:56px;z-index:9;display:flex;border-bottom:1px solid var(--border);background:var(--surface);}
.explore-tab{flex:1;border:0;background:transparent;color:var(--muted);font-weight:900;padding:14px 10px;cursor:pointer;position:relative;}
.explore-tab:hover{background:rgba(15,20,25,.03);color:var(--text);}
body.theme-dim .explore-tab:hover, body.theme-dark .explore-tab:hover{background:rgba(255,255,255,.04);}
.explore-tab.is-active{color:var(--text);}
.explore-tab.is-active:after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:4px;border-radius:999px;background:var(--accent);}

.explore-people{display:flex;flex-direction:column;border-bottom:1px solid var(--border);}
.explore-person{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;min-width:0;}
.explore-person:hover{background:rgba(15,20,25,.03);}
body.theme-dim .explore-person:hover, body.theme-dark .explore-person:hover{background:rgba(255,255,255,.04);}
.explore-person .avatar{width:44px;height:44px;}
.explore-person-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.explore-person-name{font-weight:900;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.explore-person-handle{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.tweet{display:grid;grid-template-columns: 48px minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);min-width:0;}
.tweet:hover{background:rgba(15,20,25,.03);}
.tweet-main{min-width:0;}
.tweet-head{display:flex;align-items:center;gap:8px;min-width:0;}
.tweet-name{font-weight:900;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tweet-handle{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tweet-dot{color:var(--muted-2);}
.tweet-time{color:var(--muted);white-space:nowrap;}
.tweet-text{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35;}
.tweet-text a{color:var(--accent);}

.tweet-text.is-collapsed{display:-webkit-box;-webkit-line-clamp:8;line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;}
.tweet-text.is-expanded{display:block;}

.tweet-more{margin-top:8px;border:0;background:transparent;color:var(--accent);font-weight:900;padding:6px 0;cursor:pointer;align-self:flex-start;}
.tweet-more:hover{text-decoration:underline;}

.tweet-media{margin-top:10px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;}
.tweet-media::-webkit-scrollbar{height:6px;}
.tweet-media::-webkit-scrollbar-thumb{background:rgba(83,100,113,.35);border-radius:999px;}
.media-card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface-2);min-height:120px;position:relative;flex:0 0 min(520px, 86%);scroll-snap-align:start;display:flex;flex-direction:column;}
.media-card[data-loaded="1"]{cursor:zoom-in;}
.media-placeholder{padding:14px 14px 12px;display:flex;flex-direction:column;gap:12px;}
.media-head{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.media-icon{color:var(--muted);font-size:22px;line-height:1;margin-top:2px;}
.media-meta{display:flex;flex-direction:column;gap:4px;min-width:0;}
.media-type{font-weight:900;color:var(--text);}
.media-url{color:var(--muted);font-size:0.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.media-load{align-self:flex-start;}
.media{width:100%;height:auto;display:block;max-height:560px;object-fit:contain;background:var(--surface-2);}
.media-card > .media{max-height:min(520px, 62vh);}
.media-card > video.media{height:auto;}

.media-modal[hidden]{display:none;}
.media-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(15,20,25,.72);}
body.has-media-modal{overflow:hidden;}
.media-modal-card{width:min(980px, 100%);max-height:min(92vh, 860px);border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;}
.media-modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 8px;border-bottom:1px solid var(--border);}
.media-modal-counter{color:var(--muted);font-weight:900;padding-left:6px;}
.media-modal-body{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px;padding:10px;}
.media-modal-stage{min-width:0;min-height:0;}
.media-modal-inner{width:100%;height:100%;display:grid;place-items:center;}
.media-modal-media{max-width:100%;max-height:76vh;object-fit:contain;}
.media-modal-nav{width:44px;height:44px;}
.media-modal-placeholder{display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:center;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:14px;max-width:100%;}
.media-modal-placeholder .material-symbols-rounded{color:var(--muted);font-size:22px;}

.explore-more{padding:12px 16px;display:flex;justify-content:center;border-bottom:1px solid var(--border);}
.tweet-actions{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:440px;}
.tact{display:flex;align-items:center;gap:8px;color:var(--muted);padding:7px 10px;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:700;min-width:0;}
.tact .material-symbols-rounded{font-size:18px;}
.tact-count{font-size:0.95rem;line-height:1;}
.tact.is-active{color:var(--text);}
.tact.is-like.is-active{color:var(--danger);}
.tact.is-repost.is-active{color:#00ba7c;}
.tact:hover{background:rgba(15,20,25,.06);color:var(--text);}

.btn{border:1px solid transparent;background:var(--accent);color:#fff;font-weight:900;padding:10px 16px;border-radius:999px;cursor:pointer;box-shadow:none;}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.7);}
.btn-ghost{background:transparent;border-color:var(--border-2);color:var(--text);}
.btn:hover{filter:brightness(.95);}
.btn-ghost:hover{background:rgba(15,20,25,.06);}

.pill{border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-weight:900;padding:9px 12px;border-radius:999px;cursor:pointer;}
.pill:hover{background:rgba(15,20,25,.06);}
.pill-ghost{background:transparent;}

.iconbtn{border:1px solid transparent;background:transparent;color:var(--text);border-radius:999px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;}
.iconbtn:hover{background:rgba(15,20,25,.06);}

.avatar{width:48px;height:48px;border-radius:999px;background:radial-gradient(circle at 20% 25%, rgba(32,215,238,.95), rgba(120,86,255,.9));border:1px solid rgba(15,20,25,.10);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;}
.avatar.has-photo{background-size:cover;background-position:center;}

.hovercard{position:fixed;z-index:90;width:min(320px, calc(100vw - 24px));border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.98);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow:var(--shadow);padding:12px;}
.hovercard-head{display:flex;align-items:center;gap:10px;}
.hovercard .avatar{width:44px;height:44px;}
.hovercard-name{font-weight:900;letter-spacing:-0.01em;}
.hovercard-handle{color:var(--muted);font-size:0.95rem;margin-top:2px;}
.hovercard-about{margin-top:10px;color:var(--text);line-height:1.35;overflow-wrap:anywhere;}

@media (hover: none){
  .hovercard{display:none !important;}
}

.muted{color:var(--muted);}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;display:grid;place-items:center;padding:18px;background:rgba(15,20,25,.45);z-index:60;}
.modal-card{width:min(560px, 100%);border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 8px;}
.modal-title{font-weight:800;}

.tabs{display:flex;gap:10px;padding:8px 14px 0;}
.tab{flex:1;border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer;}
.tab.is-active{background:var(--surface);}

.tabpage{padding:14px;}

.stack{display:flex;flex-direction:column;gap:10px;}
.label{font-weight:700;color:var(--muted);}
.input{width:100%;border-radius:12px;padding:11px 12px;background:var(--surface);border:1px solid var(--border-2);outline:none;}
.input:focus{border-color:rgba(29,155,240,.55);box-shadow:0 0 0 4px rgba(29,155,240,.12);}

.check{display:flex;gap:10px;align-items:center;color:var(--muted);}
.check input{width:18px;height:18px;}

.hint{color:var(--muted);font-size:0.95rem;line-height:1.35;}
.error{color:var(--danger);font-weight:600;line-height:1.35;}

.keybox{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px;}
.keyrow{display:flex;flex-direction:column;gap:6px;}
.keyactions{display:flex;gap:10px;flex-wrap:wrap;}

.toast[hidden]{display:none;}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(15,20,25,.92);border:1px solid rgba(255,255,255,.14);color:#fff;padding:10px 12px;border-radius:12px;z-index:80;max-width:calc(100% - 28px);}

.right{position:sticky;top:0;align-self:start;height:100dvh;padding:10px 0;display:flex;flex-direction:column;gap:12px;width:100%;justify-self:stretch;}

.search{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:10px 12px;}
.search-input{width:100%;border:none;background:transparent;outline:none;}

.card{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius);overflow:hidden;}
.card-title{padding:12px 14px;font-weight:900;border-bottom:1px solid var(--border);}
.card-item{padding:12px 14px;border-bottom:1px solid var(--border);}
.card-item:last-child{border-bottom:none;}
.card-strong{font-weight:900;}

@media (max-width: 900px){
  :root{--mobile-topbar:0px;}
  .topbar{display:none;}
  .topbar-inner{max-width:none;width:100%;}
  .layout{display:block;max-width:none;margin:0;padding:0 0 12px;width:100%;}
  .left{display:none;}
  .right{display:none;}
  .center{max-width:none;justify-self:stretch;border-left:none;border-right:none;border-top:none;border-bottom:1px solid var(--border);border-radius:0;overflow:visible;margin-top:0;width:100vw;}
  .center{min-height:100dvh;}
  .center-head{top:0;}
  .center-head,.composer,.tweet{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));}
  body{padding-bottom:76px;}
}

@media (max-width: 520px){
  .topbar-inner{padding:10px 12px;}
  .layout{padding:0 0 12px;}
}

.mobile-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;grid-template-columns: repeat(5, 1fr);gap:2px;border-top:1px solid var(--border);background:rgba(255,255,255,.92);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);padding:8px 10px;}
.mobile-link{height:44px;display:grid;place-items:center;color:var(--muted);border-radius:999px;border:1px solid transparent;background:transparent;font-size:18px;font-weight:900;}
.mobile-link.is-active{color:var(--text);background:rgba(255,255,255,.06);}

.fab{display:none;position:fixed;right:16px;bottom:86px;z-index:45;width:52px;height:52px;border-radius:999px;border:1px solid transparent;background:linear-gradient(135deg, rgba(120,86,255,.95), rgba(32,215,238,.75));color:#fff;font-size:28px;place-items:center;box-shadow:0 18px 55px rgba(15,20,25,.20);cursor:pointer;}

@media (max-width: 900px){
  .mobile-nav{display:grid;}
  .fab{display:grid;}
}

@media (max-width: 1260px){
  :root{--right:320px;}
}

@media (max-width: 1180px){
  :root{--center:560px;--right:300px;}
}

@media (max-width: 1080px){
  :root{--right:0px;}
  .layout{grid-template-columns: var(--left) minmax(0, var(--center));}
  .right{display:none;}
}

@media (max-width: 1110px){
  :root{--left:88px;--right:320px;}
  .navitem{width:48px;padding:12px 0;justify-content:center;}
  .navitem span:nth-child(2){display:none;}
  .btn-wide{width:48px;height:48px;padding:0;border-radius:999px;}
  .btn-wide{font-size:0;}
  .btn-wide::before{content:'edit';font-family:'Material Symbols Rounded';font-size:24px;line-height:1;}
  .me{display:none;}
}

@media (max-width: 1010px){
  :root{--right:0px;}
}