*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--body-font);background-color:var(--bg-color);color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem 1rem;transition:background-color .3s ease,color .3s ease}#app-container{background-color:var(--card-bg);padding:2rem;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);width:100%;max-width:56rem;transition:background-color .3s ease;margin-top:20px}.header-area{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}h1{font-size:1.5rem;font-weight:700;text-align:center;flex-grow:1}.theme-switch-wrapper{display:flex;align-items:center;gap:.5rem}.theme-label{font-size:.875rem;color:var(--label-color)}.theme-switch{position:relative;display:inline-block;width:50px;height:24px}.theme-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--switch-bg);transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--switch-slider);transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--switch-checked-bg)}input:focus+.slider{box-shadow:0 0 1px var(--switch-checked-bg)}input:checked+.slider:before{transform:translate(26px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus{outline:2px solid var(--link-color);outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--link-color);outline-offset:2px}.input-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem}@media (min-width: 768px){.input-grid{grid-template-columns:repeat(2,1fr)}}label{display:block;font-size:.875rem;font-weight:500;color:var(--label-color);margin-bottom:.25rem}input[type=number],select{width:100%;padding:.5rem;border:1px solid var(--input-border);border-radius:.375rem;background-color:var(--input-bg);color:var(--input-text);font-size:1rem;box-shadow:inset 0 1px 2px rgba(0,0,0,.075);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color .3s ease,color .3s ease}input[type=number]:focus,select:focus{outline:none;border-color:var(--link-color);box-shadow:0 0 0 2px rgba(66,153,225,.5)}.input-group{display:flex;flex-direction:column}.color-value-display{font-size:.75rem;color:var(--label-color);font-family:var(--mono-font)}input.input-error{border-color:var(--error-border-color)!important;box-shadow:0 0 0 1px var(--error-border-color)}input.input-error:focus{box-shadow:0 0 0 2px var(--error-border-color)}input[type=checkbox]{height:1rem;width:1rem;border-radius:.25rem;border:1px solid var(--input-border);vertical-align:middle;cursor:pointer}.highlight-controls-container{border:1px solid var(--border-color);padding:1rem;border-radius:.375rem;margin-bottom:1.5rem;transition:border-color .3s ease}.highlight-controls-container h3{font-size:1rem;font-weight:500;margin-bottom:.75rem}.highlight-grid{display:flex;flex-wrap:wrap;gap:1rem}.segment-control-block{background-color:var(--segment-block-bg);border:1px solid var(--segment-block-border);padding:.75rem;border-radius:.375rem;display:flex;flex-direction:column;gap:.5rem;transition:background-color .3s ease,border-color .3s ease;flex:1;min-width:150px;max-width:300px;height:120px}.segment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.segment-header label{margin-bottom:0}.preset-color-select{width:100%;padding:.25rem .5rem;border:1px solid var(--preset-border);border-radius:.375rem;font-size:.875rem;background-color:var(--preset-bg);color:var(--preset-text);transition:all .3s ease;opacity:0;visibility:hidden;height:0;margin:0;overflow:hidden}.preset-color-select.visible{opacity:1;visibility:visible;height:auto;margin:.5rem 0 0}.output-container,.example-container{margin-top:1rem}.output-container label,.example-container label{color:var(--label-color)}.output-display,#functionCallExample{background-color:var(--output-bg);border:1px solid var(--output-border);border-radius:.375rem;padding:1rem;min-height:60px;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease,border-color .3s ease;word-break:break-all}#output{font-family:var(--mono-font);font-size:1.5rem;text-align:center;word-spacing:.5em}#output span[style*=background-color]{padding:.1em .2em;border-radius:.25rem;display:inline-block}#output .error-message{color:var(--error-color);font-family:var(--body-font);font-size:1rem}.code-block{background-color:var(--code-bg);border:1px solid var(--code-border);border-radius:.375rem;color:var(--code-text);font-family:var(--mono-font);font-size:.875rem;white-space:pre;padding:1rem;overflow-x:auto;width:100%;line-height:1.5}#functionCallExample{background-color:var(--code-bg);border-color:var(--code-border);color:var(--code-text);font-family:var(--mono-font);font-size:.875rem;white-space:pre-wrap;text-align:left;justify-content:flex-start;width:100%;overflow-x:auto}#functionCallExample pre{width:100%;margin:0;padding:0}#functionCallExample code{display:block;width:100%;padding:0;margin:0}.app-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border-color);text-align:center;font-size:.875rem}.app-footer a{color:var(--footer-link-color);text-decoration:none;transition:color .3s ease}.app-footer a:hover{text-decoration:underline}.real-world-example-container{margin-top:2rem;padding:1.5rem;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:.375rem}.real-world-example-container h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text-color)}.real-world-example-container p{margin-bottom:1.5rem;color:var(--label-color);line-height:1.5}.code-container{position:relative;background-color:#1a1a1a;border-radius:.375rem;overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#2d2d2d;border-bottom:1px solid #404040}.code-title{font-size:.875rem;color:#a0aec0;font-family:var(--mono-font)}.copy-button{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background-color:#404040;border:none;border-radius:.25rem;color:#e2e8f0;font-size:.875rem;cursor:pointer;transition:background-color .2s ease}.copy-button:hover{background-color:#4a5568}.copy-button svg{width:16px;height:16px}pre[class*=language-]{margin:0;padding:1rem;background-color:#1a1a1a;border-radius:0}code[class*=language-]{font-family:var(--mono-font);font-size:.875rem;line-height:1.5}body.light-mode .real-world-example-container{background-color:var(--card-bg)}body.light-mode .code-container{background-color:#f7fafc}body.light-mode .code-header{background-color:#edf2f7;border-bottom-color:#e2e8f0}body.light-mode .code-title{color:#4a5568}body.light-mode .copy-button{background-color:#e2e8f0;color:#2d3748}body.light-mode .copy-button:hover{background-color:#cbd5e0}body.light-mode pre[class*=language-]{background-color:#f7fafc}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#718096}.token.punctuation{color:#a0aec0}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#63b3ed}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#9ae6b4}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#f6ad55}.token.atrule,.token.attr-value,.token.keyword{color:#f687b3}.token.function,.token.class-name{color:#f6e05e}.token.regex,.token.important,.token.variable{color:#f6ad55}button,input,select,.preset-color-select{transition:all .2s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes highlightFlash{0%{transform:translateY(0);box-shadow:0 0 rgba(66,153,225,0)}50%{transform:translateY(-2px);box-shadow:0 4px 6px rgba(66,153,225,.3)}to{transform:translateY(0);box-shadow:0 0 rgba(66,153,225,0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.preset-color-select.visible{animation:slideDown .3s ease-out forwards}.segment-highlight-animation{animation:highlightFlash .5s ease-out}.binary-segment{transition:background-color .3s ease,color .3s ease}.binary-segment.highlight-animation{animation:pulse .3s ease-out}.output-display,#functionCallExample{animation:fadeIn .5s ease-out}body{transition:background-color .3s ease,color .3s ease}button:hover,select:hover,input[type=color]:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}button:active,select:active,input[type=color]:active{transform:translateY(0);box-shadow:none}input[type=checkbox]{transition:border-color .2s ease,background-color .2s ease}input[type=checkbox]:checked{animation:pulse .2s ease-out}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--bg-color: #1a202c;--text-color: #e2e8f0;--card-bg: #2d3748;--border-color: #4a5568;--input-bg: #4a5568;--input-text: #e2e8f0;--input-border: #718096;--label-color: #a0aec0;--output-bg: #1a202c;--output-border: #4a5568;--code-bg: #2d3748;--code-text: #e2e8f0;--code-border: #4a5568;--preset-bg: #4a5568;--preset-text: #e2e8f0;--preset-border: #718096;--preset-optgroup: #a0aec0;--segment-block-bg: #374151;--segment-block-border: #4a5568;--link-color: #63b3ed;--switch-bg: #718096;--switch-slider: #e2e8f0;--switch-checked-bg: #48bb78;--error-color: #f56565;--error-border-color: #e53e3e;--footer-link-color: #90cdf4;--body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}body.light-mode{--bg-color: #f7fafc;--text-color: #000000;--card-bg: #ffffff;--border-color: #e2e8f0;--input-bg: #ffffff;--input-text: #2d3748;--input-border: #cbd5e0;--label-color: #4a5568;--output-bg: #edf2f7;--output-border: #e2e8f0;--code-bg: #edf2f7;--code-text: #2d3748;--code-border: #e2e8f0;--preset-bg: #ffffff;--preset-text: #2d3748;--preset-border: #cbd5e0;--preset-optgroup: #718096;--segment-block-bg: #f7fafc;--segment-block-border: #e2e8f0;--link-color: #4299e1;--switch-bg: #cbd5e0;--switch-slider: #ffffff;--switch-checked-bg: #48bb78;--error-color: #e53e3e;--error-border-color: #e53e3e;--footer-link-color: #1a365d}