:root{--paper:#f6f5ef;--white:#fffefa;--ink:#20352e;--muted:#758078;--line:#e1e3d9;--green:#234e3d;--accent:#dfecd8;--sidebar:#eeefe6;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:7px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;transition:background .15s,box-shadow .15s}button:hover{background:#e8ede2}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #90ae72;outline-offset:3px}a{color:var(--green)}h1,h2,h3,p{margin:0}h1{font-family:Georgia,"Times New Roman",serif;font-size:38px;font-weight:400;line-height:1.15;letter-spacing:-1px}h2{font-size:17px;font-weight:650}h3{font-size:14px}p{line-height:1.55}svg{flex-shrink:0}.primary{background:var(--green);border-color:var(--green);color:#fff}.primary:hover{background:#163d2c}.secondary{background:var(--white)}.small{font-size:12px;padding:8px 11px}.full{width:100%;margin-top:10px}.text-button{border:none;background:transparent;padding:5px 0;font-size:12px}.text-button:hover{background:transparent;color:#577e36}.muted,.subtle{color:var(--muted)}.icon-button{border:none;background:transparent;padding:7px;border-radius:5px}.outlined{border:1px solid var(--line);background:var(--white)}.danger{background:#a54432;color:white;border-color:#a54432}label{display:block;font-size:12px;font-weight:600;color:#4e5e53}input,textarea,select{width:100%;display:block;background:#fffefa;border:1px solid #dce0d6;border-radius:6px;padding:10px 11px;margin-top:7px;color:var(--ink);font-size:13px}textarea{resize:vertical;line-height:1.5}input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--green);flex-shrink:0}hr{border:0;border-top:1px solid var(--line);margin:20px 0}#app{display:flex;min-height:100vh}.sidebar{width:224px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:31px 18px 20px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:16px;font-weight:750;letter-spacing:1.5px;padding:0 8px 35px}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:0;line-height:1.3;margin-top:4px}.brand-mark{width:40px;height:40px;display:block;flex-shrink:0}.sidebar-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#8a9387;margin:0 12px 13px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.nav-item{width:100%;border:0;background:transparent;justify-content:flex-start;padding:12px 13px;font-size:13px;color:#717d6e;font-weight:500}.nav-item.active{background:#dae5d4;color:var(--green);font-weight:650}.book-label{display:flex;align-items:center;justify-content:space-between;margin-top:36px;margin-bottom:8px}.book-label button{padding:0}.book-list{display:grid;gap:3px;overflow:auto}.book-link{border:none;justify-content:flex-start;background:transparent;font-size:11px;padding:10px 12px;font-weight:500;text-align:left}.book-link>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-link small{margin-left:auto;font-size:10px;color:#85917e}.book-dot{width:5px;height:5px;border-radius:50%;background:#abb79e;flex-shrink:0}.book-link.chosen{background:#e4e8da}.book-link.chosen .book-dot{background:var(--green)}.sidebar-bottom{margin-top:auto;padding-top:30px}.local-card{padding:15px 13px;border:1px solid #d8dfcc;border-radius:8px;background:#e7eadc;font-size:10px}.local-card strong{font-size:11px}.local-card p{color:#7c8772;font-size:10px;margin:8px 0 10px;line-height:1.6}.status-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#7b9961;margin-right:6px}.sidebar-bottom>.text-button{margin:12px}.version{display:block;font-size:9px;color:#8c9782;margin:12px}.workspace{min-width:0;flex:1}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:var(--paper)}.breadcrumb{font-size:11px;color:#95a08f}.breadcrumb span{padding:0 12px}.breadcrumb strong{font-weight:500;color:#4f6254}.topbar-right{display:flex;align-items:center;gap:15px}.save-state{display:inline-flex;gap:6px;align-items:center;color:#7f8d76;font-size:10px}.save-state svg{width:12px;height:12px}.page{padding:40px 42px 30px;max-width:1500px;margin:auto}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:700;color:#849473;margin-bottom:11px}.subtitle{color:#7e8978;font-size:12px;margin-top:12px;max-width:620px}.heading-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.workflow-strip{display:flex;align-items:center;gap:22px;border:1px solid #dfe4d5;background:#eef1e7;border-radius:9px;padding:22px 25px;margin-bottom:33px}.workflow-strip>div{display:flex;align-items:center;gap:11px;flex:1}.step-circle{width:28px;height:28px;background:#e0e7d5;border:1px solid #d5dfc8;border-radius:50%;display:grid;place-content:center;font:italic 14px Georgia,serif;flex-shrink:0}.workflow-strip span:not(.step-circle):not(.step-line){font-size:11px;font-weight:650}.workflow-strip small{display:block;color:#8a957d;font-size:10px;font-weight:400;margin-top:5px}.step-line{width:24px;height:1px;background:#cdd7c0;flex-shrink:0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:21px}.section-heading h2{font-size:16px;display:flex;align-items:center;gap:9px}.count{font-size:10px;background:#e4e9dc;padding:3px 7px;border-radius:4px;color:#6e805e}.section-heading p{font-size:10px;color:#8b9483;margin-top:9px}.filters{display:flex;gap:10px;flex-shrink:0}.filters input{width:165px;font-size:11px;margin:0;background:transparent}.filters select{width:132px;font-size:11px;margin:0;background:transparent}.play-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.play-tile{border:1px solid var(--line);background:var(--white);border-radius:9px;overflow:hidden;box-shadow:0 2px 4px #26372704}.tile-drawing{width:100%;border:0;border-radius:0;padding:13px 13px 0;background:transparent;display:block}.tile-drawing:hover{background:#f0f3e9}.field-svg{width:100%;height:auto;display:block}.tile-details{display:flex;gap:10px;align-items:center;padding:17px 16px 13px}.tile-number{display:grid;place-content:center;border:1px solid #e3e7db;background:#f0f2e9;font-size:10px;width:29px;height:29px;border-radius:6px;flex-shrink:0;color:#7e8f71}.tile-details>div{min-width:0;flex:1}.tile-details h3{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-details p{font-size:10px;color:#939d89;margin-top:4px}.tile-details>.icon-button{padding:3px;color:#899780}.tile-footer{border-top:1px solid #edefe6;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#929c86}.tile-footer>div{display:flex;gap:4px}.mini-button{border:none;background:transparent;padding:3px;font-size:14px;width:23px;height:23px;color:#75856b}.mini-button svg{width:13px;height:13px}.add-tile{min-height:140px;border:1px dashed #cdd6c1;border-radius:9px;background:#f1f3ea;flex-direction:column;grid-column:1/-1;padding:21px;color:#859777}.add-tile>svg{width:22px;height:22px}.add-tile strong{font-size:12px;font-weight:550}.add-tile span{font-size:10px;font-weight:400;color:#94a184}.print-banner{display:flex;align-items:center;gap:17px;border:1px solid #dfe4d5;background:#f0f1e6;border-radius:9px;padding:23px 26px;margin-top:27px}.banner-icon{width:43px;height:43px;border-radius:9px;background:#e3e8d5;display:grid;place-content:center;color:#6c835b}.banner-icon svg{width:22px;height:22px}.print-banner h2{font-size:14px;font-weight:600}.print-banner p{font-size:10px;color:#89977a;margin-top:6px}.print-banner>button{margin-left:auto;font-size:11px}.book-bottom{display:flex;gap:22px;margin-top:19px}.book-bottom button{font-size:10px}.notice{background:#e9eddf;border-left:3px solid #96a883;padding:16px 20px;margin-bottom:25px;font-size:12px;color:#687b57;display:flex;gap:16px;align-items:center}.notice strong{white-space:nowrap}.example-copy{padding:2px 17px 17px;color:#8a9680;font-size:11px;line-height:1.6}.example-copy button{display:flex;margin-top:10px;font-size:11px}.how-panel{border-top:1px solid var(--line);margin-top:32px;padding:25px 0;font-size:12px;color:#7b8872}.how-panel h2{margin-bottom:10px;color:var(--ink)}.how-panel ol{display:flex;gap:45px;padding-left:16px;margin:18px 0}.source-note{font-size:10px}.empty-state{padding:20px;color:var(--muted);font-size:13px}.editor-page{padding:28px 35px 35px;max-width:1500px;margin:auto}.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.editor-heading h1{font-size:28px;max-width:550px;overflow-wrap:anywhere;margin-top:8px}.editor-heading .heading-actions button{font-size:11px;padding:8px 12px}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 267px;gap:23px}.canvas-panel{min-width:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.canvas-toolbar>span{font-size:10px;color:#919d85}.segmented{display:flex;background:#e9eddf;border:1px solid #dfe5d3;border-radius:7px;padding:3px}.segmented button{border:none;border-radius:4px;padding:7px 10px;background:transparent;font-size:10px;color:#7c8d6d}.segmented button.selected{background:white;box-shadow:0 1px 3px #1c3d2010;color:var(--ink)}.segmented svg{width:14px;height:14px}#field-holder{background:#244a3d;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px #1e462015}#field{touch-action:none;user-select:none}.player{cursor:grab}.route-point{cursor:move}.canvas-help{font-size:10px;color:#849675;line-height:1.7;padding:13px 0;display:flex;gap:7px;align-items:baseline}.help-dot{width:5px;height:5px;background:#96a785;border-radius:50%;flex-shrink:0}.player-picker{display:flex;gap:9px;margin-top:2px}.player-picker button{padding:5px;border-radius:7px;background:#ecefe3;border:1px solid transparent}.player-picker button.active{border-color:#81946f;background:#e1e8d6}.player-picker span{display:grid;place-content:center;width:33px;height:30px;border-radius:5px;color:#18372a;font-size:10px;font-weight:700}.inspector{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:20px}.inspector-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.inspector-header .eyebrow{margin:0}.small-tag{background:#edf1e4;font-size:9px;color:#839572;padding:4px 6px;border-radius:4px}.inspector>label{margin-bottom:15px;font-size:10px}.inspector input,.inspector textarea{font-size:11px}.selected-player{display:flex;align-items:center;gap:11px;margin-bottom:18px}.player-swatch{width:34px;height:34px;border-radius:8px;display:grid;place-content:center;font-size:10px;font-weight:700}.selected-player strong{font-size:11px;display:block}.selected-player small{display:block;font-size:9px;color:#96a088;margin-top:4px}.color-picker{display:flex;gap:8px;margin:12px 0 20px}.color-picker button{padding:3px;border-radius:50%;border:1px solid transparent;background:transparent}.color-picker button.active{border-color:#859575}.color-picker span{display:block;width:18px;height:18px;border-radius:50%}.position-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.position-inputs label{font-size:10px}.route-actions{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:18px}.route-actions button{font-size:10px}.inspector-note{font-size:10px;color:#8b967f;line-height:1.7;margin-bottom:17px}.inspector>.text-button{font-size:10px}.print-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:25px}.print-settings{padding:22px;background:var(--white);border:1px solid var(--line);border-radius:9px;align-self:start}.print-settings h2{font-size:15px}.print-settings h3{font-size:12px}.settings-caption{font-size:10px;color:#919c86;margin-top:7px}.print-selections{margin:24px 0 18px}.select-all{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:11px}.select-all button{font-size:10px}.check-row{display:flex;align-items:center;gap:9px;padding:7px 0;color:#647759;font-size:11px;font-weight:400}.check-row span{overflow-wrap:anywhere}.dimension-inputs{display:flex;gap:9px;align-items:center;margin-top:13px}.dimension-inputs>label{flex:1;min-width:0;font-size:10px}.dimension-inputs>span{margin-top:22px;color:#92a080}.inch-value{font-size:9px;color:#95a087;margin:8px 0 19px}.print-settings input,.print-settings select{font-size:11px}.print-settings>.position-inputs{margin-bottom:16px}.print-settings>label{font-size:10px}.print-checklist{background:#eef1e7;border-radius:6px;padding:14px;margin-top:21px;font-size:10px;color:#7b8e68}.print-checklist strong{color:#566e42}.print-checklist p{font-size:10px;margin-top:6px;line-height:1.6}.preview-area{border:1px solid var(--line);border-radius:9px;background:#eaece3;min-width:0;overflow:hidden;align-self:start}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;background:var(--white);border-bottom:1px solid var(--line);gap:15px}.preview-toolbar strong{font-size:12px;display:block}.preview-toolbar small{font-size:9px;color:#939d89;display:block;margin-top:6px}.preview-toolbar button{font-size:10px;white-space:nowrap}.preview-placeholder{min-height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.preview-placeholder h2{font-family:Georgia,serif;font-weight:400;font-size:24px;max-width:320px;margin:27px 0 12px}.preview-placeholder p{font-size:11px;color:#8a977d;max-width:320px}.paper-stack{position:relative;width:115px;height:139px}.paper-back{position:absolute;inset:0;background:#e5e9db;border:1px solid #d5ddc8;transform:rotate(-9deg);border-radius:4px}.paper-front{position:absolute;inset:0;background:#fffefa;border:1px solid #d8dfcc;transform:rotate(5deg);border-radius:4px;padding:22px 18px;box-shadow:0 8px 18px #40553613}.paper-front svg{width:24px;height:24px;color:#92a67e;margin-bottom:15px}.paper-front>div{height:4px;background:#e6ebde;margin:8px 0}.paper-front>div:last-child{width:60%}.preview-note{font-size:9px;color:#9ba68e;text-align:center;padding:15px 12px}.preview-area iframe{width:100%;height:730px;display:block;border:0;background:white}.form-error{margin-top:15px;color:#a1503a;font-size:11px;line-height:1.6}.recovery-banner{background:#f3e4cc;padding:14px 35px;display:flex;align-items:center;gap:12px;font-size:12px;color:#775426}dialog{border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);width:min(440px,calc(100vw - 32px));padding:26px;box-shadow:0 20px 80px #10271330}dialog::backdrop{background:#20352855;backdrop-filter:blur(2px)}dialog h2{font:26px Georgia,serif;margin-bottom:15px}dialog p{color:#7f8d72;font-size:12px;margin:0 0 20px}.dialog-heading{display:flex;align-items:start;justify-content:space-between}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#203d2f;color:#f7f8ec;border-radius:8px;box-shadow:0 4px 20px #19302120;font-size:12px;padding:13px 21px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px);z-index:30}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1550px){.page{padding-top:55px}.play-grid{gap:25px}}
@media(max-width:1150px){.sidebar{width:190px;padding-left:12px;padding-right:12px}.topbar{padding:0 28px}.page{padding:32px 28px}.page-heading{align-items:flex-start}h1{font-size:32px}.page-heading .heading-actions{flex-direction:column;align-items:stretch}.workflow-strip{gap:13px;padding:18px 16px}.step-line{display:none}.workflow-strip>div{align-items:flex-start}.workflow-strip small{font-size:9px}.section-heading{align-items:flex-start;flex-direction:column;gap:15px}.play-grid{gap:13px}.tile-details{padding:14px 12px}.tile-number{display:none}.print-banner{padding:20px}.editor-layout{grid-template-columns:minmax(0,1fr) 240px;gap:16px}.editor-page{padding:25px}.editor-heading{align-items:flex-start;flex-direction:column}.print-layout{grid-template-columns:265px minmax(0,1fr);gap:16px}.print-settings{padding:18px}.preview-toolbar{padding:14px;flex-direction:column;align-items:flex-start}}
@media(max-width:850px){.sidebar{width:165px}.brand{gap:8px;font-size:12px;padding-left:4px}.brand-mark{width:34px;height:34px}.brand small{font-size:9px}.sidebar-label{font-size:8px}.nav-item{font-size:11px;padding:10px}.topbar{padding:0 22px;height:65px}.save-state{font-size:9px}.page{padding:28px 22px}.play-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-strip{flex-wrap:wrap}.workflow-strip>div{min-width:150px}.print-banner{flex-wrap:wrap}.print-banner>button{margin-left:0}.editor-layout{grid-template-columns:1fr}.inspector{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.inspector>*{margin:0}.inspector-header,.inspector hr,.inspector-note{grid-column:1/-1}.editor-heading .heading-actions{flex-wrap:wrap}.print-layout{grid-template-columns:1fr}.print-settings{display:block}.print-selections{max-height:180px;overflow:auto}.preview-toolbar{flex-direction:row}.preview-area iframe{height:650px}.how-panel ol{display:block}.how-panel li{margin:10px 0}.notice{align-items:flex-start;flex-direction:column;gap:7px}}
@media(max-width:600px){#app{display:block}.sidebar{width:100%;height:auto;position:static;padding:14px 18px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0;font-size:14px}.brand small{font-size:9px}.sidebar nav{flex-direction:row;margin-top:16px;gap:5px}.nav-item{justify-content:center;padding:9px 7px;gap:6px;flex:1}.nav-item svg{width:15px;height:15px}.sidebar-label,.book-list,.sidebar-bottom{display:none}.topbar{height:50px;padding:0 20px}.breadcrumb{font-size:9px}.save-state{font-size:9px}.topbar-right{gap:5px}.page,.editor-page{padding:26px 20px}.page-heading{display:block;margin-bottom:24px}.page-heading .heading-actions{flex-direction:row;margin-top:20px}.eyebrow{font-size:8px}h1{font-size:32px}.subtitle{font-size:11px}.workflow-strip{gap:16px;padding:17px}.workflow-strip>div{min-width:100%;flex:none}.workflow-strip small{font-size:10px}.play-grid{grid-template-columns:1fr;gap:17px}.tile-details h3{font-size:13px}.tile-number{display:grid}.tile-footer{font-size:10px}.filters{width:100%}.filters input{flex:1;min-width:0}.filters select{width:130px}.section-heading p{font-size:10px;line-height:1.6}.add-tile{min-height:125px}.print-banner{gap:12px;padding:17px}.print-banner>div:nth-child(2){flex:1;min-width:180px}.print-banner>button{width:100%;margin-top:5px}.canvas-toolbar>span{font-size:9px}.editor-heading h1{font-size:28px}.editor-heading .heading-actions{gap:6px}.editor-heading .heading-actions button{padding:8px 9px;font-size:10px}.canvas-help{font-size:10px}.inspector{padding:17px;gap:15px}.inspector input{font-size:12px}.inspector>label:nth-child(4){grid-column:1/-1}.selected-player{grid-column:1/-1}.print-settings{padding:20px}.preview-toolbar{gap:8px;flex-wrap:wrap}.preview-placeholder{min-height:400px}.preview-area iframe{height:600px}.recovery-banner{padding:14px 20px;flex-wrap:wrap}.notice{font-size:11px}.topbar-right>.icon-button{padding:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.mobile-plan{display:none}.mobile-book-switch{display:none}@media(max-width:600px){.mobile-plan{display:inline-flex}.topbar .breadcrumb{display:none}.mobile-book-switch{display:block;width:48%;margin:0;padding:6px;font-size:10px}.book-list .book-link{min-width:0}}.book-list{overflow-x:hidden}.book-link{min-width:0}
/* Account state stays separate from the drawing controls. */
.workspace-loading { grid-column: 1 / -1; width: min(calc(100% - 40px), 520px); min-height: 100vh; margin: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 32px 0; }
.workspace-loading h1 { font-size: 32px; line-height: 1.25; margin: 0; }
.workspace-loading p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.account-banner { margin: 16px 32px 0; padding: 14px 18px; background: #fff4db; border: 1px solid #e3ce99; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.account-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.import-selection { margin: 18px 0; padding: 12px; border: 1px solid var(--line); max-height: 180px; overflow: auto; }
.import-selection label { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.import-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.import-actions button { min-height: 44px; }
@media (max-width: 640px) { .account-banner { margin: 12px 16px 0; } .topbar-right .save-state { max-width: 130px; font-size: 11px; } }
/* Browsing the library never changes the saved workspace. */
.library-filters { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(120px, .75fr) minmax(170px, 1fr) auto; gap: 16px; align-items: end; margin: 25px 0 15px; }
.library-filters .text-button { min-height: 40px; }
.library-count { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.library-learning { margin: 20px 0 0; font-size: 13px; line-height: 1.8; color: #526356; }
.sidebar .guide-links { display: grid; gap: 2px; margin: 16px 12px 0; }
.guide-links a { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; line-height: 1.5; text-underline-offset: 3px; }
@media (max-width: 600px) { .sidebar .guide-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; } .guide-links a { min-height: 44px; } }
.library-card-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.library-card-body h2 { font-size: 16px; line-height: 1.4; }
.library-card-body p { font-size: 12px; color: #526356; }
.library-tile { display: flex; flex-direction: column; }
.library-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.library-tags span { border: 1px solid #d7dfcf; background: #eef2e8; padding: 4px 8px; border-radius: 5px; font-size: 11px; color: #4c654e; }
.library-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.library-card-actions button { font-size: 12px; padding: 9px 11px; }
.route-guide { border: 1px solid var(--line); border-radius: 8px; margin-top: 28px; background: var(--white); }
.route-guide summary { padding: 18px; cursor: pointer; font-size: 14px; font-weight: 600; }
.route-guide summary:focus-visible { outline: 3px solid #90ae72; outline-offset: 3px; }
.route-guide-body { padding: 0 20px 20px; font-size: 13px; }
.route-guide-body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.route-guide-body dt { font-weight: 700; margin-bottom: 5px; }
.route-guide-body dd { margin: 0; line-height: 1.6; color: #526356; }
.example-page > .text-button { margin-bottom: 20px; }
.example-page > .library-tags { margin-bottom: 25px; }
.example-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.example-diagram, .example-assignments { min-width: 0; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.example-diagram h2 { margin-bottom: 16px; }
.example-diagram .field-svg { width: 100%; height: auto; display: block; }
.example-diagram p { font-size: 12px; color: #526356; margin-top: 12px; }
.example-assignments dl { margin-bottom: 0; }
.example-assignments dl > div + div { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.example-assignments dt { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.assignment-label { display: inline-grid; place-items: center; width: 32px; height: 28px; border-radius: 5px; color: #123329; flex-shrink: 0; }
.example-assignments dd { margin: 7px 0 0 42px; font-size: 12px; line-height: 1.6; color: #526356; }
.example-guidance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0; }
.example-guidance h2 { font-size: 14px; margin-bottom: 8px; }
.example-guidance p { font-size: 13px; color: #526356; }
.example-page .how-panel p { margin-bottom: 16px; }
@media (max-width: 1100px) { .library-page .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .library-filters { grid-template-columns: 1fr 1fr; } .example-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .library-page .play-grid, .example-guidance, .route-guide-body dl { grid-template-columns: 1fr; } .library-filters { gap: 14px 10px; } .library-filters > label:first-child { grid-column: 1 / -1; } .library-filters .text-button { grid-column: 1 / -1; justify-self: start; } .library-filters select { font-size: 12px; padding-left: 6px; } .example-page .heading-actions { margin-top: 16px; } .example-page .page-heading > button { margin-top: 16px; } .example-diagram, .example-assignments { padding: 16px; } .library-card-actions button { min-height: 44px; } }

/* Readable UI copy at normal browser zoom, including narrow screens. */
:root { --muted: #526356; --font-copy: 16px; --font-detail: 14px; }
body { font-size: var(--font-copy); }
[hidden] { display: none !important; }
.workflow-strip small, .section-heading p, .subtitle, .notice, .example-copy,
.how-panel, .empty-state, .canvas-help, .inspector-note, .print-checklist p,
.preview-placeholder p, dialog p, .library-card-body p, .route-guide-body,
.example-diagram p, .example-assignments dd, .example-guidance p,
.library-learning { font-size: var(--font-copy); line-height: 1.65; color: var(--muted); }
.workflow-strip span:not(.step-circle):not(.step-line) { font-size: var(--font-copy); }
.workflow-strip > div > div { min-width: 0; }
.workflow-strip small { display: block; margin-top: 5px; }
.tile-details p, .tile-footer, .source-note, .save-state, .breadcrumb,
.sidebar-bottom, .sidebar-bottom p, .settings-caption, .inch-value,
.canvas-toolbar > span, .selected-player small, .preview-toolbar small,
.preview-note, .library-count, .library-tags span, .small-tag,
.add-tile span, .print-banner p { font-size: var(--font-detail); line-height: 1.55; color: var(--muted); }
.tile-details h3, .print-banner h2 { font-size: 16px; line-height: 1.4; }
.form-error, .add-tile strong, .sidebar-bottom strong { font-size: 16px; line-height: 1.6; }
.tile-number, .sidebar-label { font-size: 14px; color: var(--muted); }
button, .small, .text-button, .nav-item, .book-link, .filters input, .filters select,
.editor-heading .heading-actions button, .segmented button, .route-actions button,
.inspector > .text-button, .print-banner > button, .book-bottom button,
.example-copy button, .preview-toolbar button, .select-all, .select-all button,
.library-card-actions button, .guide-links a, #toast { font-size: var(--font-detail); }
label, .inspector > label, .position-inputs label, .dimension-inputs > label,
.print-settings > label, .check-row, .example-assignments dt,
.selected-player strong, .print-settings h3, .preview-toolbar strong { font-size: var(--font-detail); }
input, select, textarea, .inspector input, .inspector textarea,
.print-settings input, .print-settings select, .library-filters select { font-size: var(--font-copy); }
.segmented button, .check-row, .how-panel, .example-copy, dialog p { color: var(--muted); }
.print-checklist { font-size: var(--font-detail); color: var(--muted); }
.mini-button { min-width: 32px; min-height: 32px; }
.sidebar-bottom { overflow-wrap: anywhere; }
.google-sign-in { width: 100%; min-height: 48px; font-size: 16px; background: #fffefa; }
.google-mark { font: 700 20px Arial, sans-serif; color: #234e3d; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 14px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.account-links button { min-height: 44px; }
@media (max-width: 600px) {
  .topbar { height: auto; min-height: 64px; gap: 10px; flex-wrap: wrap; padding: 12px 20px; }
  .mobile-book-switch { width: min(45%, 190px); font-size: 16px; }
  .topbar-right { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .topbar-right .save-state { max-width: none; flex-basis: 100%; font-size: 14px; text-align: right; }
  .tile-footer { font-size: 14px; }
  .mini-button { min-width: 44px; min-height: 44px; }
  .canvas-toolbar { flex-wrap: wrap; gap: 10px; }
  .inspector { grid-template-columns: 1fr; }
  .inspector > *, .inspector > label:nth-child(4), .selected-player { grid-column: 1; }
  .workflow-strip small { font-size: 16px; }
}
.call-tag { min-width: 34px; padding: 2px 6px; border: 1px solid #e3e7db; border-radius: 6px; background: #f0f2e9; color: var(--ink); font-size: var(--font-detail); text-align: center; flex-shrink: 0; }
.call-settings { margin: 0 0 18px; }
.call-settings .check-row strong { color: var(--ink); font-weight: 600; }
.call-settings .settings-caption { margin: 2px 0 8px; }
.account-banner { position: fixed; z-index: 25; right: 24px; bottom: 24px; margin: 0; max-width: min(620px, calc(100vw - 48px)); box-shadow: 0 6px 24px #1930212e; }
.workspace:has(.account-banner) { padding-bottom: 120px; }
body:has(.account-banner) #toast { bottom: 132px; }
@media (max-width: 600px) { .account-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; } body:has(.account-banner) #toast { bottom: 190px; } }
@media (max-width: 640px) { .topbar-right .save-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }