@import"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300;400;500;700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--md-sys-color-primary: #65558F;--md-sys-color-on-primary: #FFFFFF;--md-sys-color-primary-container: #EADDFF;--md-sys-color-on-primary-container: #21005D;--md-sys-color-secondary: #625B71;--md-sys-color-on-secondary: #FFFFFF;--md-sys-color-secondary-container: #E8DEF8;--md-sys-color-on-secondary-container: #1D192B;--md-sys-color-tertiary: #7D5260;--md-sys-color-on-tertiary: #FFFFFF;--md-sys-color-tertiary-container: #FFD8E4;--md-sys-color-on-tertiary-container: #31111D;--md-sys-color-background: #FEF7FF;--md-sys-color-on-background: #1D1B20;--md-sys-color-surface: #FEF7FF;--md-sys-color-on-surface: #1D1B20;--md-sys-color-surface-container-low: #F7F2FA;--md-sys-color-surface-container: #F3EDF7;--md-sys-color-surface-container-high: #ECE6F0;--md-sys-color-surface-container-highest: #E6E0E9;--md-sys-color-outline: #79747E;--md-sys-color-outline-variant: #CAC4D0;--custom-color-p1: #4A90E2;--custom-color-p2: #E24A4A;--md-sys-typescale-label-small: 500 11px/16px "Roboto Flex", sans-serif;--md-sys-typescale-label-large: 500 14px/20px "Roboto Flex", sans-serif;--md-sys-typescale-body-medium: 400 14px/20px "Roboto Flex", sans-serif;--md-sys-typescale-title-large: 400 22px/28px "Roboto Flex", sans-serif;--md-sys-typescale-headline-small: 400 24px/32px "Roboto Flex", sans-serif;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-full: 9999px;--md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, .3);--md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);--md-sys-elevation-3: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15)}body{margin:0;font:var(--md-sys-typescale-body-medium);background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background);overflow:hidden}.app-shell{display:flex;height:100vh;width:100vw;background:var(--md-sys-color-surface)}.sidebar{width:80px;background:var(--md-sys-color-surface-container);display:flex;flex-direction:column;align-items:center;padding-top:44px;gap:12px;z-index:20}.sidebar-item{width:56px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.2,0,0,1);color:var(--md-sys-color-on-surface-variant);margin-bottom:24px;position:relative}.sidebar-item-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;width:100%}.sidebar-icon-pill{width:56px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.sidebar-label{font:var(--md-sys-typescale-label-small);color:var(--md-sys-color-on-surface-variant)}.sidebar-item-wrapper.active .sidebar-icon-pill{background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.sidebar-item-wrapper.active .sidebar-label{font-weight:700;color:var(--md-sys-color-on-surface)}.sidebar-item-wrapper:hover .sidebar-icon-pill{background-color:var(--md-sys-color-surface-container-highest)}.sidebar-item-wrapper.active:hover .sidebar-icon-pill{background-color:var(--md-sys-color-secondary-container);filter:brightness(.95)}.main-column{flex:1;display:flex;flex-direction:column;height:100%}.app-header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.header-left{display:flex;align-items:center;gap:16px}.header-logo-box{width:40px;height:40px;background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:var(--md-sys-shape-corner-medium);display:flex;align-items:center;justify-content:center;font-size:20px}.header-title{font:var(--md-sys-typescale-title-large)}.refresh-btn{width:48px;height:48px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--md-sys-color-on-surface-variant);transition:background-color .2s}.refresh-btn:hover{background-color:var(--md-sys-color-surface-container-highest)}.content-area{flex:1;background:var(--md-sys-color-surface-container-low);border-top-left-radius:var(--md-sys-shape-corner-large);border-top-right-radius:var(--md-sys-shape-corner-large);margin:0 24px 24px 0;overflow:hidden;position:relative;border-radius:24px}@media(max-width:768px){.content-area{overflow-y:auto;-webkit-overflow-scrolling:touch}.game-screen{height:auto;min-height:100%}}.game-screen{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between}.header-area{padding:16px 24px;display:flex;justify-content:space-between}.hud-panel{background:var(--md-sys-color-surface-container-high);padding:12px 16px;border-radius:16px;box-shadow:var(--md-sys-elevation-1);min-width:180px;cursor:pointer;transition:transform .2s}.hud-panel.active-hud{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.main-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1200px}.board-perspective{transform-style:preserve-3d;transform:rotateX(30deg) scale(.9)}.board-surface{background:var(--md-sys-color-surface-container-highest);padding:16px;border-radius:24px;display:flex;gap:8px;box-shadow:var(--md-sys-elevation-2)}.board-tile{width:100px;height:140px;background:var(--md-sys-color-surface);border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);position:relative;display:flex;align-items:center;justify-content:center}.tile-number{position:absolute;top:8px;left:12px;font:var(--md-sys-typescale-label-small);color:var(--md-sys-color-outline)}.token{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:var(--md-sys-elevation-1);color:#fff;transition:all .4s cubic-bezier(.4,0,.2,1)}.token.p1{background:var(--custom-color-p1)}.token.p2{background:var(--custom-color-p2)}.footer-area{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:12px}.slots-label{text-transform:uppercase;letter-spacing:1px;font:var(--md-sys-typescale-label-small);color:var(--md-sys-color-secondary)}.slots-row{display:flex;gap:16px}.slot{width:80px;height:110px;border:2px dashed var(--md-sys-color-outline-variant);border-radius:12px;display:flex;align-items:center;justify-content:center}.slot:hover{border-color:var(--md-sys-color-primary)}.hand-container{height:140px;display:flex;justify-content:center;position:relative;width:100%}.hand-card-wrapper{position:absolute;bottom:0;--angle: calc((var(--i) - var(--total) / 2 + .5) * 6deg);--y-offset: calc(abs(var(--i) - var(--total) / 2 + .5)*12px) ;transform:translate(calc((var(--i) - var(--total) / 2 + .5) * 50px)) translateY(var(--y-offset)) rotate(var(--angle));transform-origin:bottom center;transition:transform .3s cubic-bezier(.2,0,0,1)}.hand-card-wrapper:hover{z-index:100;transform:translate(calc((var(--i) - var(--total) / 2 + .5) * 70px)) translateY(calc(var(--y-offset) - 64px)) rotate(0) scale(1.1)}.hand-card-wrapper.highlighted{z-index:99;transform:translate(calc((var(--i) - var(--total) / 2 + .5) * 60px)) translateY(calc(var(--y-offset) - 32px)) rotate(0) scale(1.05)}.hand-card-wrapper.highlighted .card{border:3px solid var(--md-sys-color-primary);box-shadow:0 0 12px #65558f99}.card{width:100px;height:160px;background:#e8eef7;border:3px solid #87a8d0;border-radius:16px;overflow:visible;position:relative;box-shadow:var(--md-sys-elevation-1);cursor:pointer}.card:hover{box-shadow:var(--md-sys-elevation-2)}.card.selected{opacity:.6;background:#d0dff0}.card-inner{padding:4px;display:flex;flex-direction:column;height:100%;box-sizing:border-box;position:relative}.card-hero-icon{position:absolute;top:-8px;left:-8px;width:20px;height:20px;border-radius:50%;background:#c5d8c5;border:2px solid #87a8d0;z-index:10}.card-uses-badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 6px;background:#c5d8c5;color:#1a1a1a;border:2px solid #87a8d0;border-radius:10px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:10}.card-name-area{display:flex;justify-content:center;padding:4px 8px 2px}.card-name-badge{text-align:center;font-size:10px;font-weight:600;padding:2px 8px;background:#e8eef7;border:1px solid #87a8d0;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card-image-area{flex:1;display:flex;align-items:center;justify-content:center;padding:4px;margin:2px 4px}.card-image-placeholder{width:100%;height:100%;background:#5a9fd4;border:2px solid #4080b4;border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;color:#fff;padding:4px;line-height:1.2;overflow:hidden}.placeholder-text{opacity:.8}.card-effect-desc{padding:3px 6px;font-size:8px;color:#fff;line-height:1.2;text-align:center;background:#5a9fd4;margin:0 4px;border-radius:0 0 4px 4px;min-height:20px;display:flex;align-items:center;justify-content:center}.card-bottom-info{display:flex;align-items:center;justify-content:space-between;padding:4px;margin-top:auto}.card-damage-type{width:22px;height:22px;border-radius:50%;background:#c5d8c5;border:2px solid #87a8d0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#1a1a1a}.card-quote-area{flex:1;text-align:center;font-size:7px;color:var(--md-sys-color-on-surface-variant);padding:2px 4px}.card-range-type{width:22px;height:22px;border-radius:50%;background:#c5d8c5;border:2px solid #87a8d0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#1a1a1a}.card-type-placeholder{width:22px;height:22px}.card-priority-badge{position:absolute;top:2px;right:2px;width:14px;height:14px;background:red;color:#fff;border-radius:50%;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 0 4px #ff000080}.card.disabled{border-color:var(--md-sys-color-error)}.card-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.2rem;z-index:5;border-radius:12px}.hand-index-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);width:20px;height:20px;background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary);border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:var(--md-sys-elevation-1)}.btn-reverse{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:2px solid var(--md-sys-color-surface);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;box-shadow:var(--md-sys-elevation-3)}.btn-reverse:hover{transform:scale(1.15) rotate(180deg);box-shadow:0 0 8px #65558f99}.controls{height:48px;display:flex;align-items:center;justify-content:center;position:relative;z-index:200}.btn-primary{height:40px;padding:0 24px;border-radius:20px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;font:var(--md-sys-typescale-label-large);cursor:pointer;box-shadow:var(--md-sys-elevation-1);transition:box-shadow .2s}.btn-primary:hover:not(:disabled){box-shadow:var(--md-sys-elevation-2);background:linear-gradient(0deg,#ffffff14,#ffffff14),var(--md-sys-color-primary)}.btn-primary:disabled{background:#1d192b1f;color:#1d192b61;box-shadow:none;cursor:default}.app-shell.layout-portrait{flex-direction:column-reverse}.app-shell.layout-portrait .sidebar{width:100%;height:70px;flex-direction:row;padding:0;justify-content:space-evenly;gap:0;border-right:none;border-top:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.app-shell.layout-portrait .sidebar-item-wrapper{width:auto;margin:0;gap:2px}.app-shell.layout-portrait .sidebar-icon-pill{width:48px;height:28px}.app-shell.layout-portrait .sidebar-label{font-size:10px}.app-shell.layout-portrait .main-column{height:calc(100vh - 70px)}.app-shell.layout-portrait .content-area{margin:0;border-radius:0;background:var(--md-sys-color-surface);overflow-y:auto;-webkit-overflow-scrolling:touch}.app-shell.layout-portrait .game-screen{height:auto;min-height:100%}.app-shell.layout-portrait .header-area{padding:8px 12px}.app-shell.layout-portrait .hud-panel{min-width:unset;width:45%;padding:8px 10px}.app-shell.layout-portrait .switch-controls{display:flex;flex-direction:column;gap:4px;justify-content:center}.app-shell.layout-portrait .switch-controls span{display:none}.app-shell.layout-portrait .board-perspective{transform:rotateX(25deg) scale(.55);margin-top:-20px}.app-shell.layout-portrait .slot{width:50px;height:75px}.app-shell.layout-portrait .slots-row{gap:8px}.app-shell.layout-portrait .hand-container{transform:scale(.75);bottom:-10px}.app-shell.layout-portrait .hero-selectors{flex-direction:column;gap:24px;padding:16px;width:100%;box-sizing:border-box}@media(max-width:768px)and (orientation:portrait){.app-shell:not(.layout-landscape){flex-direction:column-reverse}.app-shell:not(.layout-landscape) .sidebar{width:100%;height:70px;flex-direction:row;padding:0;justify-content:space-evenly;gap:0;border-right:none;border-top:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.app-shell:not(.layout-landscape) .sidebar-item-wrapper{width:auto;margin:0;gap:2px}.app-shell:not(.layout-landscape) .sidebar-icon-pill{width:48px;height:28px}.app-shell:not(.layout-landscape) .sidebar-label{font-size:10px}.app-shell:not(.layout-landscape) .main-column{height:calc(100vh - 70px)}.app-shell:not(.layout-landscape) .content-area{margin:0;border-radius:0;background:var(--md-sys-color-surface)}.app-shell:not(.layout-landscape) .header-area{padding:8px 12px}.app-shell:not(.layout-landscape) .hud-panel{min-width:unset;width:45%;padding:8px 10px}.app-shell:not(.layout-landscape) .switch-controls{display:flex;flex-direction:column;gap:4px;justify-content:center}.app-shell:not(.layout-landscape) .switch-controls span{display:none}.app-shell:not(.layout-landscape) .board-perspective{transform:rotateX(25deg) scale(.55);margin-top:-20px}.app-shell:not(.layout-landscape) .slot{width:50px;height:75px}.app-shell:not(.layout-landscape) .slots-row{gap:8px}.app-shell:not(.layout-landscape) .hand-container{transform:scale(.75);bottom:-10px}.app-shell:not(.layout-landscape) .hero-selectors{flex-direction:column;gap:24px;padding:16px;width:100%;box-sizing:border-box}}.hero-selection-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:40px}.hero-selectors{display:flex;align-items:center;gap:48px;background:var(--md-sys-color-surface-container-high);padding:32px;border-radius:24px;box-shadow:var(--md-sys-elevation-2)}.player-selector{display:flex;flex-direction:column;align-items:center;gap:16px}.player-selector h3{margin:0;font:var(--md-sys-typescale-title-large);color:var(--md-sys-color-primary)}.hero-list{display:flex;flex-direction:column;gap:12px;min-width:200px}.hero-option{background:var(--md-sys-color-surface);border:2px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:12px 16px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.hero-option:hover{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container)}.hero-option.selected{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.hero-name{font-weight:500}.hero-hp{font-size:12px;opacity:.8}.vs-divider{font-size:24px;font-weight:900;color:var(--md-sys-color-tertiary);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--md-sys-color-tertiary-container);border-radius:50%}.btn-large{height:56px;padding:0 48px;font-size:18px;border-radius:28px}@keyframes cardPulse{0%,to{box-shadow:0 0 #65558f66}50%{box-shadow:0 0 20px 8px #65558f99}}@keyframes cardDropBounce{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1);opacity:1}to{transform:scale(1)}}@keyframes cardLift{0%{transform:translateY(0)}to{transform:translateY(-8px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes victoryPulse{0%,to{transform:scale(1);text-shadow:0 0 20px rgba(74,144,226,.8)}50%{transform:scale(1.05);text-shadow:0 0 40px rgba(74,144,226,1)}}@keyframes defeatShake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.card{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .2s ease}.card:hover:not(.selected):not(.disabled){transform:translateY(-6px);box-shadow:0 8px 24px #0003}.hand-card-wrapper.highlighted .card{animation:cardPulse 1.5s ease-in-out infinite}.slot .card{animation:cardDropBounce .4s cubic-bezier(.34,1.56,.64,1)}.card.dragging{opacity:.5;transform:scale(.95) rotate(5deg);cursor:grabbing}.card[draggable=true]{cursor:grab}.slot.drag-over{border-color:var(--md-sys-color-primary);background:#65558f1a;transform:scale(1.05);transition:all .2s ease}.slot.drag-over:after{content:"放置";position:absolute;font-size:12px;color:var(--md-sys-color-primary);font-weight:600}.game-result-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .5s ease}.game-result-overlay.victory{background:linear-gradient(135deg,#4a90e2f2,#65558ff2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.game-result-overlay.defeat{background:linear-gradient(135deg,#e24a4af2,#8f5555f2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.game-result-content{text-align:center;animation:fadeInUp .6s ease .2s both}.game-result-icon{font-size:80px;margin-bottom:16px;animation:victoryPulse 2s ease-in-out infinite}.game-result-overlay.defeat .game-result-icon{animation:defeatShake .5s ease .5s}.game-result-title{font-size:48px;font-weight:900;color:#fff;margin:0 0 8px;text-shadow:0 4px 20px rgba(0,0,0,.3)}.game-result-subtitle{font-size:20px;color:#ffffffe6;margin:0 0 32px}.game-result-actions{display:flex;gap:16px;animation:fadeInUp .6s ease .4s both}.btn-result{padding:16px 32px;border-radius:28px;font-size:16px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease}.btn-result.primary{background:#fff;color:var(--md-sys-color-primary);box-shadow:0 4px 20px #0003}.btn-result.primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #0000004d}.btn-result.secondary{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.5)}.btn-result.secondary:hover{background:#ffffff4d}:root{--card-scale: 1}@media(max-width:1200px){:root{--card-scale: .9}}@media(max-width:900px){:root{--card-scale: .8}}@media(max-width:600px){:root{--card-scale: .7}}.card{width:calc(100px * var(--card-scale));height:calc(160px * var(--card-scale))}.slot{width:calc(90px * var(--card-scale));height:calc(145px * var(--card-scale))}.game-screen{overflow:hidden;padding:8px;box-sizing:border-box}.footer-area{flex-shrink:0;max-height:45vh;overflow:visible}.main-area{flex:1;min-height:0;overflow:hidden}.hand-container{height:calc(160px * var(--card-scale));min-height:100px}.hand-card-wrapper{transform:translate(calc((var(--i) - var(--total) / 2 + .5) * calc(50px * var(--card-scale)))) translateY(var(--y-offset)) rotate(var(--angle))}.hand-card-wrapper:hover{transform:translate(calc((var(--i) - var(--total) / 2 + .5) * calc(70px * var(--card-scale)))) translateY(calc(var(--y-offset) - 64px)) rotate(0) scale(1.1)}.slots-container{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:150}.slots-row{gap:calc(16px * var(--card-scale))}@media(max-width:768px){.game-screen{padding:4px}.header-area{padding:4px 8px}.hud-panel{padding:8px;min-width:100px}.hud-panel h3{font-size:14px;margin:0 0 4px}.stat-row{font-size:11px;flex-wrap:wrap}.board-perspective{transform:rotateX(20deg) scale(.5);margin:-30px 0}.board-tile{width:60px;height:80px}.token{width:32px;height:32px;font-size:12px}.controls{height:auto;padding:4px 0}.btn-primary{height:36px;padding:0 16px;font-size:13px}.game-log{font-size:10px;max-height:40px;overflow:hidden}.game-result-title{font-size:32px}.game-result-icon{font-size:60px}.game-result-actions{flex-direction:column;width:100%;padding:0 20px}.btn-result{width:100%}}.content-area{overflow:hidden}.token{transition:all .5s cubic-bezier(.4,0,.2,1)}.game-log{background:var(--md-sys-color-surface-container);padding:8px 16px;border-radius:8px;margin:8px 0;font-size:12px;color:var(--md-sys-color-on-surface-variant);max-height:60px;overflow-y:auto}