.input-code{width:635px;height:290px;border:1px solid #d9d9d9;outline:none;border-radius:4px}.editor-wrapper{border:1px solid #ccc;border-radius:4px;overflow:hidden}.play-btn,.pause-btn{color:#ed225d}.preview-box{background-color:#f6f6f6;border:1px solid #d9d9d9;width:635px;height:290px;margin-left:20px;border-radius:4px}.instructions-panel{margin-top:1rem}.instructions-panel textarea{width:100%;height:200px;max-height:200px;overflow-y:auto;padding:.75rem;font-family:monospace;font-size:.9rem;line-height:1.4;border-radius:8px;border:none;resize:none;background-color:red}.platform-buttons-grid button{height:40px;font-size:.875rem;text-transform:capitalize}.mode-buttons{display:flex}.instance-mode-button{width:132px;height:38px;border-radius:4px;border:1px solid #d9d9d9;margin-left:56px}.code-box{width:100%;height:190px;background-color:#f6f6f6;margin-top:15px;border:none;font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.5;color:#dcdcdc;border:1px solid #333;border-radius:8px;padding:12px;resize:vertical;overflow:auto;white-space:pre-wrap;word-wrap:break-word}.code-box:focus{outline:none;border-color:#1e88e5;box-shadow:0 0 0 2px #1e88e566}.instructions-panel{white-space:pre-wrap}.instructions-panel h3{margin:0 0 6px;font-size:16px}.instructions-panel ol{margin:8px 0 0 18px}@font-face{font-family:National Park;src:url(/fonts/NationalPark.woff2) format("woff2");font-weight:400;font-style:normal}body{font-family:National Park,sans-serif}*{box-sizing:border-box}body{padding:10px;margin:0;font-family:sans-serif;background-color:var(--bg);color:var(--text);transition:background-color .3s ease,color .3s ease}.app-container{display:flex;flex-direction:column;gap:20px;padding:20px}.editor-preview-row{gap:20px;display:grid;grid-template-columns:calc(50% - 10px) calc(50% - 10px)}@media (max-width: 800px){.editor-preview-row{grid-template-columns:1fr}}.editor-column,.preview-column{display:flex;flex-direction:column;gap:20px;flex:1;min-width:300px}.controls-row{display:flex;justify-content:flex-start;margin-top:10px}.embed-section{display:flex}.embed-code-wrapper{margin-left:56px;margin-top:28px}:root{--bg: #ffffff;--text: #000000;--editor-bg: #f6f6f6;--preview-bg: #f6f6f6;--code-box-bg: #f6f6f6;--border-color: #d9d9d9}.dark-mode{--bg: #1e1e1e;--text: #f1f1f1;--editor-bg: #2b2b2b;--preview-bg: #2b2b2b;--code-box-bg: #2b2b2b;--border-color: #444}.editor-wrapper{background-color:var(--editor-bg);color:var(--text);border:1px solid var(--border-color)}.preview{background-color:var(--preview-bg);border:1px solid var(--border-color)}.embed-code-box,.editor,.code-box{background-color:var(--code-box-bg);color:var(--text)}.app-blurred{filter:blur(3px);pointer-events:none;-webkit-user-select:none;user-select:none}.project-title{margin:0;padding:20px}.step-1{margin:0;grid-column:1 / span 2}@media (max-width: 800px){.step-1{grid-column:auto}}.step{display:inline-flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;background-color:#ed225d;box-sizing:border-box;vertical-align:middle;font-size:12px;font-weight:700;text-align:center;color:#fff;margin-right:10px}.project-title{font-family:sans-serif;font-weight:700;font-size:32px}.p5{position:relative;display:inline-block}.sup-five{font-size:.7em;vertical-align:super;margin-left:1px;margin-right:2px}.star{font-size:14px;color:#ed225d;position:absolute;top:-.3em;right:-.9em}