.page-module__4cAONq__page{background:var(--bg-primary);flex-direction:column;height:100vh;display:flex}.page-module__4cAONq__main{flex:1;display:flex;overflow:hidden}.page-module__4cAONq__leftPanel{flex-direction:column;flex:1;min-width:0;padding:16px 32px;display:flex;overflow:auto}.page-module__4cAONq__titleRow{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.page-module__4cAONq__title{background:linear-gradient(90deg,#54a5ce,#466ea3);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Helvetica Neue,sans-serif;font-size:48px;font-weight:700;line-height:1.1}.page-module__4cAONq__controls{align-items:center;gap:12px;display:flex}.page-module__4cAONq__controlButton{background:var(--btn-bg);color:var(--text-dark);cursor:pointer;letter-spacing:.25px;border:none;border-radius:4px;align-items:center;gap:6px;padding:6px 16px;font-size:14px;font-weight:700;transition:background-color .15s;display:flex}.page-module__4cAONq__controlButton:hover{background:#8ba3c0}.page-module__4cAONq__controlButton:disabled{opacity:.5;cursor:not-allowed}.page-module__4cAONq__controlIcon{width:16px;height:16px}.page-module__4cAONq__gridSection{flex:1;justify-content:center;display:flex}.page-module__4cAONq__rightPanel{flex-shrink:0;width:498px}.page-module__4cAONq__editorPanel{background:var(--bg-editor);border-radius:8px;flex-direction:column;width:498px;height:100%;display:flex;position:relative;overflow:hidden}.page-module__4cAONq__bgOverlay{opacity:.05;pointer-events:none;background:repeating-linear-gradient(45deg,#0000,#0000 20px,#ffffff08 20px 40px);position:absolute;inset:0}.page-module__4cAONq__editorContent{z-index:1;flex-direction:column;flex:1;padding:16px 32px;display:flex;position:relative}.page-module__4cAONq__paletteSection{margin-bottom:16px}.page-module__4cAONq__paletteLabel{color:#fff;letter-spacing:.5px;margin-bottom:10px;font-size:14px;font-weight:700;display:block}.page-module__4cAONq__paletteGrid{grid-template-columns:repeat(10,1fr);gap:6px;margin-bottom:10px;display:grid}.page-module__4cAONq__colorSwatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:4px;width:100%;transition:transform .1s,border-color .15s}.page-module__4cAONq__colorSwatch:hover{transform:scale(1.15)}.page-module__4cAONq__colorSwatchActive{box-shadow:0 0 0 2px var(--accent-blue);border-color:#fff;transform:scale(1.1)}.page-module__4cAONq__selectedColorInfo{align-items:center;gap:8px;display:flex}.page-module__4cAONq__selectedPreview{border:1px solid #ffffff4d;border-radius:4px;width:20px;height:20px}.page-module__4cAONq__selectedName{color:#ffffffe6;font-size:13px;font-weight:500}.page-module__4cAONq__selectedLabel{color:#ffffff80;font-weight:400}.page-module__4cAONq__instruction{align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.page-module__4cAONq__mascot{border-radius:50%;flex-shrink:0;width:40px;height:40px}.page-module__4cAONq__mascotSvg{width:40px;height:40px}.page-module__4cAONq__instructionText{color:#fff;padding-top:8px;font-size:16px;font-weight:500;line-height:1.4}.page-module__4cAONq__editorArea{background:var(--bg-editor-inner);border-radius:8px;flex-direction:column;flex:1;padding:16px;display:flex}.page-module__4cAONq__codeBlock{background:#000;border:2px solid #298fc2;border-radius:4px;flex-direction:column;flex:1;gap:4px;min-height:112px;padding:16px;display:flex;overflow-y:auto;box-shadow:0 4px 4px #00000040}.page-module__4cAONq__codeLine{align-items:center;gap:8px;font-family:Helvetica Neue,monospace;font-size:14px;line-height:1.6;display:flex}.page-module__4cAONq__lineNumber{color:#fff;text-align:right;-webkit-user-select:none;user-select:none;flex-shrink:0;min-width:16px;font-weight:700}.page-module__4cAONq__colorDot{border:1px solid #fff3;border-radius:50%;flex-shrink:0;width:10px;height:10px}.page-module__4cAONq__lineText{color:#fff}.page-module__4cAONq__inputLine{align-items:center;gap:8px;font-family:Helvetica Neue,monospace;font-size:14px;line-height:1.6;display:flex}.page-module__4cAONq__codeInput{color:#fff;caret-color:#fff;background:0 0;border:none;outline:none;width:100%;font-family:Helvetica Neue,monospace;font-size:14px;line-height:1.6}.page-module__4cAONq__codeInput::placeholder{color:#ffffff4d}.page-module__4cAONq__nextLineButton{color:#fffc;cursor:pointer;background:#ffffff1f;border:1px solid #fff3;border-radius:6px;flex-shrink:0;padding:3px 8px;font-size:14px;line-height:1;transition:background .15s,color .15s}.page-module__4cAONq__nextLineButton:hover:not(:disabled){color:#fff;background:#ffffff38}.page-module__4cAONq__nextLineButton:disabled{opacity:.3;cursor:default}.page-module__4cAONq__enterHint{color:#ffffffd9;letter-spacing:.25px;text-align:center;margin-top:10px;font-size:13px;font-weight:600}.page-module__4cAONq__hintText{color:#fff9;letter-spacing:.5px;margin-top:8px;font-size:12px}.page-module__4cAONq__modeToggle{background:#0003;border-radius:6px;gap:4px;margin-bottom:12px;padding:3px;display:flex}.page-module__4cAONq__modeBtn{color:#fff9;cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;justify-content:center;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:700;transition:background .15s,color .15s;display:flex}.page-module__4cAONq__modeBtn:hover{color:#ffffffe6}.page-module__4cAONq__modeBtnActive{background:var(--accent-blue,#54a5ce);color:#fff}.page-module__4cAONq__modeBtnActive:hover{color:#fff}.page-module__4cAONq__templatesRow{margin-bottom:16px}.page-module__4cAONq__templatesLabel{letter-spacing:.06em;text-transform:uppercase;color:#ffffff80;margin-bottom:8px;font-size:11px;font-weight:700;display:block}.page-module__4cAONq__templatesGrid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.page-module__4cAONq__templateButton{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;transition:background .15s,border-color .15s,transform .1s;display:flex}.page-module__4cAONq__templateButton:hover{background:#ffffff1a;border-color:#ffffff40;transform:translateY(-1px)}.page-module__4cAONq__templateButton:active{transform:translateY(0)}.page-module__4cAONq__templateEmoji{font-size:22px;line-height:1}.page-module__4cAONq__templateName{color:#ffffffd9;font-size:11px;font-weight:600}