* { box-sizing: border-box; }
:root { color: #333; font-family: "SF Mono", Monaco, Cascadia Code, "Roboto Mono", Consolas, "Courier New", monospace; background: #667eea; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100dvh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); line-height: 1.35; }
button, textarea, input { font: inherit; }
button { cursor: pointer; }
.container { min-height: 100dvh; max-width: 1200px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; }
.app-header { position: relative; flex: 0 0 auto; min-height: 84px; color: #fff; text-align: center; margin-bottom: 1rem; display: grid; align-content: center; gap: 5px; }
.brand { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 9px; text-align: left; text-decoration: none; color: #fff; line-height: 1; }
.rm-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.72); border-radius: 11px; background: rgba(255,255,255,.13); font-weight: 700; font-size: 13px; box-shadow: 0 3px 10px rgba(0,0,0,.14); }
.brand b { display: block; font-size: 18px; letter-spacing: -.5px; }.brand small { display: block; opacity: .76; font-size: 10px; margin-top: 4px; }
.app-header > p { margin: 0; font-family: system-ui, sans-serif; font-size: 1.05rem; font-weight: 300; opacity: .92; }.app-header nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 7px; }.app-header nav a, .app-header nav button { color: #fff; border: 1px solid rgba(255,255,255,.42); border-radius: 6px; background: rgba(255,255,255,.1); padding: 7px 10px; text-decoration: none; font-size: 12px; }.app-header nav a:hover, .app-header nav button:hover { background: rgba(255,255,255,.22); }
.calculator { flex: 1 1 auto; min-height: 0; background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.16); backdrop-filter: blur(10px); display: flex; flex-direction: column; overflow: hidden; }.calculator-toolbar { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; padding: 9px 15px; background: #f8fafc; color: #667085; border-bottom: 1px solid #e5e7eb; font-size: 11px; }.calculator-toolbar i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #059669; }
.output-history { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem 1.5rem; font-size: 1rem; line-height: 1.45; -webkit-overflow-scrolling: touch; }.output-entry { margin-bottom: 1rem; }.input-line { position: relative; padding-left: 1.5rem; color: #059669; white-space: pre-wrap; word-break: break-word; cursor: pointer; }.input-line:hover { background: rgba(5,150,105,.06); border-radius: 4px; }.input-line .prompt { position: absolute; left: 0; }.reload-icon, .inject-icon { opacity: 0; margin-left: 8px; color: #2563eb; font-weight: 700; }.input-line:hover .reload-icon, .output-line:hover .inject-icon { opacity: .8; }.output-line { position: relative; margin: .24rem 0 0 1.5rem; color: #1f2937; white-space: pre-wrap; word-break: break-word; cursor: pointer; }.output-line:hover { background: rgba(37,99,235,.05); border-radius: 4px; }.error-line { margin: .35rem 0 0 1.5rem; padding: .5rem .75rem; border-left: 3px solid #dc2626; border-radius: 4px; background: #fee2e2; color: #b91c1c; white-space: pre-wrap; word-break: break-word; }.welcome { color: #4b5563; margin: 0 0 1.2rem 1.5rem; }.welcome b { color: #059669; }.inline-help { margin: .45rem 0 0 1.5rem; max-width: 790px; border-left: 3px solid #667eea; border-radius: 4px; background: #f5f3ff; padding: .8rem 1rem; }.inline-help h3 { margin: 0 0 .5rem; color: #5b42a0; font-size: 14px; }.inline-help h4 { margin: .75rem 0 .35rem; color: #667eea; font-size: 12px; text-transform: uppercase; }.inline-help ul { list-style: none; margin: 0; padding: 0; }.inline-help li { margin: .3rem 0; color: #4b5563; font-size: 12px; }.inline-help code { color: #1d4ed8; background: #e9e8fb; border-radius: 3px; padding: 1px 3px; }
.input-section { flex: 0 0 auto; display: flex; align-items: end; gap: .65rem; padding: .75rem 1rem 1rem 1.5rem; border-top: 1px solid #e5e7eb; background: rgba(255,255,255,.95); }.prompt { color: #059669; font-size: 1.25rem; font-weight: 700; line-height: 1.55; }.calculator-input { flex: 1; min-height: 1.55em; max-height: 160px; resize: none; overflow: auto; border: 0; outline: 0; padding: 3px 0; color: #24313a; background: transparent; caret-color: #059669; font-size: 1rem; line-height: 1.55; }.calculator-input::placeholder { color: #9ca3af; font-style: italic; }.run-button { border: 1px solid #059669; border-radius: 6px; background: #059669; color: #fff; padding: 7px 12px; font-size: 12px; }.run-button:hover { background: #047857; }.script-note { flex: 0 0 auto; margin: 0; padding: 7px 1.5rem; border-top: 1px solid #e5e7eb; background: #faf5ff; color: #6d5a93; font-size: 11px; }.calculator.script-mode .input-section { align-items: start; }.calculator.script-mode .calculator-input { min-height: 88px; }.calculator.script-mode .prompt { padding-top: 3px; }
.controls { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding-top: 1rem; }.controls button { border: 1px solid #d1d5db; border-radius: 8px; background: rgba(255,255,255,.9); color: #374151; padding: .65rem 1rem; font-size: .82rem; transition: .16s ease; }.controls button:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }.controls #script-toggle.active { border-color: #7c3aed; color: #6d28d9; background: #f5f3ff; }
.help-dialog { padding: 0; border: 0; border-radius: 12px; width: min(700px, calc(100vw - 30px)); max-height: min(80vh, 760px); box-shadow: 0 20px 60px rgba(0,0,0,.3); color: #333; }.help-dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }.modal-header { display: flex; align-items: start; justify-content: space-between; padding: 1.35rem 1.5rem; color: #fff; background: linear-gradient(135deg, #667eea, #764ba2); }.modal-header h2 { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 400; }.modal-header p { margin: 0; font-size: .85rem; opacity: .88; }.modal-header button { border: 0; background: transparent; color: #fff; font-size: 1.85rem; line-height: 1; }.modal-body { max-height: calc(min(80vh, 760px) - 100px); overflow: auto; padding: 1.4rem 1.5rem; }.help-search { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: .7rem .8rem; outline-color: #667eea; }.help-intro { margin: 1.2rem 0; padding: 1rem; border-left: 3px solid #059669; background: #ecfdf5; color: #33564b; font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.5; }.help-group { padding: .9rem 0; border-bottom: 1px solid #e5e7eb; }.help-group h3 { margin: 0 0 .55rem; color: #667eea; font-size: 1rem; }.help-item { display: grid; grid-template-columns: minmax(125px, .9fr) 2fr; gap: 12px; padding: .35rem 0; font-size: .82rem; }.help-item code { color: #2563eb; }.help-item p { margin: 0; color: #4b5563; font-family: system-ui, sans-serif; line-height: 1.45; }.sr-only { position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden; }
.tutorial-index-section { padding: .85rem 0; border-bottom: 1px solid #e5e7eb; }.tutorial-index-section > a { display: grid; gap: 4px; color: #374151; text-decoration: none; }.tutorial-index-section > a b { color: #5b42a0; }.tutorial-index-section > a span { font: .82rem/1.45 system-ui, sans-serif; color: #667085; }.tutorial-index-children { display: grid; gap: 5px; margin: 10px 0 0 15px; padding-left: 11px; border-left: 2px solid #ddd6fe; }.tutorial-index-children a { color: #2563eb; font-size: .82rem; text-decoration: none; }.truncated { color: #2563eb; }.inspect-dialog { margin: 0 0 0 auto; padding: 0; border: 0; width: min(560px, 100vw); height: 100dvh; max-height: 100dvh; background: #fff; box-shadow: -12px 0 36px rgba(0,0,0,.2); color: #24313a; animation: slide-in .18s ease-out; }.inspect-dialog::backdrop { background: rgba(0,0,0,.34); }.inspect-header { display: flex; justify-content: space-between; align-items: start; padding: 1.2rem 1.3rem; color: #fff; background: linear-gradient(135deg, #667eea, #764ba2); }.inspect-header h2 { margin: 0 0 5px; font-size: 1.2rem; font-weight: 400; }.inspect-header p { max-width: 410px; margin: 0; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .73rem; }.inspect-header button { border: 0; background: transparent; color: #fff; font-size: 1.8rem; }.inspect-value { max-height: calc(100dvh - 98px); margin: 0; overflow: auto; padding: 1.3rem; white-space: pre-wrap; overflow-wrap: anywhere; font: .9rem/1.6 "SF Mono", Monaco, monospace; } @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 720px) { .container { padding: 0; }.app-header { min-height: 96px; margin: 0; padding: 10px 12px 8px; align-content: end; }.brand { left: 12px; top: 17px; transform: none; }.rm-mark { width: 34px; height: 34px; font-size: 10px; }.brand b { font-size: 15px; }.app-header > p { font-size: .75rem; padding: 0 6px; }.app-header nav { right: 10px; top: 15px; transform: none; }.app-header nav a, .app-header nav button { padding: 5px 7px; font-size: 10px; }.calculator { border-radius: 0; border-left: 0; border-right: 0; }.output-history { padding: .85rem 1rem; font-size: .9rem; }.input-section { padding: .65rem .8rem; }.controls { padding: .7rem; gap: .4rem; }.controls button { padding: .55rem .7rem; font-size: .72rem; }.help-dialog { width: 100vw; max-height: 100dvh; min-height: 100dvh; border-radius: 0; }.modal-body { max-height: calc(100dvh - 100px); }.help-item { grid-template-columns: 1fr; gap: 3px; }.calculator-toolbar { font-size: 9px; } }