*{margin:0;padding:0;box-sizing:border-box}:root{--discord-blurple: #7289da;--discord-green: #43b581;--discord-yellow: #faa61a;--discord-red: #f04747;--discord-dark: #36393f;--discord-darker: #2f3136;--discord-darkest: #202225}body{background-color:#0f0f0f;overflow-x:hidden;overflow-y:auto;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;color:#fff;-webkit-overflow-scrolling:touch}.particles-container{position:absolute;width:100%;height:100%;overflow:hidden;z-index:10}.particle{position:absolute;background-color:#ffffffb3;box-shadow:0 0 6px 2px #ffffff4d;border-radius:50%;transform-origin:center;opacity:.6}body.light-mode .particle{background-color:#0003;box-shadow:0 0 6px 2px #0000001a;opacity:.4}.glow-effect{position:absolute;width:clamp(300px,90vw,400px);height:clamp(300px,90vw,400px);border-radius:50%;background:radial-gradient(circle,#fff3,#fff0 70%);z-index:8;opacity:0;top:50%;left:50%;transform:translate(-50%,-50%)}.geometric-bg{position:absolute;width:100%;height:100%;top:0;left:0;z-index:5;overflow:hidden}.geo-line{position:absolute;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:float 6s ease-in-out infinite}.horizontal-line{width:100%;height:1px;left:0}.vertical-line{width:1px;height:100%;top:0}.diagonal-line{width:100%;height:1px;transform-origin:left}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translate(0)}50%{transform:translate(5px,-5px)}to{transform:translate(-5px,5px)}}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.copy-success{color:#43b581!important;animation:copySuccess .5s ease}.letter-container{display:inline-block;overflow:hidden;vertical-align:top}.letter{display:inline-block;transform:translateY(100%)}.main-content{position:relative;width:100%;max-width:1200px;z-index:200;padding:clamp(1rem,4vw,2rem);opacity:1;animation:fadeIn .8s ease-out forwards}.calculator-container{background-color:#0f0f0fb3;border-radius:16px;padding:clamp(1.5rem,5vw,3rem);box-shadow:0 8px 20px #00000040;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);position:relative;z-index:100;will-change:transform,opacity;transform:translateZ(0);margin-bottom:clamp(2rem,5vw,3rem)}.calculator-header{margin-bottom:2rem}.header-content{display:flex;align-items:center;gap:1.5rem;margin-bottom:1rem}.calculator-header h1{font-size:clamp(1.8rem,5vw,2.5rem);margin-bottom:0;color:#fff;flex:1;text-align:center}.calculator-header p{font-size:clamp(.95rem,2.5vw,1.1rem);color:#ffffffe6;line-height:1.6;max-width:800px;margin:0 auto}.back-link{padding:.6rem 1rem;font-size:.9rem;text-decoration:none;border-radius:6px;transition:all .3s ease;background-color:#1e1e1eb3;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0003;color:#fff;z-index:5;white-space:nowrap}.back-link:hover{background-color:#28282acc;transform:translateY(-2px)}.calculator-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;justify-content:center;align-items:flex-end}.navigation-links{margin-top:2rem;text-align:center}.nav-link{display:inline-block;padding:.7rem 1.5rem;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:8px;transition:all .3s ease;font-size:1rem}.nav-link:hover{background-color:#ffffff1a;transform:translateY(-2px)}.nav-link i{margin-right:.5rem}body.light-mode .calculator-container{background-color:#fffc;box-shadow:0 8px 20px #0000001a}body.light-mode .calculator-header h1{color:#333}body.light-mode .calculator-header p{color:#555}body.light-mode .back-link{background-color:#f0f0f0b3;border-color:#0000001a;color:#333;box-shadow:0 2px 8px #0000001a}body.light-mode .back-link:hover{background-color:#e6e6e6e6}body.light-mode .nav-link{color:#333;border-color:#0003}body.light-mode .nav-link:hover{background-color:#0000000d}.datetime-input{flex:1;min-width:200px}.datetime-input label{display:block;margin-bottom:.5rem;font-size:1rem;color:#ffffffe6}.datetime-input input{width:100%;padding:.8rem 1rem;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;transition:all .3s ease}.datetime-input input:focus{outline:none;border-color:#fff6;background-color:#ffffff26}.datetime-input select{width:100%;padding:.8rem 1rem;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;transition:all .3s ease;cursor:pointer}.datetime-input select:focus{outline:none;border-color:#fff6;background-color:#ffffff26}.datetime-input select option{background-color:#2f2f2f;color:#fff}.action-button{padding:.8rem 1.2rem;background-color:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:1rem;min-width:150px}.action-button:hover{background-color:#fff3;transform:translateY(-2px)}.action-button:active{transform:translateY(0)}#generate-btn{background-color:#7289da99;border-color:#7289dacc}#generate-btn:hover{background-color:#7289dacc}.preset-controls{margin-top:1.5rem;padding:1.5rem;background-color:#1e1e1e66;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.preset-controls h3{color:#fff;font-size:1.1rem;margin-bottom:1rem;text-align:center}.preset-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}.preset-btn{background-color:#32323299;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;padding:.75rem 1rem;font-size:.9rem;cursor:pointer;transition:all .3s ease;white-space:nowrap;text-align:center}.preset-btn:hover{background-color:#ffffff1a;transform:translateY(-1px);box-shadow:0 4px 8px #0003}.preset-btn:active{transform:translateY(0)}body.light-mode .datetime-input label{color:#444}body.light-mode .datetime-input input{background-color:#0000000d;border-color:#0000001a;color:#333}body.light-mode .datetime-input input:focus{border-color:#0000004d;background-color:#00000014}body.light-mode .datetime-input select{background-color:#0000000d;border-color:#0003;color:#333}body.light-mode .datetime-input select option{background-color:#fff;color:#333}body.light-mode .action-button{background-color:#0000000d;color:#333;border-color:#0003}body.light-mode .action-button:hover{background-color:#0000001a}body.light-mode #generate-btn{background-color:#7289da33;border-color:#7289da66;color:#5865f2}body.light-mode #generate-btn:hover{background-color:#7289da4d}body.light-mode .preset-controls{background-color:#fff6;border-color:#0000001a}body.light-mode .preset-controls h3{color:#333}body.light-mode .preset-btn{background-color:#fff9;border-color:#0000001a;color:#333}body.light-mode .preset-btn:hover{background-color:#0000001a}.output-container{background-color:#1e1e1e99;border-radius:12px;padding:2rem;margin-top:2rem}.output-header{margin-bottom:1.5rem;text-align:center}.output-header h2{font-size:clamp(1.3rem,4vw,1.8rem);color:#fff}.timestamp-outputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.timestamp-format{background-color:#28282899;border-radius:8px;padding:1.5rem;position:relative;transition:all .3s ease;border:1px solid rgba(255,255,255,.05)}.timestamp-format:hover{background-color:#323232cc;transform:translateY(-3px);box-shadow:0 5px 15px #0003}.format-name{font-weight:600;font-size:1.1rem;margin-bottom:1rem;color:#ffffffe6}.format-example{font-size:1.2rem;margin-bottom:.8rem;color:#7289da;font-weight:500}.format-code{background-color:#14141499;padding:.8rem;border-radius:6px;font-family:monospace;font-size:.9rem;color:#fffc;word-break:break-all}.copy-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#fff9;cursor:pointer;font-size:1rem;transition:all .3s ease}.copy-btn:hover{color:#fff;transform:scale(1.1)}.timestamp-info{margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem}.timestamp-info p{margin-bottom:.8rem;color:#ffffffb3;font-size:.95rem}.timestamp-info p i{margin-right:.5rem;color:#7289da}body.light-mode .output-container{background-color:#f0f0f0b3}body.light-mode .output-header h2{color:#333}body.light-mode .timestamp-format{background-color:#fffc;border-color:#0000001a}body.light-mode .timestamp-format:hover{background-color:#fffffff2}body.light-mode .format-name{color:#333}body.light-mode .format-example{color:#5865f2}body.light-mode .format-code{background-color:#0000000d;color:#333}body.light-mode .copy-btn{color:#00000080}body.light-mode .copy-btn:hover{color:#000}body.light-mode .timestamp-info{border-color:#0000001a}body.light-mode .timestamp-info p{color:#555}.timezone-preview{margin-top:1.5rem;padding:1.5rem;background-color:#1e1e1e66;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.timezone-preview h3{color:#fff;font-size:1.1rem;margin-bottom:1rem;text-align:center}.timezone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}.timezone-item{background-color:#32323299;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.75rem 1rem;text-align:center}.timezone-name{font-size:.9rem;color:#fffc;margin-bottom:.25rem}.timezone-time{font-size:1rem;font-weight:500;color:#fff}.timezone-date{font-size:.8rem;color:#fff9;margin-top:.25rem}body.light-mode .timezone-preview{background-color:#fff6;border-color:#0000001a}body.light-mode .timezone-preview h3{color:#333}body.light-mode .timezone-item{background-color:#fff9;border-color:#0000001a}body.light-mode .timezone-name{color:#000000b3}body.light-mode .timezone-time{color:#333}body.light-mode .timezone-date{color:#0009}.theme-toggle{position:fixed;top:20px;right:20px;width:50px;height:25px;background-color:#0f0f0f99;border-radius:25px;cursor:pointer;z-index:1000;display:flex;align-items:center;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);opacity:1;transition:opacity .5s ease}.theme-toggle .toggle-icon{position:absolute;left:3px;width:19px;height:19px;background-color:#fff;border-radius:50%;transition:all .3s ease;overflow:hidden}.theme-toggle .toggle-icon:before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;background-color:#fc3;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease}.theme-toggle .toggle-icon:after{content:"";position:absolute;top:1px;left:1px;width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 2px #fc3;opacity:0;transform:scale(0);transition:all .3s ease}.theme-toggle.light .toggle-icon{left:calc(100% - 22px);background-color:#fc3}.theme-toggle.light .toggle-icon:before{transform:translate(-50%,-50%) scale(1)}.theme-toggle.light .toggle-icon:after{opacity:1;transform:scale(1)}body.light-mode{background-color:#f0f0f0;color:#333}.toast-notification{position:fixed!important;inset:20px auto auto 50%!important;transform:translate(-50%) translateY(-100px)!important;background:#000000e6!important;color:#fff!important;padding:12px 24px!important;border-radius:8px!important;font-size:14px!important;font-weight:500!important;line-height:1.4!important;z-index:10000!important;opacity:0!important;transition:all .3s ease!important;backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,.1)!important;width:auto!important;height:auto!important;max-width:300px!important;min-width:150px!important;max-height:50px!important;white-space:nowrap!important;box-sizing:border-box!important;display:block!important;margin:0!important;float:none!important;flex:none!important;flex-grow:0!important;flex-shrink:0!important;flex-basis:auto!important;align-self:auto!important;align-items:initial!important;justify-content:initial!important;flex-direction:initial!important;align-content:initial!important;justify-items:initial!important;place-items:initial!important;place-content:initial!important;place-self:auto!important;grid-area:auto!important}.toast-notification.show{opacity:1!important;transform:translate(-50%) translateY(0)!important}body.light-mode .toast-notification{background:#fffffff2!important;color:#333!important;border-color:#0000001a!important}@media (max-width: 768px){.main-content{padding:1rem}.calculator-container{padding:1.5rem;margin-bottom:1.5rem}.calculator-controls{flex-direction:column;align-items:stretch;gap:1rem}.datetime-input{width:100%;min-width:100%}.action-button{width:100%}.preset-buttons{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem}.preset-btn{padding:.6rem .8rem;font-size:.85rem}.timestamp-outputs{grid-template-columns:1fr;gap:1rem}.timestamp-format{padding:1rem}.format-name{font-size:.9rem}.format-code{font-size:.75rem;padding:.6rem}.copy-btn{width:36px;height:36px}.output-container{padding:1.5rem}.header-content{flex-direction:column;align-items:flex-start;gap:1rem}.calculator-header h1{text-align:left}.timezone-preview{padding:1rem}.timezone-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem}.timezone-item{padding:.6rem .8rem}.timezone-name{font-size:.8rem}.timezone-time{font-size:.9rem}}@media (min-width: 576px) and (max-width: 991px){.timestamp-outputs{grid-template-columns:repeat(2,1fr)}}@media (min-width: 992px){.timestamp-outputs{grid-template-columns:repeat(3,1fr)}}@media (min-width: 320px){body{overflow-y:auto!important;overflow-x:hidden;height:auto!important}.calculator-header h1{font-size:1.8rem}.calculator-header p{font-size:.95rem}}@media (min-width: 576px){.calculator-header h1{font-size:2rem}.calculator-header p{font-size:1rem}}@media (min-width: 768px){.calculator-header h1{font-size:2.2rem}.calculator-header p{font-size:1.05rem}}@media (min-width: 992px){.calculator-header h1{font-size:2.5rem}.calculator-header p{font-size:1.1rem}}@media (max-width: 480px){.calculator-header h1{font-size:1.5rem}.calculator-header p{font-size:.9rem}.preset-buttons{grid-template-columns:repeat(2,1fr)}.action-button{padding:.7rem 1rem;font-size:.9rem}.datetime-input label{font-size:.9rem}.datetime-input input,.datetime-input select{padding:.7rem;font-size:.9rem}}