:root {
  color-scheme: light;
  --page:#e8eef1; --surface:#f7fafb; --ink:#182e3a; --quiet:#4d616d;
  --line:#d0dce2; --navy:#1c3544; --accent:#edc6a6; --focus:#a04730;
  --display: Georgia, "Songti SC", SimSun, serif;
  font:15px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box }
[hidden] { display:none!important }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--page); scrollbar-color:#859ba7 var(--page) }
::selection { color:#182e3a; background:#edc6a6 }
main { width:min(100% - 56px,1120px); margin:auto; padding:22px 0 60px }
header,.sectionhead,.transport,.timeline,form { display:flex; align-items:center; gap:10px }
header,.sectionhead { justify-content:space-between }
header { margin-bottom:16px }
.brand { display:flex; align-items:center; gap:9px; font:700 21px/1.2 var(--display); white-space:nowrap }
.brand::before { content:""; width:23px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#e0aa88 0 3px,#294551 3.5px 6px,#577180 6.5px 7px,#294551 7.5px) }
.room-meta { justify-content:flex-end; flex-wrap:wrap }
#presence { color:var(--quiet); font-size:13px }
#switch-member { background:transparent }
.hero {
  display:grid; grid-template-columns:224px minmax(0,1fr); gap:40px; align-items:center;
  padding:30px 36px; color:#f2f7f8; border-radius:16px;
  background:linear-gradient(120deg,#304d5b,var(--navy) 65%);
}
.record {
  width:100%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:
    conic-gradient(from -35deg,#d3edf32c,transparent 11%,transparent 47%,#d3edf32c 50%,transparent 61%,transparent 96%,#d3edf32c),
    repeating-radial-gradient(circle,#182e39 0 2px,#334b57 3px 4px);
  border:1px solid #607785; box-shadow:0 13px 24px #101c25a0;
}
.record img {
  display:block;
  width:86%;
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  background:#49636b;
  box-shadow:0 0 0 1px #b4c5c766;
}
.playing { min-width:0 }
h1,h2 { font-family:var(--display); line-height:1.2; margin:0 }
h1 { font-size:clamp(32px,4.2vw,60px); overflow-wrap:anywhere; letter-spacing:-.025em }
h1 span { color:var(--accent) }
h2 { font-size:24px }
p { color:var(--quiet) }
#playing-label { color:#c3d7df; font-size:13px; margin:0 0 12px }
#artist { margin:10px 0 18px; color:#d1e1e6; overflow-wrap:anywhere }
button,select,input { font:inherit; color:inherit }
button,select,input:not([type=range]) {
  min-height:42px; border:1px solid #b7c8d1; background:#fff; padding:7px 12px; border-radius:9px;
}
button { cursor:pointer; white-space:nowrap }
button:hover:not(:disabled) { background:#e0eaf0; border-color:#708d9d }
button:active:not(:disabled) { transform:translateY(1px) }
button:disabled { color:#586d78; background:#edf2f5; cursor:default }
button.primary,#search button { background:var(--navy); border-color:var(--navy); color:white; font-weight:600 }
button.primary:hover:not(:disabled),#search button:hover:not(:disabled) { background:#2f5263; color:white }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px }
.hero :focus-visible { outline-color:var(--accent) }
input::placeholder { color:#536a76; opacity:1 }
input[type=range] { accent-color:#2e5569; margin:0; min-width:0; cursor:pointer }
.hero input[type=range] { accent-color:var(--accent) }
input[type=range]:disabled { cursor:default }
.player-controls { flex-wrap:wrap }
.hero button { background:#284756; color:#eff6f8; border-color:#5c7b8a }
.hero button:hover:not(:disabled) { background:#385c6d; border-color:#89a5b3 }
.hero button:disabled { color:#b3c9d4; background:#233e4d; border-color:#526d7b }
.hero button.primary,.hero #toggle:not(:disabled) { color:#292721; background:var(--accent); border-color:var(--accent); font-weight:700 }
.hero button.primary:hover:not(:disabled),.hero #toggle:hover:not(:disabled) { background:#ffdab9; color:#292721 }
.transport label { display:flex; align-items:center; gap:8px; color:#d1e1e6; font-size:13px }
.transport label input { width:78px }
.timeline { margin-top:13px; min-height:30px }
.timeline input { flex:1 }
.timeline output { white-space:nowrap; text-align:right; font-size:13px; font-variant-numeric:tabular-nums }
.room-feedback { min-height:56px; display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; padding:7px 0; margin-bottom:10px }
#control-status { font-weight:600 }
#transfer { background:transparent; font-size:13px }
#status { margin:0; overflow-wrap:anywhere }
.panels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:16px; align-items:start }
.panels > section { min-width:0; border:1px solid var(--line); border-radius:15px; background:var(--surface); padding:18px 20px }
.sectionhead { margin-bottom:14px; flex-wrap:wrap }
#queue-count { color:var(--quiet); font-size:13px; white-space:nowrap }
form input:not([type=file]) { flex:1; min-width:0 }
ul { list-style:none; padding:0; margin:10px 0 0 }
li { display:flex; align-items:center; gap:6px; padding:10px 0; border-bottom:1px solid var(--line) }
li:last-child { border-bottom:0 }
li .info { flex:1; min-width:0; overflow-wrap:anywhere; font-weight:600 }
li small { display:block; margin-top:3px; color:var(--quiet); font-weight:400 }
li button { min-height:38px; padding:4px 8px; font-size:13px }
li.empty { color:var(--quiet); font-size:14px }
.wish-block { margin-top:17px; padding-top:17px; border-top:1px solid var(--line) }
.wish-block h2 { font-size:20px; margin-bottom:12px }
.gate {
  width:min(100% - 32px,480px); margin:clamp(32px,15vh,154px) auto;
  padding:24px; padding:clamp(24px,5vw,40px); border-radius:16px; background:var(--surface); border:1px solid var(--line)
}
.gate .brand { margin-bottom:22px; font:600 14px/1.3 "Segoe UI","Microsoft YaHei",sans-serif; color:var(--quiet) }
.gate h1 { font-size:clamp(42px,8vw,63px) }
.gate h1 span { color:var(--focus) }
.gate p { margin:12px 0 22px }
.gate form { display:grid; grid-template-columns:1fr; gap:10px }
.gate input { width:100% }
.gate #login-error { margin:12px 0 0; color:#8d3528 }
.gate #login-error:empty { margin:0 }
@media(max-width:850px) {
  .hero { grid-template-columns:170px minmax(0,1fr); gap:26px; padding:24px }
  .panels > section { padding:16px }
  #search { display:grid; grid-template-columns:minmax(0,1fr) auto }
  #query { grid-column:1/-1 }
}
@media(max-width:660px) {
  main { width:calc(100% - 28px); padding:14px 0 36px }
  header { gap:8px }
  .room-meta { gap:4px 8px }
  #switch-member { min-height:36px; font-size:12px; padding:4px 8px }
  #presence { font-size:12px }
  .hero { display:block; padding:20px 16px 14px }
  .record { width:clamp(138px,43vw,176px); margin:0 auto 18px }
  #playing-label { margin-bottom:7px }
  #artist { margin:8px 0 12px }
  .player-controls { gap:8px }
  .transport label { min-height:30px }
  .timeline { margin-top:6px }
  .panels { grid-template-columns:minmax(0,1fr); gap:12px }
  .room-feedback { font-size:13px }
  button,select,input:not([type=range]) { min-height:44px }
  li button { min-width:36px; min-height:42px; padding:4px 6px }
  #play-queue { padding-inline:8px }
}

body:has(#room:not([hidden])) {
  background-color:var(--room-print-color, var(--page));
  background-image:var(--room-print, none);
  background-size:var(--room-print-size, auto);
}
#room {padding-bottom:88px}
#room > header, #room .room-feedback {
  background:var(--surface);
  border-radius:12px;
  padding:8px 12px;
}
#room {padding:clamp(92px,23vh,210px) 0 56px}
.search-stage {width:min(100%,540px);margin-inline:auto}
#search {
  display:flex;
  gap:4px;
  padding:5px 6px 5px 16px;
  border:1px solid #ffffffb0;
  border-radius:999px;
  background:linear-gradient(145deg,#ffffff18,#faf2e509 56%,#ffffff11);
  backdrop-filter:blur(2px) saturate(110%);
  box-shadow:inset 0 1px 2px #fffb, inset 0 -2px 4px #fff4, 0 8px 26px #23241f44;
}
#search:focus-within {box-shadow:inset 0 1px 2px #fff,0 0 0 2px #fffa,0 8px 26px #23241f44}
#search #query {
  border:0;
  border-radius:0;
  padding:5px 2px;
  min-height:44px;
  background:transparent;
  color:#171d17;
  text-shadow:0 0 3px #fff, 0 0 7px #fffd;
  font-size:16px;
}
#search #query:focus {outline:none}
#search #query::placeholder {color:#20271f}
#search button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  padding:0;
  border:1px solid #fff9;
  border-radius:50%;
  background:#fdfbf720;
  color:#25322b;
}
#search button:hover:not(:disabled) {background:#fff;color:#25322b}
#results, #search-status {
  margin:10px 0 0;
  padding:8px 14px;
  background:#faf8f3f5;
  border-radius:14px;
  color:#222c26;
}
#search-status {width:fit-content;margin-inline:auto;font-size:13px}

#room {padding-top:max(16px, calc(env(safe-area-inset-top) + 10px))}
.search-stage {position:relative;z-index:1}
.gallery-layer {
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  --tile-width:max(420px, 50vw);
  --tile-height:max(555px, 65vh);
}
#gallery-track {
  position:absolute;
  top:calc(-1 * var(--tile-height));
  left:calc(-1 * var(--tile-width));
  display:grid;
  grid-template-columns:repeat(4, var(--tile-width));
  animation:gallery-drift-x var(--drift-x-time, 115s) linear infinite,
            gallery-drift-y var(--drift-y-time, 115s) linear infinite;
}
.gallery-tile {position:relative;width:var(--tile-width);height:var(--tile-height)}
.gallery-tile img {
  position:absolute;
  object-fit:cover;
  opacity:.96;
  filter:saturate(.88);
}
.gallery-tile img:nth-child(1) {left:3%;top:6%;width:30%;height:22%}
.gallery-tile img:nth-child(2) {left:39%;top:2%;width:25%;height:20%}
.gallery-tile img:nth-child(3) {left:70%;top:10%;width:26%;height:19%}
.gallery-tile img:nth-child(4) {left:7%;top:37%;width:35%;height:23%}
.gallery-tile img:nth-child(5) {left:51%;top:33%;width:39%;height:25%}
.gallery-tile img:nth-child(6) {left:3%;top:70%;width:24%;height:19%}
.gallery-tile img:nth-child(7) {left:34%;top:65%;width:32%;height:24%}
.gallery-tile img:nth-child(8) {left:74%;top:72%;width:24%;height:24%}
@keyframes gallery-drift-x {
  to {translate:calc(var(--drift-x) * var(--tile-width)) 0}
}
@keyframes gallery-drift-y {
  to {transform:translateY(calc(var(--drift-y) * var(--tile-height)))}
}
@media(prefers-reduced-motion:reduce) {
  #gallery-track {animation:none}
}

#room {padding-bottom:calc(160px + env(safe-area-inset-bottom))}
.mini-player {
  position:fixed;
  z-index:5;
  inset-inline:0;
  bottom:calc(12px + env(safe-area-inset-bottom));
  width:min(calc(100% - 28px), 680px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  align-items:center;
  gap:2px 18px;
  padding:9px 12px;
  border:1px solid #fff9;
  border-radius:21px;
  background:linear-gradient(145deg,#faf4e74d,#d9c9ad32);
  backdrop-filter:blur(12px) saturate(118%);
  box-shadow:inset 0 1px 2px #fffc,inset 0 -1px 2px #fff6,0 8px 24px #28281d50;
  color:#171d16;
}
.mini-track,.mini-buttons,.mini-progress {display:flex;align-items:center;min-width:0}
.mini-track {gap:9px}
.mini-art {display:block;flex:0 0 44px;width:44px;height:44px;object-fit:cover;border-radius:9px;background:#b5b6a0}
.mini-meta {min-width:0;flex:1}
.mini-meta strong,.mini-meta #artist {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 5px #fff}
.mini-meta #artist {margin:0;color:#252b23;font-size:12px}
.mini-buttons {justify-content:center;gap:6px}
.mini-player button,.mini-volume summary {
  display:grid;place-items:center;
  width:40px;height:40px;min-height:40px;
  padding:0;border:0;border-radius:50%;background:transparent;color:inherit;
}
.mini-player button:disabled {opacity:.58}
.mini-player button:hover:not(:disabled),.mini-volume summary:hover {background:#fff7}
.mini-player svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mini-player .mini-play {width:46px;background:linear-gradient(145deg,#395347e8,#243b31e8);color:#fff9ef;box-shadow:inset 0 1px 1px #fff5}
.mini-player .mini-play:hover:not(:disabled) {background:#324e3e}
.mini-play .play-icon,.mini-play .pause-icon,#join svg {fill:currentColor;stroke:none}
#toggle .pause-icon,#toggle[data-playing=true] .play-icon {display:none}
#toggle[data-playing=true] .pause-icon {display:block}
.mini-volume {position:relative;border:0;padding:0}
.mini-volume summary {cursor:pointer;list-style:none}
.mini-volume summary::-webkit-details-marker {display:none}
.volume-popover {
  position:absolute;left:50%;bottom:calc(100% + 7px);
  transform:translateX(-50%);
  display:grid;place-items:center;
  width:42px;height:124px;padding:6px;
  border:1px solid #fff9;border-radius:21px;
  background:#f7efdfed;box-shadow:0 5px 16px #28281d40;
}
.mini-volume input {
  writing-mode:vertical-lr;direction:rtl;
  width:28px;height:110px;padding:0;touch-action:none;
  accent-color:#23392d;
}
.mini-progress {gap:7px}
.mini-progress input {flex:1;accent-color:#23392d}
.mini-progress output {font-size:11px;font-variant-numeric:tabular-nums;text-shadow:0 0 4px white}
.mini-player #status {grid-column:1/-1;font-size:12px;color:#253027;text-shadow:0 0 4px white}
.mini-player #status:empty {display:none}
@media(max-width:520px) {
  .mini-player {grid-template-columns:minmax(0,1fr);gap:3px;padding:8px 10px}
  .mini-buttons {gap:12px}
}

#search {position:relative}
#search, .mini-player {isolation:isolate}
.glass-lens {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  visibility:hidden;
}
[data-lens=ready] > .glass-lens {visibility:visible}
#search[data-lens=ready],.mini-player[data-lens=ready] {
  backdrop-filter:none;
  background:#fff2;
}
[data-lens=ready]::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(155deg,#fff7 0%,#fff2 34%,#f7ead326 70%,#fff5);
  box-shadow:inset 0 1px 2px #fffe,inset 0 -2px 3px #fff8;
}
.mini-player[data-lens=ready]::after {
  background:linear-gradient(155deg,#fff8,#f8efdb62 56%,#fff6);
}
@media(prefers-reduced-transparency:reduce) {
  [data-lens=ready] > .glass-lens {visibility:hidden}
  #search[data-lens=ready],.mini-player[data-lens=ready] {background:#f7efdf}
}

.search-row {display:flex;align-items:center;gap:8px}
.search-row #search {flex:1;min-width:0}
#next-background {
  flex:0 0 46px;
  width:46px;
  height:46px;
  min-height:46px;
  padding:0;
  border:1px solid #fffe;
  border-radius:50%;
  background:var(--next-print-color) var(--next-print) 0 0 / var(--next-print-size);
  background-origin:border-box;
  box-shadow:inset 0 1px 2px #fffa,0 3px 10px #2225;
}
#next-background:hover {border-color:white}

@media(min-width:760px) {
  .room-shortcuts {
    position:fixed;
    top:max(16px, calc(env(safe-area-inset-top) + 10px));
    right:max(16px, env(safe-area-inset-right));
  }
}

.wallpaper-reveal {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-repeat:repeat;
}

#next-background {position:relative}

.previous-wallpaper-preview {
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background-position:inherit;
}

#playlist-panel {
  width:min(100%,540px);
  margin:12px auto 0;
  padding:12px 14px;
  border:1px solid #fff9;
  border-radius:20px;
  background:#fbf7edea;
  backdrop-filter:blur(12px) saturate(105%);
  box-shadow:inset 0 1px 1px #fff,0 8px 24px #23241f29;
}
#playlist-panel .sectionhead {margin:0;min-height:42px}
#playlist-panel h2 {font-size:19px}
#playlist-panel .transport {gap:8px}
#playlist-panel #play-queue {
  display:grid;place-items:center;
  width:46px;height:44px;min-height:44px;padding:0;
  border:1px solid #f7fff6a0;border-radius:14px;
  background:#dfeadf;color:#234535;
}
#playlist-panel #play-queue svg {width:25px;height:25px}
#playlist-panel #play-queue:disabled {opacity:.48}
#playlist-panel #play-queue:hover:not(:disabled) {background:#cfe1d1}
#playlist-guest {margin:8px 0 0;font-size:13px}
#playlist-guest button {min-height:34px;margin-left:4px;font-size:13px}
#queue {
  position:relative;
  max-height:44dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  margin-top:3px;
}
#queue:empty {display:none}
#queue li[aria-current=true] {
  position:relative;
  isolation:isolate;
  border-bottom-color:transparent;
}
#queue li[aria-current=true]::before {
  content:"";position:absolute;z-index:-1;inset:3px 0;
  border-radius:13px;
  background:linear-gradient(105deg,#d6e8d8,#e6eee1);
}
#queue li[aria-current=true] .info {padding-left:9px}
#queue [aria-current=true] .info {color:#1d5039}
#room:has(#results:not([hidden])) #results {max-height:min(34dvh,calc(100dvh - 320px))}
#room:has(#results:not([hidden])) #queue {max-height:20dvh}
#queue .playlist-icon {
  display:grid;place-items:center;
  flex:0 0 38px;width:38px;min-height:44px;padding:0;
  border:0;background:transparent;color:#31443a;
}
#queue .playlist-icon:hover:not(:disabled) {background:#e2e8df}
.playlist-icon svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#queue .playlist-grip {cursor:grab;touch-action:none;color:#5b6a60}
#queue .playlist-grip:active {cursor:grabbing}
#queue .playlist-grip:disabled {opacity:.45;cursor:default}
#queue .is-reordering {position:relative;z-index:2;border-radius:13px;background:#e8efe3;box-shadow:0 5px 15px #223d302f;user-select:none}
#playlist-feedback {margin:4px 0;font-size:13px}
#playlist-feedback:empty {display:none}

.room-shortcuts {display:flex;align-items:center;gap:8px}
#switch-member {
  display:grid;place-items:center;
  flex:0 0 46px;width:46px;height:46px;min-height:46px;padding:0;
  border:1px solid #fffe;border-radius:50%;
  background:#a8dfff;color:#153e58;
  font-size:18px;font-weight:750;
  box-shadow:inset 0 1px 2px #fffa,0 3px 10px #2225;
}
#switch-member[data-member=d] {background:#f7bad4;color:#652941}

dialog.gate {
  inset:0;
  width:min(calc(100% - 32px),380px);
  margin:auto;
  color:var(--ink);
}
dialog.gate::backdrop {background:#19221f59}
dialog.gate h2 {margin-bottom:14px}
dialog.gate form + p + form {margin-top:10px}
#switch-member:not([data-member]) {background:#f5eee3de;color:#2c4335}

#results {
  max-height:calc(100dvh - 220px - env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#71847799 transparent;
  padding:3px 12px;
  border:1px solid #fff9;
  border-radius:20px;
  background:#fbf7edf0;
  backdrop-filter:blur(12px) saturate(105%);
  box-shadow:inset 0 1px 1px #fff,0 8px 26px #23241f29;
}
#results li {padding:10px 0;gap:5px;border-color:#65736a24}
#results li:last-child {border:0}
#results .info {padding-right:5px}
.result-title {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:#192921;
  font-size:15px;
  line-height:1.3;
  font-weight:650;
}
#results .result-artist,.result-album {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#results .result-artist {margin-top:3px;color:#405249;font-size:12px}
.result-artist:empty {display:none}
.result-meta {display:flex;align-items:center;gap:7px;margin-top:5px;color:#45564d;font-size:11px;font-weight:400}
.result-source {flex:none;padding:1px 6px;border-radius:5px;background:#dfe9df;color:#30483a}
.result-album {min-width:0}
#results .playlist-icon {
  display:grid;place-items:center;
  flex:0 0 42px;width:42px;min-height:44px;
  padding:0;border:0;background:transparent;color:#344f40;
}
#results .result-play svg {border-radius:50%;width:27px;height:27px;padding:3px;background:#e2ebe1}
#results .playlist-icon:hover:not(:disabled) {background:#e1eae0}
@media(max-width:520px) {
  #results {padding-inline:10px}
  #results li {gap:2px}
}

.queue-member {
  display:inline-grid;place-items:center;
  min-width:19px;height:19px;margin-right:6px;
  border-radius:50%;background:#d6edfa;color:#214963;
  font-size:11px;font-weight:700;vertical-align:middle;
}
.queue-member[data-member=d] {background:#f6d8e5;color:#702d4d}

#results .result-add:active:not(:disabled) {transform:scale(.9)}
#results .result-add[data-state=added] {color:#215d40}
#results .result-add[data-state=added] svg {border-radius:50%;width:27px;height:27px;padding:4px;background:#d9eddf}
#results .result-add[data-state=pending] svg {animation:queue-add-spin .8s linear infinite}
@keyframes queue-add-spin {to {transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce) {
  #results .result-add[data-state=pending] svg {animation:none}
}

#play-mode [data-icon] {display:none}
#play-mode[data-mode="sequential"] [data-icon="sequential"],
#play-mode[data-mode="shuffle"] [data-icon="shuffle"],
#play-mode[data-mode="repeat-one"] [data-icon="repeat-one"] {display:inline}
.control-badge {
  flex:none;display:grid;justify-items:center;gap:2px;min-width:42px;
  font-size:10px;line-height:1.15;color:#24322b;text-shadow:0 0 4px #fff;
}
.control-badge[hidden] {display:none}
.mini-player #control-owner {
  width:40px;height:40px;min-height:40px;
  border:1px solid #fffe;font-size:15px;font-weight:700;
  box-shadow:inset 0 1px 2px #fff9,0 2px 6px #263b3030;
}
.mini-player #control-owner[data-member=y] {background:#bde7fa;color:#1e4c63}
.mini-player #control-owner[data-member=d] {background:#f7bad4;color:#652941}
.control-badge[data-attention=true] #control-owner {outline:2px solid #3b6d56;outline-offset:1px}
