:root{--primary-color: #007AFF;--secondary-color: #5856D6;--success-color: #34C759;--warning-color: #FF9500;--error-color: #FF3B30;--text-primary: #1D1D1F;--text-secondary: #86868B;--background: #FFFFFF;--surface: #F2F2F7;--border: #D1D1D6;--gradient-start: #5856D6;--gradient-end: #007AFF;--shadow: rgba(0, 0, 0, .1);--radius: 12px;--spacing: 8px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#f2f2f7,#e5e5ea);color:var(--text-primary);line-height:1.6;min-height:100vh}.container{max-width:800px;margin:0 auto;padding:calc(var(--spacing) * 3)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--spacing) * 4)}.header h1{font-size:2.5rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.language-selector{position:relative}.language-btn{background:var(--background);border:1px solid var(--border);border-radius:var(--radius);padding:calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);font-size:.9rem;color:var(--text-primary);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:calc(var(--spacing) / 2)}.language-btn:hover{background:var(--surface);transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}.language-dropdown{position:absolute;top:100%;right:0;background:var(--background);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;z-index:10;min-width:120px}.language-selector:hover .language-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:block;width:100%;padding:calc(var(--spacing) * 1.5);background:none;border:none;text-align:left;cursor:pointer;transition:background .2s ease;font-size:.9rem;color:var(--text-primary)}.dropdown-item:hover{background:var(--surface)}.main-display{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));border-radius:calc(var(--radius) * 2);padding:calc(var(--spacing) * 6) calc(var(--spacing) * 4);text-align:center;margin-bottom:calc(var(--spacing) * 4);box-shadow:0 8px 32px #5856d64d;position:relative;overflow:hidden}.main-display:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.subtitle{color:#ffffffe6;font-size:1.1rem;margin-bottom:calc(var(--spacing) * 2);font-weight:500}.screen-size{font-size:4rem;font-weight:800;color:#fff;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing) * 2)}.multiply{font-size:3rem;opacity:.8}.screen-details{margin-top:calc(var(--spacing) * 4);padding-top:calc(var(--spacing) * 3);border-top:1px solid rgba(255,255,255,.2)}.resolution-text{color:#ffffffe6;font-size:1rem;margin-bottom:calc(var(--spacing) * 2);font-weight:500}.resolution-display{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing) * 2);margin-bottom:calc(var(--spacing) * 3)}.resolution-icon{font-size:1.5rem;opacity:.9}#detailed-resolution{font-size:2rem;font-weight:700;color:#fff;letter-spacing:-.01em}.screen-measurements{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--spacing) * 3);margin-bottom:calc(var(--spacing) * 3)}.measurement-item{text-align:center}.measurement-label{background:#ffffff26;color:#fff;padding:calc(var(--spacing) * 1) calc(var(--spacing) * 2);border-radius:calc(var(--radius) / 2);font-size:.85rem;font-weight:600;margin-bottom:calc(var(--spacing) * 1);display:inline-block}.measurement-value{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing) * 1);color:#fffffff2;font-size:1rem;font-weight:500}.arrow{font-size:1.2rem;opacity:.8}.pixel-info{text-align:center}.pixel-note{color:#ffffffb3;font-size:.9rem;margin-bottom:calc(var(--spacing) * 1);font-style:italic}.total-pixels{color:#ffffffe6;font-size:1rem;font-weight:500}#total-pixels{font-weight:700;color:#ffd60a}.info-section{background:var(--background);border-radius:calc(var(--radius) * 1.5);padding:calc(var(--spacing) * 3);margin-bottom:calc(var(--spacing) * 4);box-shadow:0 4px 16px var(--shadow);border:1px solid var(--border)}.info-section h2{font-size:1.5rem;font-weight:600;margin-bottom:calc(var(--spacing) * 3);color:var(--text-primary)}.info-grid{display:grid;gap:calc(var(--spacing) * 2)}.info-item{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--spacing) * 2);background:var(--surface);border-radius:var(--radius);transition:all .2s ease;border:1px solid transparent}.info-item:hover{background:var(--background);border-color:var(--border);transform:translateY(-1px);box-shadow:0 2px 8px var(--shadow)}.info-label{font-weight:500;color:var(--text-primary);flex:1}.info-value{font-weight:600;color:var(--primary-color);text-align:right;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}.action-buttons{display:flex;gap:calc(var(--spacing) * 2);justify-content:center}.btn{padding:calc(var(--spacing) * 2) calc(var(--spacing) * 4);border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:calc(var(--spacing) * 1);border:none;min-width:140px;justify-content:center}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:#0056cc;transform:translateY(-2px);box-shadow:0 8px 24px #007aff66}.btn-secondary{background:var(--background);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}.btn:active{transform:translateY(0)}.btn:disabled,.btn.disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn:disabled:hover,.btn.disabled:hover{transform:none;box-shadow:none;background:var(--background)}.btn-primary:disabled:hover,.btn-primary.disabled:hover{background:var(--primary-color)}.btn-secondary:disabled:hover,.btn-secondary.disabled:hover{background:var(--background)}.btn.loading{position:relative;overflow:hidden}.btn.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{0%{left:-100%}to{left:100%}}.screen-notification{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none;pointer-events:none}.btn,.main-display,.info-item,.language-dropdown{will-change:transform;transform:translateZ(0)}.btn:focus-visible,.language-btn:focus-visible,.dropdown-item:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media (min-resolution: 120dpi){.screen-size{animation-duration:1.5s}}@media (prefers-reduced-motion: reduce){.screen-size,.btn,.language-dropdown,.info-item,.main-display:before{animation:none!important;transition:none!important}.btn:hover{transform:none!important}}@media (max-width: 479px){.container{padding:calc(var(--spacing) * 1.5);max-width:100%}.header h1{font-size:1.75rem;line-height:1.2;margin-bottom:calc(var(--spacing) * 1)}.main-display{padding:calc(var(--spacing) * 4) calc(var(--spacing) * 2);margin-bottom:calc(var(--spacing) * 3)}.screen-size{font-size:2rem;flex-direction:column;gap:calc(var(--spacing) * .5)}.multiply{font-size:1.5rem;transform:rotate(90deg)}.subtitle{font-size:1rem;margin-bottom:calc(var(--spacing) * 1.5)}.info-section{padding:calc(var(--spacing) * 2);margin-bottom:calc(var(--spacing) * 2)}.info-section h2{font-size:1.25rem;margin-bottom:calc(var(--spacing) * 2)}.info-item{padding:calc(var(--spacing) * 1.5);flex-direction:column;align-items:flex-start;gap:calc(var(--spacing) * .5)}.info-label{font-size:.9rem;font-weight:600}.info-value{font-size:.85rem;text-align:left;word-break:break-word}}@media (min-width: 480px) and (max-width: 767px){.container{padding:calc(var(--spacing) * 2);max-width:100%}.header{flex-direction:column;gap:calc(var(--spacing) * 2);text-align:center}.header h1{font-size:2.25rem;line-height:1.2}.language-selector{align-self:center}.main-display{padding:calc(var(--spacing) * 5) calc(var(--spacing) * 3)}.screen-size{font-size:2.75rem;flex-direction:column;gap:calc(var(--spacing) * 1)}.multiply{font-size:2rem;transform:rotate(90deg)}.screen-measurements{grid-template-columns:1fr;gap:calc(var(--spacing) * 2)}.measurement-item{text-align:center}.measurement-label{font-size:.8rem;margin-bottom:calc(var(--spacing) * 1)}.measurement-value{font-size:1rem;justify-content:center}.info-item{flex-direction:column;align-items:flex-start;gap:calc(var(--spacing) * 1);padding:calc(var(--spacing) * 2)}.action-buttons{flex-direction:column;gap:calc(var(--spacing) * 1.5)}.btn{width:100%;min-height:48px;font-size:1.1rem}}@media (min-width: 768px) and (max-width: 1024px){.container{max-width:95%;padding:calc(var(--spacing) * 3)}.header{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:calc(var(--spacing) * 4)}.header h1{font-size:2.75rem;margin:0}.main-display{padding:calc(var(--spacing) * 6) calc(var(--spacing) * 4);margin-bottom:calc(var(--spacing) * 4)}.screen-size{font-size:3.5rem;flex-direction:row;gap:calc(var(--spacing) * 2)}.multiply{font-size:2.5rem}.screen-measurements{grid-template-columns:1fr 1fr;gap:calc(var(--spacing) * 4);margin-bottom:calc(var(--spacing) * 3)}.measurement-item{text-align:center;padding:calc(var(--spacing) * 1)}.info-section{padding:calc(var(--spacing) * 3);margin-bottom:calc(var(--spacing) * 4)}.info-section h2{font-size:1.5rem;margin-bottom:calc(var(--spacing) * 3)}.info-grid{display:grid;grid-template-columns:1fr;gap:calc(var(--spacing) * 1.5)}.info-item{flex-direction:row;justify-content:space-between;align-items:center;padding:calc(var(--spacing) * 2.5);border-radius:calc(var(--radius) * 1.2)}.info-label{font-size:1rem;flex:1;text-align:left}.info-value{font-size:1rem;text-align:right;flex:0 0 auto;max-width:50%;word-break:break-word}.action-buttons{flex-direction:row;justify-content:center;gap:calc(var(--spacing) * 3)}.btn{min-width:160px;min-height:44px;padding:calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);font-size:1rem}}@media (min-width: 1025px) and (max-width: 1366px){.container{max-width:900px;padding:calc(var(--spacing) * 3)}.header h1{font-size:3rem}.main-display{padding:calc(var(--spacing) * 7) calc(var(--spacing) * 5)}.screen-size{font-size:4.25rem}.multiply{font-size:3.25rem}.info-section{padding:calc(var(--spacing) * 4)}.info-item{padding:calc(var(--spacing) * 2.5)}}@media (min-width: 1367px){.container{max-width:1000px;padding:calc(var(--spacing) * 4)}.header h1{font-size:3.5rem;letter-spacing:-.03em}.main-display{padding:calc(var(--spacing) * 8) calc(var(--spacing) * 6);margin-bottom:calc(var(--spacing) * 5)}.screen-size{font-size:5rem;letter-spacing:-.02em}.multiply{font-size:4rem}.screen-measurements{gap:calc(var(--spacing) * 4);margin-bottom:calc(var(--spacing) * 4)}.info-section{padding:calc(var(--spacing) * 5);margin-bottom:calc(var(--spacing) * 5)}.info-section h2{font-size:1.75rem;margin-bottom:calc(var(--spacing) * 4)}.info-item{padding:calc(var(--spacing) * 3);border-radius:calc(var(--radius) * 1.5)}.info-label,.info-value{font-size:1.1rem}}@media (max-width: 1024px) and (orientation: landscape){.main-display{padding:calc(var(--spacing) * 4) calc(var(--spacing) * 6)}.screen-measurements{grid-template-columns:1fr 1fr;gap:calc(var(--spacing) * 3)}.info-section{padding:calc(var(--spacing) * 2.5)}.action-buttons{margin-top:calc(var(--spacing) * 2)}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){.container{max-width:90%}.screen-size{font-size:3.75rem}.info-grid{gap:calc(var(--spacing) * 2)}}@media (hover: none) and (pointer: coarse){.btn{min-height:48px;padding:calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);touch-action:manipulation}.btn:hover{transform:none}.btn:active{transform:scale(.98);transition:transform .1s ease}.language-btn{min-height:44px;touch-action:manipulation}.dropdown-item{min-height:48px;padding:calc(var(--spacing) * 2);touch-action:manipulation}.info-item{touch-action:manipulation}.language-selector{position:relative}.language-selector:after{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;z-index:-1}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.main-display{box-shadow:0 16px 64px #5856d640}.info-item{box-shadow:0 2px 4px #00000014}.btn{box-shadow:0 4px 8px #0000001f}}.main-display,.screen-size,.btn,.info-item,.language-dropdown,.screen-notification{will-change:transform;transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.container{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}body,.info-value{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes pulse{0%,to{opacity:1;transform:translateZ(0)}50%{opacity:.8;transform:translateZ(0)}}.screen-size{animation:pulse 2s ease-in-out infinite;animation-fill-mode:both}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.loading-skeleton{background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0 80px);background-size:200px 100%;animation:shimmer 1.5s infinite}.device-mobile{font-size:16px}.device-mobile .main-display{border-radius:16px}.device-mobile .btn{border-radius:10px}.device-tablet{font-size:17px}.device-tablet .main-display{border-radius:20px}.device-tablet .info-item{border-radius:14px}.device-desktop{font-size:16px}.device-desktop .main-display{border-radius:24px}.touch-device .btn{cursor:pointer;-webkit-tap-highlight-color:transparent}.touch-device .info-item{-webkit-tap-highlight-color:transparent}.slow-network .main-display:before,.slow-network .screen-size{display:none!important}.slow-network .btn,.slow-network .info-item{transition:none!important}.low-performance *{will-change:auto!important;transform:none!important;animation:none!important;transition:none!important}.low-performance .main-display{background:var(--gradient-start);box-shadow:0 4px 16px #5856d633}.low-performance .info-item{box-shadow:0 1px 3px #0000001a}@supports (font-display: swap){body{font-display:swap}}.container{contain:layout style paint}.main-display{contain:layout style}.info-section{contain:layout}.above-fold{contain:layout style paint}.below-fold{content-visibility:auto;contain-intrinsic-size:0 500px}@media (prefers-color-scheme: dark){:root{--text-primary: #F2F2F7;--text-secondary: #8E8E93;--background: #1C1C1E;--surface: #2C2C2E;--border: #38383A;--shadow: rgba(0, 0, 0, .3)}body{background:linear-gradient(135deg,#1c1c1e,#2c2c2e)}.device-mobile.dark{--shadow: rgba(255, 255, 255, .1)}.touch-device .btn:active{background:#ffffff1a}}.rtl-layout{direction:rtl;text-align:right}.rtl-layout .header,.rtl-layout .header h1{text-align:right}.rtl-layout .language-selector{margin-left:0;margin-right:auto}.rtl-layout .language-dropdown{right:auto;left:0;text-align:right}.rtl-layout .dropdown-item{text-align:right;flex-direction:row-reverse}.rtl-layout .dropdown-item .flag{margin-left:8px;margin-right:0}.rtl-layout .info-item{flex-direction:row-reverse;text-align:right}.rtl-layout .info-label{text-align:right}.rtl-layout .info-value{text-align:left;flex-direction:row-reverse}.rtl-layout .screen-measurements{direction:rtl}.rtl-layout .measurement-item{text-align:right}.rtl-layout .measurement-value{direction:ltr;text-align:center}.rtl-layout .screen-size{direction:ltr}.rtl-layout .action-buttons{flex-direction:row-reverse}@media (max-width: 767px){.rtl-layout .action-buttons{flex-direction:column}.rtl-layout .info-item{flex-direction:column;align-items:flex-end}.rtl-layout .info-value{text-align:right}}@media (min-width: 768px) and (max-width: 1024px){.rtl-layout .info-item{flex-direction:row-reverse;justify-content:space-between}.rtl-layout .info-label{text-align:right}.rtl-layout .info-value{text-align:left}}.language-selector{position:relative;z-index:1000}.language-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);color:var(--text-primary);font-size:.9rem;cursor:pointer;display:flex;align-items:center;gap:calc(var(--spacing) * 1);transition:all var(--transition);min-width:140px;justify-content:space-between}.language-btn:hover{background:var(--primary-color);color:#fff;transform:translateY(-1px)}.language-btn:after{content:"▼";font-size:.7rem;transition:transform var(--transition)}.language-dropdown.show .language-btn:after{transform:rotate(180deg)}.language-dropdown{position:absolute;top:100%;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:200px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition);z-index:1001;max-height:300px;overflow-y:auto}.language-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}.language-dropdown::-webkit-scrollbar{width:4px}.language-dropdown::-webkit-scrollbar-track{background:transparent}.language-dropdown::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.dropdown-item{display:flex;align-items:center;gap:calc(var(--spacing) * 1.5);padding:calc(var(--spacing) * 2);cursor:pointer;transition:all var(--transition);border-bottom:1px solid rgba(255,255,255,.05)}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:var(--primary-color);color:#fff}.dropdown-item.active{background:#5856d61a;color:var(--primary-color);font-weight:600}.dropdown-item.active:after{content:"✓";margin-left:auto;font-weight:700}.dropdown-item .flag{font-size:1.2rem;flex-shrink:0}.dropdown-item .language-name{flex:1;font-size:.9rem}[lang=zh-CN]{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}[lang=ja]{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif}[lang=th]{font-family:Sukhumvit Set,Helvetica Neue,Arial,sans-serif}[lang=hi]{font-family:Noto Sans Devanagari,Mangal,sans-serif}[lang=bn]{font-family:Noto Sans Bengali,Vrinda,sans-serif}[lang=ar]{font-family:Noto Sans Arabic,Tahoma,Arial Unicode MS,sans-serif}[lang=fr],[lang=es]{font-family:Helvetica Neue,Arial,sans-serif}.low-bandwidth *{animation:none!important;transition:none!important}.low-bandwidth .main-display:before{display:none!important}.low-bandwidth .screen-size{animation:none!important}.visible{will-change:transform,opacity;transform:translateZ(0)}.not-visible{will-change:auto}.critical-above-fold{contain:layout style paint}.below-fold{content-visibility:auto;contain-intrinsic-size:0 400px}.preloading{opacity:0;transition:opacity .3s ease}.preloading.loaded{opacity:1}.to-cleanup{pointer-events:none;opacity:0;transition:opacity .2s ease}.lazy-loaded{opacity:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s ease}.lazy-loaded.loaded{opacity:1;transform:translateY(0)}.gpu-accelerated{will-change:transform;transform:translateZ(0);backface-visibility:hidden}@keyframes optimized-fade{0%{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translateZ(0)}}.optimized-animation{animation:optimized-fade .3s ease-out}.efficient-transition{transition:transform .2s ease,opacity .2s ease}.efficient-transition:hover{transform:scale(1.02)}.scroll-optimized{-webkit-overflow-scrolling:touch;overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior:contain}.font-optimized{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-display:swap;font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"pnum" 1,"tnum" 0,"onum" 1,"lnum" 0,"dlig" 0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media print{.action-buttons,.language-selector{display:none}.main-display{background:#fff;color:#000;box-shadow:none}.container{max-width:none;padding:0}*,*:before,*:after{animation:none!important;transition:none!important;will-change:auto!important;transform:none!important}}@supports (content-visibility: auto){.info-section{content-visibility:auto;contain-intrinsic-size:0 300px}}@supports (backdrop-filter: blur(10px)){.language-dropdown{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffc}[data-theme=dark] .language-dropdown{background:#2c2c2ecc}}@media (min-refresh-rate: 90hz){.btn,.info-item,.language-dropdown{transition-duration:.1s}.screen-size{animation-duration:1.8s}}@media (max-device-width: 480px) and (max-device-height: 854px){.main-display:before,.screen-size{animation:none}.btn,.info-item{transition:none;will-change:auto}}