@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";
      :root {
            /* Dark theme (default) */
            --bg-base: #0A0A0B;
            --bg-subtle: #0F0F11;
            --surface: #141417;
            --surface-raised: #1A1A1F;
            --surface-hover: #202026;
            --border-subtle: #1F1F25;
            --border: #2A2A32;
            --border-strong: #3A3A45;
            --text-primary: #F5F5F7;
            --text-secondary: #A1A1AA;
            --text-tertiary: #71717A;
            --text-disabled: #52525B;
            --accent: #7C5CFF;
            --accent-hover: #8F74FF;
            --accent-pressed: #6845F0;
            --accent-subtle: rgba(124, 92, 255, 0.12);
            --accent-gradient: linear-gradient(135deg, #7C5CFF 0%, #4F8CFF 100%);
            --success: #22C55E;
            --danger: #EF4444;
            --warning: #F59E0B;
            --info: #3B82F6;
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
            --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
            --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
            --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.65);
            --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
            --glow-accent: 0 0 0 1px rgba(124, 92, 255, 0.5), 0 0 24px rgba(124, 92, 255, 0.25);
            --radius-xs: 4px;
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-2xl: 24px;
            --radius-full: 9999px;
            --font-sans: "Inter", "Geist", -apple-system, "Segoe UI", sans-serif;
            --font-mono: "JetBrains Mono", "Geist Mono", Menlo, monospace;
            --ease-out: cubic-bezier(0.2, 0, 0, 1);
            --duration-fast: 120ms;
            --duration-base: 200ms;
            --duration-slow: 320ms;
        }

        [data-theme="light"] {
            --bg-base: #FFFFFF;
            --bg-subtle: #FAFAFA;
            --surface: #F4F4F5;
            --surface-raised: #FFFFFF;
            --surface-hover: #E9E9EC;
            --border-subtle: #EEEEF0;
            --border: #E4E4E7;
            --border-strong: #D4D4D8;
            --text-primary: #09090B;
            --text-secondary: #52525B;
            --text-tertiary: #71717A;
            --text-disabled: #A1A1AA;
            --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
            --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
            --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
            --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);
            --shadow-xl: 0 24px 64px rgba(16, 24, 40, 0.14);
            --highlight: none;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: var(--font-mono);
            text-decoration:none;
            transition:all var(--duration-base)
        }

        body,
        html {
            background: whitesmoke;
            height: 100dvh
        }

        .canvas {
            background: var(--bg-base);
            color: var(--text-primary);
            width: 420px;
            height: 100%;
            margin: auto;
            position: relative
        }
        @media(max-width:768px){
            .canvas{
                width:100vw
            }
        }
        header {
           background:url(../bg.webp);
           background-size:cover;
           background-position: center;
           background-repeat: no-repeat;
        }
        .header-wrapper{
             height:250px;
            display: flex;
            flex-direction: column;
            gap:10px;
            padding:0 20px 20px 20px;
            justify-content: end;
            background-color: rgba(0, 0, 0, 0.767);
            backdrop-filter: blur(3px);
            background-blend-mode: saturation(0);
        }
        header h2{
            font-size:25px;
        }
        header p{
            font-size: 12px;
            color:var(--accent-hover)
        }
        main{
            padding:10px
        }
        .card{
            background: var(--accent-subtle);
            padding:20px;
            border-radius: var(--radius-xl);
            border: 1px solid var(--accent-hover);
            margin-bottom: 10px;
        }
        .card-header{
            border-bottom:1px solid var(--accent-hover);
            color:var(--text-primary);
            padding-bottom:10px;
            display:flex !important;
            align-items:center !important;
            justify-content: space-between !important;
        }
        .card-header .option-image{
            background:white;
            padding:5px 15px;
            border-radius: 5px;
        }
        .card-header .option-image img{
            display: block;
            width:70px
        }
        .card-body{
            font-size:10px;
            color:var(--text-tertiary);
            margin-top:10px
        }
        .card:hover{
            transform:scale(.97);
            box-shadow:var(--glow-accent)
        }
        .card-footer{
            border:none;
            margin-top:10px
        }
        .card-footer button{
            background:var(--accent-pressed);
            color:white;
            padding:20px;
            font-size: 10px;
            border: none;
            border-radius: 10px;
        }
        .card-footer button:hover{
            box-shadow: var(--glow-accent);
        }
        .bottom-nav{
            padding: 0 10px;
            height:50px;
            background: var(--accent-gradient);
            position:absolute;
            left:0;
            right:0;
            bottom:0
        }
        .bottom-nav button{
            position: absolute;
            left:50%;
            transform:translate(-50%);
            width:70px;
            aspect-ratio: 1/1;
            top:-60%;
            border:none;
            border-radius:50px;
            background:var(--bg-base);
            color:var(--text-primary);
            border: 1px solid var(--accent);
            font-size: 30px;
            cursor:pointer;
        }
        .bottom-nav button:hover{
            box-shadow: var(--glow-accent);
        }
        .pop{
            position:fixed;
            top:0;
            left:0;
            right:0;
            height:100vh;
            background-color: var(--bg-base);
            display:none
        }
        .pop .form{
            display: grid;
            gap:5px;
            width:40%;
            margin:40px auto
        }
        
        @media(max-width:768px){
            .pop .form{
                width:90%
            }
        }

        .form input{
            padding: 10px;
            background: var(--bg-subtle);
            border:2px solid var(--border-subtle);
            outline:none;
            color:white;
            border-radius:5px
        }
        .form input::placeholder{
            color:var(--border-strong)
        }
        .form input:focus{
            box-shadow: var(--glow-accent);
            color:var(--accent-hover)
        }
        .form button{
            background:var(--accent-hover);
            padding:10px;
            border-radius: 5px;
        }
        .form button:last-child{
            background:var(--border);
            padding:10px;
            color:gray;
            border-radius: 5px;
        }
        .form button:hover{
            box-shadow: var(--glow-accent);
        }