@font-face {
            font-family: pixles;
            src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/04B_03__.TTF);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body, button, input, textarea {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            line-height: 1.6;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        textarea {
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
            text-transform: none;
        }

        body {
            background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gBg.png');
            color: #594c3d;
            overflow-x: hidden;
            min-height: 100vh;
        }

        img {
            image-rendering: auto;
            image-rendering: crisp-edges;
            image-rendering: pixelated;
        }

        h2, h3 {
            font-weight: normal;
            margin: 0;
        }

        h2 { font-size: 14px; }
        p { margin: 0; }

        /* Pixel box styling base */
        .box {
            background: white;
            box-shadow: 0px 3px #e7e7e7, 0px -3px white, 3px 0px white, -3px 0px white, 
                        0px -6px #b6a695, 0px 6px #b6a695, 6px 0px #b6a695, -6px 0px #b6a695, 
                        9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
            position: relative;
            padding: 12px;
        }

        .box-green {
            background: #a5da60;
            box-shadow: 0px 3px #c4ed8e, 0px -3px #a5da60, 3px 0px #a5da60, -3px 0px #a5da60, 
                        0px -6px #89b74c, 0px 6px #89b74c, 6px 0px #89b74c, -6px 0px #89b74c, 
                        9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
        }

        .box-orange {
            background: #fcab0b;
            box-shadow: 0px 3px #fdbc3d, 0px -3px #fcab0b, 3px 0px #fcab0b, -3px 0px #fcab0b, 
                        0px -6px #e8861c, 0px 6px #e8861c, 6px 0px #e8861c, -6px 0px #e8861c, 
                        9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
        }

        .box-blue {
            background: #1e4b56;
            box-shadow: 0px 3px #315962, 0px -3px #1e4b56, 3px 0px #1e4b56, -3px 0px #1e4b56, 
                        0px -6px #16414c, 0px 6px #16414c, 6px 0px #16414c, -6px 0px #16414c, 
                        9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
        }

        .box-red {
            background: #e74c3c;
            box-shadow: 0px 3px #ec7063, 0px -3px #e74c3c, 3px 0px #e74c3c, -3px 0px #e74c3c, 
                        0px -6px #c0392b, 0px 6px #c0392b, 6px 0px #c0392b, -6px 0px #c0392b, 
                        9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
        }

        .pixelsTop, .pixelsBottom {
            position: absolute;
            width: calc(100% + 12px);
            height: 3px;
            left: -6px;
        }

        .pixelsTop {
            top: -3px;
        }

        .pixelsTop::before, .pixelsTop::after {
            content: '';
            display: block;
            position: absolute;
            width: 3px;
            height: 3px;
            background: #b6a695;
            top: 0;
        }

        .pixelsTop::before { left: 3px; }
        .pixelsTop::after { right: 3px; }

        .pixelsBottom {
            bottom: 0;
        }

        .pixelsBottom::before, .pixelsBottom::after {
            content: '';
            display: block;
            position: absolute;
            width: 3px;
            height: 3px;
            top: -3px;
            background: #e7e7e7;
            box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1);
        }

        .pixelsBottom::before {
            left: 3px;
            box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
        }

        .pixelsBottom::after {
            right: 3px;
            box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
        }

        /* Button effect */
        .button {
            cursor: pointer;
            position: relative;
        }

        .button:active {
            transform: translateY(2px);
        }

        .button::after {
            content: '';
            display: block;
            width: 30px;
            filter: blur(24px);
            height: 50px;
            background: rgba(255, 255, 255, 0.3);
            position: absolute;
            transform: rotate(-30deg) skewY(31deg);
            top: -5px;
            right: 100%;
            transition: all 0.4s;
            pointer-events: none;
        }

        .button:hover::after {
            right: 0px;
        }

        /* Floor */
        .floor {
            background: #e1dac5;
            position: fixed;
            bottom: 0;
            height: 20%;
            width: 100%;
            left: 0;
            z-index: -1;
            border-top: 30px solid white;
        }

        /* Header */
        header {
            padding: 20px 40px;
            text-align: center;
        }

        .header-title {
            display: inline-block;
            padding: 15px 30px;
            color: #476323;
        }

        /* Container */
        .container {
            display: flex;
            max-width: 1400px;
            margin: 20px auto;
            gap: 20px;
            padding: 0 30px;
        }

        /* Sidebar Navigation */
        .sidebar {
            width: 260px;
            height: fit-content;
        }

        .sidebar-title {
            margin-bottom: 15px;
            padding: 10px;
            text-align: center;
        }

        .nav-item {
            padding: 12px 15px;
            margin: 10px 0;
            cursor: pointer;
            transition: all 0.2s;
            color: #594c3d;
            position: relative;
        }

        .nav-item:hover {
            transform: translateX(3px);
        }

        .nav-item.active {
            color: #476323;
        }

        .nav-item.completed::after {
            content: "✓";
            position: absolute;
            right: 15px;
            color: #476323;
        }

        /* Content Area */
        .content {
            flex: 1;
            min-height: 500px;
        }

        .lesson-title {
            color: #c4ebfd;
            font-size: 16px;
            margin-bottom: 20px;
            padding: 12px;
            text-align: center;
        }

        /* Progress Bar */
        .progress-container {
            width: 100%;
            height: 12px;
            background: #d6c9bc;
            position: relative;
            margin-bottom: 20px;
            box-shadow: inset 0px 3px rgba(0, 0, 0, 0.1);
        }

        .progress-bar {
            height: 100%;
            background: #a5da60;
            width: 0%;
            transition: width 0.5s;
            box-shadow: inset 0px -3px #c4ed8e;
        }

        /* Theory Section */
        .theory-section {
            padding: 20px;
            margin-bottom: 20px;
        }

        .theory-section h3 {
            color: #476323;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .theory-section p {
            color: #594c3d;
            line-height: 1.8;
            margin-bottom: 12px;
            font-size: 12px;
        }

        .theory-section ul {
            margin-left: 20px;
            color: #594c3d;
            line-height: 2;
            font-size: 12px;
        }

        .code-example {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            overflow-x: auto;
            text-transform: none;
            border: 3px solid #1a202c;
        }

        .keyword { color: #fc8181; }
        .string { color: #68d391; }
        .number { color: #fbd38d; }
        .comment { color: #a0aec0; }

        /* Challenge Section */
        .challenge-section {
            padding: 20px;
        }

        .challenge-title {
            color: #c4ebfd;
            margin-bottom: 15px;
            font-size: 14px;
            padding: 12px;
            text-align: center;
        }

        .problem-statement {
            padding: 15px;
            margin-bottom: 20px;
            color: #594c3d;
            font-size: 12px;
            line-height: 1.8;
        }

        .problem-statement strong {
            color: #9b5c19;
        }

        /* Hint */
        .hint-btn {
            padding: 8px 12px;
            margin-bottom: 15px;
            display: inline-block;
            color: #476323;
            font-size: 11px;
        }

        .hint-box {
            padding: 12px 15px;
            margin-bottom: 20px;
            display: none;
            color: #594c3d;
            font-size: 11px;
            line-height: 1.6;
        }

        .hint-box.show {
            display: block;
        }

        .hint-box strong {
            color: #9b5c19;
        }

        /* Code Editor */
        .editor-header {
            padding: 10px 15px;
            margin-bottom: 0;
            color: #c4ebfd;
            font-size: 12px;
        }

        #codeInput {
            width: 100%;
            min-height: 200px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            border: none;
            resize: vertical;
            background: #1a202c;
            color: #e2e8f0;
            text-transform: none;
            outline: none;
        }

        /* Buttons */
        .button-group {
            display: flex;
            gap: 15px;
            margin: 20px 0;
        }

        .btn {
            padding: 12px 20px;
            border: none;
            cursor: pointer;
            font-size: 12px;
            text-align: center;
            flex: 1;
        }

        .btn-text {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        /* Feedback */
        .feedback {
            padding: 15px 20px;
            margin-top: 20px;
            display: none;
            color: #594c3d;
            font-size: 12px;
            line-height: 1.8;
        }

        .feedback.show {
            display: block;
        }

        .feedback strong {
            display: block;
            margin-bottom: 10px;
            font-size: 14px;
        }

        .feedback.success strong {
            color: #476323;
        }

        .feedback.error strong {
            color: #9b5c19;
        }

        .next-btn {
            margin-top: 15px;
            padding: 10px 20px;
            display: inline-block;
            color: #476323;
            font-size: 12px;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 30px 20px;
            color: #594c3d;
            margin-top: 50px;
            font-size: 11px;
        }

        /* Python Character */
        .python-char {
            width: 60px;
            height: 60px;
            background: #3776ab;
            position: relative;
            margin: 0 auto 10px;
            image-rendering: pixelated;
        }

        .python-char::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ffd43b;
            top: 10px;
            left: 10px;
        }

        .python-char::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ffd43b;
            bottom: 10px;
            right: 10px;
        }

        /* Icon */
        .icon-small {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #fcab0b;
            image-rendering: pixelated;
            position: relative;
            top: 2px;
        }