:root { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; color: #1f1f1f; background: #f0f4f9; font-size: 14px; --blue: #0b57d0; --ink: #0b57d0; --line: #dadce0; --muted: #5f6368; } * { box-sizing: border-box; } body { margin: 0px; } button, input, textarea, select { font: inherit; } button { border: 1px solid var(--line); border-radius: 8px; padding: 11px 16px; background: white; color: #1f1f1f; cursor: pointer; font-weight: 600; line-height: 1.5; } button:hover:not(:disabled) { background: #e8f0fe; border-color: #9aa0a6; } button:disabled { cursor: not-allowed; background: #e8f0fe; color: #5f6368; } button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: #7cacf8 solid 3px; outline-offset: 3px; } header { min-height: 76px; display: flex; align-items: center; gap: 24px; padding: 14px 30px; background: white; border-bottom: 1px solid var(--line); } header strong { display: flex; align-items: center; gap: 24px; } .brand-logo { width: 125px; height: 42px; object-fit: contain; } header strong span { border-left: 1px solid var(--line); padding-left: 24px; font-size: 10px; letter-spacing: 0.15em; color: #5f6368; } #connections { margin-left: auto; display: flex; gap: 8px; } .connection { padding: 6px 10px; border-radius: 20px; font-size: 11px; background: #ceead6; color: #1f1f1f; } .connection.wait { background: #feefc3; color: #8a4b00; } #notice { padding: 12px 30px; min-height: 42px; background: #e8f0fe; font-size: 12px; color: #3c4043; line-height: 1.7; } .error { color: #c5221f !important; background: #fce8e6 !important; } main { display: grid; grid-template-columns: 275px minmax(0px, 1fr); } aside { padding: 26px 18px; background: #ffffff; border-right: 1px solid var(--line); min-width: 0px; } h1 { font-size: 20px; margin: 8px 0px 22px; } .overline { font-size: 10px; letter-spacing: 0.13em; color: #5f6368; font-weight: 700; margin: 0px 0px 9px; } #workspace { width: 100%; max-width: 1400px; padding: 34px 40px 80px; min-width: 0px; } .heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .heading > div:first-child { flex: 1 1 0%; min-width: 0px; } .heading > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; max-width: 280px; } h2 { font-size: 27px; line-height: 1.55; letter-spacing: -0.025em; margin: 4px 0px 8px; overflow-wrap: anywhere; } h3 { font-size: 20px; margin: 8px 0px 18px; } #status { display: inline-block; background: #e8f0fe; color: #0b57d0; border-radius: 5px; padding: 5px 10px; margin: 4px 0px; font-size: 11px; } #mode { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 12px 0px 24px; } #generate, #publish, #next-action { background: var(--blue); border-color: var(--blue); color: #ffffff; } #generate:disabled, #publish:disabled { background: #e8eaed; border-color: #dadce0; color: #5f6368; } .next-step { background: var(--ink); color: #ffffff; padding: 24px 26px; border-radius: 13px; display: flex; align-items: center; justify-content: space-between; gap: 25px; position: relative; overflow: hidden; } .next-step::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 4px; background: #0b57d0; } .next-step .overline { color: #7cacf8; font-size: 9px; } .next-step h3 { font-size: 19px; margin: 8px 0px; } .next-step p { font-size: 12px; color: #bdc1c6; margin: 0px; line-height: 1.8; } .next-step button { flex-shrink: 0; font-size: 12px; } .overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0px; } .metric { background: #ffffff; padding: 18px 22px; border: 1px solid var(--line); border-radius: 10px; } .metric span { font-size: 12px; color: var(--muted); } .metric strong { display: block; font-size: 27px; letter-spacing: -0.03em; margin-top: 8px; } .tabs { display: flex; gap: 26px; border-bottom: 1px solid #dadce0; margin: 20px 0px 30px; overflow: auto; } .tabs button { border-width: 0px 0px 3px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; border-radius: 0px; background: transparent; padding: 14px 2px; white-space: nowrap; color: #5f6368; } .tabs button[aria-pressed="true"] { color: var(--blue); border-bottom-color: var(--blue); } label { display: block; font-size: 12px; color: #3c4043; margin: 14px 0px; } input, textarea, select { display: block; width: 100%; border: 1px solid #bdc1c6; border-radius: 7px; padding: 11px; margin-top: 8px; background: #ffffff; color: #1f1f1f; } textarea { min-height: 110px; line-height: 1.7; resize: vertical; } input:disabled, textarea:disabled { background: #f0f4f9; color: #5f6368; } .search-label { font-size: 11px; } #meetings { margin-top: 20px; } #meetings button { width: 100%; text-align: left; padding: 14px 12px; margin-bottom: 7px; border: 1px solid transparent; background: transparent; font-size: 12px; line-height: 1.8; } #meetings button.selected { background: #e8f0fe; border-color: #bdc1c6; color: #0b57d0; box-shadow: inset 3px 0 var(--blue); } #meetings small { display: block; font-size: 10px; color: #5f6368; margin-top: 7px; } .drive-controls { display: flex; flex-wrap: wrap; gap: 7px; } .drive-controls button { font-size: 11px; padding: 9px 10px; } .drive-controls p { width: 100%; font-size: 11px; color: #5f6368; margin: 2px 0px; } #drive-files { max-height: 320px; overflow: auto; } .drive-file { padding: 12px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6; } .drive-file button { font-size: 11px; } details { background: white; border: 1px solid var(--line); border-radius: 9px; padding: 15px 17px; margin: 16px 0px; } summary { font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.7; } details p { font-size: 12px; color: #5f6368; line-height: 1.8; } aside details { padding: 13px 12px; } aside details label { font-size: 11px; } #library-toggle { display: none; } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .task-toolbar { display: flex; align-items: center; gap: 16px; margin: 24px 0px 12px; } .task-toolbar label { margin: 0px; display: flex; align-items: center; gap: 14px; } .task-toolbar select { width: 160px; margin: 0px; padding: 8px 12px; } #task-count { font-size: 11px; color: #5f6368; } .task { background: #ffffff; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-radius: 12px; padding: 24px; margin: 14px 0px; border-top: 3px solid #bdc1c6; } .task[data-state="done"] { border-top-color: #9aa0a6; } .task h4 { font-size: 17px; line-height: 1.7; margin: 0px 0px 14px; } .task p { font-size: 13px; line-height: 1.9; color: #3c4043; } .task > label { display: inline-block; vertical-align: top; } .task > label:first-of-type { width: 25%; padding-right: 18px; } .task > label:last-of-type { width: 75%; } .task > label textarea { min-height: 70px; } .task > button { display: block; margin-left: auto; color: var(--blue); } .task details { background: #ffffff; margin: 12px 0px; padding: 12px 15px; } .document-actions { display: flex; gap: 8px; margin: 20px 0px; } .document { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 34px 38px; line-height: 1.95; } .document h2 { font-size: 24px; } .document h3 { border-left: 3px solid var(--blue); padding-left: 13px; font-size: 18px; margin: 32px 0px 14px; } .document h4 { font-size: 16px; margin: 25px 0px 10px; } .document p { margin: 13px 0px; overflow-wrap: anywhere; } .document ul { padding-left: 24px; } .document li { margin: 8px 0px; } .empty-state { padding: 42px 25px; text-align: center; border: 1px dashed #bdc1c6; background: #ffffff; border-radius: 12px; color: #5f6368; line-height: 1.8; } .empty-state strong { display: block; color: #3c4043; font-size: 17px; margin-bottom: 10px; } .slack-card { background: #ffffff; border: 1px solid var(--line); border-radius: 11px; margin: 16px 0px; padding: 22px 25px; } .slack-card.thread { margin-left: 28px; border-left: 3px solid #bdc1c6; } .slack-card h4 { font-size: 11px; color: #5f6368; margin: 0px 0px 14px; } .slack-card pre { margin: 0px; padding: 0px; border: 0px; } pre { white-space: pre-wrap; overflow-wrap: anywhere; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; line-height: 1.9; padding: 18px; border: 1px solid var(--line); background: #ffffff; border-radius: 8px; } .muted, [data-panel="draft"] > p:not(.overline), #delivery-status { font-size: 12px; color: #5f6368; line-height: 1.9; } #delivery-status { padding: 13px 16px; background: #e8f0fe; border-radius: 8px; } #brief-text { min-height: 260px; } #search-empty { font-size: 12px; color: #80868b; } [hidden] { display: none !important; } a { color: #0b57d0; } #download-tasks { font-size: 12px; } @media (max-width: 1100px) { #workspace { padding: 28px 25px; } main { grid-template-columns: 245px minmax(0px, 1fr); } .heading { flex-direction: column; } .heading > div:last-child { max-width: none; } .next-step { align-items: flex-start; flex-direction: column; gap: 16px; } header strong span { display: none; } } @media (max-width: 800px) { header { padding: 12px 20px; gap: 10px; } .brand-logo { width: 108px; } #connections { gap: 4px; } .connection { padding: 5px 7px; font-size: 9px; } header > button { font-size: 11px; padding: 7px 10px; } #notice { padding: 10px 20px; } main { display: block; } aside { padding: 14px 20px; border-right: 0px; border-bottom: 1px solid var(--line); } #library-toggle { display: block; width: 100%; text-align: left; border: 0px; background: #e8f0fe; color: #0b57d0; } #library-body { padding-top: 18px; } #meetings { max-height: 190px; overflow: auto; } #workspace { padding: 24px 20px 60px; } .heading h2 { font-size: 23px; } .next-step { padding: 20px; } .next-step h3 { font-size: 18px; } .overview { gap: 8px; } .metric { padding: 14px; } .metric strong { font-size: 24px; } .tabs { gap: 22px; } .task { padding: 19px; } .document { padding: 22px; } .slack-card.thread { margin-left: 12px; } } @media (max-width: 450px) { #connections { flex-wrap: wrap; max-width: 150px; } .tabs { gap: 18px; } .tabs button { font-size: 12px; } .task > label:first-of-type, .task > label:last-of-type { width: 100%; padding: 0px; } .metric { padding: 12px 10px; } .metric span { font-size: 10px; } .metric strong { font-size: 22px; } .task-toolbar label { gap: 8px; } .task-toolbar select { width: 130px; } .section-heading { align-items: flex-start; flex-direction: column; } } @media (min-width: 801px) { #library-body[hidden] { display: block !important; } } main { display: block; padding: 22px 28px 60px; max-width: 1600px; margin: auto; } #calendar-section { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .calendar-toolbar { display: flex; align-items: center; gap: 9px; padding: 18px 22px; flex-wrap: wrap; } .calendar-brand { display: flex; align-items: center; gap: 12px; margin-right: 15px; } .calendar-brand h1 { font-size: 20px; margin: 0px; } .calendar-icon { border-width: 8px 2px 2px; border-style: solid; border-color: #0b57d0; border-image: none; border-radius: 5px; padding: 2px 8px; color: #0b57d0; font-size: 18px; font-weight: 700; } .calendar-toolbar button { padding: 8px 12px; } .date-picker { display: flex; align-items: center; gap: 8px; margin: 0px 0px 0px auto; } .date-picker input { width: 155px; margin: 0px; padding: 8px; } #cal-view { width: 70px; margin: 0px; padding: 8px; } .calendar-meta { display: flex; gap: 15px; justify-content: space-between; border-top: 1px solid #f1f3f4; padding: 10px 22px; color: #5f6368; font-size: 10px; line-height: 1.8; } .week-strip { display: grid; padding-left: 48px; background: #ffffff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .day-heading { border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor #f1f3f4 currentcolor currentcolor; border-image: none; border-radius: 0px; padding: 12px 3px; font-size: 12px; } .day-heading.active { background: #e8f0fe; color: #0b57d0; } .calendar-grid { height: 370px; overflow: auto; overscroll-behavior: contain; } .time-canvas { display: grid; min-width: 760px; position: relative; height: 1440px; } .daily .time-canvas { min-width: 0px; } .time-axis { position: relative; background: #ffffff; } .time-axis span { position: absolute; font-size: 10px; color: #80868b; right: 8px; } .day-column { position: relative; border-right: 1px solid #e8eaed; background: repeating-linear-gradient(transparent 0px, transparent 59px, #e8eaed 59px, #e8eaed 60px); } .calendar-event { position: absolute; text-align: left; padding: 4px 6px; border-width: 1px 1px 1px 3px; border-style: solid; border-color: white white white #9aa0a6; border-image: none; background: #e8f0fe; border-radius: 5px; overflow: hidden; font-size: 10px; font-weight: 400; line-height: 1.3; min-width: 0px; } .calendar-event strong { display: block; font-size: 11px; overflow-wrap: anywhere; } .calendar-event small { display: block; margin-top: 3px; font-size: 9px; } .calendar-event.recorded { background: #e8f0fe; border-left-color: #0b57d0; color: #0b57d0; } .calendar-event.ready { background: #ceead6; border-left-color: #0b57d0; color: #1f1f1f; } .calendar-event:hover { z-index: 2; box-shadow: rgba(17, 34, 51, 0.2) 0px 3px 12px; } .all-day-event { position: relative; z-index: 1; padding: 5px; font-size: 10px; background: #e8f0fe; width: 100%; border: 1px solid #ffffff; } .calendar-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 22px; border-top: 1px solid var(--line); font-size: 10px; color: #5f6368; } .calendar-footer label { display: flex; align-items: center; gap: 12px; margin: 0px; flex: 1 1 0%; } .calendar-footer select { margin: 0px; max-width: 420px; font-size: 11px; } #utility-panel { border: 1px solid var(--line); border-radius: 12px; margin-top: 18px; max-width: 700px; } #workspace { max-width: none; padding: 25px 0px 0px; } #workspace .heading { padding: 0px 4px; } .heading h2 { font-size: 22px; } #next-step, #overview { display: none; } #mode { margin: 8px 0px 12px; } #meeting-summary { margin: 14px 0px; padding: 16px 20px; } #meeting-summary-text { white-space: pre-wrap; max-height: 180px; overflow: auto; color: #3c4043; } #event-detail { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-top: 24px; scroll-margin-top: 18px; } #event-detail p { font-size: 12px; color: #5f6368; line-height: 1.8; } #event-detail h2 { font-size: 23px; } #event-detail button { display: inline-block; margin: 14px 8px 0px 0px; } #event-detail a { display: block; font-size: 12px; margin-top: 12px; } .tabs { margin: 16px 0px 22px; } .draft-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .draft-layout > div, .draft-layout > form { min-width: 0px; } .editor-heading { font-size: 13px; margin: 0px 0px 12px; } .editor-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .editor-top h4 { margin: 0px; font-size: 14px; } #draft-form { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; position: sticky; top: 16px; } #draft-editor { min-height: 480px; font-size: 13px; font-family: inherit; line-height: 1.9; } #draft-save-status { font-size: 11px; color: #5f6368; } .document { padding: 22px; font-size: 13px; } .document h2 { font-size: 21px; } .calendar-footer select { min-width: 0px; } @media (max-width: 800px) { main { padding: 12px 12px 40px; } .calendar-toolbar { padding: 12px; gap: 7px; } .calendar-brand { width: 100%; margin-bottom: 5px; } .calendar-brand h1 { font-size: 18px; } .date-picker { margin-left: 0px; font-size: 0px; } .calendar-toolbar input { width: 142px; font-size: 12px; } .calendar-meta { padding: 8px 12px; display: block; } .calendar-meta span { display: block; } .week-strip { overflow: hidden; } .day-heading { font-size: 10px; } .calendar-footer { display: block; padding: 12px; } .calendar-footer label { display: block; } .calendar-footer select { margin: 7px 0px; width: 100%; max-width: none; } .draft-layout { grid-template-columns: 1fr; } .draft-layout > form { position: static; grid-row: 1; } #draft-editor { min-height: 320px; } #workspace { padding: 22px 0px 0px; } .calendar-grid { height: 330px; } #utility-panel #library-body { display: block !important; } #library-toggle { display: none; } .document { padding: 18px; } .heading > div:last-child { gap: 6px; } } .calendar-viewport { overflow-x: auto; } .calendar-viewport:not(.daily) .week-strip, .calendar-viewport:not(.daily) .calendar-grid { min-width: 760px; } .calendar-grid { overflow-x: hidden; } .calendar-viewport.daily .calendar-event strong { font-size: 13px; } .calendar-viewport.daily .calendar-event small { font-size: 11px; } .calendar-viewport.daily .calendar-event { padding: 6px 10px; } #draft-save { background: var(--blue); border-color: var(--blue); color: #ffffff; } #draft-save:disabled { background: #e8eaed; border-color: #dadce0; color: #5f6368; } #event-detail { padding: 16px 20px; } #event-detail h2 { font-size: 21px; margin: 4px 0px; } #event-detail button { font-size: 11px; padding: 8px 10px; margin: 10px 6px 0px 0px; } .calendar-event.compact small { display: none; } .calendar-event.compact strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; } .calendar-account { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 22px; background: #f0f4f9; border-top: 1px solid var(--line); font-size: 12px; } .calendar-account button { font-size: 11px; padding: 7px 10px; } #account-label { margin-right: auto; } #account-link { width: 100%; font-size: 12px; } #account-link:empty { display: none; } #account-connect { background: #0b57d0; color: #ffffff; } .calendar-viewport.monthly .calendar-grid { height: auto; min-width: 0px; overflow: visible; } .calendar-viewport.monthly .week-strip { min-width: 0px; padding-left: 0px; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: #5f6368; } .monthly .week-strip span { padding: 12px; } .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); } .month-cell { min-height: 132px; min-width: 0px; border-right: 1px solid #e8eaed; border-bottom: 1px solid #e8eaed; padding: 5px 5px 8px; } .month-cell.outside { background: #f0f4f9; } .month-day { display: block; border: 0px; background: none; border-radius: 50%; padding: 4px; width: 29px; height: 29px; font-size: 12px; margin: 0px auto 5px; font-weight: 500; } .month-cell.today .month-day { background: #0b57d0; color: white; } .month-event { display: block; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0px; border-radius: 4px; background: #e8f0fe; padding: 4px 6px; margin-bottom: 3px; font-size: 11px; line-height: 1.5; font-weight: 500; } .month-event.recorded { background: #e8f0fe; color: #0b57d0; } .month-event.ready { background: #ceead6; color: #1f1f1f; } .month-more { border: 0px; padding: 2px 5px; background: none; font-size: 10px; color: #5f6368; } .month-cell small { font-size: 9px; color: #9aa0a6; } .calendar-viewport.monthly { overflow-x: visible; } @media (max-width: 800px) { .month-cell { min-height: 115px; padding: 3px 2px; } .month-event { font-size: 9px; padding: 3px; } .calendar-account { padding: 10px 12px; } .month-more { font-size: 9px; } .calendar-account #account-label { width: 100%; } .monthly .week-strip span { padding: 9px; } } :root { --blue: #0b57d0; --ink: #1f1f1f; --line: #dadce0; background: #f0f4f9; color: #1f1f1f; } header { border: 0px; background: #f0f4f9; padding: 14px 30px; } #notice { background: #e8f0fe; color: #3c4043; } #calendar-section { border: 0px; border-radius: 22px; box-shadow: rgba(60, 64, 67, 0.04) 0px 2px 12px; } .calendar-toolbar { padding: 18px 24px; border-bottom: 1px solid #f1f3f4; } .calendar-icon { border-color: #0b57d0; color: #0b57d0; } .calendar-account { background: #ffffff; padding: 10px 24px; } .calendar-meta { background: #ffffff; border-top: 0px; color: #5f6368; } .calendar-workbench { display: grid; grid-template-columns: minmax(0px, 1fr) 290px; border-top: 1px solid var(--line); } .month-surface { min-width: 0px; } .month-caption { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; } .month-caption h2 { font-size: 21px; margin: 0px; font-weight: 500; } .month-caption span { font-size: 11px; color: #5f6368; } .month-cell { min-height: 115px; padding: 5px 6px; border-color: #f1f3f4; } .month-cell.selected-day { background: #f0f4f9; box-shadow: #dadce0 0px 0px 0px 1px inset; } .month-cell.today .month-day { background: #0b57d0; } .month-cell.outside { color: #9aa0a6; } .month-event { background: #f1f3f4; color: #3c4043; border-radius: 5px; font-weight: 400; } .month-event.recorded { background: #e8f0fe; color: #0b57d0; } .month-event.ready { background: #ceead6; color: #0d652d; } .month-more { color: #3c4043; } #daily-agenda { background: #ffffff; padding: 24px 18px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 1px solid var(--line); min-width: 0px; max-height: 900px; overflow: auto; } #daily-agenda h2 { font-size: 21px; margin: 8px 0px; font-weight: 500; } #agenda-hint { font-size: 11px; color: #80868b; line-height: 1.8; margin: 12px 0px 20px; } .agenda-event { display: block; text-align: left; width: 100%; padding: 15px; background: #ffffff; border: 1px solid #e8eaed; border-radius: 13px; margin: 10px 0px; box-shadow: rgba(60, 64, 67, 0.01) 0px 2px 4px; } .agenda-event small { display: block; color: #80868b; font-size: 11px; } .agenda-event strong { display: block; color: #1f1f1f; line-height: 1.65; font-size: 13px; margin: 8px 0px 12px; } .agenda-event span { display: block; font-size: 10px; color: #0b57d0; } .agenda-event.ready { border-left: 3px solid #5f6368; } .agenda-event.ready span { color: #0d652d; } .calendar-footer { border-top: 1px solid var(--line); } #account-connect, #draft-save, #generate, #publish { background: #0b57d0; border-color: #0b57d0; } #account-connect:hover { background: #0b57d0; } .tabs button[aria-pressed="true"] { color: #0b57d0; border-bottom-color: #0b57d0; } #event-detail { border-radius: 18px; } .document, #draft-form { border-radius: 16px; } .calendar-viewport:not(.monthly) { overflow: auto; } @media (max-width: 1100px) { .calendar-workbench { grid-template-columns: minmax(0px, 1fr) 245px; } .month-cell { min-height: 110px; padding: 4px 2px; } .month-event { font-size: 10px; } } @media (max-width: 850px) { .calendar-workbench { display: block; } #daily-agenda { border-left: 0px; border-top: 1px solid var(--line); max-height: 380px; padding: 18px; } #agenda-events { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; } .agenda-event { margin: 0px; } .month-caption { padding: 14px 16px; } .month-caption h2 { font-size: 19px; } .month-cell { min-height: 106px; } .month-event { font-size: 9px; } .calendar-account { padding: 10px 16px; } .calendar-toolbar { padding: 16px; } .calendar-brand { width: auto; margin-right: auto; } .calendar-brand h1 { font-size: 18px; } } @media (max-width: 450px) { #agenda-events { grid-template-columns: 1fr; } .calendar-brand { width: 100%; } .month-cell { min-height: 100px; } } .production-chooser { padding: 16px 20px; background: #f0f4f9; border-radius: 12px; margin: 18px 0px; } .production-chooser label { margin: 0px 0px 12px; } .production-chooser select { max-width: 360px; } .production-chooser p { font-size: 11px; color: #5f6368; } #brief-save { background: #0b57d0; color: #ffffff; border-color: #0b57d0; } #order-dialog { width: min(700px, 90vw); max-height: 85vh; overflow: auto; border: 1px solid #dadce0; border-radius: 22px; padding: 28px; box-shadow: rgba(32, 33, 36, 0.19) 0px 16px 60px; } #order-dialog::backdrop { background: rgba(32, 33, 36, 0.376); } .order-options { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; margin: 20px 0px; } .order-options button { text-align: left; padding: 16px; border: 1px solid #dadce0; } .order-options button[aria-pressed="true"] { background: #e8f0fe; border-color: #0b57d0; color: #0b57d0; } #order-dialog textarea { min-height: 110px; width: 100%; } #order-quality { background: #f0f4f9; padding: 16px; border-radius: 12px; margin-bottom: 18px; } .order-section { padding: 20px; background: #f0f4f9; border-radius: 16px; margin: 16px 0px; } .order-card { padding: 12px; background: white; border: 1px solid #e8eaed; border-radius: 10px; margin-top: 10px; } .order-card span { display: block; color: #3c4043; font-size: 12px; margin-top: 6px; } #order-submit, #order-open { background: #0b57d0; color: white; } #order-submit:disabled { opacity: 0.5; } :root { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif; color: #1f1f1f; background: #f8f9fa; } body { background: #f8f9fa; font-size: 16px; line-height: 1.65; } header { background: #ffffff; border-bottom: 1px solid #e8eaed; box-shadow: none; padding: 20px 28px; } main { max-width: 1440px; margin: auto; } button, input, select, textarea { font: inherit; } button { min-height: 44px; border-radius: 12px; } button:focus-visible, a:focus-visible { outline: #7cacf8 solid 3px; outline-offset: 3px; } .calendar-brand h1 { font-size: 24px; letter-spacing: -0.04em; } .calendar-icon { display: none !important; } #calendar-section, #workspace { border: 1px solid #e8eaed; border-radius: 24px; box-shadow: rgba(26, 37, 55, 0.024) 0px 8px 32px; background: #ffffff; } .calendar-account { font-size: 14px; background: #f0f4f9; } .calendar-meta { font-size: 14px; } .month-surface { background: #ffffff; } .month-caption h2 { font-size: 28px; letter-spacing: -0.03em; } #daily-agenda { background: #f0f4f9; border-radius: 18px; } .agenda-event { background: white; min-height: 76px; border: 1px solid #e8eaed !important; border-radius: 14px !important; } .heading h2 { font-size: 25px; letter-spacing: -0.03em; } #executive-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0px; } #executive-strip button { background: #f0f4f9; border: 1px solid #e8eaed; padding: 16px; text-align: left; } #executive-strip strong { display: block; font-size: 26px; } #executive-strip span { font-size: 14px; color: #5f6368; } #mode { font-size: 14px; color: #5f6368; } .order-section { background: #f0f4f9; padding: 24px; } .order-section > p { color: #3c4043; font-size: 14px; } .tabs { border-bottom: 1px solid #e8eaed; } .tabs button { font-size: 14px; } #order-dialog { width: min(980px, 94vw); padding: 32px; max-height: 90dvh; border: 1px solid #e8eaed; border-radius: 28px; } #order-title { font-size: 28px; letter-spacing: -0.04em; line-height: 1.3; } .order-options button { display: flex; flex-direction: column; gap: 8px; background: #ffffff; padding: 20px; } .order-options button strong { font-size: 17px; } .order-options button small { font-size: 14px; color: #5f6368; line-height: 1.6; } .order-options button[aria-pressed="true"] { box-shadow: #0b57d0 0px 0px 0px 1px inset; background: #f0f4f9; } #order-quality { background: #f0f4f9; border: 1px solid #e8eaed; } #order-quality > span { font-size: 12px; letter-spacing: 0.16em; color: #5f6368; } #order-quality h3 { margin: 4px 0px 16px; } #order-quality ol { padding-left: 24px; line-height: 2; } #order-quality blockquote { font-size: 14px; margin: 12px 0px; padding: 12px 16px; border-left: 3px solid #7cacf8; background: white; white-space: pre-wrap; max-height: 180px; overflow: auto; } #order-quality p { font-size: 14px; color: #5f6368; } #order-submit { width: 100%; min-height: 52px; position: sticky; bottom: 0px; box-shadow: rgba(26, 115, 232, 0.125) 0px 4px 16px; } .production-chooser { display: none; } #generate { display: none; } @media (max-width: 650px) { header { padding: 14px; } main { padding: 8px; } .calendar-brand h1 { font-size: 20px; } #order-dialog { width: 100%; max-width: 100%; max-height: 94dvh; margin: auto 0px 0px; border-radius: 24px 24px 0px 0px; padding: 22px; } #order-title { font-size: 22px; } .order-options { grid-template-columns: 1fr; } #executive-strip { gap: 6px; } #executive-strip button { padding: 10px; } #executive-strip span { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } .month-cell .month-day { display: flex; align-items: center; justify-content: center; width: 32px; min-width: 32px; max-width: 32px; height: 32px; min-height: 32px; max-height: 32px; aspect-ratio: 1 / 1; padding: 0px; line-height: 1; border-radius: 50%; margin: 2px auto 8px; flex: 0 0 auto; font-size: 14px; color: #3c4043; background: transparent; } .month-cell.today:not(.selected-day) .month-day { color: #0b57d0; background: #e8f0fe; box-shadow: #dadce0 0px 0px 0px 1px inset; } .month-cell.selected-day .month-day, .month-cell.selected-day .month-day:hover { background: #0b57d0; color: #ffffff; box-shadow: rgba(36, 111, 229, 0.15) 0px 3px 8px; } .month-cell.selected-day { background: #f0f4f9; box-shadow: #dadce0 0px 0px 0px 2px inset; } .month-cell.month-blank { background: #ffffff; box-shadow: none; } .month-cell .month-event { min-height: 26px; padding: 4px 7px; font-size: 12px; border-left: 3px solid #bdc1c6; line-height: 1.5; } .month-cell .month-event.recorded { border-left-color: #0b57d0; background: #e8f0fe; color: #0b57d0; } .month-cell .month-event.ready { border-left-color: #0b57d0; background: #e8f0fe; color: #0b57d0; } .month-cell .month-more { min-height: 28px; color: #0b57d0; font-size: 12px; } .calendar-legend { display: inline-flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #5f6368; } .calendar-legend > span { display: inline-flex; align-items: center; gap: 6px; } .calendar-legend > span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0b57d0; } .calendar-legend .legend-recorded::before { background: #a8c7fa; } .calendar-legend .legend-ready::before { background: #0b57d0; } .monthly .week-strip > span:nth-child(7) { color: #0b57d0; } .monthly .week-strip > span:nth-child(1) { color: #80868b; } .month-caption { border-bottom: 1px solid #f1f3f4; } .calendar-toolbar #cal-today { color: #0b57d0; background: #f0f4f9; border-color: #e8eaed; } @media (max-width: 650px) { .month-cell .month-event { font-size: 10px; padding: 3px 4px; } .month-cell .month-more { font-size: 10px; } .month-cell .month-day { margin-bottom: 5px; } .calendar-legend { gap: 10px; } } body { background: #f0f4f9; } header { background: #f0f4f9; border: 0px; min-height: 64px; padding: 12px 24px; } main { max-width: none; padding: 0px 16px 40px; } #calendar-section { background: #f0f4f9; border: 0px; border-radius: 0px; box-shadow: none; } .calendar-toolbar { padding: 14px 12px; gap: 12px; } .calendar-brand { min-width: 210px; } .calendar-brand h1 { font-size: 23px; font-weight: 400; letter-spacing: 0px; } .calendar-toolbar #cal-prev, .calendar-toolbar #cal-next { width: 38px; height: 38px; min-height: 38px; padding: 0px; border: 0px; background: transparent; border-radius: 50%; font-size: 25px; } .calendar-toolbar #cal-today { border: 1px solid #5f6368; border-radius: 22px; background: transparent; color: #1f1f1f; padding: 7px 20px; } #cal-view { border-radius: 22px; width: 86px; } .calendar-layout { display: grid; grid-template-columns: 240px minmax(0px, 1fr); gap: 8px; } .calendar-sidebar { background: transparent; border: 0px; padding: 14px 18px; } .calendar-sidebar #sidebar-today { background: #d3e3fd; border: 0px; border-radius: 16px; color: #041e49; padding: 16px 20px; font-size: 14px; } .calendar-sidebar h2 { font-size: 14px; margin: 28px 0px 12px; font-weight: 600; } .calendar-sidebar h3 { font-size: 14px; margin: 0px 0px 12px; } .sidebar-group { margin-top: 28px; } .sidebar-note { font-size: 12px; color: #5f6368; line-height: 1.8; } .primary-calendar { display: flex; gap: 10px; align-items: center; font-size: 14px; } .calendar-color { width: 16px; height: 16px; border-radius: 4px; background: #0b57d0; } .calendar-workbench { display: flex; flex-direction: column; min-width: 0px; background: #ffffff; border-radius: 24px; overflow: hidden; border: 1px solid #e8eaed; } .month-surface { min-width: 0px; } .month-caption { padding: 16px 24px; } .month-caption h2 { font-size: 24px; font-weight: 400; color: #1f1f1f; } .month-cell { min-height: 140px; border-color: #dadce0 !important; } .month-cell.selected-day { background: #f0f4f9; box-shadow: none; } .month-cell.month-blank { background: #f0f4f9; } .month-cell .month-day { font-size: 12px; width: 28px; min-width: 28px; max-width: 28px; height: 28px; min-height: 28px; max-height: 28px; } .month-cell .month-event { background: transparent; color: #1f1f1f; border-left: 0px; border-radius: 4px; font-weight: 500; } .month-cell .month-event.recorded { background: #e8f0fe; color: #0b57d0; } .month-cell .month-event.ready { background: #ceead6; color: #0d652d; } .monthly .week-strip { border-top: 0px; } .monthly .week-strip span { font-size: 12px; color: #3c4043; padding: 9px 0px; } .calendar-account { background: transparent; border: 0px; padding: 6px 18px; flex-wrap: wrap; } .calendar-meta { font-size: 12px; background: transparent; border: 0px; justify-content: flex-start; flex-wrap: wrap; } #daily-agenda { border-width: 1px 0px 0px; border-style: solid none none; border-color: #dadce0 currentcolor currentcolor; border-image: none; border-radius: 0px; background: #ffffff; padding: 20px 24px; } #agenda-events { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; } .agenda-event { margin: 0px !important; } .calendar-footer { margin-left: 248px; } #mini-calendar { display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 3px; text-align: center; font-size: 11px; } #mini-calendar > span { height: 25px; line-height: 25px; color: #3c4043; } #mini-calendar button { display: flex; align-items: center; justify-content: center; min-height: 25px; height: 25px; width: 25px; padding: 0px; border: 0px; border-radius: 50%; font-size: 11px; background: transparent; font-weight: 400; } #mini-calendar button[aria-pressed="true"] { background: #d3e3fd; color: #041e49; } #notice { background: #e8f0fe; font-size: 12px; } #workspace, #event-detail { margin-top: 20px; } @media (max-width: 1050px) { .calendar-layout { grid-template-columns: 190px minmax(0px, 1fr); } .calendar-sidebar { padding: 14px 6px; } .calendar-brand { min-width: 160px; } .calendar-footer { margin-left: 198px; } #agenda-events { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .month-cell { min-height: 120px; } } @media (max-width: 700px) { .calendar-sidebar { display: none; } .calendar-layout { display: block; } .calendar-footer { margin-left: 0px; } .calendar-brand { min-width: 0px; } .calendar-toolbar { gap: 7px; } .month-cell { min-height: 100px; } .calendar-workbench { border-radius: 16px; } #agenda-events { grid-template-columns: 1fr; } .calendar-account { font-size: 12px; } .calendar-meta { gap: 4px; } .month-caption h2 { font-size: 21px; } } .source-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 12px 0px; overflow-wrap: anywhere; } .source-row input { width: 18px; height: 18px; margin: 0px; flex: 0 0 auto; } #calendar-upgrade { font-size: 12px; color: #0b57d0; background: #e8f0fe; margin-top: 12px; } #sources-toggle { display: none; } @media (max-width: 700px) { #sources-toggle { display: block; } .sources-open .calendar-sidebar { display: block; background: white; border: 1px solid #e8eaed; border-radius: 16px; margin-bottom: 12px; padding: 16px; } .sources-open #mini-calendar, .sources-open #mini-title, .sources-open #sidebar-today { display: none; } .source-row { min-height: 36px; } .calendar-sidebar .sidebar-group { margin-top: 12px; } } .month-cell.month-blank, .month-cell.selected-day { background: #ffffff; box-shadow: none; } .month-cell .month-event.material-status, .calendar-event.material-status, .all-day-event.material-status, .agenda-event.material-status { background: transparent; color: #1f1f1f; border-left-color: transparent; box-shadow: none; } .month-cell .month-event.material-available, .calendar-event.material-available, .all-day-event.material-available, .agenda-event.material-available { background: #feefc3; color: #8a4b00; border-left-color: #f9ab00; } .month-cell .month-event.material-status:hover, .calendar-event.material-status:hover, .all-day-event.material-status:hover, .agenda-event.material-status:hover { background: #f1f3f4; } .month-cell .month-event.material-available:hover, .calendar-event.material-available:hover, .all-day-event.material-available:hover, .agenda-event.material-available:hover { background: #fdd663; } .calendar-legend .legend-material::before { background: #f9ab00; } .month-cell { min-height: 248px; } .month-cell .month-event { min-height: 22px; line-height: 1.5; padding: 2px 6px; margin-bottom: 2px; } .month-cell .month-more { min-height: 24px; padding: 2px 6px; text-align: left; width: 100%; border: 0px; background: transparent; color: #3c4043; font-weight: 400; } .month-cell .month-more:hover { background: #e8f0fe; } #day-popover { position: fixed; inset: auto; margin: 0px; width: 300px; max-width: calc(-16px + 100vw); max-height: calc(100dvh - 16px); padding: 12px 8px 16px; border: 1px solid #dadce0; border-radius: 26px; background: #e8f0fe; color: #1f1f1f; box-shadow: rgba(32, 33, 36, 0.19) 0px 6px 22px; overflow: auto; z-index: 1000; } #day-popover::backdrop { background: transparent; } #day-popover-weekday { text-align: center; color: #3c4043; font-size: 12px; margin: 0px; } #day-popover-title { text-align: center; font-size: 28px; font-weight: 400; margin: 2px 0px 22px; line-height: 1.4; } #day-popover-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; min-height: 32px; border: 0px; border-radius: 50%; background: transparent; padding: 0px; font-size: 24px; color: #3c4043; } #day-popover-close:hover { background: #d3e3fd; } #day-popover-events { display: flex; flex-direction: column; gap: 3px; } .day-popover-event { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0px; border-radius: 6px; background: transparent; padding: 5px 8px; min-height: 30px; color: #1f1f1f; font-size: 13px; } .day-popover-event > span { font-size: 12px; flex: 0 0 38px; font-variant-numeric: tabular-nums; } .day-popover-event > strong { font-weight: 400; overflow-wrap: anywhere; } .day-popover-event.material-available { background: #feefc3; color: #8a4b00; } .day-popover-event:hover { background: #d3e3fd; } .day-popover-event.material-available:hover { background: #fdd663; } @media (max-width: 700px) { .month-cell { min-height: 236px; } .month-cell .month-event { font-size: 10px; min-height: 22px; } #day-popover { width: 290px; } } #request-dialog { width: min(860px, 94vw); max-height: 90dvh; overflow: auto; border: 1px solid #e8eaed; border-radius: 26px; padding: 28px; box-shadow: rgba(32, 33, 36, 0.19) 0px 20px 70px; } #request-dialog::backdrop { background: rgba(32, 33, 36, 0.376); } #request-title { margin: 0px; font-size: 25px; } #request-meta { font-size: 14px; color: #3c4043; } .request-note { padding: 14px 18px; background: #f0f4f9; border-radius: 12px; color: #3c4043; font-size: 14px; } #request-intent { width: 100%; min-height: 130px; box-sizing: border-box; } .request-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0px; } #request-save { background: #0b57d0; color: white; } #request-cancel { margin-left: auto; color: #c5221f; } #request-preview { white-space: pre-wrap; word-break: break-word; background: #f0f4f9; padding: 20px; border-radius: 14px; font-family: inherit; font-size: 14px; line-height: 1.8; max-height: 440px; overflow: auto; } #request-history > div { padding: 14px 0px; border-bottom: 1px solid #e8eaed; } #request-history p { white-space: pre-wrap; } .order-card > button { margin-top: 8px; font-size: 14px; color: #0b57d0; } #request-status { color: #3c4043; font-size: 14px; } @media (max-width: 650px) { #request-dialog { width: 100%; max-width: 100%; max-height: 94dvh; margin: auto 0px 0px; border-radius: 24px 24px 0px 0px; padding: 20px; box-sizing: border-box; } .request-actions button { flex: 1 1 auto; } #request-cancel { margin-left: 0px; } } #rough-section { border: 1px solid #e8eaed; background: #ffffff; margin: 20px 0px; border-radius: 16px; padding: 18px; } #rough-editor { width: 100%; min-height: 280px; box-sizing: border-box; } #rough-note { width: 100%; box-sizing: border-box; } #rough-checks { display: grid; gap: 10px; margin: 18px 0px; } #rough-checks label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } #rough-checks input { width: 18px; min-width: 18px; margin-top: 5px; } #rough-approve { background: #0b57d0; color: #ffffff; } #rough-approve:disabled { background: #e8f0fe; color: #5f6368; } #rough-quality, #rough-state { font-size: 14px; color: #3c4043; } #rough-preview, #rough-history .document { max-height: 450px; overflow: auto; } #rough-status { color: #3c4043; } #rough-history details { margin-top: 12px; } #proposal-section { padding: 20px; background: #f0f4f9; border: 1px solid #e8eaed; border-radius: 16px; margin: 20px 0px; } #proposal-section h3 { margin-top: 0px; } #proposal-section p { font-size: 14px; } #proposal-consent-label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 14px 0px; } #proposal-consent { width: 18px; min-width: 18px; } #proposal-generate { background: #0b57d0; color: white; margin-right: 8px; } #proposal-generate:disabled { background: #d3e3fd; color: #5f6368; } #proposal-questions p { border-left: 3px solid #f9ab00; padding-left: 10px; } #work-delivery-section { border: 1px solid #dadce0; border-radius: 16px; padding: 20px; margin: 20px 0px; background: #f0f4f9; } #work-delivery-section h3 { margin-top: 0px; } .delivery-switch { display: flex; gap: 10px; align-items: center; } .delivery-switch input { width: 18px; min-width: 18px; } #work-delivery-section p { font-size: 14px; } #work-delivery-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14px; background: white; padding: 16px; border: 1px solid #e8eaed; border-radius: 10px; } #work-delivery-send { background: #1f1f1f; color: white; margin-right: 8px; } #work-delivery-send:disabled { background: #e8eaed; color: #5f6368; } .scope-entry { padding: 20px; background: #e6f4ea; border-radius: 16px; margin: 20px 0px; } .scope-entry p { font-size: 14px; } #scope-open, #scope-approve { background: #0b57d0; color: #ffffff; } #scope-dialog { width: min(850px, 94vw); max-height: 92dvh; overflow: auto; border: 1px solid #dadce0; border-radius: 26px; padding: 28px; box-shadow: rgba(32, 33, 36, 0.19) 0px 20px 70px; } #scope-dialog::backdrop { background: rgba(32, 33, 36, 0.396); } #scope-heading { font-size: 24px; } #scope-state { background: #e6f4ea; padding: 14px; border-radius: 12px; } #scope-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #scope-fields label { display: flex; flex-direction: column; font-size: 14px; } #scope-fields textarea { min-height: 110px; width: 100%; box-sizing: border-box; } #scope-dialog textarea { width: 100%; box-sizing: border-box; } #scope-note, #scope-decision-note { min-height: 60px; } #scope-checks { display: grid; gap: 10px; margin: 20px 0px; } #scope-checks label { display: flex; gap: 10px; align-items: center; font-size: 14px; } #scope-checks input { width: 18px; min-width: 18px; } #scope-issues { color: #c5221f; font-size: 14px; } #scope-approve:disabled { background: #e8eaed; color: #5f6368; } #scope-history .document { max-height: 400px; overflow: auto; } @media (max-width: 650px) { #scope-fields { grid-template-columns: 1fr; } #scope-dialog { width: 100%; max-width: 100%; margin: auto 0px 0px; padding: 20px; box-sizing: border-box; border-radius: 24px 24px 0px 0px; } }.evidence-choice{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #dadce0;border-radius:10px;margin:8px 0;font-size:14px;line-height:1.6;cursor:pointer}.evidence-choice:has(input:checked){border-color:#0b57d0;background:#e8f0fe}.evidence-choice input{width:auto;flex-shrink:0;margin-top:5px}.evidence-choice span{overflow-wrap:anywhere} #lp-dialog{width:min(1200px,96vw);max-width:96vw;height:92dvh;max-height:92dvh;padding:18px;background:#f1f3f4}#lp-dialog .lp-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#lp-heading{margin:0 auto 0 0;font-size:18px}#lp-unsaved{font-size:12px;color:#3c4043}#lp-frame{display:block;max-width:100%;width:100%;height:100%;margin:auto;border:1px solid #dadce0;border-radius:10px;background:white;overflow:auto;container-type:inline-size;container-name:lp}@media(max-width:600px){#lp-dialog{padding:10px}} #lp-dialog[open]{display:flex;flex-direction:column}#lp-dialog .lp-body{flex:1;min-height:0;display:flex;gap:14px}#lp-dialog #lp-frame{flex:1;min-width:0;transition:width .2s} #lp-settings{width:280px;flex:none;overflow:auto;display:flex;flex-direction:column;gap:12px;font-size:13px}#lp-settings[hidden]{display:none}#lp-settings .lp-setting-box{background:#ffffff;border:1px solid #dadce0;border-radius:10px;padding:10px 12px}#lp-settings .lp-setting-box h3{font-size:14px;margin:0}#lp-settings label{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-weight:600;color:#1f1f1f}#lp-settings select,#lp-settings input{font:inherit;font-weight:400;padding:7px 8px;border:1px solid #bdc1c6;border-radius:7px;background:#ffffff;min-height:36px}#lp-settings .lp-upload input{padding:5px}.lp-brand{margin:10px 0 0;color:#3c4043;font-size:12px} #lp-checks{background:#ffffff;border:1px solid #dadce0;border-radius:10px;padding:10px 12px}#lp-checks h3{font-size:14px;margin:0 0 8px}#lp-checks ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}#lp-checks li{border-left:4px solid #bdc1c6;padding:4px 0 4px 10px;line-height:1.6}#lp-checks li.error{border-color:#c5221f}#lp-checks li.warn{border-color:#f9ab00}#lp-checks li.info{border-color:#80868b}#lp-checks .lvl{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:0 6px;margin-right:6px;background:#eef2f1}#lp-checks li.error .lvl{background:#fbe3e1;color:#9e2a20}#lp-checks li.warn .lvl{background:#fdf0d8;color:#7a5410} @media(max-width:900px){#lp-dialog .lp-body{flex-direction:column}#lp-settings{width:auto;max-height:38%}} .diff-selects{display:flex;gap:16px;flex-wrap:wrap}.diff-selects label{flex:1;min-width:180px}#diff-content pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.8 ui-monospace,monospace;padding:14px;border-radius:8px;max-height:400px;overflow:auto}#diff-content section{margin:16px 0}#diff-content .diff-added{background:#ceead6;color:#1f1f1f;border-left:3px solid #3c4043}#diff-content .diff-removed{background:#fce8e6;color:#a50e0e;border-left:3px solid #80868b}#diff-content .diff-same{background:#f1f3f4;color:#3c4043}#diff-summary{font-weight:600} #readiness-dialog{width:min(680px,90vw);max-height:85vh;overflow:auto;border:0;border-radius:24px;padding:28px;box-shadow:0 16px 60px #14264030}#readiness-dialog::backdrop{background:#172b4d55}#readiness-steps{padding-left:24px}#readiness-steps li{padding:8px 0}#readiness-steps p{margin:6px 0;color:#3c4043}#paid-state{background:#feefc3;border-radius:12px;padding:14px}#paid-limit{font-size:13px;color:#3c4043} /* Meeting-to-tool discovery, then a focused production brief. */ #order-dialog{width:min(1080px,94vw);background:#ffffff;padding:30px}#order-meeting-name{color:#5f6368;margin:0 0 20px;font-size:14px}.creation-steps{display:flex;gap:24px;padding:15px 0;border-top:1px solid #f1f3f4;border-bottom:1px solid #f1f3f4;color:#80868b;font-size:13px;margin-bottom:28px}.creation-steps [aria-current=step]{color:#0b57d0;font-weight:700}#order-discovery>h3{font-size:25px;letter-spacing:-.04em;margin:12px 0}#order-discovery>p{color:#5f6368}.order-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}.order-options .creation-card{border-radius:20px;padding:15px;gap:12px;min-width:0;transition:box-shadow .15s,border-color .15s}.creation-card:hover,.creation-card:focus-visible{border-color:#0b57d0;box-shadow:0 8px 26px #245dbb14}.creation-card>small{color:#0b57d0!important;font-size:11px!important}.creation-card>p{font-size:13px;line-height:1.7;color:#5f6368;margin:0}.creation-card>blockquote{font-size:12px;color:#5f6368;margin:0;border-left:2px solid #e8eaed;padding:4px 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.creation-card>span:last-child{font-size:13px;color:#0b57d0;margin-top:auto;padding-top:6px;font-weight:650}.creation-mock{background:#e8f0fe;border-radius:12px;padding:18px 22px 0;width:100%;box-sizing:border-box;height:172px;overflow:hidden;flex-shrink:0}.mock-page{background:white;border:1px solid #e8eaed;border-radius:6px 6px 0 0;padding:16px;box-shadow:0 5px 14px #1e426d0d;min-height:180px}.mock-page>small{display:block;font-size:8px!important;color:#80868b!important;letter-spacing:.12em}.mock-page>strong{display:block;font-size:13px!important;line-height:1.5;margin:10px 0}.mock-lines i{display:block;height:3px;background:#e8f0fe;width:90%;margin:5px 0}.mock-lines i:last-child{width:60%}.mock-tiles{display:flex;gap:5px;margin:12px 0}.mock-tiles span{flex:1;background:#f0f4f9;min-height:26px;font-size:8px;color:#1f1f1f;padding:5px;overflow:hidden}.mock-cta{display:inline-block;background:#0b57d0;color:white;padding:5px 12px;border-radius:4px;font-size:8px}.mock-report{background:#ceead6}.mock-proposal{background:#e8f0fe}.mock-lead,.mock-sales{background:#feefc3}.creation-note{font-size:12px!important;color:#80868b!important;line-height:1.7}.creation-build-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;margin-top:20px}.creation-brief{padding:10px 0}.creation-brief>h3{font-size:24px;margin:8px 0 24px}.creation-brief>p{font-size:13px;color:#5f6368}.creation-brief textarea{min-height:190px!important;margin-top:10px;box-sizing:border-box}.creation-next{background:#f0f4f9;border-radius:16px;padding:20px;margin:24px 0;color:#3c4043}.creation-next p{font-size:13px;line-height:1.8}.creation-next small{font-size:12px;line-height:1.8;display:block}#order-submit{width:100%;padding:16px;background:#0b57d0;color:white;border:0;border-radius:12px}#order-submit:disabled{background:#d3e3fd;color:#1f1f1f}#order-quality .creation-mock{height:180px}#order-existing{border-top:1px solid #f1f3f4;margin-top:24px;padding-top:16px}#order-existing:empty{display:none}#order-existing button{display:block;margin:10px 0;color:#0b57d0}.creation-empty{grid-column:1/-1;padding:36px;border:1px dashed #dadce0;border-radius:16px;background:#f0f4f9}.creation-empty p{color:#5f6368;line-height:1.8}.creation-build-grid[hidden],#order-build[hidden],#order-discovery[hidden]{display:none!important}@media(max-width:800px){.order-options{grid-template-columns:repeat(2,minmax(0,1fr))}.creation-build-grid{grid-template-columns:1fr}.creation-steps{gap:12px;font-size:11px}}@media(max-width:540px){#order-dialog{padding:20px}.order-options{grid-template-columns:1fr}.creation-mock{height:150px}.creation-steps{flex-wrap:wrap}#order-title{font-size:22px}} @media(min-width:801px){.order-options:has(>.creation-card:only-child){grid-template-columns:1fr}.order-options>.creation-card:only-child{display:grid;grid-template-columns:270px 1fr;column-gap:28px;align-items:start;padding:24px}.order-options>.creation-card:only-child>.creation-mock{grid-column:1;grid-row:1/6;height:210px}.order-options>.creation-card:only-child>:not(.creation-mock){grid-column:2}.order-options:has(>.creation-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}} #order-submit{position:static;bottom:auto;box-shadow:none}.creation-brief label{display:block} #proposal-tool-dialog{width:min(780px,92vw);max-height:88dvh;overflow:auto;padding:32px;border:1px solid #e8eaed;border-radius:24px;box-shadow:0 16px 70px #193a6026}#proposal-tool-dialog::backdrop{background:#182e4d66}#standalone-brief-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}#standalone-brief-fields label,#meeting-brief-fields label{display:block;font-size:13px;color:#3c4043}#standalone-brief-fields textarea,#meeting-brief-fields textarea{width:100%;box-sizing:border-box;min-height:80px!important;margin-top:8px}#proposal-tool-preview{white-space:pre-wrap;background:#f0f4f9;padding:20px;border-radius:12px;font-size:13px}#proposal-tool-submit{background:#0b57d0;color:white;border:0;border-radius:12px;padding:15px 24px}#proposal-tool-status{color:#c5221f}@media(max-width:600px){#standalone-brief-fields{grid-template-columns:1fr}} #source-selection-dialog{width:min(900px,94vw);max-height:90dvh;overflow:auto;padding:30px;border:1px solid #e8eaed;border-radius:24px}#source-selection-dialog::backdrop{background:#172d4c66}#source-selection-original{width:100%;box-sizing:border-box;min-height:220px;line-height:1.8;font-size:13px}#source-selection-dialog>p{color:#5f6368;font-size:13px;line-height:1.8}.source-actions{display:flex;gap:12px;margin:16px 0}#source-selection-excerpts>div{padding:16px;border-radius:12px;background:#f0f4f9;margin-bottom:12px}#source-selection-excerpts pre{white-space:pre-wrap;max-height:180px;overflow:auto;font-size:13px}#source-selection-save{background:#0b57d0;color:white;border:0;border-radius:12px;padding:14px 22px}#source-selection-status{color:#c5221f!important} .creation-mock{position:relative;padding-top:40px;height:190px}.creation-type-badge{position:absolute;left:12px;top:12px;background:#c5221f;color:#ffffff;border-radius:5px;padding:5px 11px;font-size:12px;font-weight:700;letter-spacing:.03em}.mock-page>strong{font-size:14px!important}.candidate-card-outline{font-size:13px;line-height:1.8;color:#3c4043;margin:0;padding-left:19px}.candidate-branch-label{color:#8a4b00!important;background:#feefc3;padding:7px 10px;border-radius:8px}.creation-forks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border-left:3px solid #e8eaed;padding-left:20px;margin:24px 0}.creation-forks button{display:flex;flex-direction:column;gap:8px;text-align:left;padding:20px;border:1px solid #dadce0;border-radius:14px;background:#ffffff}.creation-forks button[aria-pressed=true]{border-color:#0b57d0;background:#f0f4f9;box-shadow:0 0 0 1px #0b57d0}.creation-forks small{font-size:12px;color:#5f6368}#order-review-body>h3{font-size:27px;line-height:1.5;margin-bottom:12px}#order-review-body>p{color:#5f6368}.candidate-detail-outline{background:#f0f4f9;border:1px solid #e8eaed;padding:22px;border-radius:16px;margin:20px 0}.candidate-detail-outline ol{line-height:2.3;padding-left:23px}.candidate-detail-outline p{font-size:13px;color:#5f6368}#order-review-next{background:#0b57d0;color:#ffffff;border:0;border-radius:12px;padding:15px 25px;margin-top:24px}#order-review-next:disabled{background:#d3e3fd;color:#1f1f1f}#order-review-body blockquote{background:#f0f4f9;margin:12px 0;padding:16px;border-left:3px solid #dadce0;font-size:13px;line-height:1.9;max-height:180px;overflow:auto}#order-review-body input:not([type=radio]){display:block;width:100%;box-sizing:border-box;margin:10px 0;padding:14px}#order-review[hidden]{display:none!important}@media(min-width:801px){.order-options>.creation-card:only-child>.creation-mock{height:230px;grid-row:1/8}}@media(max-width:700px){.creation-forks{grid-template-columns:1fr}#order-review-body>h3{font-size:22px}} /* Calendar menus stay above the calendar without moving the page. */ #event-detail[popover] { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 48px)); overflow: auto; box-sizing: border-box; box-shadow: 0 12px 40px #20212426; } #event-detail[popover]::backdrop { background: #20212414; } body:has(dialog[open]) { overflow: hidden; } /* A candidate previews actual page sections, with room for copy and intent. */ .candidate-card-outline,.candidate-section-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;text-align:left} .candidate-card-outline li,.candidate-section-list li{padding:14px 16px;background:#f0f4f9;border:1px solid #e8eaed;border-radius:10px} .candidate-card-outline li>strong,.candidate-section-list li>strong{display:block;color:#0b57d0;font-size:13px;letter-spacing:.02em;margin-bottom:7px} .candidate-card-outline li>p,.candidate-section-list li>p{margin:0;color:#1f1f1f;font-size:13px;line-height:1.85;white-space:normal} .order-options .creation-card{height:auto;max-height:none;overflow:visible} .order-options .creation-card>strong{font-size:20px;line-height:1.55;white-space:normal} @media(min-width:801px){.order-options:has(.candidate-card-outline){grid-template-columns:repeat(2,minmax(0,1fr))}.order-options:has(>.creation-card:only-child){grid-template-columns:1fr}.order-options>.creation-card:only-child{grid-template-columns:220px 1fr}} .candidate-plan-editor{border:1px solid #dadce0;border-radius:12px;padding:16px;margin:20px 0}.candidate-plan-editor label{display:block;margin:18px 0}.candidate-plan-editor textarea{width:100%;box-sizing:border-box;min-height:240px;font-size:14px;line-height:1.8}.candidate-plan-editor p{font-size:13px;color:#5f6368}.candidate-plan-editor summary{cursor:pointer;color:#0b57d0;font-weight:600} .user-settings-dialog{width:min(1060px,94vw);padding:28px;box-sizing:border-box;max-height:90dvh;overflow:auto;background:#ffffff}.settings-layout{display:grid;grid-template-columns:190px 1fr;gap:30px;margin-top:24px}.settings-layout>nav{display:flex;flex-direction:column;gap:8px}.settings-layout>nav button{text-align:left;border:0;background:#f0f4f9;padding:14px;border-radius:10px}.settings-layout>nav button[aria-current=page]{background:#e8f0fe;color:#0b57d0;font-weight:700}.settings-layout label{display:block;font-size:14px;margin:18px 0}.settings-layout input,.settings-layout textarea,.settings-layout select{display:block;width:100%;box-sizing:border-box;margin-top:8px}.settings-layout textarea{min-height:100px}.settings-layout p{color:#5f6368;line-height:1.8;font-size:13px}.settings-layout pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;background:#f0f4f9;padding:14px;font-size:13px}.connection-tile{border:1px solid #e8eaed;border-radius:14px;padding:20px;margin:14px 0}.connection-tile>span{display:inline-block;margin-left:14px;font-size:12px;color:#0b57d0;background:#e8f0fe;padding:4px 9px;border-radius:12px}.connection-tile li{font-size:13px;line-height:1.9}.user-settings-dialog>label{display:flex;gap:12px;margin:16px 0}.settings-layout details{margin:16px 0}.settings-layout a{font-size:13px}@media(max-width:700px){.settings-layout{grid-template-columns:1fr}.settings-layout>nav{display:grid;grid-template-columns:1fr 1fr}.user-settings-dialog{padding:18px}} .user-settings-dialog{border:1px solid #e8eaed;border-radius:24px;box-shadow:0 20px 70px #172b4d33}.user-settings-dialog::backdrop{background:#172b4d33} /* Readable page previews in the meeting's creation picker. */ .order-options:has(.landing-candidate-card){grid-template-columns:1fr!important} .order-options>.creation-card.landing-candidate-card{display:flex!important;flex-direction:column;align-items:stretch;padding:22px;gap:14px;text-align:left} .landing-type{align-self:flex-start;background:#c5221f;color:#ffffff;border-radius:6px;padding:5px 13px;font-size:12px;font-weight:700} .candidate-landing{border:1px solid #dadce0;border-radius:16px;overflow:hidden;background:#ffffff;color:#1f1f1f;width:100%;box-sizing:border-box;text-align:left;box-shadow:0 10px 30px #253c5910} .landing-browser{background:#f0f4f9;display:flex;justify-content:space-between;gap:16px;padding:12px 20px;color:#1f1f1f;font-size:11px;border-bottom:1px solid #e8eaed} .candidate-landing section{padding:38px 42px;box-sizing:border-box} .candidate-landing section>small{display:block;font-size:11px;letter-spacing:.1em;color:#0b57d0;font-weight:700;margin-bottom:15px} .candidate-landing h3{font-size:29px;line-height:1.5;letter-spacing:-.025em;margin:0 0 16px;white-space:pre-line;color:inherit} .candidate-landing p{font-size:14px;line-height:1.95;margin:0;color:#5f6368;white-space:normal} .candidate-landing .landing-hero{background:radial-gradient(ellipse at 90% 0%,#e8f0fe,transparent 55%),linear-gradient(135deg,#f0f4f9,#e8f0fe);padding:46px 42px} .landing-hero h3{font-size:37px;color:#0b57d0;max-width:750px}.landing-hero p{max-width:680px} .landing-cta{display:inline-block;border-radius:9px;padding:13px 26px;background:#0b57d0;color:#ffffff;font-size:14px;font-weight:700;margin-top:22px;box-shadow:0 5px 12px #2565c525} .landing-workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}.landing-workflow>div{display:flex;flex-direction:column;gap:12px;padding:20px;background:#f0f4f9;border:1px solid #e8eaed;border-radius:12px;font-size:14px;line-height:1.7}.landing-workflow b{color:#0b57d0;font-size:22px;letter-spacing:.04em} .candidate-landing .landing-benefits{background:#f0f4f9}.landing-benefits>div{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.landing-benefits article{background:#ffffff;border-radius:12px;padding:22px;border:1px solid #e8eaed}.landing-benefits h4{font-size:17px;line-height:1.6;margin:0 0 12px;color:#0b57d0}.landing-benefits article p{font-size:13px} .candidate-landing .landing-end{background:#0b57d0;color:#ffffff;text-align:center}.candidate-landing .landing-end>small{color:#a8c7fa}.candidate-landing .landing-end p{color:#a8c7fa;font-size:12px;margin-top:20px}.landing-end .landing-cta{background:#ffffff;color:#0b57d0;margin-top:4px}.candidate-landing>p{padding:16px 24px;font-size:11px;color:#80868b;border-top:1px solid #e8eaed} #order-review-body>.candidate-landing{margin:24px 0} @media(max-width:700px){.candidate-landing section,.candidate-landing .landing-hero{padding:26px 22px}.landing-hero h3{font-size:27px}.candidate-landing h3{font-size:24px}.landing-workflow,.landing-benefits>div{grid-template-columns:1fr}.order-options>.creation-card.landing-candidate-card{padding:12px}.landing-browser{font-size:10px;padding:10px;gap:6px}} .month-grid .month-cell.holiday-day{background:#ceead6}.holiday-name{display:block;max-width:100%;font-size:10px;line-height:1.5;color:#146c2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 5px 3px}.month-grid .holiday-day .month-day{color:#146c2e}.month-grid .holiday-day.selected-day .month-day{color:#ffffff} #order-discovery:has(.landing-candidate-card)>h3,#order-discovery:has(.landing-candidate-card)>h3+p{display:none}#order-dialog:has(.landing-candidate-card) .creation-steps{margin-bottom:18px;padding:10px 0} .candidate-analysis-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0 24px;padding:18px 22px;border:1px solid #e8eaed;border-radius:16px;background:#f0f4f9;color:#1f1f1f}.candidate-analysis-panel strong{font-size:14px}.candidate-analysis-panel p{font-size:13px;margin:6px 0;line-height:1.65}.candidate-analysis-panel small{color:#5f6368;font-size:11px}.candidate-analysis-panel>div:last-child{display:flex;flex-direction:column;gap:10px;flex-shrink:0;max-width:270px}.candidate-analysis-panel button{font-size:12px;padding:9px 14px;border-radius:10px}.candidate-analysis-panel label{font-size:12px}.candidate-analysis-panel[data-state=completed]{background:#e6f4ea;border-color:#bdc1c6}.candidate-analysis-panel[data-state=failed]{background:#fef7e0;border-color:#dadce0}@media(max-width:650px){.candidate-analysis-panel{align-items:stretch;flex-direction:column;gap:10px}.candidate-analysis-panel>div:last-child{max-width:none}} .candidate-analysis-panel{padding:12px 18px;margin:10px 0 18px}.candidate-analysis-panel p{margin:3px 0}.candidate-analysis-panel strong{font-size:13px} .candidate-topic-options{display:grid;gap:8px;width:100%;margin:12px 0}.candidate-topic-options>div{display:flex;align-items:center;gap:12px;border:1px solid #dadce0;border-radius:10px;padding:12px 14px;background:#ffffff}.candidate-topic-options span{flex-shrink:0;color:#5f6368;font-size:11px}.candidate-topic-options strong{font-size:13px!important;margin:0!important;color:#1f1f1f}@media(max-width:600px){.candidate-topic-options>div{align-items:flex-start;flex-direction:column;gap:5px}} .brief-summary{border:1px solid #e8eaed;border-radius:16px;padding:20px;margin:18px 0;background:white}.brief-summary>h3{font-size:16px;margin:0 0 8px}.brief-summary p,.brief-summary dd{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7}.brief-summary>p,.brief-summary>small{color:#5f6368;font-size:11px}.brief-summary dl{margin:14px 0}.brief-summary dt{font-size:11px;color:#5f6368;margin-top:10px}.brief-summary dd{margin:3px 0}.brief-summary-grid{display:grid;gap:10px;margin:14px 0}.brief-summary-grid section{padding:14px;border-radius:10px}.brief-summary-grid h4{font-size:12px;margin:0 0 6px}.brief-summary-grid p{margin:0}.brief-confirmed{background:#e6f4ea;color:#1f1f1f}.brief-unknown{background:#fef7e0;color:#1f1f1f} #production-queue-dialog{width:min(960px,94vw);max-height:88vh;padding:28px;border:1px solid #e8eaed;border-radius:24px;color:#1f1f1f}#production-queue-dialog::backdrop{background:#20304d66}#production-queue-dialog>p{font-size:13px;color:#5f6368}.queue-tools{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.queue-tools input{flex:1;min-width:200px;padding:12px;border:1px solid #dadce0;border-radius:10px}.queue-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.queue-card{padding:20px;border:1px solid #dadce0;border-radius:16px;display:flex;flex-direction:column;gap:10px}.queue-card h3{font-size:16px;line-height:1.6;margin:0;overflow-wrap:anywhere}.queue-card p{font-size:12px;color:#5f6368;margin:0}.queue-card small{font-size:11px;color:#80868b}.queue-card button{margin-top:auto}.queue-state{align-self:flex-start;padding:5px 9px;border-radius:6px;background:#e8f0fe;color:#5f6368;font-size:11px}.queue-card[data-state=sent] .queue-state,.queue-card[data-state=approved] .queue-state{background:#ceead6;color:#1f1f1f}.queue-card[data-state=failed] .queue-state,.queue-card[data-state=delivery_unknown] .queue-state{background:#feefc3;color:#8a4b00}@media(max-width:650px){.queue-list{grid-template-columns:1fr}#production-queue-dialog{padding:18px}} .queue-card .queue-next-action{padding:11px 12px;background:#f0f4f9;border-radius:9px;color:#3c4043;line-height:1.7}.queue-card[data-state=delivery_stopped] .queue-state{background:#feefc3;color:#8a4b00} .intake-record{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid #dadce0;border-radius:12px;margin:12px 0;background:#ffffff}.intake-record p{margin:0;font-size:13px}.intake-record small{font-size:11px;color:#5f6368}.intake-record a{font-size:13px;color:#0b57d0}.intake-record [role=status]{color:#3c4043;overflow-wrap:anywhere} /* Meeting-scoped project briefs: purpose, concrete outline and separate advice. */ .creation-card.project-candidate-card{padding:0;overflow:hidden;text-align:left;border:1px solid #dadce0;background:#ffffff;align-self:start} .project-preview{padding:24px;color:#1f1f1f;white-space:normal;font-weight:400} .project-type{display:inline-block;background:#d93025;color:white;border-radius:5px;padding:5px 10px;font-size:12px;font-weight:700;letter-spacing:.04em} .project-preview>p:first-of-type{color:#5f6368;font-size:14px;font-weight:650;margin:18px 0 6px} .project-preview h3{font-size:23px;line-height:1.45;margin:0 0 18px;color:#1f1f1f;letter-spacing:-.02em} .project-preview p{line-height:1.8;font-size:14px} .project-purpose{padding:16px;border-radius:12px;background:#e8f0fe;border-left:3px solid #0b57d0} .project-purpose small,.project-support small{font-weight:700;letter-spacing:.03em;font-size:12px} .project-purpose p{margin:6px 0 12px}.project-purpose strong{font-size:13px;line-height:1.7;display:block} .project-preview h4{margin:24px 0 10px;font-size:15px} .project-preview .candidate-section-list{padding-left:22px;margin:0}.project-preview .candidate-section-list li{padding:8px 0;border-bottom:1px solid #f1f3f4}.project-preview .candidate-section-list p{margin:5px 0;font-size:13px}.project-preview .candidate-section-list strong{font-size:14px} .project-support{margin-top:20px;padding:16px;background:#feefc3;border-radius:12px}.project-support p{margin:7px 0 0;font-size:13px} .project-preview .project-pending{font-size:12px;color:#5f6368;margin:15px 0 0} .project-metrics{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}.project-metrics span{padding:7px 10px;background:#ceead6;color:#1f1f1f;border-radius:6px;font-size:12px;font-weight:650} .project-candidate-card>small,.project-candidate-card>span:last-child{display:block;margin:0 24px 18px}.project-candidate-card>span:last-child{color:#0b57d0;font-weight:650} @media(max-width:600px){.project-preview{padding:18px}.project-preview h3{font-size:20px}} .order-options:has(.project-candidate-card){grid-template-columns:repeat(2,minmax(0,1fr))} .order-options .creation-card.project-candidate-card{padding:0;display:flex;flex-direction:column;gap:0} @media(max-width:700px){.order-options:has(.project-candidate-card){grid-template-columns:1fr}} /* Workspace shell: keep the Google-style calendar grid and navigation intact. */ body{background:#f0f4f9;color:#1f1f1f;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans JP',sans-serif} body>header{background:#fff;border-bottom:1px solid #e6eaf0;box-shadow:none;padding:17px 28px;gap:10px;flex-wrap:wrap} body>header>strong{margin-right:auto}body>header button{border:1px solid #e1e6ef;border-radius:10px;background:#fff;color:#344157;padding:10px 14px;font-weight:550}body>header #client-register{background:#255ed5;border-color:#255ed5;color:#fff}body>header .brand-logo{width:119px;max-height:40px;object-fit:contain}body>header>strong>span{display:block;font-size:9px;letter-spacing:.14em;margin-top:4px;color:#778398} .workspace-intro{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:20px 32px;background:linear-gradient(112deg,#ffffff 5%,#f0f4f9 90%);border:1px solid #e8eaed;border-radius:22px;padding:28px 32px;margin:8px 0 24px;box-shadow:0 6px 25px #223b6310} .workspace-kicker{font-size:10px!important;font-weight:750;letter-spacing:.18em;color:#80868b!important;margin:0 0 10px!important}.workspace-intro h1{font-size:31px;line-height:1.45;letter-spacing:-.035em;margin:0 0 8px;font-weight:750}.workspace-intro h1 span{color:#0b57d0}.workspace-intro-copy>p{font-size:13px;color:#5f6368;margin:0}.workspace-setup{display:flex;align-items:center;gap:14px;padding:19px;background:#ffffff;border:1px solid #e8eaed;border-radius:16px;box-shadow:0 3px 12px #314c6b08}.setup-mark{display:grid;place-items:center;width:40px;height:40px;background:#e8f0fe;color:#1f1f1f;border-radius:12px;font-size:23px;flex-shrink:0}.workspace-setup strong{font-size:15px}.workspace-setup p{font-size:12px;color:#80868b;margin:6px 0 0}.workspace-setup button{margin-left:auto;flex-shrink:0;background:#0b57d0;color:white;border:none;padding:12px 14px;border-radius:10px;font-weight:650} .workspace-flow{grid-column:1/-1;display:flex;align-items:center;gap:22px;font-size:12px;color:#5f6368;border-top:1px solid #e8eaed;padding-top:16px}.workspace-flow b{color:#0b57d0;margin-right:7px;font-size:11px}.workspace-flow i{color:#9aa0a6;font-style:normal}#client-list:empty{display:none}#client-list{grid-column:1/-1;display:flex;gap:10px;overflow:auto;max-height:90px}#client-list button{display:flex;gap:8px;align-items:center;white-space:nowrap;background:#ffffff;border:1px solid #dadce0;border-radius:10px;padding:10px;color:#1f1f1f}#client-list button>span{padding:5px 9px;border-radius:8px;background:#e8f0fe;color:#0b57d0}#client-list small{color:#80868b;font-size:10px} dialog{border:1px solid #dadce0!important;box-shadow:0 32px 90px #10213e35!important;border-radius:24px!important}dialog::backdrop{background:#15294340;backdrop-filter:blur(4px)}dialog[open]{animation:workspace-reveal .19s ease-out}@keyframes workspace-reveal{from{opacity:0;transform:translateY(12px) scale(.988)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}} #order-dialog>.editor-top,#order-dialog .creation-header{border-bottom:1px solid #e8eaed}#client-dialog{width:min(780px,94vw);max-height:90vh;padding:30px;background:#ffffff;color:#1f1f1f}#client-dialog *{box-sizing:border-box}.client-modal-top{display:flex;align-items:center;justify-content:space-between}.client-modal-top img{width:105px}.client-modal-top button{border:1px solid #dadce0;background:#ffffff;border-radius:9px;padding:8px 14px}.client-eyebrow{font-size:10px;color:#0b57d0;letter-spacing:.2em;font-weight:750;margin:25px 0 8px}#client-dialog h2{font-size:28px;margin:0 0 10px;letter-spacing:-.03em}#client-dialog form>p:not(.client-eyebrow){color:#5f6368;font-size:13px;line-height:1.8} .client-steps{display:flex;gap:8px;padding:18px 0;border-bottom:1px solid #e8eaed;margin-bottom:22px}.client-steps button{flex:1;border:0;border-radius:10px;background:#e8f0fe;padding:13px 7px;color:#1f1f1f;font-size:13px}.client-steps button[aria-current=step]{background:#e8f0fe;color:#0b57d0;font-weight:750}.client-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.client-fields[hidden]{display:none!important}.client-fields label{font-size:13px;font-weight:650;display:flex;flex-direction:column;gap:8px}.client-fields input,.client-fields select,.client-fields textarea{width:100%;border:1px solid #dadce0;border-radius:10px;padding:12px;background:#ffffff;font:inherit;font-weight:400;line-height:1.7;margin:0}.client-fields textarea{min-height:110px;resize:vertical}.client-fields label:has(#client-references){grid-column:1/-1}.client-fields #client-references{min-height:170px}.client-fields>p,.client-reports,.client-fields>div{grid-column:1/-1}.client-fields>p{font-size:13px;color:#80868b;line-height:1.8}.client-fields>button{border:1px solid #dadce0;border-radius:10px;background:#f0f4f9;padding:13px;color:#0b57d0}.client-fields a{display:inline-block;background:#e8f0fe;color:#0b57d0;padding:12px;border-radius:8px}.client-modal-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:22px;margin-top:22px;border-top:1px solid #e8eaed}.client-modal-actions button{padding:12px 20px;border-radius:10px;border:1px solid #dadce0;background:#ffffff}.client-modal-actions button:last-child{background:#0b57d0;color:white;border:0}#client-dialog button:disabled{opacity:.45;cursor:wait}.client-reports{overflow-x:auto}.client-reports table{font-size:11px;width:100%;border-collapse:collapse}.client-reports td,.client-reports th{text-align:left;padding:8px;border-bottom:1px solid #e8eaed;overflow-wrap:anywhere;max-width:220px}.client-reports h4{font-size:14px;margin:14px 0 4px}.client-reports p{font-size:12px;color:#80868b} .client-preflight{background:linear-gradient(100deg,#f0f4f9,#ffffff);border:1px solid #dadce0;border-radius:16px;padding:23px;margin:0 0 25px}.client-preflight>small{color:#0b57d0;font-weight:700}.client-preflight h3{margin:8px 0;font-size:21px}.client-preflight p{font-size:13px;color:#5f6368;line-height:1.7}.client-preflight select{width:100%;padding:13px;border-radius:10px;background:white;border:1px solid #bdc1c6}.client-preflight>button{background:transparent;color:#0b57d0;border:0;padding:12px 0}.client-readiness{display:flex;flex-wrap:wrap;gap:7px}.client-readiness>span{font-size:11px;border-radius:6px;padding:6px 8px}.client-readiness .ready{background:#ceead6;color:#1f1f1f}.client-readiness .missing{background:#feefc3;color:#8a4b00}.client-readiness p{width:100%;margin:5px 0} @media(max-width:1050px){.workspace-intro{grid-template-columns:1fr}.workspace-setup{padding:15px}.workspace-flow{gap:12px}}@media(max-width:600px){.workspace-intro{padding:20px;border-radius:16px}.workspace-intro h1{font-size:25px}.workspace-flow{flex-wrap:wrap;font-size:11px}.workspace-setup{flex-wrap:wrap}.workspace-setup button{margin-left:54px}.client-fields{grid-template-columns:1fr}#client-dialog{padding:20px}#client-dialog h2{font-size:23px}body>header{padding:12px}.client-steps button{font-size:12px}} body>header>strong>span{display:none}body>header>strong{padding-right:10px;min-width:125px}body>header button{font-size:13px;padding:9px 12px}body>header #connections{margin-left:0}body>header{padding:13px 24px;min-height:72px;box-sizing:border-box} #client-dialog .client-fields{margin:0;padding:0;border:0;background:transparent;box-shadow:none}#client-dialog .client-fields label{margin:0;padding:0}#client-dialog .client-modal-actions{position:sticky;bottom:-30px;background:#ffffff;padding-bottom:12px;z-index:1}#client-dialog .client-steps{margin-bottom:18px}#client-dialog .client-eyebrow{margin-top:18px} .workspace-intro{padding:22px 28px;gap:12px 24px}.workspace-intro h1{font-size:28px}.workspace-setup{padding:15px}.workspace-flow{padding-top:12px}#client-list button{padding:6px 10px}#client-list button>span{padding:3px 7px} .client-connection-checks{border:1px solid #e8eaed;border-radius:12px;padding:14px;background:#f0f4f9}.client-connection-checks>p{font-size:12px;margin:0 0 10px;color:#5f6368}.client-service-state{display:flex;gap:12px;align-items:center;font-size:12px;line-height:1.6;padding:8px 10px;background:#e8f0fe;color:#1f1f1f;border-radius:7px;margin:5px 0}.client-service-state strong{min-width:104px}.client-service-state.state-ready{background:#d3e3fd;color:#1f1f1f}.client-service-state.state-stale,.client-service-state.state-error,.client-service-state.state-permission_needed{background:#feefc3;color:#8a4b00}.client-readiness .client-service-state{width:100%} #order-client-dialog{width:min(600px,94vw);padding:28px;background:#ffffff}#order-client-dialog h2{font-size:22px;color:#1f1f1f}#order-client-dialog p{line-height:1.8;color:#5f6368;font-size:13px}#order-client-dialog select{display:block;width:100%;padding:14px;border:1px solid #dadce0;border-radius:10px}#order-client-dialog button{padding:11px 17px;border:1px solid #dadce0;border-radius:10px;background:#f0f4f9;color:#0b57d0}#order-client-open{border:1px solid #dadce0;border-radius:9px;background:#f0f4f9;color:#0b57d0;padding:10px 15px;margin-right:8px} #project-settings-open{margin-left:auto;padding:8px 12px;background:#ffffff;border:1px solid #dadce0;border-radius:9px;color:#0b57d0;font-size:12px;white-space:nowrap}#project-dialog{width:min(850px,94vw);max-height:90vh;padding:28px;background:#ffffff}#project-dialog h2{font-size:24px;color:#1f1f1f}#project-dialog h3{font-size:17px;margin-top:25px}#project-dialog p{font-size:13px;color:#5f6368;line-height:1.8}#project-dialog input,#project-dialog select,#project-dialog textarea{border:1px solid #dadce0;border-radius:9px;padding:11px;box-sizing:border-box}#project-dialog select{width:100%;margin-bottom:15px}.project-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.project-fields label{display:flex;flex-direction:column;gap:8px;margin:0;font-size:13px}.project-fields textarea{min-height:95px;resize:vertical}.project-checklist{display:grid;gap:8px}.project-checklist label{display:flex;align-items:flex-start;gap:10px;background:#f0f4f9;border-radius:9px;padding:10px;margin:0;font-size:13px}.project-checklist input{width:auto;flex-shrink:0;margin-top:3px}.project-meetings{max-height:260px;overflow:auto;margin:12px 0 20px}.project-meetings [hidden]{display:none}.project-preflight{border:1px solid #e8eaed;border-radius:14px;padding:19px;background:#f0f4f9;margin-bottom:18px}.project-preflight h3{font-size:19px;margin:0 0 10px}.project-preflight select{width:100%;padding:12px;border:1px solid #dadce0;border-radius:9px;background:#ffffff}.project-preflight p{font-size:13px;color:#5f6368;line-height:1.8}.project-preflight button{background:#e8f0fe;color:#0b57d0;border:0;border-radius:8px;padding:10px}.project-preflight small{display:block;margin:10px 0;color:#80868b}#project-dialog button{border:1px solid #dadce0;border-radius:9px;padding:11px 16px;background:#f0f4f9;color:#0b57d0}#project-dialog button[type=submit]{background:#0b57d0;color:#ffffff}@media(max-width:650px){.project-fields{grid-template-columns:1fr}.workspace-flow{flex-wrap:wrap}} .project-recurring{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:650;background:#e8f0fe;padding:15px;border:1px solid #e8eaed;border-radius:10px}.project-recurring input{width:auto!important}.project-recurring-preview{background:#f0f4f9;border-radius:10px;padding:15px;margin:12px 0}.project-recurring-preview strong{font-size:14px;color:#0b57d0}.project-recurring-preview details{font-size:12px;max-height:220px;overflow:auto} #meeting-command-summary{margin:20px 0;padding:18px;border:1px solid #dadce0;border-radius:14px;background:#f0f4f9}#meeting-command-summary>h3{font-size:18px;margin:0 0 14px}.meeting-command-state{border-left:3px solid #0b57d0;padding:12px 15px;background:white;margin:8px 0;border-radius:7px}.meeting-command-state p{font-size:13px;line-height:1.8;margin:7px 0}.meeting-command-state small{color:#5f6368}.meeting-command-state.cancelled{border-color:#9aa0a6;color:#80868b}.meeting-command-state.needs_review{border-color:#f9ab00}#meeting-command-summary>p{font-size:12px;color:#5f6368}.ai-command-card{text-align:left} .queue-tools select{padding:10px 12px;border:1px solid #dadce0;border-radius:10px;background:#ffffff;color:#1f1f1f;font:inherit}.queue-card details{font-size:12px;line-height:1.8}.queue-card details p{white-space:pre-wrap;margin-top:8px}.queue-card[data-state=needs_review] .queue-state,.queue-card[data-state=changed] .queue-state{background:#feefc3;color:#8a4b00}.queue-card[data-state=cancelled] .queue-state,.queue-card[data-state=superseded] .queue-state{background:#e8eaed;color:#1f1f1f} .command-clarification{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;margin-top:12px;background:#ffffff;border:1px solid #dadce0;border-radius:14px}.command-clarification label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#3c4043}.command-clarification label:nth-child(-n+2),.command-clarification p{grid-column:1/-1}.command-clarification input,.command-clarification textarea,.command-clarification select{padding:10px;border:1px solid #bdc1c6;border-radius:8px;font:inherit;background:#ffffff}.command-clarification textarea{min-height:90px}.command-clarification button{padding:10px}@media(max-width:600px){.command-clarification{grid-template-columns:1fr}} .generation-inputs{margin:14px 0;padding:16px;border:1px solid #dadce0;border-radius:12px;background:#f0f4f9}.generation-inputs summary{cursor:pointer;font-weight:600;color:#0b57d0}.generation-inputs article{padding:12px 0;border-bottom:1px solid #e8eaed;font-size:12px}.generation-inputs article strong{display:block}.generation-inputs article p{margin:5px 0;color:#5f6368}.generation-inputs .missing strong{color:#b06000} /* Workspace product shell: primary work first, setup on demand. */ :root{--blue:#0b57d0;--ink:#0b57d0;--line:#e8eaed;--muted:#5f6368;background:#f0f4f9} body{background:#f0f4f9;color:var(--ink);-webkit-font-smoothing:antialiased} body>header.app-header{min-height:68px;padding:0 28px;gap:28px;background:#fff;border-bottom:1px solid var(--line)} body>header>strong{min-width:112px;padding:0}.brand-logo{width:110px;height:36px} .app-navigation{display:flex;align-items:center;gap:6px;align-self:stretch} .app-navigation a,.app-navigation button{display:flex;align-items:center;text-decoration:none;padding:0 18px;border:0;border-radius:0;background:transparent;font-size:13px;color:#647084;font-weight:600} .app-navigation a[aria-current]{color:#235ace;box-shadow:inset 0 -3px #2563eb} .header-actions{margin-left:auto;display:flex;align-items:center;gap:14px} body>header #client-register{background:#fff;color:#34445a;border:1px solid #dce3ec;border-radius:8px;padding:8px 13px;white-space:nowrap} .workspace-menu,.workspace-context{position:relative;margin:0;border:0;padding:0;background:transparent} .workspace-menu>summary,.workspace-context>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 0;font-size:13px;font-weight:600;color:#5f6368} .workspace-menu>summary::-webkit-details-marker,.workspace-context>summary::-webkit-details-marker,.calendar-connection>summary::-webkit-details-marker{display:none} .workspace-menu-panel{position:absolute;right:0;top:48px;width:272px;padding:10px;background:#ffffff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 48px #192f5226;z-index:50} .workspace-menu-panel>p{font-size:11px;color:#80868b;padding:4px 10px;margin:0 0 8px}.workspace-menu-panel button{display:block;width:100%;text-align:left;border:0;background:transparent;font-weight:500;padding:11px 10px!important} .workspace-menu-panel #connections{border-top:1px solid var(--line);margin:8px 0 0;padding:12px 4px 4px;flex-wrap:wrap;gap:5px}.connection{font-size:10px;padding:4px 7px} #notice{padding:8px 28px;min-height:0;font-size:12px;background:#e8f0fe;color:#5f6368;line-height:1.65;border-bottom:1px solid #e8eaed} main{padding:0 24px 40px} .workspace-intro{grid-template-columns:1fr auto;background:transparent;box-shadow:none;border:0;border-radius:0;padding:23px 4px 16px;margin:0;gap:18px 24px;align-items:center} .workspace-kicker{font-size:9px!important;letter-spacing:.16em;margin-bottom:5px!important;color:#80868b!important} .workspace-intro h1{font-size:25px;line-height:1.5;letter-spacing:-.04em;margin:0 0 5px}.workspace-intro h1 span{color:#1f1f1f} .workspace-intro-copy>p{font-size:12px;color:#5f6368} .workspace-context>summary{background:#ffffff;border:1px solid #dadce0;padding:10px 14px;border-radius:9px;color:#3c4043;font-size:12px} .workspace-context-panel{position:absolute;right:0;top:50px;width:min(480px,85vw);background:#ffffff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #203a5826;padding:20px;z-index:40} .workspace-setup{padding:0;border:0;box-shadow:none;gap:12px;flex-wrap:wrap}.workspace-setup strong{font-size:14px}.workspace-setup p{font-size:12px}.workspace-setup button{font-size:12px;margin-left:0;padding:9px 13px} #client-list{margin-top:16px;max-height:160px;flex-wrap:wrap}#client-list button{font-size:12px}#client-list small{font-size:11px} .workspace-flow{border:0;padding:12px 0 0;margin-top:8px}.workspace-flow #project-settings-open{margin:0;width:100%;text-align:left;padding:12px} .workspace-journey{grid-column:1/-1;display:flex;align-items:center;gap:14px;color:#5f6368;font-size:12px;padding-top:2px} .workspace-journey>span{display:flex;align-items:center;gap:7px}.workspace-journey b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e8f0fe;color:#1f1f1f;font-size:10px}.workspace-journey span:first-child{color:#0b57d0;font-weight:600}.workspace-journey span:first-child b{background:#e8f0fe;color:#0b57d0}.workspace-journey i{font-style:normal;color:#9aa0a6}.workspace-journey small{margin-left:auto;font-size:11px;display:flex;align-items:center;gap:7px}.workspace-journey em{height:9px;width:9px;background:#fdd663;border:1px solid #fdd663;border-radius:3px} #calendar-section{background:transparent} .calendar-toolbar{padding:12px 6px;gap:9px}.calendar-brand{min-width:210px}.calendar-brand h1{font-size:21px}.calendar-icon{transform:scale(.86)}.calendar-toolbar #tools-toggle{font-size:12px;background:transparent;color:#5f6368;border-color:transparent} .calendar-connection{margin:0 0 12px;padding:0 8px;border:0;background:transparent;box-shadow:none} .calendar-connection>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:11px;color:#80868b;padding:3px 0}.google-mark{font-size:14px;font-weight:750;color:#0b57d0}.connection-disclosure{margin-left:7px;color:#5f6368} .calendar-account{padding:12px 0 4px;font-size:12px}.calendar-meta{padding:8px 0 12px;font-size:11px;gap:12px}.calendar-meta span{overflow-wrap:anywhere} .calendar-layout{grid-template-columns:224px minmax(0,1fr);gap:12px}.calendar-sidebar{padding:10px 12px;background:transparent}.calendar-sidebar #sidebar-today{border-radius:12px;padding:13px 18px;background:#e8f0fe;color:#0b57d0;font-size:13px}.calendar-sidebar h2{margin-top:22px}.sidebar-note{color:#5f6368}.calendar-workbench{border-radius:16px;border:1px solid #dadce0;box-shadow:0 2px 5px #22375504}.month-caption{padding:13px 20px}.month-caption h2{font-size:23px}.calendar-footer{font-size:12px} /* Every dialog uses the same heading, spacing and visible next step. */ dialog{color:#1f1f1f;border-radius:18px!important;border-color:#dadce0!important;scrollbar-width:thin}dialog::backdrop{background:#17253b55;backdrop-filter:blur(3px)} dialog>.editor-top,dialog>form>.editor-top,#production-queue-dialog>.editor-top{position:sticky;top:-30px;z-index:5;background:#ffffff;border-bottom:1px solid #e8eaed;margin:-4px 0 18px;padding:12px 0 16px;align-items:center} dialog .editor-top h2{font-size:23px;line-height:1.5;margin:0}dialog .editor-top .overline{font-size:9px;color:#80868b;margin:0 0 4px;letter-spacing:.12em}dialog .editor-top>button{flex-shrink:0;font-size:12px;font-weight:500;border-color:#dadce0;padding:8px 13px;background:#f0f4f9} #order-dialog{padding:28px;width:min(1100px,95vw)}#order-meeting-name{font-size:13px;margin-bottom:16px;color:#5f6368} .creation-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;border:0;background:#e8f0fe;border-radius:10px;padding:5px!important;margin:0 0 24px;font-size:12px}.creation-steps span{padding:10px 12px;color:#80868b;text-align:center}.creation-steps [aria-current=step]{background:#ffffff;color:#0b57d0;box-shadow:0 1px 4px #293b5912;border-radius:7px} #order-discovery>h3{font-size:21px;margin:8px 0}#order-discovery>p{font-size:13px;line-height:1.8}.order-options{gap:20px;margin:20px 0}.order-options .creation-card{border-radius:14px;border-color:#dadce0;box-shadow:0 2px 6px #22395506;transition:border-color .16s,box-shadow .16s}.order-options .creation-card:hover{border-color:#7cacf8;box-shadow:0 6px 24px #265cba15;background:#ffffff}.creation-card>span:last-child{border-top:1px solid #e8eaed;width:100%;padding-top:14px;margin-top:12px;font-size:13px} .project-preview{padding:24px}.project-preview h3{font-size:24px}.project-purpose{background:#f0f4f9}.candidate-card-outline li,.candidate-section-list li{border-radius:8px;background:#f0f4f9}.creation-type-badge,.project-type,.landing-type{background:#c5221f;letter-spacing:.02em} .creation-empty{border-style:solid;background:#f0f4f9;padding:36px;line-height:1.8}.creation-empty h3{font-size:20px}.candidate-analysis-panel{border-radius:10px;background:#f0f4f9;border-color:#e8eaed} #order-review-next{position:sticky;bottom:-28px;display:block;width:100%;margin-top:24px;border:8px solid #ffffff;border-radius:16px;padding:14px 20px;box-shadow:0 -8px 25px #ffffff;font-size:14px;background:#0b57d0;color:#ffffff} #order-review-back,#order-back{border:0;background:transparent;padding:8px 0;color:#5f6368;font-weight:500}.creation-brief{padding:20px;background:#f0f4f9;border:1px solid #e8eaed;border-radius:14px}.creation-brief>h3{font-size:22px}.creation-next{background:#e8f0fe;border-radius:10px;padding:16px}.creation-brief textarea{background:#ffffff}.queue-card{border-radius:12px;padding:20px;box-shadow:0 2px 5px #26375105}.queue-card h3{font-size:17px}.queue-card p{font-size:13px;line-height:1.7}.queue-state{font-weight:600}.queue-card button{color:#0b57d0;background:#f0f4f9;border-color:#e8eaed} button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bdc1c6;outline-offset:3px} @media(max-width:1050px){body>header.app-header{padding:0 18px;gap:18px}.app-navigation a,.app-navigation button{padding:0 12px}.header-actions{gap:10px}.workspace-intro{grid-template-columns:1fr auto}.calendar-brand{min-width:170px}.calendar-layout{grid-template-columns:200px minmax(0,1fr)}} @media(max-width:760px){body>header.app-header{flex-wrap:wrap;gap:0 14px;padding:10px 16px}.brand-logo{width:90px;height:30px}body>header>strong{min-width:90px}.app-navigation{height:40px}.header-actions{width:100%;justify-content:space-between;border-top:1px solid #edf0f5;margin-top:6px;padding-top:8px}.workspace-menu-panel{top:42px}main{padding:0 12px 24px}#notice{padding:8px 16px}.workspace-intro{grid-template-columns:1fr;padding:20px 4px 14px;gap:12px}.workspace-intro h1{font-size:23px}.workspace-context{justify-self:start}.workspace-context-panel{left:0;right:auto}.workspace-journey{flex-wrap:wrap;gap:8px;font-size:11px}.workspace-journey small{width:100%;margin:4px 0 0}.calendar-layout{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-brand{min-width:0}.calendar-toolbar{gap:7px}.calendar-toolbar .date-picker{margin-left:0}.calendar-connection>summary{flex-wrap:wrap;overflow-wrap:anywhere}#order-dialog{padding:18px}dialog>form>.editor-top,dialog>.editor-top{top:-18px}.creation-steps{font-size:11px;gap:2px}.creation-steps span{padding:9px 3px}.creation-build-grid{grid-template-columns:1fr}#order-review-next{bottom:-18px}.creation-brief{padding:16px}} @media(prefers-reduced-motion:reduce){.creation-card{transition:none!important}} body>header.app-header>strong{margin-right:0} #request-dialog #proposal-section,#request-dialog #work-delivery-section{border:1px solid #e8eaed;border-radius:12px;padding:22px;margin:24px 0;background:#ffffff} #request-dialog #proposal-section>h3,#request-dialog #work-delivery-section>h3{font-size:20px;margin:0 0 10px} #request-dialog #proposal-section>p,#request-dialog #work-delivery-section>p{font-size:13px;line-height:1.8} #request-dialog .request-note{font-size:13px;line-height:1.8;background:#f0f4f9;border-radius:9px;padding:14px} @media(max-width:760px){#sources-toggle{display:block}.sources-open .calendar-sidebar{display:block}body>header.app-header>strong{margin-right:0}} /* Deliverable discovery: concise comparison first, full previews one step deeper. */ #candidate-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:22px 0 14px}#candidate-filters[hidden]{display:none}.candidate-count{font-size:13px;color:#3c4043;margin:0 auto 0 0;font-weight:600}#candidate-filters button{font-size:12px;padding:7px 12px;border-radius:20px;background:#ffffff;border-color:#dadce0;font-weight:500}#candidate-filters button[aria-pressed=true]{background:#e8f0fe;border-color:#e8eaed;color:#0b57d0} #order-options:has(.deliverable-card){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch;gap:18px} #order-options .deliverable-card{display:flex!important;flex-direction:column;padding:22px;gap:14px;text-align:left;border:1px solid #dadce0;border-radius:15px;background:#ffffff;align-self:stretch;min-width:0} #order-options .deliverable-card[hidden]{display:none!important} #order-options .deliverable-card>strong{font-size:20px;line-height:1.6;letter-spacing:-.025em;color:#1f1f1f;margin:0} .deliverable-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.deliverable-heading .project-type{font-size:11px;padding:5px 10px}.deliverable-choice{font-size:11px;background:#feefc3;color:#8a4b00;border-radius:6px;padding:5px 8px} #order-options .deliverable-purpose{font-size:13px;line-height:1.85;color:#5f6368;margin:0;font-weight:400} .deliverable-preview{width:100%;background:#f0f4f9;border:1px solid #e8eaed;border-radius:10px;padding:16px;color:#3c4043;font-weight:400} .deliverable-preview>small{font-size:10px;color:#80868b;letter-spacing:.03em;display:block}.deliverable-preview-row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid #e8eaed}.deliverable-preview-row:last-of-type{border:0}.deliverable-preview-row>b{font-size:11px;color:#0b57d0;padding-top:3px;font-weight:600}.deliverable-preview-row>div{min-width:0}.deliverable-preview-row strong{display:block;font-size:12px;color:#0b57d0;margin-bottom:5px}.deliverable-preview-row p{font-size:12px;line-height:1.8;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .deliverable-preview[data-type=lp]{background:linear-gradient(140deg,#f0f4f9,#ffffff)}.deliverable-preview[data-type=lp] .deliverable-preview-row:first-of-type p{font-size:15px;font-weight:650;color:#3c4043} .deliverable-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:auto;padding-top:16px;border-top:1px solid #e8eaed}.deliverable-footer small{font-size:11px;color:#80868b;font-weight:400}.deliverable-footer span{font-size:13px;color:#0b57d0;white-space:nowrap} #order-discovery>h3{font-size:18px!important}#candidate-analysis-host{margin-top:24px}.candidate-analysis-panel{box-shadow:none}.creation-note{margin-top:18px} #order-options .deliverable-card:only-child{max-width:760px;grid-column:1/-1;width:100%;justify-self:center}#order-options .deliverable-card:only-child .deliverable-preview-row p{-webkit-line-clamp:4} #order-review-body>.candidate-landing{box-shadow:0 5px 24px #213c5410}.candidate-detail-outline{background:#ffffff}.candidate-plan-editor{background:#ffffff}.candidate-plan-editor summary{padding:4px 0} #event-detail{border-radius:16px!important;box-shadow:0 20px 70px #1e36542b!important}#event-detail>h2{font-size:23px;line-height:1.55}#event-detail>p{line-height:1.8;color:#5f6368}#event-detail>button{padding:13px 18px;border-radius:10px} @media(max-width:720px){#order-options:has(.deliverable-card){grid-template-columns:1fr!important}#order-options .deliverable-card{padding:18px}#order-options .deliverable-card>strong{font-size:18px}.candidate-count{width:100%;margin-bottom:4px}.deliverable-footer{flex-wrap:wrap}} #order-dialog>form>.editor-top{padding-top:4px;padding-bottom:12px;margin-bottom:12px}#order-dialog .creation-steps{margin-bottom:18px}#order-meeting-name{margin-bottom:12px}#order-discovery>h3{margin:4px 0}#order-discovery>h3+p{margin:6px 0;font-size:12px}#candidate-filters{margin:16px 0 10px}#order-options{margin-top:12px}.deliverable-heading .deliverable-open{margin-left:auto;color:#0b57d0;font-size:12px;font-weight:650}.deliverable-heading .deliverable-choice{order:3}#order-options .deliverable-card:only-child{max-width:none}.deliverable-preview-row{padding:10px 0} #order-review-body>h3{font-size:24px;margin:12px 0}#order-review-body>p{font-size:13px;line-height:1.8}.creation-forks{margin:16px 0;gap:12px}.creation-forks button{padding:16px}#order-review-body>p:first-child{display:inline-block;background:#c5221f;color:white;font-size:11px;padding:4px 10px;border-radius:5px;margin:12px 0 0} @media(min-width:900px){#order-options .deliverable-card:only-child .deliverable-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#order-options .deliverable-card:only-child .deliverable-preview>small{grid-column:1/-1}#order-options .deliverable-card:only-child .deliverable-preview-row{border-bottom:0;border-right:1px solid #e8eaed;padding:2px 12px 2px 0}#order-options .deliverable-card:only-child .deliverable-preview-row:last-of-type{border:0;padding-right:0}#order-options .deliverable-card:only-child .deliverable-preview-row p{-webkit-line-clamp:5;font-size:12px}} #request-guide{margin:16px 0 24px;padding:20px;border:1px solid #e8eaed;background:#f0f4f9;border-radius:14px}#request-guide[data-state=sent]{background:#e6f4ea;border-color:#dadce0}#request-guide[data-state=cancelled]{background:#f8f9fa;border-color:#dadce0}.request-progress{display:flex;list-style:none;padding:0 0 16px;margin:0 0 18px;border-bottom:1px solid #e8eaed;gap:16px;counter-reset:progress}.request-progress li{counter-increment:progress;display:flex;align-items:center;gap:7px;font-size:12px;color:#80868b}.request-progress li:before{content:counter(progress);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#d3e3fd;font-size:10px}.request-progress li.complete:before{content:'✓';background:#d3e3fd;color:#0b57d0}.request-progress li[aria-current]{color:#0b57d0;font-weight:650}.request-progress li[aria-current]:before{background:#0b57d0;color:white}#request-guide>div{display:flex;gap:20px;align-items:center;justify-content:space-between}#request-guide h3{font-size:18px;margin:0 0 8px;line-height:1.6}#request-guide p{font-size:12px;line-height:1.8;color:#5f6368;margin:0}#request-guide button{flex-shrink:0;font-size:12px;background:#0b57d0;color:#ffffff;border:0;padding:11px 15px}#request-dialog :is(#rough-preview,#rough-editor,#proposal-section,#work-delivery-section){scroll-margin-top:100px} @media(max-width:650px){#request-guide{padding:16px}.request-progress{gap:8px;flex-wrap:wrap}.request-progress li{font-size:11px}#request-guide>div{flex-direction:column;align-items:stretch}#request-guide button{width:100%}} #request-dialog>form>.editor-top{display:grid;grid-template-columns:1fr auto;gap:12px}#request-section-nav{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;padding-top:6px}#request-section-nav button{border:0;border-radius:7px;padding:8px 12px;font-size:12px;background:#e8f0fe;color:#3c4043;font-weight:500}#request-section-nav button:hover{background:#e8f0fe;color:#0b57d0}#request-dialog :is(#rough-preview,#rough-editor,#proposal-section,#work-delivery-section,#request-intent,#scope-open){scroll-margin-top:160px} #request-unsaved{position:sticky;bottom:-28px;z-index:6;padding:13px 18px;border:1px solid #9aa0a6;border-radius:9px;background:#feefc3;color:#8a4b00;font-size:12px;box-shadow:0 -4px 20px #253a4d10}#request-unsaved[hidden]{display:none}.queue-empty{grid-column:1/-1;text-align:center;padding:42px 24px;background:#f0f4f9;border:1px solid #e8eaed;border-radius:14px}.queue-empty h3{font-size:19px;margin:0 0 12px}.queue-empty p{font-size:13px;line-height:1.8;color:#5f6368}.queue-empty button{margin-top:12px;background:#0b57d0;color:#ffffff;border:0;font-size:13px}.queue-tools select{width:auto;flex:1;min-width:180px} /* Creation-first workspace: warm neutral surfaces, deep teal actions. */ :root{--blue:#0b57d0;--ink:#1f1f1f;--line:#dadce0;--muted:#5f6368;background:#f1f3f4}body{background:#f1f3f4;color:#1f1f1f}body>header.app-header{background:#fff;border-color:#e3e8e3}.app-navigation a[aria-current]{color:#116c62;box-shadow:inset 0 -3px #137c72}.workspace-intro h1 span{color:#0b57d0}#notice{background:#f1f3f4;color:#1f1f1f;border-color:#e8eaed}.workspace-intro{padding-top:23px}.workspace-journey{display:none}.workspace-kicker{color:#80868b!important}.workspace-context>summary{border-color:#dadce0;color:#3c4043}.workspace-setup button,#request-guide button,#order-submit:not(:disabled),#order-review-next:not(:disabled){background:#0b57d0}.app-navigation a{white-space:nowrap} #creation-feed{margin:0 0 42px;padding:18px 4px 28px;border-bottom:1px solid #dadce0;scroll-margin-top:20px}.feed-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.feed-heading h2{font-size:24px;color:#1f1f1f;margin:0}.feed-heading p:not(.workspace-kicker){font-size:13px;line-height:1.8;color:#5f6368;margin:7px 0 0}.feed-heading button{font-size:12px;background:white;border-color:#dadce0;color:#1f1f1f;padding:10px 16px}.feed-controls{display:flex;align-items:end;gap:12px;margin:20px 0 12px}.feed-controls label{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#5f6368;margin:0}.feed-controls label:first-child{flex:1}.feed-controls input,.feed-controls select{margin:0;padding:12px 15px;border:1px solid #dadce0;border-radius:10px;background:#ffffff;color:#1f1f1f;font-size:13px;min-height:44px;box-sizing:border-box}.feed-controls select{min-width:190px}#feed-status{font-size:11px;color:#80868b;margin:10px 0 18px}#feed-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.feed-item{min-width:0;border:1px solid #dadce0;border-radius:16px;overflow:hidden;background:#ffffff;box-shadow:0 3px 12px #273e3006}.feed-source{padding:16px 21px;background:#e8eaed;border-bottom:1px solid #dadce0}.feed-source time{font-size:11px;letter-spacing:.03em;color:#3c4043;font-weight:650}.feed-source h3{font-size:14px;font-weight:600;line-height:1.65;margin:5px 0 0;color:#1f1f1f}.feed-item>.deliverable-card{display:flex;flex-direction:column;gap:14px;padding:22px;background:#ffffff;border:0;border-radius:0;text-align:left;width:100%;height:calc(100% - 87px);box-shadow:none}.feed-item>.deliverable-card:hover{background:#ffffff}.feed-item .deliverable-card>strong{font-size:20px;color:#1f1f1f;line-height:1.6}.feed-item .deliverable-purpose{font-size:12px;line-height:1.85;color:#5f6368;margin:0}.feed-item .deliverable-preview{background:#f1f3f4;border-color:#dadce0}.feed-item .deliverable-preview-row p{-webkit-line-clamp:2}.feed-item .deliverable-preview-row strong{color:#3c4043}.feed-item .deliverable-open,.feed-item .deliverable-footer span{color:#0b57d0}.feed-item .project-type{background:#d93025}.feed-item .deliverable-preview-row{border-color:#dadce0}.feed-item .deliverable-preview-row>b{color:#80868b}.feed-item .deliverable-footer{border-color:#dadce0}.feed-empty{grid-column:1/-1;background:#ffffff;border:1px dashed #bdc1c6;border-radius:14px;padding:30px;text-align:center;color:#3c4043}.feed-empty h3{font-size:18px}.feed-empty p{font-size:13px;color:#5f6368;line-height:1.8}.feed-empty button,#feed-more{background:#ffffff;border-color:#bdc1c6;color:#3c4043;font-size:13px}#feed-more{display:block;margin:24px auto 0;padding:12px 28px}#feed-more[hidden]{display:none}#calendar-section{padding-top:8px}.calendar-workbench{box-shadow:none}.creation-steps [aria-current=step]{color:#0b57d0}.deliverable-footer span,.deliverable-heading .deliverable-open{color:#0b57d0}#request-guide{background:#f1f3f4;border-color:#dadce0}.request-progress li[aria-current]{color:#0b57d0}.request-progress li[aria-current]:before{background:#0b57d0} @media(min-width:1500px){#feed-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){#feed-cards{grid-template-columns:1fr}.feed-heading h2{font-size:21px}.feed-heading{align-items:flex-start}.feed-heading button{white-space:nowrap;padding:8px}.feed-controls{flex-wrap:wrap}.feed-controls label{width:100%}.feed-controls select{width:100%}.feed-source{padding:14px 18px}.feed-item>.deliverable-card{padding:18px;height:auto}.workspace-intro h1{font-size:23px}} .workspace-intro{padding-top:14px;padding-bottom:10px}.workspace-intro h1{font-size:23px}.workspace-intro-copy>.workspace-kicker{display:none}#creation-feed{padding-top:10px}.feed-heading .workspace-kicker{display:none}.feed-heading h2{font-size:21px}.feed-controls{margin-top:14px}.feed-source{padding:12px 20px}.feed-item>.deliverable-card{height:auto}.feed-item{display:flex;flex-direction:column}.feed-item>.deliverable-card{flex:1}.feed-item .deliverable-heading{flex-wrap:wrap}.feed-item .deliverable-choice{font-size:10px}.feed-item .deliverable-preview-row p{font-size:12px}.feed-item .deliverable-preview{padding:14px} /* Neutral product palette and dense, readable production cards. */ :root{--blue:#0b57d0;--ink:#1f1f1f;--line:#e8eaed;--muted:#5f6368;background:#f8f9fa}body{background:#f8f9fa;color:#1f1f1f}body>header.app-header{background:#fff;border-bottom:1px solid #e7e8ed}.app-navigation a[aria-current]{color:#3454f5;box-shadow:inset 0 -3px #3454f5}.workspace-intro h1,.workspace-intro h1 span{color:#1f1f1f}#notice{background:#e8f0fe;border-color:#e8eaed;color:#1f1f1f}.workspace-context>summary{background:#ffffff;border-color:#dadce0;color:#3c4043}.workspace-intro{padding:15px 4px 6px}.workspace-intro h1{font-size:22px}.workspace-intro-copy>p{color:#80868b;font-size:12px}.feed-heading h2{color:#1f1f1f;font-size:20px}.feed-heading p:not(.workspace-kicker){color:#80868b;font-size:12px}.feed-heading button{color:#3c4043;border-color:#dadce0}.feed-controls{gap:10px;margin:14px 0 10px}.feed-controls input,.feed-controls select{color:#3c4043;border-color:#dadce0;border-radius:8px;padding:10px 12px;min-height:40px}.feed-controls select{min-width:145px}.feed-controls label{color:#80868b}.feed-controls input::placeholder{color:#9aa0a6}#feed-status{font-size:11px;color:#80868b;margin:8px 0 14px}#creation-feed{border-color:#dadce0}#feed-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch} .feed-item{border:1px solid #e8eaed;border-radius:12px;box-shadow:0 2px 4px #252a3d03;background:#ffffff;transition:border-color .15s,box-shadow .15s}.feed-item:hover{border-color:#bdc1c6;box-shadow:0 5px 18px #303f7b0b}.feed-source{padding:11px 15px;background:#ffffff;border-bottom:1px solid #f1f3f4}.feed-source time{font-size:10px;color:#80868b;font-weight:500;letter-spacing:0}.feed-source h3{font-size:12px;color:#5f6368;line-height:1.5;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-compact{display:flex;flex-direction:column;gap:10px;width:100%;padding:15px;border:0;border-radius:0 0 12px 12px;background:#ffffff;text-align:left;flex:1;font-weight:400}.feed-compact:hover:not(:disabled){background:#ffffff;border:0}.feed-card-labels{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.feed-type{color:#0b57d0;background:#e8f0fe;font-size:10px;padding:4px 7px;border-radius:5px;font-weight:650}.feed-state{font-size:10px;color:#80868b;margin-left:auto}.feed-item[data-phase=review] .feed-state{color:#e37400}.feed-item[data-phase=sent] .feed-state{color:#3c4043}.feed-item[data-phase=active] .feed-state{color:#80868b}.feed-compact h3{font-size:16px;line-height:1.6;letter-spacing:-.02em;color:#1f1f1f;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feed-purpose{font-size:12px;line-height:1.75;color:#5f6368;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feed-outline{border-left:2px solid #e8eaed;padding-left:10px;margin:0}.feed-outline p{font-size:11px;line-height:1.65;color:#80868b;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feed-outline p:last-child{margin-bottom:0}.feed-action{font-size:11px;color:#0b57d0;border-top:1px solid #f1f3f4;padding-top:11px;margin-top:auto;width:100%;font-weight:600}.feed-empty{background:#ffffff;border-color:#dadce0;color:#3c4043}.feed-empty p{color:#80868b}.feed-empty button,#feed-more,#feed-orders-more{background:#ffffff;border:1px solid #dadce0;color:#5f6368;font-size:12px;border-radius:8px;padding:10px 20px}#feed-orders-more{display:block;margin:18px auto 0}#feed-orders-more[hidden]{display:none} .workspace-setup button,#request-guide button,#order-submit:not(:disabled),#order-review-next:not(:disabled){background:#0b57d0;color:#ffffff}.creation-steps [aria-current=step],.deliverable-footer span,.deliverable-heading .deliverable-open{color:#0b57d0}#request-guide{background:#f0f4f9;border-color:#e8eaed}.request-progress li[aria-current]{color:#0b57d0}.request-progress li[aria-current]:before{background:#0b57d0}.project-type,.landing-type,.creation-type-badge{background:#0b57d0}.workspace-kicker{color:#9aa0a6!important}#calendar-section{background:transparent}.calendar-workbench{border-color:#e8eaed}.workspace-journey b{background:#e8f0fe} @media(min-width:1650px){#feed-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1050px){#feed-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.feed-controls{flex-wrap:wrap}.feed-controls label:first-child{flex-basis:100%}.feed-controls label:not(:first-child){flex:1}.feed-controls select{width:100%}}@media(max-width:640px){#feed-cards{grid-template-columns:1fr}.feed-controls label{width:auto}.feed-controls label:first-child{width:100%}.feed-controls select{min-width:0}.feed-heading h2{font-size:19px}.feed-compact{padding:14px}.feed-source{padding:10px 14px}} @media(prefers-reduced-motion:reduce){.feed-item{transition:none}} .workspace-intro-copy>p{display:none}.workspace-intro{padding-top:14px;padding-bottom:4px}.feed-heading>div>p{display:none}.feed-controls{margin-top:12px}.feed-source time{font-size:11px}.feed-source{padding:10px 14px}.feed-compact{gap:9px;padding:14px}.feed-outline p{-webkit-line-clamp:1}.feed-purpose{font-size:12px}.feed-card-labels .feed-state{font-size:10px}.feed-action{padding-top:9px}#creation-feed{margin-bottom:30px} /* Drive-style organization without changing the familiar calendar controls. */ .library-toolbar{display:flex;align-items:center;justify-content:space-between;margin:14px 0 10px;font-size:12px;color:#5f6368;font-weight:600}.library-toolbar button{background:transparent;border:0;font-size:12px;color:#0b57d0;padding:7px 10px}#library-folders{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 20px}.library-folder{display:flex;align-items:flex-start;flex-direction:column;gap:9px;padding:14px 15px;background:#ffffff;border:1px solid #dadce0;border-radius:10px;min-width:0;text-align:left;font-weight:400;box-shadow:0 1px 3px #24305403}.library-folder>span:not(.library-folder-icon){display:flex;justify-content:space-between;gap:8px;width:100%;align-items:center}.library-folder strong{font-size:13px;color:#3c4043;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.library-folder small{font-size:11px;color:#80868b;font-variant-numeric:tabular-nums}.library-folder p{font-size:10px;color:#80868b;line-height:1.5;margin:0}.library-folder-icon{display:block;width:29px;height:20px;border-radius:2px 4px 4px 4px;background:#bdc1c6;position:relative;margin-top:4px}.library-folder-icon:before{content:'';position:absolute;left:0;top:-4px;width:12px;height:6px;border-radius:3px 3px 0 0;background:inherit}.library-folder[aria-pressed=true]{background:#e8f0fe;border-color:#dadce0}.library-folder[aria-pressed=true] strong{color:#0b57d0}.library-folder[aria-pressed=true] .library-folder-icon{background:#7cacf8}.library-breadcrumb{display:flex;align-items:center;gap:9px;color:#80868b;font-size:12px;margin:4px 0 5px}.library-breadcrumb strong{color:#1f1f1f;font-size:15px}#library-description{font-size:11px;line-height:1.6;color:#80868b;margin:0 0 12px}.library-organize{font-size:11px;padding:8px 14px;border:0;border-top:1px solid #f1f3f4;border-radius:0 0 12px 12px;color:#1f1f1f;background:#ffffff;text-align:right;font-weight:500}.library-organize:hover:not(:disabled){background:#e8f0fe;color:#0b57d0}.library-snapshot-note{font-size:10px;color:#9aa0a6;padding:8px 14px;line-height:1.5}.feed-compact{border-radius:0}.feed-card-labels>span:last-child:not(.feed-state):not(.feed-type){font-size:10px;color:#80868b}.feed-action{padding-top:7px}.feed-compact{padding-bottom:12px}#library-move-dialog,#library-create-dialog{width:min(520px,94vw);padding:25px;background:#ffffff}#library-move-dialog h2,#library-create-dialog h2{font-size:21px}#library-move-dialog p,#library-create-dialog p{font-size:13px;color:#80868b;line-height:1.8}#library-move-dialog label,#library-create-dialog label{display:block;font-size:13px;color:#3c4043;margin:20px 0}#library-move-dialog select,#library-create-dialog input{display:block;width:100%;padding:12px;margin-top:9px;border:1px solid #dadce0;border-radius:8px;background:#ffffff;font:inherit}#library-move-save,#library-create-save{width:100%;background:#0b57d0;color:#ffffff;border:0;border-radius:8px;padding:12px;font-size:13px}.workspace-intro-copy h1{font-size:20px}.feed-heading h2{font-size:18px}.feed-heading button{font-size:11px;padding:8px 12px}#rough-history{scroll-margin-top:170px} @media(max-width:1050px){#library-folders{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){#library-folders{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.library-folder{padding:12px}.library-folder p{font-size:10px}.library-toolbar{margin-top:12px}} /* Compact workspace: content first, organization one click away. */ .workspace-intro{display:none}.feed-heading{padding:12px 0 4px;gap:16px}.feed-heading>div:first-child{margin-right:auto}.feed-heading h2{font-size:24px;letter-spacing:-.035em}.feed-heading>div>p:not(.workspace-kicker){display:block;font-size:12px;margin:5px 0 0;color:#5f6368}.workspace-context>summary{padding:9px 12px}.library-toolbar{margin:10px 0 8px}.library-toolbar button{padding:5px 8px}#library-folders{gap:9px;margin-bottom:14px}.library-folder{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 10px;padding:13px 12px;align-items:center}.library-folder-icon{grid-row:1/3;width:25px;height:18px;margin:0}.library-folder p{grid-column:2;color:#5f6368}.library-folder small{color:#5f6368}.library-breadcrumb{margin:0;display:inline-flex}#library-description{display:inline;margin-left:15px;font-size:10px;color:#80868b}.feed-controls{margin:12px 0 7px}.feed-controls input,.feed-controls select{min-height:36px;padding:8px 11px}#feed-status{margin:7px 0 12px}.feed-source time{color:#5f6368}.feed-outline p{color:#5f6368}.feed-state{color:#5f6368}.feed-action{color:#0b57d0}.library-organize{color:#5f6368}.feed-item[data-phase=review]{border-top:3px solid #f9ab00}.feed-item[data-phase=sent]{border-top:3px solid #5f6368}.feed-item[data-phase=new]{border-top:3px solid #0b57d0} @media(max-width:760px){.feed-heading{flex-wrap:wrap}.feed-heading>div:first-child{width:100%}.feed-heading h2{font-size:22px}.workspace-context{margin-right:auto}.workspace-context-panel{left:0;right:auto}#library-description{display:block;margin:6px 0 0}#library-folders{display:flex;overflow-x:auto;padding:4px 0 8px;scroll-snap-type:x proximity}.library-folder{min-width:170px;scroll-snap-align:start}.feed-heading>div>p:not(.workspace-kicker){font-size:11px}} .feed-heading h2{margin:0}.feed-heading{min-height:60px}.library-toolbar{margin:4px 0 6px}.library-toolbar button{min-height:30px}.feed-controls label{font-size:0;gap:0}.feed-controls input,.feed-controls select{font-size:12px}.feed-controls{margin-top:10px}.library-breadcrumb strong{font-size:13px}#library-folders{margin-bottom:10px}#library-description{font-size:11px}.feed-heading>div>p:not(.workspace-kicker){line-height:1.6}.feed-type{background:#f0f4f9;color:#0b57d0}.feed-item[data-phase=review] .feed-state{color:#8a4b00;background:#feefc3;border-radius:4px;padding:3px 5px} @media(max-width:760px){.library-toolbar button{min-height:44px}.feed-controls input,.feed-controls select{min-height:44px;font-size:14px}} /* Side-by-side writing and preview, with an explicit unsaved state. */ #request-dialog{width:min(1100px,95vw)}.rough-live-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;margin:18px 0}.rough-edit-column{min-width:0}.rough-edit-column>label{display:block;font-size:13px;font-weight:600;margin:0 0 10px;color:#3c4043}#rough-editor{min-height:420px;height:58vh;resize:vertical;font-size:13px;line-height:1.85;background:#ffffff;border:1px solid #dadce0;border-radius:10px;padding:16px}.rough-live-column{min-width:0;border:1px solid #e8eaed;border-radius:10px;background:white;overflow:hidden}.rough-live-heading{padding:12px 16px;border-bottom:1px solid #f1f3f4;display:flex;align-items:center;gap:8px;justify-content:space-between}.rough-live-heading h4{margin:0;font-size:13px;color:#3c4043}#rough-live-state{font-size:10px;color:#5f6368}#rough-live-state[data-dirty=true]{color:#8a4b00;background:#feefc3;border-radius:4px;padding:4px 6px}#rough-live-preview{height:calc(58vh - 68px);min-height:345px;overflow:auto;border:0;border-radius:0;padding:20px;font-size:13px;background:white}#rough-live-preview h1,#rough-live-preview h2{font-size:20px;line-height:1.55}.rough-live-note{font-size:10px!important;padding:8px 16px;margin:0!important;color:#80868b;border-top:1px solid #f1f3f4}#rough-section>summary{font-size:17px;color:#1f1f1f}#rough-section{padding:20px;border:1px solid #e8eaed;background:#ffffff;border-radius:12px}#request-section-nav{gap:6px}#request-section-nav button{font-size:12px}#work-delivery-section{border:1px solid #e8eaed;border-radius:12px;padding:22px;background:#ffffff}#work-delivery-destination{font-weight:600;color:#3c4043} @media(max-width:760px){.rough-live-layout{grid-template-columns:1fr}#rough-editor{height:280px;min-height:240px}#rough-live-preview{height:320px;min-height:200px}#rough-section{padding:12px}#request-section-nav{flex-wrap:wrap}#request-section-nav button{padding:8px;font-size:11px}} .client-step-hint{padding:12px 16px;background:#f0f4f9;border-left:3px solid #0b57d0;border-radius:6px;color:#5f6368;font-size:13px!important;line-height:1.8}.client-readiness button{border:1px solid #dadce0;border-radius:8px;font-size:12px;padding:9px 12px;background:white;color:#5f6368;cursor:pointer}.client-readiness button.missing{background:#fef7e0;border-color:#bdc1c6;color:#8a4b00}.client-readiness button.ready{background:#f0f4f9;color:#0b57d0}.client-readiness button:hover{box-shadow:0 2px 8px #304b7512;border-color:#9aa0a6}.client-modal-actions{flex-wrap:wrap}.client-modal-actions button:last-child:not([hidden]){background:#0b57d0;color:white;border-color:#0b57d0}.client-modal-actions button:disabled{opacity:.45}#client-dialog .client-fields label{color:#3c4043}#client-dialog .client-fields input,#client-dialog .client-fields textarea{background:#ffffff;border-color:#dadce0}#client-dialog .client-steps button[aria-current=step]{background:#e8f0fe;color:#0b57d0;border-color:#bdc1c6} .feed-list-toolbar{display:flex;align-items:center;justify-content:space-between;margin:10px 0 0;color:#5f6368;font-size:12px}.feed-list-toolbar>span{font-weight:600}.feed-list-toolbar label{display:flex;align-items:center;gap:8px;font-size:11px;color:#80868b}.feed-list-toolbar select{font:inherit;font-size:12px;color:#5f6368;background:transparent;border:0;padding:7px 3px;cursor:pointer}.feed-list-toolbar select:focus-visible{outline:2px solid #7cacf8;border-radius:4px}#feed-status{margin-top:3px} .library-saved-open{font-size:11px;color:#5f6368;background:white;border:0;border-top:1px solid #f1f3f4;border-radius:0;padding:9px 14px;text-align:right}#saved-idea-dialog{width:min(800px,94vw);padding:28px;background:white}#saved-idea-dialog h3{font-size:23px;color:#1f1f1f;line-height:1.6}#saved-idea-dialog p,#saved-idea-dialog li{font-size:13px;line-height:1.9;color:#5f6368}#saved-idea-dialog li{padding:8px 0}.saved-idea-note{padding:12px 16px;background:#fef7e0;border-radius:8px}.saved-idea-current{display:block;width:100%;background:#0b57d0;color:white;margin-top:22px;padding:13px;border:0;border-radius:8px}#saved-idea-dialog blockquote{font-size:13px;line-height:1.9;color:#5f6368;border-left:3px solid #bdc1c6;padding-left:14px;margin:16px 0} /* EXTAGE FLOW: a calm production desk, with organization in the margin. */ :root{--blue:#0b57d0;--ink:#0b57d0;--muted:#5f6368;--line:#d3e3fd}body{background:#f0f4f9;color:#1f1f1f}body>header.app-header{padding:0 28px}body>header>strong{display:flex;align-items:center;gap:13px}.product-wordmark{display:inline-block!important;font-size:17px!important;font-weight:700;letter-spacing:.14em;color:#304569;border-left:1px solid #dce2ec;padding-left:13px}.brand-logo{width:91px}.app-navigation a[aria-current]{color:#375bd2;box-shadow:inset 0 -2px #375bd2}.feed-heading{padding:19px 0 14px}.feed-heading h2{font-size:27px;color:#1f1f1f;letter-spacing:-.04em}.feed-heading>div>p:not(.workspace-kicker){color:#5f6368;font-size:12px}.production-layout{display:grid;grid-template-columns:195px minmax(0,1fr);gap:22px;margin-top:22px}.production-sidebar{min-width:0;padding:2px 14px 0 0;border-right:1px solid #e8eaed}.production-main{min-width:0}.library-toolbar{flex-wrap:wrap;margin:0 0 12px;gap:5px}.library-toolbar>span{font-size:11px}.library-toolbar button{font-size:11px;padding:4px 0}#library-folders{display:flex;flex-direction:column;gap:5px}.library-folder{grid-template-columns:21px minmax(0,1fr);border:0;background:transparent;padding:12px 10px;box-shadow:none;border-radius:8px}.library-folder-icon{width:19px;height:14px;background:#9aa0a6}.library-folder-icon:before{width:9px;top:-3px;height:4px}.library-folder p{font-size:10px;color:#80868b}.library-folder strong{font-size:12px}.library-folder[aria-pressed=true]{background:#e8f0fe}.library-folder[aria-pressed=true] strong{color:#0b57d0}.library-folder[aria-pressed=true] .library-folder-icon{background:#0b57d0}#library-description{display:block;margin:5px 0 0;color:#80868b;font-size:10px}#workflow-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}#workflow-overview button{display:flex;align-items:center;gap:13px;text-align:left;background:white;border:1px solid #e8eaed;border-radius:11px;padding:16px;font-weight:400;min-width:0}#workflow-overview button>strong{font-size:26px;line-height:1;font-weight:650;color:#0b57d0;font-variant-numeric:tabular-nums}#workflow-overview b{display:block;font-size:12px;color:#3c4043}#workflow-overview small{display:block;font-size:10px;color:#80868b;margin-top:5px}#workflow-overview button>span:last-child{margin-left:auto;color:#9aa0a6}#workflow-overview button[aria-pressed=true]{border-color:#9aa0a6;background:#f0f4f9}#workflow-overview button[data-phase=review]>strong{color:#e37400}#workflow-overview button[data-phase=sent]>strong{color:#3c4043}.feed-list-toolbar{margin-top:4px}.feed-controls{margin-top:10px}.feed-controls select{min-width:110px}#feed-cards{gap:12px}.feed-compact h3{font-size:15px}.feed-item{border-radius:10px}.feed-item[data-phase=new]{border-top:2px solid #9aa0a6}.feed-source{background:#ffffff}.feed-source h3{color:#5f6368}.feed-state{font-size:10px}.feed-purpose{color:#5f6368}.feed-outline p{color:#80868b}.feed-type{background:#e8f0fe;color:#5f6368}#notice{background:#e8f0fe;color:#1f1f1f;font-size:11px}.library-breadcrumb>span:first-child{display:none}.library-breadcrumb>span:nth-child(2){display:none} @media(max-width:1100px){.production-layout{grid-template-columns:170px minmax(0,1fr);gap:15px}#feed-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.feed-controls label:first-child{flex-basis:100%}#workflow-overview button{padding:12px;gap:9px}#workflow-overview small{font-size:9px}}@media(min-width:1650px){#feed-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:760px){.product-wordmark{font-size:13px!important}.production-layout{display:block;margin-top:16px}.production-sidebar{border:0;padding:0}.production-main{margin-top:12px}#library-folders{flex-direction:row;overflow:auto}.library-folder{min-width:155px;background:#ffffff}.library-toolbar{justify-content:space-between}.library-toolbar button{min-height:36px}#workflow-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#workflow-overview button{min-height:70px}.feed-heading h2{font-size:24px}#feed-cards{grid-template-columns:1fr}.feed-heading{padding-top:14px}#workflow-overview small{font-size:10px}} .feed-list-toolbar label{margin:0;width:auto;white-space:nowrap;flex-shrink:0}.feed-list-toolbar select{width:auto;min-width:0;min-height:30px;margin:0;padding:5px 4px}.feed-list-toolbar{min-height:32px}.feed-heading{padding-top:14px}.production-layout{margin-top:17px}.feed-source time{font-size:10px}#workflow-overview button:hover{border-color:#9aa0a6;background:#ffffff} /* Counts always name their unit; actions lead the overview. */ .workflow-count-scope{grid-column:1/-1;margin:0;font-size:11px;color:#5f6368;line-height:1.65}#workflow-overview{gap:9px 12px}#workflow-overview button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:15px 16px}#workflow-overview button>b{font-size:13px;color:#3c4043}#workflow-overview button>.workflow-count{font-size:13px;line-height:1.5;font-weight:600;color:#5f6368}#workflow-overview button>small{margin:0;font-size:11px;line-height:1.65;color:#80868b}#workflow-overview button[data-phase=review]>.workflow-count{color:#b06000}#workflow-overview button[data-phase=sent]>.workflow-count{color:#3c4043}.library-folder small{white-space:nowrap}#workflow-overview button[aria-pressed=true]>b{color:#0b57d0} #feed-active-filters{display:flex;gap:7px;flex-wrap:wrap;margin:7px 0 10px}#feed-active-filters[hidden]{display:none}#feed-active-filters button{border:1px solid #dadce0;background:#e8f0fe;color:#5f6368;font-size:11px;padding:7px 10px;min-height:32px;border-radius:6px;font-weight:500;max-width:100%;overflow-wrap:anywhere}#feed-active-filters button:last-child{color:#0b57d0}#request-unsaved{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px}#request-unsaved[hidden]{display:none}#request-unsaved span{margin-right:auto;font-size:12px}#request-unsaved button{background:white;border:1px solid #9aa0a6;color:#b06000;border-radius:7px;padding:8px 10px;font-size:12px}#request-form input:focus-visible,#request-form textarea:focus-visible,#feed-search:focus-visible{outline:2px solid #7cacf8;outline-offset:2px}.feed-compact:focus-visible{outline:3px solid #0b57d0;outline-offset:-3px}.library-folder:focus-visible{outline-offset:-2px}#request-save,#rough-save{scroll-margin:180px 0 90px}button:disabled{cursor:not-allowed} #my-office{padding:30px 4px 24px;border-bottom:1px solid #dfe6f1;scroll-margin-top:20px}.office-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.office-eyebrow{font-size:10px;letter-spacing:.14em;color:#6b80a3;margin:0 0 8px}.office-heading h1{font-size:34px;letter-spacing:-.04em;margin:0;color:#253957}.office-heading p:last-child{font-size:13px;color:#6c7e97;margin:8px 0 0}.office-heading>button{background:#355dd0;border:0;color:white;border-radius:9px;padding:13px 18px;font-size:13px}.office-layout{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(250px,1fr);gap:22px}.office-team-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.office-team-heading h2{margin:0;font-size:15px;color:#344c71}.office-team-heading>span{font-size:11px;color:#8995a8}#office-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.office-agent{padding:20px;border:1px solid #d9e3f0;background:white;border-radius:14px;display:flex;flex-direction:column;min-width:0;box-shadow:0 4px 15px #273f6805}.office-agent-heading{display:flex;gap:12px;align-items:center}.office-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#edf2ff;color:#4268bd;font-size:23px;font-weight:700}.office-agent-heading small{font-size:10px;color:#7890b2}.office-agent h3{font-size:19px;margin:4px 0 0;color:#2c4265}.office-agent p{font-size:13px;color:#5b6d86;line-height:1.8}.office-agent .office-output{font-size:11px;padding-top:12px;border-top:1px solid #edf1f6;margin-top:auto}.office-agent-status{font-size:10px;color:#8290a4;line-height:1.7}.office-agent>button{margin-top:15px;width:100%;background:#f0f4fd;border:1px solid #dce5f5;color:#3d60a7;border-radius:8px;font-size:12px;padding:11px}.office-knowledge{background:#eaf0f9;border:1px solid #dfe7f3;border-radius:14px;padding:22px}.office-knowledge-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:white;color:#6581b0;font-weight:700}.office-knowledge h2{font-size:17px;line-height:1.7;color:#344e77;margin:14px 0 8px}.office-knowledge p{font-size:12px;line-height:1.8;color:#63799b}.office-knowledge button{display:block;text-align:left;font-size:11px;color:#3e64a2;background:transparent;border:0;padding:9px 0}.office-knowledge>small{display:block;font-size:10px;color:#7a8ba5;line-height:1.8;margin-top:14px}.office-shortcuts{display:flex;gap:12px;margin-top:17px}.office-shortcuts>a,.office-shortcuts>button{flex:1;display:flex;align-items:center;justify-content:space-between;text-decoration:none;font-size:12px;color:#536b91;background:white;border:1px solid #e0e6ef;padding:13px 16px;border-radius:9px}#office-status{font-size:10px;color:#8391a7;line-height:1.7;margin:11px 0 0}#office-catalog{width:min(950px,94vw);padding:28px;background:white}#office-catalog>p{font-size:12px;color:#6a7e9b;line-height:1.8}#office-catalog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.office-catalog-card{padding:20px;border:1px solid #dfe6f0;border-radius:12px}.office-catalog-card h3{font-size:18px;color:#334c71;margin:8px 0}.office-catalog-card small{font-size:11px;color:#7f90a9}.office-catalog-card p{font-size:12px;line-height:1.8;color:#60748f}.office-catalog-card button{display:block;width:100%;margin-top:17px;background:#eef3ff;color:#4266ad;border:1px solid #d7e3f6;border-radius:8px;padding:10px}.office-catalog-card button:disabled{background:#f3f4f7;color:#22303f}#creation-feed{scroll-margin-top:15px}@media(max-width:850px){.office-layout{grid-template-columns:1fr}.office-knowledge{padding:18px}.office-shortcuts{flex-wrap:wrap}.office-shortcuts>a,.office-shortcuts>button{min-width:220px}.office-heading h1{font-size:29px}.app-header{flex-wrap:wrap}}@media(max-width:600px){#office-catalog-list{grid-template-columns:1fr}.office-heading{align-items:flex-start;flex-wrap:wrap}#my-office{padding-top:20px}} /* My Office: spatial entry, with a direct task inspector. */ #my-office{padding:26px 0 20px}.office-heading{margin-bottom:20px}.office-heading h1{font-size:32px}.office-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.office-world{background:#f1f5fa;border:1px solid #dde5ef;border-radius:22px;overflow:hidden;box-shadow:0 12px 36px #25395708}.office-world-toolbar{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#ffffffd9}.office-world-toolbar>div{display:flex;align-items:center;gap:9px;font-size:13px;color:#30455f}.office-building-mark{display:grid;place-items:center;background:#30486c;color:white;width:26px;height:26px;border-radius:8px;font-size:13px}.office-world-toolbar>button{border:1px solid #dae3ed;background:white;color:#516680;border-radius:8px;padding:7px 11px;font-size:11px}.office-floor-nav{display:flex;gap:5px;padding:12px 20px 0}.office-floor-nav button{background:transparent;border:1px solid transparent;color:#708099;border-radius:9px;padding:9px 12px;font-size:11px;display:flex;gap:9px}.office-floor-nav button[aria-pressed=true]{background:white;color:#345bb9;border-color:#dce4f0;box-shadow:0 3px 8px #24365008}.office-floor-nav button span{font-weight:600}.office-scene{position:relative;isolation:isolate;aspect-ratio:1672/941}.office-scene>img{display:block;width:100%;height:100%;object-fit:cover}.office-scene-caption{position:absolute;left:23px;top:15px;z-index:1;display:grid;gap:5px;pointer-events:none}.office-scene-caption>span{font-size:10px;letter-spacing:.12em;color:#536a8b;font-weight:700}.office-scene-caption>small{font-size:10px;color:#71819b}.office-person{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:transparent!important;display:flex;flex-direction:column;align-items:center;z-index:2;width:128px;filter:drop-shadow(0 5px 6px #48608014);cursor:pointer}.office-person svg{width:92px;height:108px;transition:transform .18s ease;overflow:visible}.office-person:hover svg,.office-person:focus-visible svg{transform:translateY(-6px)}.office-person-name{white-space:nowrap;display:block;padding:6px 12px;background:#fff;border:1px solid #d3deed;border-radius:8px;font-size:11px;color:#334861;box-shadow:0 3px 9px #33486110;font-weight:700}.office-person.selected .office-person-name{background:#365fb8;color:white;border-color:#365fb8}.office-person>small{background:#f7fafde8;border-radius:0 0 7px 7px;padding:3px 8px;font-size:9px;color:#657891}.office-person.unplaced svg{opacity:.55}.office-world-footer{display:flex;justify-content:space-between;gap:10px;padding:13px 20px;border-top:1px solid #e0e7f0;font-size:10px;color:#74849b}.office-world-footer>span:last-child{font-size:8px;letter-spacing:.12em}.office-desk{display:grid;gap:13px}#office-inspector{padding:19px;background:white;border:1px solid #dce5ef;border-radius:18px}#office-inspector .office-portrait{float:right;width:61px;height:67px;margin:-5px -5px 0 5px;background:#f2f5fa;border-radius:16px}.office-portrait svg{width:60px;height:67px}#office-inspector>small{display:block;color:#8290a2;font-size:10px;line-height:1.7}#office-inspector h2{font-size:21px;color:#2d4260;margin:7px 0 12px}#office-inspector>p{font-size:12px;line-height:1.9;color:#677a94;clear:both}.office-result{padding:12px;background:#f5f7fb;border-radius:9px;margin:14px 0}.office-result small,.office-result strong{display:block}.office-result small{font-size:9px;color:#7b8ea9;margin-bottom:6px}.office-result strong{font-size:12px;color:#425a79;line-height:1.7}.office-primary{width:100%;border:0;border-radius:10px;background:#365fb8;color:white;padding:12px 8px;font-size:12px;margin-bottom:9px}.office-primary:disabled{background:#edf1f6;color:#22303f}.office-knowledge{padding:16px 18px;background:#f0f4fa;border:1px solid #e2e9f2;border-radius:16px}.office-knowledge-icon{float:right;width:24px;height:24px;font-size:12px}.office-knowledge h2{font-size:13px;margin:0 0 8px}.office-knowledge p{font-size:11px;margin:0 0 4px}.office-knowledge button{font-size:11px;padding:6px 0}.office-knowledge>small{font-size:9px;margin-top:7px}.office-shortcuts{margin-top:12px}.office-shortcuts>a,.office-shortcuts>button{font-size:11px;padding:12px}#office-team{padding:22px;min-height:280px;grid-template-columns:1fr;align-content:start}#office-team[hidden],.office-scene[hidden]{display:none!important}.office-list-agent{display:flex;align-items:center;gap:15px;text-align:left;background:white;border:1px solid #dae3ee;border-radius:12px;padding:12px}.office-list-agent[aria-pressed=true]{border-color:#597dc5;background:#f8faff}.office-list-agent svg{width:55px;height:64px;flex-shrink:0}.office-list-agent strong,.office-list-agent small{display:block}.office-list-agent strong{font-size:15px;color:#334d71}.office-list-agent small{font-size:11px;color:#7789a3;margin-top:5px;line-height:1.7}.office-floor-nav button:focus-visible,.office-person:focus-visible,.office-list-agent:focus-visible{outline:3px solid #7195de;outline-offset:3px}@media(min-width:1500px){.office-workspace{grid-template-columns:minmax(0,1fr) 320px}.office-person svg{width:110px;height:128px}}@media(max-width:1000px){.office-workspace{grid-template-columns:minmax(0,1fr) 250px}.office-person svg{width:72px;height:84px}.office-scene-caption{top:10px;left:16px}}@media(max-width:800px){.office-workspace{grid-template-columns:1fr}.office-desk{grid-template-columns:1fr 1fr}.office-scene{min-height:290px}.office-person svg{width:83px;height:96px}.office-world-footer>span:last-child{display:none}}@media(max-width:480px){.office-desk{grid-template-columns:1fr}.office-floor-nav{padding:10px 8px 0;gap:0}.office-floor-nav button{padding:8px;font-size:10px;gap:5px}.office-scene{min-height:250px}.office-person{width:100px}.office-person svg{width:65px;height:75px}.office-person-name{font-size:10px;padding:5px 8px}.office-scene-caption>small{display:none}}@media(prefers-reduced-motion:reduce){.office-person svg{transition:none}} /* One company / one shared office. Walking is ambient, never a processing indicator. */ .office-workspace{--company-color:#4569a2;grid-template-columns:minmax(0,1fr) 300px}.office-world{background:color-mix(in srgb,var(--company-color) 13%,white);border-color:color-mix(in srgb,var(--company-color) 25%,white)}.office-company-brand{min-width:0}.office-company-brand>img{width:84px;height:auto;max-height:36px;object-fit:contain}.office-company-brand>img[hidden],#office-company-monogram[hidden]{display:none}.office-company-brand label{display:grid;gap:4px;font-size:9px;color:#7b8492}.office-company-brand select{max-width:210px;border:0;background:transparent;color:#32405b;font-weight:700;font-size:13px;padding:2px}.office-company-brand #office-company-monogram{width:37px;height:37px;background:var(--company-color);color:white;border-radius:11px;display:grid;place-items:center;font-size:13px}.office-view-actions{display:flex;gap:5px}.office-view-actions button{font-size:10px;padding:7px;border:1px solid #dfe5eb;border-radius:7px;color:#67758c;background:white}.office-company-strip{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;color:var(--company-color);font-size:11px;font-weight:600}.office-company-strip label{display:flex;align-items:center;gap:8px;font-size:9px;color:#748198}.office-company-strip input{width:26px;height:23px;padding:0;border:0;background:transparent;cursor:pointer}.office-scene{background:var(--company-color)}.office-scene:after{content:'';position:absolute;inset:0;background:var(--company-color);opacity:.13;mix-blend-mode:color;pointer-events:none}.office-scene-caption{background:#ffffffdc;border-radius:8px;padding:7px 10px;top:12px;left:14px}.office-scene-caption>small{display:none}.office-person{width:110px}.office-person svg{width:74px;height:87px}.office-person.selected .office-person-name{background:var(--company-color);border-color:var(--company-color)}.office-person-name{font-size:10px;padding:5px 9px}.office-person>small{font-size:8px}.person-position-0{left:31%;top:70%}.person-position-1{left:52%;top:67%}.person-position-2{left:73%;top:65%}.walking.person-position-0{animation:office-walk-a 25s linear infinite}.walking.person-position-1{animation:office-walk-b 29s linear infinite}.walking.person-position-2{animation:office-walk-c 33s linear infinite}.walking .person-leg{transform-box:fill-box;transform-origin:50% 0;animation:office-step .6s ease-in-out infinite alternate}.walking .person-leg.right{animation-delay:-.6s}.walking .person-body{animation:office-bob .6s ease-in-out infinite alternate}.office-person:hover,.office-person:focus-visible,.motion-paused .office-person{animation-play-state:paused}.office-person:hover *,.office-person:focus-visible *,.motion-paused .office-person *{animation-play-state:paused!important}.office-person:hover svg{transform:none}.office-board{border:1px solid color-mix(in srgb,var(--company-color) 25%,white);background:#fffefa;border-radius:18px;padding:17px;box-shadow:0 5px 18px #38465907}.office-board-heading{display:flex;justify-content:space-between;align-items:center}.office-board-heading small{font-size:8px;letter-spacing:.1em;color:var(--company-color)}.office-board-heading h2{font-size:18px;color:#33445c;margin:5px 0 10px}.office-board-heading>span{font-size:10px;color:#798798}.office-board-date{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8a93a0;border-bottom:1px solid #ebeae3;padding-bottom:10px}.office-board-date input{font-size:11px;border:0;background:transparent;color:#65758b;padding:3px;width:130px}#office-board-items{max-height:175px;overflow:auto;padding:8px 0}#office-board-items>p{font-size:11px;color:#8a94a2;margin:13px 0}.office-board-task{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #f1eee7;font-size:12px;color:#536278;line-height:1.6}.office-board-task input{width:16px;height:16px;flex-shrink:0;margin:2px 0;accent-color:var(--company-color)}.office-board-task.done span{text-decoration:line-through;color:#99a3ae}.office-board-note{font-size:9px;color:#9b9fa8;line-height:1.7;display:block;margin-top:8px}#office-task-form{display:flex;gap:5px}#office-task-form input{min-width:0;width:100%;font-size:10px;padding:9px;border:1px solid #e5e6e7;border-radius:7px;background:white}#office-task-form button{border:0;border-radius:7px;background:var(--company-color);color:white;padding:6px 11px}#office-board-status{font-size:10px;color:#6b8199;margin:5px 0}.office-primary{background:var(--company-color)}.office-knowledge{padding:14px}.office-portrait svg{width:53px}.office-world-footer{background:#ffffff88}.office-scene>img{mix-blend-mode:luminosity;opacity:.95} @keyframes office-walk-a{0%,12%,100%{left:29%;top:68%}40%,52%{left:39%;top:77%}75%,82%{left:24%;top:76%}}@keyframes office-walk-b{0%,10%,100%{left:52%;top:72%}38%,50%{left:59%;top:65%}73%,83%{left:47%;top:78%}}@keyframes office-walk-c{0%,15%,100%{left:74%;top:70%}43%,53%{left:67%;top:78%}76%,85%{left:79%;top:75%}}@keyframes office-step{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}@keyframes office-bob{from{transform:translateY(0)}to{transform:translateY(-1.5px)}} @media(max-width:1050px){.office-workspace{grid-template-columns:minmax(0,1fr) 270px}.office-world-toolbar{padding:13px;gap:8px;flex-wrap:wrap}.office-company-brand select{max-width:170px}}@media(max-width:800px){.office-workspace{grid-template-columns:1fr}.office-desk{grid-template-columns:1fr 1fr}.office-board{grid-column:1/-1}.office-person svg{width:65px;height:76px}.office-scene{min-height:290px}}@media(max-width:480px){.office-desk{grid-template-columns:1fr}.office-person svg{width:52px;height:61px}.office-person-name{font-size:8px;padding:4px 5px}.office-person{width:80px}.office-scene{min-height:235px}.office-company-brand>img{width:67px}}@media(prefers-reduced-motion:reduce){.office-person,.office-person *{animation:none!important}} .office-scene>img{mix-blend-mode:normal;opacity:1}.office-scene:after{opacity:.21}.office-company-strip{gap:10px;flex-wrap:wrap}.office-logo-upload{cursor:pointer}.office-logo-upload input{width:85px;font-size:8px!important}.office-person:focus-visible{z-index:8}.office-person:hover{z-index:8} /* Rendered character assets: named employees, distinct silhouettes and materials. */ .office-character-art{display:block;object-fit:contain;width:190px;height:190px;pointer-events:none;filter:drop-shadow(0 7px 4px #293f5522)}.office-person{width:130px}.office-person-name{font-size:12px;padding:6px 16px;border-radius:9px 9px 0 0;box-shadow:none}.office-person>small{font-size:9px;background:#fff;color:#687c96;border:1px solid #dce3ee;border-top:0;border-radius:0 0 9px 9px;min-width:105px;text-align:center;padding:4px 8px;box-sizing:border-box}.office-portrait{float:none!important;width:100%!important;height:160px!important;background:linear-gradient(145deg,#f0f3f9,#fcfaf6)!important;margin:0 0 15px!important;border-radius:13px!important;overflow:hidden}.office-portrait .office-character-art{width:100%;height:200px;object-position:center top;filter:none}.office-list-agent .office-character-art{width:70px;height:90px;flex-shrink:0}.walking .office-character-art{animation:office-figure-step .8s ease-in-out infinite alternate;transform-origin:50% 90%}.office-person:hover .office-character-art,.office-person:focus-visible .office-character-art,.motion-paused .office-character-art{animation-play-state:paused}.office-world-toolbar{background:#fff}.office-world{box-shadow:0 18px 55px #35476610}.office-scene-caption{font-size:10px}.office-world-footer{padding:15px 20px}.office-person.selected{z-index:5}.office-person.selected .office-character-art{filter:drop-shadow(0 10px 9px #293f5530)}@keyframes office-figure-step{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-3px) rotate(1deg)}}@media(max-width:1000px){.office-character-art{width:150px;height:155px}.office-person{width:105px}}@media(max-width:800px){.office-character-art{width:150px;height:150px}.office-person-name{font-size:11px}}@media(max-width:480px){.office-character-art{width:110px;height:115px}.office-person{width:85px}.office-person-name{font-size:10px;padding:5px 12px}.office-person>small{font-size:8px;min-width:85px}} /* Use compositor transforms for wandering; keep labels inside the office. */ .person-position-0{left:29%;top:54%}.person-position-1{left:51%;top:54%}.person-position-2{left:74%;top:54%}.walking{will-change:transform}@keyframes office-walk-a{0%,12%,100%{transform:translate(-50%,-50%)}40%,52%{transform:translate(-50%,-50%) translate(12px,14px)}75%,82%{transform:translate(-50%,-50%) translate(-7px,7px)}}@keyframes office-walk-b{0%,10%,100%{transform:translate(-50%,-50%) translate(0,5px)}38%,50%{transform:translate(-50%,-50%) translate(8px,-9px)}73%,83%{transform:translate(-50%,-50%) translate(-8px,14px)}}@keyframes office-walk-c{0%,15%,100%{transform:translate(-50%,-50%) translate(0,8px)}43%,53%{transform:translate(-50%,-50%) translate(-10px,17px)}76%,85%{transform:translate(-50%,-50%) translate(7px,0)}} .office-logo-upload input{position:absolute;width:1px!important;height:1px!important;opacity:0;overflow:hidden}.office-logo-upload{border:1px solid #cdd7e5;border-radius:6px;padding:6px 8px;background:#ffffff99}.office-logo-upload:focus-within{outline:2px solid #6c8eb8} .office-webgl{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:0;touch-action:pan-y}.has-real-3d{aspect-ratio:16/10;min-height:390px;background:#d3e3fd}.has-real-3d>img{display:none}.has-real-3d:after{display:none}.has-real-3d .office-person{animation:none!important;width:128px;will-change:auto}.has-real-3d .office-person .office-character-art{display:none}.has-real-3d .office-person-name{font-size:11px;padding:4px 12px}.has-real-3d .office-person small{font-size:8px;padding:3px 5px;min-width:118px}.has-real-3d .office-scene-caption{z-index:3;pointer-events:none}.has-real-3d .office-person{filter:none}.has-real-3d .office-person-name{background:#fffffff0}.has-real-3d .office-person.selected .office-person-name{background:var(--company-color)}@media(max-width:600px){.has-real-3d{min-height:360px}.has-real-3d .office-person{width:98px}.has-real-3d .office-person small{min-width:97px;font-size:7px}} .office-camera-controls{position:absolute;left:15px;bottom:12px;display:flex;gap:4px;z-index:4}.office-camera-controls button{font-size:10px;color:#60738c;background:#ffffffd9;border:1px solid #d8e0ea;border-radius:6px;padding:6px 10px}.has-real-3d .office-person small{min-width:105px;font-size:7px}.has-real-3d .office-person{width:110px}.has-real-3d .office-person-name{font-size:10px;padding:4px 10px} .has-real-3d{min-height:470px;aspect-ratio:16/11}.office-speech{position:absolute;z-index:9;width:240px;padding:14px 16px;box-sizing:border-box;border-radius:16px;background:#fffffff5;border:1px solid #d7e1ed;box-shadow:0 10px 28px #34496820;pointer-events:none}.office-speech[hidden]{display:none}.office-speech strong{font-size:11px;color:var(--company-color)}.office-speech p{font-size:12px;line-height:1.8;color:#43566d;margin:7px 0}.office-speech small{font-size:9px;color:#8996a6;line-height:1.5;display:block}@media(max-width:600px){.has-real-3d{min-height:450px}.office-speech{width:230px}} .office-workspace{grid-template-columns:minmax(0,1fr) 310px;gap:18px}.office-world{border-radius:18px}.office-company-strip{padding:12px 16px;background:#fff9}.office-company-strip select{max-width:230px;font-size:10px;border:1px solid #d4deea;border-radius:7px;background:#fff;padding:7px;color:#526780}.office-progress{border:1px solid #d9e2ed;border-radius:17px;background:white;padding:17px}.office-progress>small{font-size:9px;color:#8998aa;line-height:1.7;display:block;margin-top:10px}.office-progress>p{font-size:10px;color:#8996a7;margin:0 0 8px}.office-board-heading>button{font-size:10px;border:1px solid #e0e5ed;border-radius:7px;background:white;color:#697c94;padding:6px 9px}#office-progress-items{max-height:310px;overflow:auto;display:grid;gap:8px}#office-progress-items>p{font-size:11px;color:#8190a4;line-height:1.8}.office-work-item{display:grid;gap:7px;text-align:left;padding:12px;border:1px solid #e3e9f1;background:#f8fafd;border-radius:10px}.office-work-item>small{font-size:10px;color:#a37537}.office-work-item[data-state=sent]>small{color:#44816d}.office-work-item>strong{font-size:12px;color:#3f536f;line-height:1.6}.office-work-item>span{font-size:10px;color:#7b8ba0;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#office-progress-all{width:100%;margin-top:10px;background:#eef3f9;border:0;border-radius:8px;padding:9px;color:#4d6a91;font-size:11px}.office-board{background:#fafbfce8}.office-board-heading h2{font-size:16px}.office-knowledge{background:#f7f9fc}.office-desk{gap:13px}.has-real-3d{min-height:510px}@media(max-width:950px){.office-workspace{grid-template-columns:1fr}.office-desk{grid-template-columns:1fr 1fr}.office-progress,.office-board{grid-column:auto}.has-real-3d{min-height:470px}}@media(max-width:550px){.office-desk{grid-template-columns:1fr}.office-company-strip{gap:8px}.office-company-strip select{max-width:205px}} .office-tools{padding:17px;background:#fff;border:1px solid #d9e2ed;border-radius:17px}.office-tools>small{display:block;font-size:9px;line-height:1.7;color:#8d99aa;margin-top:10px}#office-tool-list{display:grid;gap:8px}#office-tool-list>p{font-size:11px;color:#7e8fa6;line-height:1.8;margin:4px 0}.office-tool-card{display:flex;align-items:center;border:1px solid #e2e8f0;border-radius:10px;padding:10px;gap:8px}.office-tool-card>a{display:grid;gap:5px;min-width:0;flex:1;text-decoration:none}.office-tool-card strong{font-size:12px;color:#3c587b}.office-tool-card span{font-size:10px;line-height:1.65;color:#7588a2}.office-tool-card small{font-size:9px;color:#90a0b3}.office-tool-card>button{font-size:9px;padding:4px 6px;background:#f4f7fb;border:0;border-radius:5px;color:#22303f}#office-tool-dialog{width:min(560px,94vw);padding:26px;background:white}#office-tool-form>label{display:grid;gap:7px;margin:16px 0;font-size:12px;color:#596d88}#office-tool-form input,#office-tool-form textarea,#office-tool-form select{width:100%;box-sizing:border-box;padding:10px;border:1px solid #dbe3ed;border-radius:8px;font-size:12px}#office-tool-form>p{font-size:11px;color:#8492a5;line-height:1.8}#office-tool-save{background:#42658f;color:#fff;border:0;border-radius:8px;padding:11px 18px} .office-person-tool{display:block;margin-top:8px;border:1px solid #dce5ef;border-radius:8px;padding:10px;text-decoration:none;font-size:11px;color:#4b6b95;background:#f6f9fc} .office-tool-preset{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:12px;border:1px dashed #ccd8e6;border-radius:10px;background:#f8fafd;color:#4c6585}.office-tool-preset strong{font-size:11px}.office-tool-preset span{font-size:9px;color:#8898ae}.office-tool-preset:hover{background:#eef4fb;border-color:#7996b8}.office-tool-card:hover{border-color:#8fa8c6;background:#f9fbfe}.office-tool-card a:focus-visible{outline:2px solid #6389ba;outline-offset:4px}.office-tool-preset:focus-visible{outline:2px solid #6389ba;outline-offset:2px} /* Compact, simultaneous employee thoughts. */ .office-speech{padding:9px 11px;border-radius:12px;background:#fffffff5} .office-speech strong{font-size:10px;line-height:1.3} .office-speech p{font-size:11px;line-height:1.55;margin:4px 0 0;overflow-wrap:anywhere} /* Office-first company overview: keep the real board beside the room. */ #my-office{padding-top:8px}.office-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .office-workspace{display:block}.office-world-toolbar{padding:10px 14px;gap:10px}.office-company-brand>img,.office-company-brand>span{display:none!important}.office-company-brand label{font-size:0}.office-company-brand select{font-size:14px;font-weight:650}.office-view-actions{gap:6px}.office-view-actions button{font-size:12px;padding:7px 10px} .office-stage{position:relative;display:grid;grid-template-columns:270px minmax(0,1fr);background:#e8eee9;border-top:1px solid #d8e0dc;min-height:570px}.office-inroom-board{padding:12px;max-height:650px;overflow:auto;background:#f6f8f5ee;border-right:1px solid #d6dfd9;z-index:11}.office-inroom-board .office-progress,.office-inroom-board .office-board{padding:12px;margin:0 0 10px;border-radius:14px;background:#fff;box-shadow:0 3px 14px #273d2e09}.office-inroom-board .office-board-heading small{display:none}.office-inroom-board h2{font-size:15px}.office-inroom-board section>small{font-size:10px;line-height:1.5}.office-inroom-board #office-progress-scope{font-size:10px}.office-stage .office-scene{min-width:0;min-height:570px;height:100%;aspect-ratio:auto;border-radius:0}.office-scene-caption{display:none!important} .office-appearance{padding:5px 14px;font-size:11px;color:#64736b}.office-appearance summary{cursor:pointer}.office-company-strip{border:0}.office-world-footer{padding:4px 14px;font-size:10px}.office-world-footer>span:last-child{display:none}.office-desk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}.office-shortcuts{margin-top:8px} @media(max-width:760px){.office-world-toolbar{flex-wrap:wrap}.office-stage{grid-template-columns:190px minmax(0,1fr);min-height:500px}.office-inroom-board{padding:6px;max-height:560px}.office-inroom-board .office-progress,.office-inroom-board .office-board{padding:8px}.office-stage .office-scene{min-height:500px}.office-desk{grid-template-columns:1fr}.office-view-actions button{font-size:10px;padding:5px 6px}} @media(max-width:440px){.office-stage{display:flex;flex-direction:column}.office-stage .office-scene{order:-1;height:390px;min-height:390px}.office-inroom-board{max-height:280px;border-right:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.office-inroom-board .office-board-date input{min-width:0;width:100%}} .office-inroom-board #office-progress-items{max-height:220px}.office-inroom-board .office-work-item{padding:8px;gap:3px}.office-inroom-board .office-work-item>small:nth-of-type(2){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#77847e}.office-inroom-board .office-work-item>span{-webkit-line-clamp:1}.office-inroom-board .office-progress>small{font-size:9px;margin-top:5px}.office-inroom-board .office-board-heading{margin-bottom:8px}.office-inroom-board #office-progress-all{padding:6px;margin-top:6px} .office-stage #office-team{padding:20px;align-content:start;min-width:0}.office-stage #office-team[hidden]{display:none}.office-stage .office-scene[hidden]{display:none}#office-person-dialog{width:min(440px,calc(100vw - 40px));padding:20px;border:1px solid #dbe4df;border-radius:22px;box-shadow:0 24px 90px #19352735}#office-person-dialog::backdrop{background:#122b234d;backdrop-filter:blur(3px)}#office-person-dialog>form{text-align:right;margin:0}.office-person-close{border:0;background:#f0f4f1;padding:8px 12px;border-radius:9px;color:#52665b}#office-person-detail #office-inspector{border:0;box-shadow:none;padding:8px}.office-desk>#office-inspector-home{min-width:0} .office-progress-filter{display:flex;align-items:center;gap:8px;font-size:10px;color:#69776e;margin:8px 0}.office-progress-filter select{min-width:0;flex:1;font-size:11px;padding:6px;border:1px solid #dde5df;border-radius:7px;background:white}.office-inroom-board #office-progress-summary{font-size:10px;line-height:1.7;color:#42594c}.office-work-item[data-group=attention]{border-left:3px solid #c78a3d;background:#fffbf3}.office-work-item[data-group=sent]{border-left:3px solid #6e9b80}.office-work-item:focus-visible{outline:2px solid #4569a2;outline-offset:2px} /* Work-type navigation: explicit outcomes, expandable task menus. */ .work-launcher{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:10px 28px;background:#ffffff;border-bottom:1px solid #dadce0}.work-launcher-label{font-size:12px;font-weight:650;color:#3c4043;padding:10px 0}.work-menu{flex:1;min-width:160px;border:1px solid #dadce0;border-radius:12px;background:#f8f9fa}.work-menu summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:12px;font-weight:650;color:#1f1f1f}.work-menu summary::-webkit-details-marker{display:none}.work-menu[open]{background:#f1f3f4;border-color:#9aa0a6}.work-menu[open] summary span{transform:rotate(180deg)}.work-menu-options{display:grid;gap:5px;padding:0 8px 8px}.work-menu-options button{text-align:left;padding:10px;border:0;border-radius:8px;background:white;display:grid;gap:4px;color:#1f1f1f}.work-menu-options button:hover{background:#dadce0}.work-menu-options strong{font-size:12px}.work-menu-options small{font-size:10px;line-height:1.5;color:#5f6368}.work-menu-options button:focus-visible,.work-menu summary:focus-visible{outline:2px solid #5f6368;outline-offset:2px}@media(max-width:760px){.work-launcher{padding:8px 14px;gap:6px}.work-launcher-label{width:100%;padding:0}.work-menu{min-width:130px}.work-menu summary{padding:8px;font-size:11px}} .work-launcher .work-menu{margin:0;padding:0}.work-launcher .work-menu-options button{min-height:0;height:auto}.office-world-toolbar button{min-height:30px;height:auto;line-height:1.4}.office-world-toolbar .office-company-brand{min-height:32px}.office-world-toolbar .office-company-brand select{min-height:32px;padding:6px}.office-world-toolbar{min-height:0}.office-appearance{margin:0} .work-output-guide{padding:16px 18px;border:1px solid #dadce0;border-radius:14px;background:#f1f3f4;margin:16px 0}.work-output-guide>small{font-size:10px;color:#3c4043}.work-output-guide h3{font-size:16px;margin:5px 0 12px}.work-output-guide ol{display:grid;gap:6px;margin:0;padding-left:20px;font-size:12px;color:#3c4043}.work-output-guide p,.work-input-guide{font-size:11px;color:#5f6368;line-height:1.7}.work-output-guide p{margin-bottom:0}#proposal-tool-dialog #standalone-brief-fields textarea::placeholder{color:#80868b;font-size:12px}#proposal-tool-dialog #standalone-brief-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}#proposal-tool-dialog #standalone-brief-fields label{margin:0;font-size:12px}#proposal-tool-dialog #standalone-brief-fields textarea{margin-top:7px;min-height:94px}@media(max-width:600px){#proposal-tool-dialog #standalone-brief-fields{grid-template-columns:1fr}} .office-work-choices{margin:16px 0}.office-work-choices h3{font-size:13px;margin-bottom:10px}.office-work-choices button{display:grid;width:100%;gap:4px;padding:11px 13px;margin:6px 0;text-align:left;border:1px solid #dce6df;border-radius:10px;background:#f6faf7;color:#375444}.office-work-choices button strong{font-size:12px}.office-work-choices button small{font-size:10px;color:#728277}.office-work-choices button:hover{background:#e7f1e9;border-color:#9db5a5}.office-work-choices button:focus-visible{outline:2px solid #4569a2;outline-offset:2px} .office-work-title{display:flex;align-items:flex-start;gap:6px;min-width:0}.office-work-title strong{font-size:12px;line-height:1.5;color:#263f34;overflow-wrap:anywhere}.office-kind-tag{flex-shrink:0;padding:2px 6px;border-radius:5px;background:#e8eaf0;color:#4e5873;font-size:10px;font-weight:750;line-height:1.5}.office-kind-tag[data-kind=lp]{background:#ffdfdf;color:#b72c38}.office-kind-tag[data-kind=seo]{background:#dcecff;color:#175bb0}.office-kind-tag[data-kind=proposal]{background:#eae2ff;color:#6544aa}.office-kind-tag[data-kind=instagram],.office-kind-tag[data-kind=post]{background:#fde3ef;color:#a63870}.office-kind-tag[data-kind=report]{background:#def1e4;color:#2e7150}.office-inroom-board .office-work-item>.office-work-owner{color:#456250;white-space:normal}.office-inroom-board .office-work-item>.office-work-state{white-space:normal;font-weight:600}.office-inroom-board .office-work-item>.office-work-source{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#88968d;font-size:9px}.office-work-item{gap:5px!important} .brief-context{margin:18px 0;padding:16px;border:1px solid #dadce0;border-radius:12px}.brief-context legend{font-size:13px;font-weight:650;color:#1f1f1f}.brief-context>label{display:grid;gap:6px;margin:10px 0;font-size:12px}.brief-context select{width:100%;padding:9px;border:1px solid #bdc1c6;border-radius:8px;background:white}.brief-context>small,.brief-context>p{font-size:11px;line-height:1.6;color:#5f6368}#brief-references>label{display:grid;grid-template-columns:18px 1fr;gap:8px;padding:8px;font-size:12px}#brief-references details{grid-column:2;margin:0;padding:0}#brief-references pre{max-height:160px;overflow:auto;white-space:pre-wrap;font-size:11px} /* Office clarity: separate brand, people and commentary into stable regions. */ body>header.app-header{box-shadow:none}.work-launcher{background:#ffffff;gap:12px}.work-launcher-label{color:#1f1f1f}.work-launcher .work-menu{background:#f0f4f9;border-color:#e8eaed}.work-launcher .work-menu summary{color:#1f1f1f}.work-launcher .work-menu[open]{background:#e8f0fe;border-color:#9aa0a6}.work-menu-options button:hover{background:#e8f0fe} .office-world{border:1px solid #dce2ea;border-radius:18px;overflow:hidden;box-shadow:0 8px 32px #23364b0a}.office-world-toolbar{padding:14px 18px;background:#fff;min-height:60px;box-sizing:border-box}.office-world-toolbar .office-company-brand>img:not([hidden]){display:block!important;width:92px;height:30px;object-fit:contain}.office-world-toolbar .office-company-brand>span:not([hidden]){display:grid!important}.office-company-brand{gap:14px}.office-world-toolbar .office-company-brand select{color:#203349;font-size:14px;border:0;background:transparent}.office-view-actions button{background:#fff;border:1px solid #e0e5ec;color:#52647a}.office-view-actions #office-hire{background:#243e60;color:white;border-color:#243e60} .office-stage{grid-template-columns:260px minmax(0,1fr);background:#f1f4f7;min-height:580px}.office-inroom-board{background:#f7f9fb;border-color:#e1e7ef;max-height:620px;padding:12px}.office-inroom-board .office-progress,.office-inroom-board .office-board{border-color:#e1e7ef;box-shadow:none;border-radius:10px}.office-stage .office-scene{height:620px;min-height:620px;background:#e9eef2}.office-scene .office-camera-controls{top:12px;bottom:auto;left:auto;right:12px;gap:3px;max-width:calc(100% - 24px);flex-wrap:wrap}.office-camera-controls button{min-height:32px;background:#fffffff2;color:#344860;border-radius:7px}.office-scene .office-webgl{bottom:auto}.office-speech-dock{position:absolute;bottom:0;left:0;right:0;height:126px;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px;padding:15px 14px;background:#f6f8fb;border-top:1px solid #dce3ec;z-index:12}.office-speech-dock .office-speech{position:relative;inset:auto;width:auto;min-width:0;height:auto;margin:0;padding:10px 12px;box-shadow:0 2px 8px #263c5010;border:1px solid #dde5ed;border-radius:4px 12px 12px;background:#fff;pointer-events:auto}.office-speech-dock .office-speech strong{font-size:11px;color:#304d6c}.office-speech-dock .office-speech:nth-child(2) strong{color:#437665}.office-speech-dock .office-speech:nth-child(3) strong{color:#715c8f}.office-speech-dock .office-speech p{font-size:11px;line-height:1.6;margin:5px 0 0;color:#58687a}.office-appearance{border-top:1px solid #e1e6ed;background:white}.office-world-footer{background:#fff;color:#7b8695}.office-work-title strong{color:#293b50}.office-progress-filter select{border-color:#dfe5ec}.office-desk{gap:16px}.office-shortcuts a,.office-shortcuts button{color:#345679} @media(max-width:900px){.office-stage{display:flex;flex-direction:column}.office-stage .office-scene{order:-1;width:100%;height:480px;min-height:480px}.office-inroom-board{max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;border-right:0;border-top:1px solid #e1e7ef;padding:12px}.office-inroom-board .office-progress,.office-inroom-board .office-board{margin:0;min-width:0}.office-world-toolbar{gap:10px}.office-view-actions{flex-wrap:wrap}.office-world-toolbar .office-company-brand>img:not([hidden]){width:76px}.office-stage #office-team{order:-1}.office-inroom-board #office-progress-items{max-height:230px}.office-inroom-board #office-board-items{max-height:230px;overflow:auto}} @media(max-width:560px){.office-world-toolbar{padding:12px;align-items:flex-start}.office-company-brand{width:100%}.office-view-actions{width:100%;justify-content:flex-start}.office-view-actions button{min-height:32px!important;font-size:11px!important;padding:6px 9px!important}.office-stage .office-scene{height:430px;min-height:430px}.office-speech-dock{gap:6px;padding:10px 8px}.office-speech-dock .office-speech{padding:8px}.office-speech-dock .office-speech p{font-size:10px}.office-inroom-board{grid-template-columns:1fr}.office-inroom-board .office-board{margin-top:0}.office-camera-controls button{font-size:10px;padding:5px 8px}.work-launcher .work-menu{min-width:120px}.work-launcher-label{font-size:12px}} .office-world-toolbar .office-company-brand label{margin:0;gap:0}.office-world-toolbar .office-company-brand select{margin:0;height:34px}.office-world-toolbar .office-company-brand{min-height:34px}.office-world-toolbar .office-company-brand>img[hidden],.office-world-toolbar .office-company-brand>span[hidden]{display:none!important} /* Clear employee actions and compact chrome. */ .office-speech-dock .office-speech>button{display:block;width:100%;min-height:28px;padding:0 0 5px;background:transparent;border:0;border-bottom:1px solid #edf0f5;border-radius:0;text-align:left;font-size:11px;font-weight:650;color:#345779;line-height:1.5;cursor:pointer}.office-speech-dock .office-speech>button:hover{color:#245bce}.office-speech-dock .office-speech>button:focus-visible{outline:2px solid #4569a2;outline-offset:3px}.office-speech-dock .office-speech:nth-child(2)>button{color:#39745f}.office-speech-dock .office-speech:nth-child(3)>button{color:#735797}.has-real-3d .office-person{width:104px}.has-real-3d .office-person small{min-width:0;width:100%;box-sizing:border-box;font-size:9px}.has-real-3d .office-person-name{width:100%;box-sizing:border-box;font-size:11px;text-align:center;border-radius:8px 8px 0 0}.office-speech-dock .office-speech p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.office-speech-dock .office-speech{height:100px}.office-speech-dock{padding-top:10px}.office-world-toolbar .office-view-actions button{font-size:11px}.office-world-toolbar .office-company-brand label{min-width:0}.office-world-toolbar .office-company-brand select{max-width:230px} @media(max-width:700px){body>header.app-header{padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}body>header.app-header>strong{margin:0;height:28px}.app-header .header-actions{margin:0;padding:0;border:0;width:auto;flex:1;justify-content:flex-end}.header-actions #client-register{display:none}.app-header .app-navigation{order:3;width:100%;padding:0;margin:0;justify-content:space-between}.app-header .app-navigation a,.app-header .app-navigation button{padding:9px 5px;min-height:36px;font-size:12px}.workspace-menu>summary{font-size:11px;padding:7px}.work-launcher{padding:9px 14px}.work-launcher .work-menu summary{min-height:30px;align-items:center;padding:6px 9px}.office-speech-dock .office-speech>button{font-size:10px}.has-real-3d .office-person{width:94px}} /* Studio v3: task-first sidebar, charcoal studio, live speech beside people. */ body{background:#e8f0fe}body>main{max-width:none;padding:0 10px}#my-office{padding-top:0}.office-world{border-radius:12px;border-color:#cdd5df}.office-world-toolbar{padding:8px 12px;min-height:48px}.office-stage{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:620px;background:#242b33}.office-stage .office-scene{order:0;height:620px;min-height:620px;background:#252c35}.office-inroom-board{display:flex;flex-direction:column;gap:12px;max-height:620px;overflow:auto;padding:10px;order:0;grid-column:1;grid-row:1;background:#f7f9fc}.office-inroom-board .office-board{order:-1;margin:0;padding:12px;flex-shrink:0}.office-inroom-board .office-progress{margin:0;padding:12px;flex-shrink:0}.office-inroom-board #office-board-items{max-height:180px;overflow:auto}.office-inroom-board #office-progress-items{max-height:290px}.office-inroom-board .office-board-heading{align-items:start}.office-board-heading h2{font-size:14px}.office-progress-group{margin:10px 0 3px;font-size:11px;color:#52667f}.office-inroom-board .office-work-item .office-work-next{display:block;white-space:normal;overflow:visible;font-size:10px;line-height:1.6;color:#485d77}.office-inroom-board .office-work-item[data-group=sent]{background:#edf7f0;border-left:3px solid #458665}.office-inroom-board .office-work-item[data-group=active]{background:#edf4ff;border-left:3px solid #4b7dcc}.office-inroom-board .office-work-item[data-group=attention]{background:#fff9ec;border-left:3px solid #c79748}.office-inroom-board #office-progress-summary{font-size:11px}.office-inroom-board .office-board-note{font-size:9px}.office-inroom-board #office-board-count{font-size:10px;line-height:1.5}.office-board-task.done{opacity:.65;text-decoration:line-through}.office-stage #office-team{grid-column:2;grid-row:1}.office-stage .office-scene{grid-column:2;grid-row:1} .office-speech-dock{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;background:transparent;border:0;z-index:7;pointer-events:none}.office-speech-dock .office-speech{position:absolute;inset:auto;min-width:0;height:auto;min-height:76px;margin:0;padding:9px 11px;border-radius:12px;background:#fffffff5;border:1px solid #d7e0e9;box-shadow:0 6px 22px #0a18252b;pointer-events:auto}.office-speech-dock .office-speech>button{font-size:11px;line-height:1.45;min-height:0;padding:0 0 5px;white-space:normal}.office-speech-dock .office-speech p{font-size:11px;line-height:1.6;display:block;overflow:visible;margin:5px 0 0}.office-room-board{position:absolute;bottom:14px;right:14px;z-index:8;display:grid;gap:6px;width:200px;padding:12px;text-align:left;background:#162430ed;border:1px solid #738394;border-radius:8px;color:#ecf1f6;box-shadow:0 8px 24px #0003}.office-room-board strong{font-size:11px;color:#ead5ad}.office-room-board span{font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.office-room-board:hover{background:#213649}.office-room-board:focus-visible{outline:2px solid #d9bd83;outline-offset:2px}.office-scene .office-camera-controls{z-index:9}.work-menu .ai-menu-title{display:grid;gap:4px;font-size:13px}.work-menu .ai-menu-title small{font-size:10px;font-weight:400;color:#80868b}.work-menu .ai-menu-state{font-size:9px;font-weight:500;color:#5f6368;margin-left:auto;white-space:normal}.work-menu[open] summary .ai-menu-title,.work-menu[open] summary .ai-menu-state{transform:none}.work-launcher{align-items:center;padding:8px 16px}.work-launcher-label{font-size:11px}.office-desk{margin-top:10px}.office-appearance{padding:3px 12px}.office-world-footer{padding:3px 12px} @media(max-width:900px){.office-stage{display:grid;grid-template-columns:185px minmax(0,1fr)}.office-inroom-board{display:flex;padding:7px;gap:8px;max-height:580px}.office-stage .office-scene{height:580px;min-height:580px;order:0}.office-inroom-board .office-board,.office-inroom-board .office-progress{padding:9px}.office-world-toolbar .office-company-brand{width:auto}.office-world-toolbar .office-view-actions{width:auto}.office-room-board{width:165px;right:10px;bottom:10px}.office-inroom-board .office-board-date input{width:100%;min-width:0}.office-inroom-board .office-board-date{display:grid;gap:3px}.office-inroom-board .office-board-heading{flex-wrap:wrap;gap:4px}} @media(max-width:600px){body>main{padding:0 4px}.office-stage{grid-template-columns:158px minmax(0,1fr)}.office-stage .office-scene{height:570px;min-height:570px}.office-inroom-board{max-height:570px;padding:5px}.office-inroom-board .office-board,.office-inroom-board .office-progress{padding:7px}.office-board-heading h2{font-size:12px}.office-inroom-board .office-board-heading button{font-size:9px;min-height:24px;padding:3px}.office-inroom-board .office-progress-filter{display:grid}.office-inroom-board #office-task-title{font-size:10px;min-width:0}.office-world-toolbar{gap:6px;padding:8px}.office-world-toolbar .office-company-brand{width:100%}.office-world-toolbar .office-company-brand>img:not([hidden]){width:67px}.office-world-toolbar .office-view-actions button{min-height:28px!important;padding:4px 7px!important;font-size:10px!important}.office-world-toolbar .office-company-brand select{font-size:12px}.work-launcher{gap:5px;padding:6px 10px}.work-launcher-label{width:100%;padding:0}.work-launcher .work-menu{min-width:0}.work-launcher .work-menu summary{padding:6px;gap:4px;flex-wrap:wrap}.work-menu .ai-menu-title{font-size:11px;gap:2px}.work-menu .ai-menu-title small{font-size:9px}.work-menu .ai-menu-state{width:100%;order:3;font-size:9px}.office-speech-dock .office-speech{padding:7px 8px}.office-speech-dock .office-speech>button{font-size:10px}.office-speech-dock .office-speech p{font-size:10px}.office-room-board{width:150px}.office-inroom-board .office-work-title{flex-wrap:wrap}.office-inroom-board .office-work-title strong{font-size:11px}.office-inroom-board #office-task-form{grid-template-columns:minmax(0,1fr) 26px}} .office-person[hidden],.office-speech[hidden]{display:none!important}.office-inroom-board .office-board-date{margin:5px 0;padding:0;border:0;font-size:10px;gap:3px}.office-inroom-board .office-board-date input{padding:5px 3px;margin:0;min-height:29px;font-size:11px;border:1px solid #e0e6ed;border-radius:5px}.office-inroom-board #office-board-items{padding:3px 0}.office-inroom-board #office-board-items>p{padding:0;margin:7px 0;font-size:10px;line-height:1.6}.office-inroom-board #office-task-form{margin-top:5px}.office-inroom-board #office-task-form input,.office-inroom-board #office-task-form button{min-height:30px;padding:6px;margin:0}.office-inroom-board .office-board-note{margin-top:7px;font-size:9px;line-height:1.4}.office-inroom-board #office-board-status:empty{display:none}.office-room-board{max-width:calc(100% - 20px)} #office-board-dialog{width:min(480px,calc(100vw - 32px));padding:24px;border:1px solid #d7e0e9;border-radius:16px;background:#fff;box-shadow:0 24px 80px #122b3540}#office-board-dialog::backdrop{background:#15202f66;backdrop-filter:blur(3px)}#office-board-dialog h2{margin:0;font-size:23px;color:#273c54}#office-board-dialog-date{color:#76859a;font-size:12px}#office-board-dialog-items{max-height:50vh;overflow:auto}#office-board-dialog-items h3{font-size:12px;color:#65748a;margin:18px 0 7px}#office-board-dialog-items .office-board-task{display:flex;align-items:flex-start;gap:10px;padding:12px;background:#f5f8fc;border:1px solid #e2e8ef;border-radius:8px;margin:7px 0;font-size:13px;line-height:1.6}#office-board-dialog-items input{width:18px;height:18px;margin:2px 0 0;accent-color:#426a9b;flex-shrink:0}#office-board-dialog-items .done{background:#f0f6f1;color:#22303f}#office-board-dialog-items .done span{text-decoration:line-through}#office-board-dialog-add{margin-top:14px;padding:10px 14px;background:#294767;color:white;border:0;border-radius:8px;font-size:12px}.office-board-dialog-note,#office-board-dialog-status{font-size:11px;line-height:1.7;color:#6c7b8e} .office-room-brand{position:absolute;top:12px;left:12px;right:12px;min-height:42px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:7px 10px;z-index:10;pointer-events:none;background:#15232edb;border:1px solid #64738266;border-radius:8px;box-shadow:0 3px 14px #0002}.office-room-brand img{display:block;width:80px;height:28px;object-fit:contain;padding:4px 6px;box-sizing:content-box;border-radius:5px;background:#fff}.office-room-brand strong{font-size:12px;color:#f2f5fa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.office-room-brand>span{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:#dde7f1;color:#2d455e;font-weight:700}.office-room-brand [hidden]{display:none!important}.office-scene .office-camera-controls{top:74px}.office-room-brand~#office-characters{z-index:5}@media(max-width:600px){.office-room-brand{top:8px;left:8px;right:8px;padding:6px 8px;gap:7px}.office-room-brand img{width:67px;height:23px}.office-room-brand strong{font-size:11px}.office-scene .office-camera-controls{top:63px;right:8px}} /* Separate real work status from personality copy. */ .office-speech-dock .office-speech>button{display:flex;align-items:baseline;justify-content:space-between;gap:5px;flex-wrap:wrap}.office-speech-dock .office-speech>button strong{font-size:12px;color:#294967}.office-speech-dock .office-speech>button small{font-size:9px;color:#8390a0;font-weight:400}.office-speech-status{display:inline-block;font-size:9px;color:#22303f;line-height:1.5;padding:2px 5px;border-radius:4px;background:#edf2f7;margin:5px 0 0}.office-speech-status[data-state=waiting]{color:#8a6827;background:#fff3d9}.office-speech-status[data-state=running]{color:#315f9e;background:#e8f0ff}.office-speech-dock .office-speech p{font-size:11px;margin-top:6px;color:#4b5d71}.office-camera-controls button[data-view][aria-pressed=true]{background:#dce8f7;color:#234d78;border-color:#9ab7d5;box-shadow:inset 0 0 0 1px #a8bdd4}.office-work-item .office-work-open{font-size:10px;font-weight:650;color:#3d648e!important;border-top:1px solid #e2e8ec;padding-top:6px;margin-top:3px;display:block!important;white-space:normal}.office-work-item:disabled{opacity:.7;cursor:wait}@media(max-width:600px){.office-speech-dock .office-speech>button strong{font-size:10px}.office-speech-dock .office-speech>button small{font-size:8px}.office-speech-status{font-size:8px}.office-speech-dock .office-speech p{font-size:10px}} /* Visible, evidence-based AI progression. */ #office-growth-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px 12px;background:#111f2e;border-top:1px solid #334255}.office-growth-card{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;background:#1e3044;border:1px solid #41536b;border-radius:10px;color:#fff;min-width:0;cursor:pointer}.office-growth-card:hover{background:#283f57;border-color:#a1b4ca}.office-growth-card:focus-visible{outline:3px solid #e5c485;outline-offset:2px}.growth-level{display:grid;flex-shrink:0;min-width:54px;line-height:1}.growth-level small{color:#f1cc84;font-size:10px;font-weight:600;margin-bottom:3px}.growth-level strong{font-size:42px;font-weight:800;letter-spacing:-.06em;color:#f6d89e}.growth-card-info{display:grid;gap:4px;flex:1;min-width:0}.growth-card-info>strong{font-size:13px;color:#fff}.growth-card-info>small{font-size:10px;color:#b6c5d6;line-height:1.4}.growth-xp-track{display:block;overflow:hidden;height:6px;border-radius:10px;background:#43526a;width:100%;margin:3px 0}.growth-xp-track i{display:block;height:100%;background:#f0c879;border-radius:10px}.office-growth-card>span:last-child{font-size:10px;color:#e9c58b;flex-shrink:0}.speech-level{display:inline-block;background:#213449;color:#f4d497;border:1px solid #8f7b55;border-radius:6px;padding:4px 9px;font-size:22px;font-weight:800;line-height:1.1;margin:-17px 0 8px;box-shadow:0 3px 9px #12203322}.office-speech-dock .office-speech{padding-top:8px}.office-speech-dock .office-speech:has(.speech-level){border-color:#bbac8c} #office-growth-dialog{width:min(680px,calc(100vw - 32px));padding:26px;border:1px solid #cbd6e2;border-radius:18px;background:#f9fafc;box-shadow:0 25px 90px #0e1c2d66}#office-growth-dialog::backdrop{background:#10203399;backdrop-filter:blur(4px)}#office-growth-title{font-size:24px;margin:3px 0}.growth-hero{padding:24px;background:#182b40;border-radius:14px;color:#fff;margin:18px 0}.growth-hero-level small{display:block;color:#c3cddd;font-size:11px}.growth-hero-level strong{font-size:64px;line-height:1.2;color:#f2d394;font-weight:800;letter-spacing:-.04em}.growth-hero h3{font-size:20px;color:#fff;margin:6px 0}.growth-hero p{color:#e2e9f2;font-size:14px}.growth-hero>small{font-size:11px;color:#c3cddd}.growth-hero .growth-xp-track{height:10px;margin:12px 0}.growth-mission{display:flex;gap:16px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dfe5ed;border-radius:10px;margin:8px 0;padding:14px}.growth-mission strong{font-size:13px;color:#30465f}.growth-mission p{font-size:11px;color:#718094;margin:5px 0;line-height:1.6}.growth-mission button{white-space:nowrap;border:0;border-radius:7px;background:#2e527a;color:#fff;padding:11px;font-size:12px;font-weight:700}.growth-mission.completed{background:#eff5f0}.growth-mission.completed button{background:#dce9df;color:#22303f}.growth-ranks,#office-growth-detail>p,#office-growth-detail details{font-size:11px;color:#6c7b8e;line-height:1.8}.growth-ranks{padding:12px;background:#edf1f6;border-radius:8px} @media(max-width:700px){#office-growth-strip{gap:5px;padding:7px}.office-growth-card{padding:10px 7px;gap:6px;flex-wrap:wrap}.growth-level{min-width:37px}.growth-level strong{font-size:34px}.growth-level small{font-size:9px}.growth-card-info>strong{font-size:10px}.growth-card-info>small{font-size:8px}.office-growth-card>span:last-child{display:none}.growth-card-info{min-width:55px}.speech-level{font-size:19px}.growth-mission{padding:10px;gap:8px}.growth-mission button{font-size:10px;padding:8px}} .office-roster-heading{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 0;background:#111f2e;color:#e6edf6;gap:10px}.office-roster-heading strong{font-size:13px}.office-roster-heading button{padding:7px 11px;background:#2a425c;border:1px solid #63768f;border-radius:7px;color:#f2d597;font-size:11px}#office-input-dialog{width:min(570px,calc(100vw - 30px));padding:24px;border:1px solid #ced9e5;border-radius:16px;background:#fff}#office-input-dialog::backdrop{background:#10203288}#office-input-form label{display:grid;gap:7px;font-size:12px;margin:15px 0}#office-input-text,#office-input-source{box-sizing:border-box;width:100%;padding:12px;border:1px solid #cdd8e4;border-radius:8px;font-size:13px;line-height:1.7}#office-input-form p{font-size:11px;color:#728197;line-height:1.7}#office-input-save{padding:12px 20px;border:0;border-radius:8px;background:#294c74;color:white;font-weight:650}.roster-portrait{height:110px;display:grid;place-items:center;background:#e5edf3;border-radius:12px;margin-bottom:10px;overflow:hidden}.roster-portrait img{width:115px;height:115px;object-fit:contain}.office-catalog-card>strong{font-size:26px;color:#8e682b;display:block}.office-catalog-card h3{font-size:17px}.growth-mission>div{min-width:0}.growth-mission p{overflow-wrap:anywhere}.growth-mission button{flex-shrink:0}#office-growth-detail details{padding:12px;background:#edf2f8;border-radius:8px}.growth-hero-level strong{font-size:64px} .office-catalog-card>small{display:block;line-height:1.7}.office-catalog-card h3{margin:14px 0 2px;font-size:19px;color:#263d56} /* Information-led character development */ .office-speech-dock .office-speech .speech-level{font-size:11px;padding:3px 6px;margin:-12px 0 5px;box-shadow:none}.office-speech-dock .office-speech button small{display:block;font-size:20px;font-weight:750;color:#26374c;line-height:1.25;overflow-wrap:anywhere}.office-speech-dock .office-speech button strong{font-size:10px}.office-name-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin:18px 0;padding:16px;background:#edf2f7;border-radius:12px}.office-name-form label{display:grid;gap:7px;font-size:12px}.office-name-form input{width:100%;box-sizing:border-box;border:1px solid #c7d2df;border-radius:8px;padding:10px;font:inherit;font-size:18px;color:#233b51}.office-name-form button{padding:11px;border:0;border-radius:8px;background:#284d70;color:white}.office-name-form>small{grid-column:1/-1;line-height:1.6;color:#607388}.ai-status-panel{margin:20px 0;text-align:left}.ai-status-panel>h3{font-size:19px;color:#1f1f1f}.ai-status-panel p{font-size:12px;line-height:1.8;color:#5f6368}.ai-status-panel details{margin:8px 0;border:1px solid #dadce0;border-radius:10px;background:#f0f4f9;padding:12px}.ai-status-panel summary{cursor:pointer;font-size:13px;font-weight:650;color:#1f1f1f}.ai-status-panel progress{display:block;width:100%;height:7px;margin:9px 0 2px;accent-color:#0b57d0}.ai-status-panel details button{display:block;text-align:left;width:100%;padding:10px;margin:5px 0;background:white;color:#3c4043;border:1px solid #dadce0;border-radius:7px;font-size:12px}.office-catalog-card>small{font-size:15px}.growth-card-info>strong{font-size:14px} /* Keep a visible route back from every section. */ body>header.app-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 12px #172c4312} html{scroll-padding-top:calc(var(--app-header-height,110px) + 12px)} .app-navigation a[aria-current=page]{background:#e7eef8;color:#214f82;border-radius:8px} .output-evidence-item{padding:12px 0;border-top:1px solid #dadce0}.output-evidence-item>strong{font-size:13px}.output-evidence-item p{margin:7px 0} .request-evidence-panel{padding:14px;border:1px solid #dadce0;border-radius:10px;background:#f0f4f9;margin-top:12px}.request-evidence-panel details{padding:9px 0;border-top:1px solid #dadce0}.request-evidence-panel summary{cursor:pointer;font-weight:600}.request-evidence-panel p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8} .request-evidence-editor{width:min(570px,calc(100vw - 32px));padding:24px;border:1px solid #bdc1c6;border-radius:16px;background:white}.request-evidence-editor::backdrop{background:#172a4388}.request-evidence-editor label{display:grid;gap:8px;margin:16px 0;font-size:13px}.request-evidence-editor input,.request-evidence-editor textarea{padding:12px;border:1px solid #bdc1c6;border-radius:8px;font:inherit;box-sizing:border-box;width:100%}.request-evidence-editor p{font-size:12px;line-height:1.8;color:#5f6368}.request-evidence-editor button{padding:12px;margin-right:8px;border-radius:8px;border:1px solid #bdc1c6;background:#e8f0fe}.request-evidence-editor button[type=submit]{background:#0b57d0;color:white} .proposal-review-guide{background:#e8f0fe;border:1px solid #bdc1c6;padding:16px;border-radius:12px;margin:12px 0}.proposal-review-guide summary{cursor:pointer;color:#1f1f1f;font-weight:700}.proposal-review-guide section{padding:10px 0;border-top:1px solid #dadce0}.proposal-review-guide h4{margin:5px 0}.proposal-review-guide p{font-size:12px;line-height:1.8;margin:6px 0} .draft-diagnostics{padding:16px;margin:12px 0;border:1px solid #bdc1c6;background:#fef7e0;border-radius:12px}.draft-diagnostics article{border-top:1px solid #bdc1c6;padding:12px 0}.draft-diagnostics p{line-height:1.8;font-size:12px;margin:6px 0}.draft-diagnostics strong{font-size:13px;overflow-wrap:anywhere} /* FLOW product interface: quiet surfaces, clear actions, a visible AI team. */ :root{--flow-ink:#0b57d0;--flow-muted:#5f6368;--flow-accent:#0b57d0;--flow-line:#dadce0;--flow-surface:#f1f3f4} body{background:var(--flow-surface);color:var(--flow-ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif} body>main{padding:0 20px;max-width:1600px;margin:auto} .flow-home{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;padding:30px 8px 24px;align-items:center} .flow-eyebrow{font-size:10px;letter-spacing:.16em;color:var(--flow-accent);font-weight:750;margin:0 0 12px} .flow-home h1{font-size:clamp(24px,2.7vw,38px);line-height:1.4;letter-spacing:-.04em;margin:0 0 12px;color:var(--flow-ink)} .flow-home-intro>p:last-of-type{font-size:13px;line-height:1.8;color:var(--flow-muted);margin:0} .flow-home-actions{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap} #flow-new-work{padding:13px 20px;background:var(--flow-accent);color:white;border:0;border-radius:10px;font-size:14px;font-weight:700;box-shadow:0 4px 12px #216a6720} .flow-home-actions a{font-size:12px;text-decoration:none;color:var(--flow-accent);font-weight:650} .flow-next-action{border:1px solid var(--flow-line);border-radius:16px;background:white;padding:20px 24px;box-shadow:0 5px 20px #18344405} .flow-next-action>small{display:block;color:var(--flow-muted);font-size:10px;line-height:1.6}.flow-next-action h3{font-size:17px;line-height:1.6;margin:8px 0;color:var(--flow-ink)}.flow-next-action p{font-size:12px;line-height:1.7;color:var(--flow-muted);margin:7px 0}.flow-next-action button{border:0;background:#e8eaed;color:#1f1f1f;font-weight:700;font-size:12px;border-radius:7px;padding:10px 13px;margin:5px 0 8px}.flow-status{display:inline-block;font-size:10px;padding:4px 7px;border-radius:5px;background:#feefc3;color:#8a4b00;margin-top:10px} .flow-team-training{border-top:1px solid var(--flow-line);background:#e8f0fe}.flow-team-training>summary{cursor:pointer;list-style:none;padding:12px 18px;color:#3c4043;font-size:12px;font-weight:650}.flow-team-training>summary:before{content:'＋';margin-right:10px;color:#1f1f1f}.flow-team-training[open]>summary:before{content:'−'} .office-world{border:1px solid var(--flow-line);box-shadow:0 8px 28px #152c3d08;border-radius:16px;overflow:hidden}.office-company-strip{background:#fff;padding:10px 16px}.office-roster-heading,#office-growth-strip{background:#eaf0f3}.office-roster-heading{color:#324957}.office-growth-card{background:white;border-color:#cedbe2;color:#243d4c}.office-growth-card:hover{background:#f5faf9}.growth-card-info>strong{color:#253e4a}.growth-card-info>small{color:#5b727e}.growth-level strong{font-size:28px;color:#236c67}.growth-level small{color:#53777b}.office-growth-card>span:last-child{color:#326c69}.growth-xp-track{background:#dce5e9}.growth-xp-track i{background:#368a82} .flow-work-dialog{width:min(840px,calc(100vw - 32px));border:1px solid #dadce0;border-radius:20px;padding:28px;background:#f0f4f9}.flow-work-dialog::backdrop{background:#112d4566;backdrop-filter:blur(4px)}.flow-dialog-close{float:right;border:0;background:#e8f0fe;border-radius:7px;padding:9px 12px;color:#3c4043}.flow-work-dialog>p{font-size:12px;color:#5f6368;line-height:1.8}.flow-work-dialog h2{font-size:26px;margin:12px 0}.flow-work-dialog .work-launcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;background:none;gap:14px}.flow-work-dialog .work-launcher-label{display:none}.flow-work-dialog .work-menu{background:white;border:1px solid #dadce0;border-radius:12px;min-width:0}.flow-work-dialog .work-menu-options{position:static;box-shadow:none;border:0;min-width:0;width:auto;padding:7px;display:grid;gap:6px;background:transparent}.flow-work-dialog .work-menu-options button{width:100%;padding:12px;text-align:left;border:0;border-radius:8px;background:#e8f0fe}.flow-work-dialog .work-menu-options button:hover{background:#e8eaed}.flow-work-dialog .work-menu summary{padding:14px}.flow-work-dialog .work-menu-options button strong{font-size:13px}.flow-work-dialog .work-menu-options button small{font-size:11px;line-height:1.7}.flow-work-dialog .ai-menu-title{font-size:14px} button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #5f6368;outline-offset:3px} @media(max-width:750px){body>main{padding:0 8px}.flow-home{grid-template-columns:1fr;gap:16px;padding:20px 8px}.flow-home h1{font-size:25px}.flow-next-action{padding:14px 16px}.flow-home-actions{margin-top:14px;gap:14px}.flow-work-dialog .work-launcher{grid-template-columns:1fr}.flow-work-dialog{padding:20px}.flow-next-action h3{font-size:15px}.flow-home-intro>p:last-of-type{font-size:12px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} #office-inspector-home{display:none} .flow-home{padding-top:18px;padding-bottom:18px;gap:24px}.flow-next-action{padding:14px 20px}.flow-next-action>p{margin:5px 0}.flow-next-action>small:last-child{font-size:9px}.flow-next-action h3{margin:5px 0}.flow-home-actions{margin-top:14px} .flow-team-training{padding:0!important;margin:0!important;border-radius:0!important}.flow-team-training>summary{padding:10px 16px!important;margin:0!important;min-height:0!important} .flow-work-dialog .work-launcher{align-items:start}.flow-work-dialog .work-menu{align-self:start}.flow-work-dialog .work-menu-options button{min-height:62px} #creation-feed{background:#ffffff;border:1px solid #dadce0;border-radius:16px;padding:22px;margin:24px 0}.feed-heading h2{color:#1f1f1f;letter-spacing:-.02em}.feed-item{border:1px solid #dadce0;box-shadow:none}.feed-item:hover{border-color:#80868b;box-shadow:0 5px 18px #173e3910}.feed-item[data-phase=new]{border-top-color:#80868b}.feed-type{background:#e8eaed;color:#3c4043}.library-folder{border-radius:10px}.feed-controls input,.feed-controls select{border-radius:8px} @media(max-width:750px){#creation-feed{padding:14px}.flow-home{gap:12px}.flow-next-action{padding:12px 16px}.flow-home-actions a{font-size:11px}} .flow-team-showcase{margin:28px 0;padding:24px 0}.flow-team-showcase>p:first-child{font-size:10px;letter-spacing:.18em;color:#3c4043;font-weight:700}.flow-team-showcase>h2{font-size:25px;letter-spacing:-.035em;color:#1f1f1f;margin:10px 0}.flow-team-showcase>p{font-size:13px;line-height:1.8;color:#5f6368}#flow-team-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}.flow-teammate{border:1px solid #dadce0;border-radius:16px;background:#ffffff;overflow:hidden;box-shadow:0 4px 20px #1b433905}.flow-teammate-portrait{height:155px;background:linear-gradient(120deg,#e8eaed,#feefc3);position:relative;display:flex;justify-content:center;overflow:hidden}.flow-teammate:nth-child(2) .flow-teammate-portrait{background:linear-gradient(120deg,#e8f0fe,#fce8e6)}.flow-teammate:nth-child(3) .flow-teammate-portrait{background:linear-gradient(120deg,#e8f0fe,#f1f3f4)}.flow-teammate-portrait img{width:160px;height:200px;object-fit:contain;object-position:center top}.flow-teammate-portrait small{position:absolute;bottom:10px;right:10px;background:#ffffffed;color:#3c4043;padding:5px 8px;border-radius:6px;font-size:10px}.flow-teammate-copy{padding:20px}.flow-teammate-copy>small{font-size:11px;color:#5f6368;display:block}.flow-teammate-copy h3{font-size:27px;line-height:1.3;color:#1f1f1f;margin:6px 0 14px;overflow-wrap:anywhere}.flow-teammate-copy h4{font-size:15px;margin:0 0 8px;color:#1f1f1f}.flow-teammate-copy>p{font-size:12px;line-height:1.85;color:#5f6368;min-height:66px}.flow-teammate-copy ul{padding:0;list-style:none;display:grid;gap:7px;margin:16px 0}.flow-teammate-copy li{font-size:12px;color:#3c4043}.flow-teammate-copy li:before{content:'✓';margin-right:8px;color:#5f6368}.flow-teammate-actions{display:grid;gap:8px;margin-top:16px}.flow-teammate-actions button{padding:11px;border:1px solid #dadce0;border-radius:8px;background:white;color:#3c4043;font-weight:600;font-size:12px}.flow-teammate-actions button:first-child{background:#0b57d0;color:white;border-color:#0b57d0}.flow-teammate:hover{border-color:#80868b} @media(max-width:750px){#flow-team-cards{grid-template-columns:1fr}.flow-teammate{display:grid;grid-template-columns:120px 1fr}.flow-teammate-portrait{height:100%}.flow-teammate-portrait img{width:140px;height:210px;margin-top:22px}.flow-teammate-portrait small{left:6px;right:6px;font-size:9px}.flow-teammate-copy{padding:16px}.flow-teammate-copy h3{font-size:23px}.flow-team-showcase>h2{font-size:22px}.flow-teammate-copy>p{min-height:0}} .flow-team-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;padding:0;margin:20px 0;counter-reset:journey}.flow-team-journey li{counter-increment:journey;padding:12px;border:1px solid #dadce0;background:#f1f3f4;border-radius:9px}.flow-team-journey li:before{content:counter(journey,decimal-leading-zero);color:#80868b;font-size:10px;margin-right:8px}.flow-team-journey strong{font-size:13px;color:#1f1f1f}.flow-team-journey small{display:block;font-size:10px;color:#5f6368;margin:6px 0 0}@media(max-width:500px){.flow-team-journey{grid-template-columns:repeat(2,1fr)}} .employee-work-dialog{width:min(760px,calc(100vw - 32px));padding:24px;border:1px solid #dadce0;border-radius:18px;background:#f0f4f9}.employee-work-dialog::backdrop{background:#16344b77;backdrop-filter:blur(3px)}.employee-work-header{display:flex;align-items:center;justify-content:space-between}.employee-work-header h2{margin:5px 0;font-size:25px;color:#1f1f1f}.employee-work-header small{color:#5f6368}.employee-work-dialog p{font-size:12px;line-height:1.8;color:#5f6368}.employee-work-dialog button{border:1px solid #bdc1c6;padding:10px 13px;border-radius:8px;color:#3c4043;background:white}.employee-work-filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.employee-work-filters button[aria-pressed=true]{background:#0b57d0;color:white;border-color:#0b57d0}.employee-work-list{display:grid;gap:12px}.employee-work-list>small{color:#80868b;font-size:10px}.employee-work-list article{padding:16px;border:1px solid #dadce0;border-radius:12px;background:white}.employee-work-list h3{font-size:16px;color:#1f1f1f;margin:10px 0}.employee-work-list article>small{font-size:11px;color:#80868b}.employee-work-meta{display:flex;gap:12px;align-items:center}.employee-work-meta>small{font-size:11px;color:#3c4043}.employee-work-list article>button{background:#e8f0fe;border-color:#bdc1c6;font-weight:650} .office-scene[data-camera-view="室内"] .office-room-board{width:280px;max-width:calc(100% - 24px);bottom:18px;right:18px;padding:18px;background:#fff7df;border:2px solid #dabb6a;color:#28404a;border-radius:13px;box-shadow:0 10px 32px #0004;gap:9px;z-index:11}.office-scene[data-camera-view="室内"] .office-room-board strong{font-size:20px;color:#233e49;letter-spacing:-.02em}.office-scene[data-camera-view="室内"] .office-room-board span{font-size:12px;color:#4a636d}.office-scene[data-camera-view="室内"] .office-room-board .room-board-count{font-size:13px;font-weight:650}.office-room-board .room-board-action{border-top:1px solid #a58f6744;padding-top:8px;font-weight:700}.office-scene[data-camera-view="室内"] .office-room-board:hover{background:#fff0c3;border-color:#ae8a32}.office-scene[data-camera-view="室内"] .office-room-board:focus-visible{outline:3px solid #358c83;outline-offset:3px}@media(max-width:600px){.office-scene[data-camera-view="室内"] .office-room-board{width:230px;right:10px;bottom:10px;padding:12px;gap:6px}.office-scene[data-camera-view="室内"] .office-room-board strong{font-size:18px}.office-scene[data-camera-view="室内"] .office-room-board span{font-size:11px}} .ceo-placeholder{display:grid;place-content:center;text-align:center;width:88px;height:88px;border-radius:50%;background:#0b57d0;border:3px solid #9aa0a6;box-shadow:0 5px 16px #15394a22;color:#feefc3}.ceo-placeholder b{font-size:24px;letter-spacing:.08em}.ceo-placeholder small{font-size:11px;letter-spacing:.2em;margin-top:4px} /* Head-anchored speech: message, name and level are separate visual layers. */ .office-speech-dock .office-speech{min-height:0;height:auto;padding:0!important;background:transparent;border:0!important;box-shadow:none;text-align:center;will-change:transform} .office-speech-dock .office-speech p{display:block;margin:0 0 7px;padding:7px 9px;border-radius:11px;background:#fffdf5;color:#304351;box-shadow:0 3px 9px #0002;font-size:10px;line-height:1.45;position:relative} .office-speech-dock .office-speech p[hidden]{display:none} .office-speech-dock .office-speech>button{display:flex;flex-direction:column-reverse;align-items:center;gap:0;background:#162b3ce8;border:0;padding:4px 6px;border-radius:7px;min-height:0;color:#fff} .office-speech-dock .office-speech button small{font-size:14px;line-height:1.3;color:#fff;font-weight:700} .office-speech-dock .office-speech button strong{font-size:8px;color:#d0dfe6!important;font-weight:400} .office-speech-dock .office-speech .speech-level{margin:2px 0 0;font-size:9px;padding:2px 5px;line-height:1;border:0;background:#1a2d3bea;color:#f4d497} .office-speech-dock .office-speech .office-speech-status{display:none} .office-speech-dock .office-speech[data-agent=finance] .speech-level{display:none} @media(max-width:700px){.office-stage{display:flex;flex-direction:column}.office-stage .office-scene{order:-1;width:100%;height:540px;min-height:540px}.office-inroom-board{max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;box-sizing:border-box}.office-scene .office-camera-controls{top:65px}.office-speech-dock .office-speech button small{font-size:12px}} .office-speech-dock .office-speech>button:disabled{opacity:1;cursor:default} .office-room-brand{right:auto;max-width:calc(100% - 24px)} .evidence-catalog-dialog{width:min(840px,calc(100vw - 32px));max-height:85vh;box-sizing:border-box;border:1px solid #dadce0;border-radius:18px;padding:24px;color:#1f1f1f}.evidence-catalog-dialog::backdrop{background:#172b3a77}.evidence-catalog-dialog>button{float:right}.evidence-catalog-dialog p{font-size:13px;line-height:1.7;color:#5f6368}.evidence-needs{background:#fef7e0;border-radius:12px;padding:16px;margin:18px 0}.evidence-needs strong{font-size:13px}.evidence-catalog-dialog label{display:grid;gap:8px;font-size:13px}.evidence-catalog-dialog input{padding:12px;border:1px solid #bdc1c6;border-radius:8px}.evidence-catalog-dialog details{border:1px solid #dadce0;padding:14px;border-radius:10px;margin:8px 0}.evidence-catalog-dialog summary{cursor:pointer;font-weight:600;font-size:13px}.evidence-catalog-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.8 inherit;background:#f0f4f9;padding:12px;max-height:340px;overflow:auto}.evidence-catalog-dialog small{color:#5f6368} .proposal-plan-dialog textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #bdc1c6;border-radius:8px;font:13px/1.7 system-ui;resize:vertical}.proposal-plan-dialog label{margin:14px 0;color:#3c4043}.proposal-plan-dialog select{max-width:100%;padding:10px;border:1px solid #bdc1c6;border-radius:8px}.proposal-plan-dialog details>p{white-space:pre-line;background:#f1f3f4;padding:12px;border-radius:8px}.proposal-plan-dialog .plan-original{max-height:180px;font-family:system-ui} .pilot-summary{background:#e8f0fe;border:1px solid #dadce0;border-radius:12px;padding:16px;margin:14px 0}.pilot-summary strong{font-size:18px;color:#0b57d0}.pilot-summary p{margin:10px 0}#pilot-dialog label{display:block;margin:14px 0}#pilot-dialog input[type=checkbox]{width:auto;margin-right:8px}#pilot-dialog button{margin:8px 10px 8px 0} /* A consistent status and return point for the production workspace. */ #request-current-state{display:inline-flex;align-items:center;padding:5px 9px;margin-top:6px;border-radius:6px;background:#e8f0fe;color:#3c4043;font-size:12px;font-weight:650} #request-current-state[data-state=attention]{color:#8a4b00;background:#feefc3} #request-current-state[data-state=sent]{color:#1f1f1f;background:#ceead6} #request-section-nav{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding-bottom:5px} #request-section-nav button{white-space:nowrap;min-height:40px;border-radius:8px} #request-section-nav button[aria-current]{background:#0b57d0;color:white;border-color:#0b57d0} #request-guide[data-state=attention]{background:#fef7e0;border-color:#bdc1c6} #request-guide[data-state=attention] button{background:#b06000} #request-dialog :is(#request-guide,#rough-quality){scroll-margin-top:150px} /* Manual lecture preparation; kept separate from generated deliverables. */ dialog.lecture-preparation{width:min(1000px,94vw);max-height:92dvh;padding:28px;border:1px solid #dadce0;border-radius:24px;background:#f0f4f9;color:#1f1f1f;overflow:auto;box-shadow:0 28px 90px #14243d40} .lecture-preparation::backdrop{background:#17233780;backdrop-filter:blur(4px)} .lecture-preparation>header{position:static;display:flex;align-items:center;justify-content:space-between;padding:0;background:transparent;box-shadow:none;min-height:0;gap:16px} .lecture-preparation h2{font-size:25px;margin:0}.lecture-preparation h3{font-size:20px}.lecture-preparation h4{margin:0 0 12px}.lecture-preparation .lecture-path{padding:12px 16px;border-radius:12px;background:#e8f0fe;color:#0b57d0;font-weight:650} .lecture-preparation label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:14px}.lecture-preparation textarea{box-sizing:border-box;width:100%;resize:vertical;background:white;color:#1f1f1f;border:1px solid #bdc1c6;border-radius:10px;padding:12px;font:inherit;font-weight:400;line-height:1.6} .lecture-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lecture-inputs label:nth-child(5){grid-column:1/-1} .lecture-segment{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:white;padding:20px;border-radius:16px;border:1px solid #dadce0;margin:14px 0}.lecture-segment>button{justify-self:end}.lecture-segment label:first-of-type,.lecture-segment label:last-child{grid-column:1/-1} .lecture-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}.lecture-actions>button:first-child{background:#0b57d0;color:white;border-color:#0b57d0}.lecture-preparation button{border-radius:10px;padding:10px 16px;cursor:pointer}.lecture-preparation input[type=file]{max-width:260px} .lecture-preview{border-top:1px solid #dadce0;margin-top:20px;scroll-margin-top:20px}.lecture-preview article{background:white;padding:20px;border:1px solid #dadce0;border-radius:14px;margin:14px 0}.lecture-preview p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7} @media(max-width:640px){dialog.lecture-preparation{padding:18px}.lecture-inputs,.lecture-segment{grid-template-columns:1fr}.lecture-preparation>header{align-items:flex-start}.lecture-preparation h2{font-size:21px}} .lecture-server-panel{padding:18px;background:#e8f0fe;border:1px solid #dadce0;border-radius:16px;margin:18px 0;display:grid;gap:12px}.lecture-server-panel select{max-width:100%;min-height:42px;padding:8px;border:1px solid #bdc1c6;border-radius:8px;background:white;color:#1f1f1f}.lecture-reference-list label{flex-direction:row;align-items:center;font-weight:400}.lecture-reference-list input{width:auto}.lecture-server-panel details p{white-space:pre-wrap;overflow-wrap:anywhere}.lecture-server-panel details{max-height:360px;overflow:auto} .specialist-avatar{display:grid;place-items:center;width:90px;height:90px;margin:auto;border-radius:28px;font-size:36px;font-weight:700;background:#e8ecf4;color:#36516b}.specialist-instagram{background:#f4e3eb;color:#994b6b}.specialist-seo{background:#e0eeeb;color:#386d63}.specialist-youtube{background:#f5ecd9;color:#22303f} /* Product usability pass: compact office entry and searchable delegation. */ :root{--flow-ink:#0b57d0;--flow-muted:#3c4043;--flow-accent:#0b57d0;--flow-line:#dadce0;--flow-surface:#f0f4f9} body>.app-header{position:sticky;top:0;z-index:40;background:#fffffff5;border-bottom:1px solid #dce2eb;box-shadow:0 2px 12px #1b294908;backdrop-filter:blur(12px)} .app-navigation a,.app-navigation button{font-weight:600;min-height:40px}.app-navigation [aria-current=page]{background:#edf1ff;color:#294ca8;box-shadow:inset 0 -2px #3458c0} #notice{font-size:11px;line-height:1.6;color:#3c4043;background:#e8f0fe;padding:7px 20px;border-bottom:1px solid #e8eaed} .flow-home{grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);padding:18px 2px;gap:24px}.flow-eyebrow{font-size:9px;margin-bottom:6px;color:#5f6368}.flow-home h1{font-size:clamp(23px,2.2vw,32px);margin-bottom:6px}.flow-home-intro>p:last-of-type{font-size:12px}.flow-home-actions{margin-top:12px;gap:16px} #flow-new-work{background:#0b57d0;border-radius:9px;min-height:44px;padding:11px 18px;box-shadow:0 3px 8px #294baf20}#flow-new-work:hover{background:#0b57d0}.flow-home-actions a{color:#0b57d0} .flow-next-action{position:relative;border-radius:12px;padding:12px 16px;box-shadow:none;border-left:3px solid #bdc1c6}.flow-next-action h3{font-size:14px;margin:4px 0}.flow-next-action>p{font-size:11px;line-height:1.6}.flow-next-action>small{font-size:10px}.flow-next-action button{background:#e8f0fe;color:#0b57d0;min-height:36px;margin-bottom:2px}.flow-next-action .flow-status{margin-top:6px}.flow-next-action>small:last-child{margin-top:4px;color:#5f6368} .office-world{border-radius:14px;border-color:#d4dce8;box-shadow:0 8px 30px #17263b0c}.office-world-toolbar{background:#fff!important}.flow-team-training{background:#e8f0fe}.flow-team-training>summary{color:#3c4043;font-size:11px}.office-inroom-board{background:#f4f6fb!important;color:#263449}.office-inroom-board section{background:#fff;border:1px solid #e0e5ef;border-radius:10px;padding:14px}.office-inroom-board h2{color:#263449!important;font-size:16px!important}.office-inroom-board small,.office-inroom-board p{color:#5a687c}.office-inroom-board input,.office-inroom-board select{background:#fff;color:#263449;border-color:#ced7e5} .flow-work-dialog{background:#f0f4f9;max-height:90dvh;overflow:auto;box-sizing:border-box;box-shadow:0 30px 90px #10234440}.flow-work-dialog h2{color:#1f1f1f;font-size:26px;letter-spacing:-.03em}.flow-work-search{display:grid;gap:8px;margin:20px 0;font-size:12px;color:#3c4043;font-weight:600}.flow-work-search input{box-sizing:border-box;width:100%;border:1px solid #bdc1c6;background:white;border-radius:10px;padding:13px 15px;font:14px system-ui;color:#1f1f1f;min-height:46px}.flow-work-search input:focus{outline:3px solid #3458c025;border-color:#0b57d0}.flow-work-dialog .work-menu{border-radius:12px;overflow:hidden;border-color:#dadce0;box-shadow:0 2px 5px #172b4a04}.flow-work-dialog .work-menu summary{border-top:3px solid #80868b;background:#ffffff;padding:14px 12px}.flow-work-dialog .work-menu:nth-of-type(2) summary{border-top-color:#80868b}.flow-work-dialog .work-menu:nth-of-type(3) summary{border-top-color:#80868b}.flow-work-dialog .work-menu:nth-of-type(4) summary{border-top-color:#0b57d0}.flow-work-dialog .work-menu:nth-of-type(5) summary{border-top-color:#80868b}.flow-work-dialog .work-menu-options button{background:#e8f0fe;color:#1f1f1f;min-height:64px}.flow-work-dialog .work-menu-options button:hover{background:#e8f0fe}.flow-work-dialog .work-menu[hidden],.flow-search-empty[hidden]{display:none!important}.flow-search-empty{text-align:center;padding:32px 16px;border:1px dashed #bdc1c6;border-radius:12px}.flow-dialog-close{min-height:40px} button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:#0b57d0} @media(max-width:750px){.flow-home{grid-template-columns:1fr;gap:12px;padding:14px 8px}.flow-home h1{font-size:24px}.flow-next-action{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:10px 12px}.flow-next-action>small:first-child{grid-column:1/-1}.flow-next-action .flow-status{justify-self:start}.flow-next-action h3{grid-column:1;font-size:13px}.flow-next-action button{grid-column:2;grid-row:2/4;align-self:center;margin:0;white-space:nowrap}.flow-next-action>p,.flow-next-action>small:not(:first-child){grid-column:1/-1}.flow-next-action>p{margin:4px 0;font-size:10px}.flow-next-action>small:last-child{display:none}.flow-work-dialog .work-launcher{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-work-dialog{padding:20px}.flow-work-dialog .ai-menu-title{font-size:13px}.flow-work-dialog .work-menu summary{flex-wrap:wrap}.flow-work-dialog .work-menu-options button{padding:10px}.flow-home-intro>p:last-of-type{font-size:11px}.office-inroom-board{gap:10px;padding:10px}.office-scene .office-camera-controls{top:68px;right:10px;max-width:calc(100% - 20px)} } @media(max-width:420px){.flow-work-dialog .work-launcher{grid-template-columns:1fr}.office-inroom-board{grid-template-columns:1fr}.flow-home h1{font-size:22px}} /* A stable return point and explicit request stages. */ #proposal-tool-dialog{max-height:92dvh;overflow:auto;scroll-padding-top:145px;background:#f0f4f9;border-color:#dadce0;box-shadow:0 24px 80px #14244340} #proposal-tool-form>.editor-top{position:sticky;top:-24px;z-index:4;background:#f8f9fcf7;backdrop-filter:blur(10px);padding:16px 0 12px;border-bottom:1px solid #dadce0;align-items:center} .brief-return-actions{display:flex;gap:8px;align-items:center}.brief-return-actions button{white-space:nowrap;min-height:40px;border-radius:8px;font-size:12px}.brief-return-actions #brief-choose-again{background:#e8f0fe;color:#0b57d0;border-color:#dadce0} .brief-journey{display:flex;gap:8px;padding:0;margin:18px 0;list-style:none;counter-reset:brief-step}.brief-journey li{counter-increment:brief-step;flex:1;background:#e8f0fe;color:#1f1f1f;padding:10px 12px;border-radius:8px;font-size:12px}.brief-journey li:before{content:counter(brief-step);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#d3e3fd;margin-right:7px;font-size:11px;font-weight:700}.brief-journey li[aria-current=step]{background:#e8f0fe;color:#0b57d0;font-weight:700}.brief-journey li[aria-current=step]:before{background:#0b57d0;color:white} .brief-save-hint{font-size:12px!important;color:#5f6368;background:#e8f0fe;border:1px solid #dadce0;padding:12px;border-radius:9px;line-height:1.7} #proposal-tool-dialog .brief-context{background:#ffffff;border:1px solid #dadce0;border-radius:12px;padding:18px}#proposal-tool-dialog textarea:focus,#proposal-tool-dialog select:focus{outline:3px solid #3458c022;border-color:#80868b}#proposal-tool-submit{min-height:46px;border-radius:9px;background:#0b57d0;color:white} .flow-teammate-copy{padding:16px}.flow-teammate-copy h3{font-size:23px;margin-bottom:9px}.flow-teammate-copy h4{font-size:14px}.flow-teammate-portrait{height:118px}.flow-teammate-portrait img{height:160px;width:140px}.flow-teammate-actions button:first-child{background:#0b57d0;border-color:#0b57d0}.flow-teammate-actions button{color:#3c4043}.flow-team-showcase{margin:20px 0;padding:12px 0} @media(max-width:650px){#proposal-tool-form>.editor-top{top:-18px;align-items:flex-start;gap:10px;flex-direction:column}.brief-return-actions{width:100%;justify-content:space-between}.brief-journey{gap:5px}.brief-journey li{padding:8px 5px;font-size:11px}.brief-journey li:before{margin-right:4px;width:18px;height:18px}.flow-teammate-portrait{height:100%}} /* Office first: actions belong to the workspace, follow-up comes after it. */ #my-office{margin-top:10px} .office-world-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px} .office-delegate-actions{display:flex;align-items:center;gap:14px;margin-left:auto} .office-delegate-actions #flow-new-work{font-size:12px;min-height:40px;padding:10px 14px;white-space:nowrap} .office-delegate-actions a{font-size:12px;font-weight:650;color:#3458a5;text-decoration:none;white-space:nowrap;padding:10px 0} .office-delegate-actions a:hover{text-decoration:underline} .office-world-toolbar .office-view-actions{margin-left:0} .office-follow-up{padding:12px;background:#f4f6fb;border-top:1px solid #dce3ed} .office-follow-up .flow-next-action{margin:0;background:#fff;max-width:none} @media(max-width:1000px){.office-world-toolbar .office-view-actions{width:100%;border-top:1px solid #edf0f5;padding-top:8px;justify-content:flex-start}} @media(max-width:600px){.office-world-toolbar .office-company-brand{width:auto;flex:1}.office-delegate-actions{margin-left:0;gap:12px;flex-wrap:wrap}.office-delegate-actions #flow-new-work{min-height:38px;padding:8px 12px}.office-delegate-actions a{font-size:11px}.office-follow-up{padding:8px}} /* Compact labels preserve the scene instead of covering desks with cards. */ .office-speech-dock .office-speech p{font-size:9px;line-height:1.4;padding:5px 7px;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;border:1px solid #e5e8ec;box-shadow:0 2px 6px #0002;border-radius:8px} .office-speech-dock .office-speech button small{font-size:12px;line-height:1.2}.office-speech-dock .office-speech>button{padding:3px 6px;background:#1d3046e8}.office-speech-dock .office-speech .speech-level{font-size:8px;padding:2px 4px;margin-top:1px} .office-scene[data-camera-view="室内"] .office-room-board{width:210px;padding:12px;gap:6px;border:1px solid #d4c49b;background:#fffaf0;box-shadow:0 4px 18px #0002}.office-scene[data-camera-view="室内"] .office-room-board strong{font-size:16px}.office-scene[data-camera-view="室内"] .office-room-board span{font-size:10px} @media(max-width:600px){.office-speech-dock .office-speech button small{font-size:11px}.office-speech-dock .office-speech button strong{font-size:7px}.office-scene[data-camera-view="室内"] .office-room-board{width:180px}} .office-scene .office-camera-controls{top:auto!important;bottom:14px;left:14px;right:auto;max-width:calc(100% - 225px);display:flex;flex-wrap:wrap;gap:4px}.office-scene .office-camera-controls button{font-size:10px;min-height:30px;padding:5px 8px;background:#f6f8fbf2;border:1px solid #ccd6e2;color:#35485f}.office-scene .office-camera-controls button[aria-pressed=true]{background:#dfe8f9;color:#264b91;border-color:#9db5de} @media(max-width:600px){.office-scene .office-camera-controls{max-width:calc(100% - 205px);bottom:12px;left:10px}} /* Member collection: progress reflects saved customer inputs, not fictional XP. */ .flow-teammate{--member-accent:#0b57d0;border-top:3px solid var(--member-accent)} .flow-teammate[data-agent=content]{--member-accent:#d93025}.flow-teammate[data-agent=instagram]{--member-accent:#80868b}.flow-teammate[data-agent=seo]{--member-accent:#0b57d0}.flow-teammate[data-agent=youtube]{--member-accent:#e37400}.flow-teammate[data-agent=operations]{--member-accent:#0b57d0} .teammate-growth{border:1px solid #dce4f0;border-radius:12px;padding:14px;margin:16px 0 8px;background:linear-gradient(135deg,#f1f5fc,#fff)} .teammate-level-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.teammate-level-heading>strong{display:flex;align-items:baseline;gap:5px;color:var(--member-accent)}.teammate-level-heading>strong>small{font-size:10px;white-space:nowrap}.teammate-level-heading>strong>span{font-size:38px;letter-spacing:-.06em;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums}.teammate-level-heading>div{text-align:right}.teammate-level-heading b{display:block;font-size:11px;color:#344864}.teammate-level-heading>div>small{display:block;font-size:10px;color:#637189;margin-top:4px} .teammate-growth progress{display:block;width:100%;height:8px;border:0;border-radius:10px;overflow:hidden;margin:12px 0 8px;background:#e1e7f0;accent-color:var(--member-accent)}.teammate-growth progress::-webkit-progress-bar{background:#e1e7f0;border-radius:10px}.teammate-growth progress::-webkit-progress-value{background:var(--member-accent);border-radius:10px}.teammate-next-level{font-size:11px!important;font-weight:650;color:var(--member-accent)!important;margin:8px 0 10px!important;line-height:1.5!important}.teammate-quests{display:grid;gap:6px}.teammate-quest{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;background:#fff;border:1px solid #dce4ef;border-radius:7px;text-align:left;color:#3c4e68;cursor:pointer}.teammate-quest:hover{border-color:var(--member-accent);background:#f8faff}.teammate-quest span{font-size:11px;line-height:1.5}.teammate-quest b{font-size:10px;color:var(--member-accent);white-space:nowrap}.teammate-growth>small{display:block;font-size:9px;line-height:1.6;color:#6e7a8b;margin-top:10px}.flow-teammate-actions button:nth-child(2){background:#e8f0fe;color:#0b57d0;border-color:#dadce0;font-weight:700} @media(max-width:750px){.teammate-growth{padding:11px}.teammate-level-heading>strong>span{font-size:34px}.teammate-level-heading{gap:8px}} /* Never flash the obsolete photographic office while WebGL loads or fails. */ .office-render-status{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:#252d37;color:#f1f5fa;box-sizing:border-box}.office-render-status strong{font-size:17px}.office-render-status p{font-size:12px;line-height:1.8;color:#c3cddd;max-width:330px}.office-render-status button{background:#f4f7fc;border:1px solid #dce3ed;border-radius:8px;padding:10px 16px;color:#334c71} .office-scene[data-render-state=ready]>.office-render-status{display:none} .office-scene:not([data-render-state=ready]) #office-characters{visibility:hidden} .office-scene[data-render-state=loading] #office-render-retry{visibility:hidden} .office-scene:not([data-render-state=ready]):after{display:none} .team-growth-summary{padding:18px 20px;margin:18px 0;border:1px solid #dadce0;border-radius:14px;background:#e8f0fe;color:#3c4043}.team-growth-summary>strong{font-size:21px}.team-growth-summary p{font-size:12px;line-height:1.7;color:#5f6368}.team-growth-summary>small{font-size:10px;line-height:1.7;color:#5f6368}.team-growth-breakdown{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.team-growth-breakdown span{padding:6px 9px;border:1px solid #dadce0;border-radius:7px;background:white;font-size:11px} .team-growth-history{margin:14px 0}.team-growth-history summary{cursor:pointer;font-size:12px;font-weight:650;padding:8px 0}.team-growth-history article{background:#ffffff;border:1px solid #dadce0;padding:12px;border-radius:9px;margin:8px 0}.team-growth-history article>strong{font-size:11px}.team-growth-history article>span{display:inline-block;background:#e8f0fe;color:#0b57d0;border-radius:6px;padding:5px 8px;margin:3px;font-size:11px}.team-growth-history article>small{display:block;font-size:10px;color:#5f6368;line-height:1.7;margin-top:5px} /* One cast, one studio: consistent illustrated portraits across the product. */ .team-portrait-art{display:block;width:148px;height:174px;max-width:100%;margin:auto;filter:drop-shadow(0 5px 6px #21354b12)}.office-person .team-portrait-art{width:100%;height:auto}.has-real-3d .office-person .team-portrait-art{display:none}.office-list-agent .team-portrait-art{width:70px;height:90px;flex-shrink:0}.office-portrait .team-portrait-art{width:160px;height:190px}.flow-teammate-portrait{height:172px;background:radial-gradient(ellipse at 50% 70%,#e8f0fe 10%,#d3e3fd 100%)}.flow-teammate-portrait .team-portrait-art{height:174px;width:156px}.flow-teammate-portrait:before{content:'';position:absolute;width:126px;height:126px;border:1px solid #ffffffc0;border-radius:50%;top:16px;left:calc(50% - 63px)}.flow-teammate-portrait small{font-size:9px;background:#ffffffed;box-shadow:0 2px 5px #25364e08}.flow-teammate-copy h3{letter-spacing:-.025em}.flow-teammate[data-agent=instagram] .flow-teammate-portrait{background:#e8eaed}.flow-teammate[data-agent=seo] .flow-teammate-portrait{background:#e8eaed}.flow-teammate[data-agent=youtube] .flow-teammate-portrait{background:#feefc3}.flow-teammate[data-agent=content] .flow-teammate-portrait{background:#e8eaed} @media(max-width:750px){.flow-teammate-portrait{height:100%}.flow-teammate-portrait .team-portrait-art{margin-top:20px;width:120px;height:150px}.flow-teammate-portrait:before{width:96px;height:96px;left:calc(50% - 48px);top:36px}} /* The Knowledge Guild — original character collection, shared with the 3D cast. */ .guild-portrait{display:block;width:100%;aspect-ratio:1;background-image:url('/guild-roster.png');background-size:300% 200%;background-position:var(--portrait-x) var(--portrait-y);background-repeat:no-repeat;flex-shrink:0;border-radius:inherit} .office-list-agent .guild-portrait{width:94px}.office-portrait .guild-portrait{width:210px;margin:auto;border-radius:16px}.roster-portrait .guild-portrait{width:180px;margin:auto}.office-person .guild-portrait{width:100%}.has-real-3d .office-person .guild-portrait{display:none} #flow-team-showcase{padding:32px 24px;background:#1f1f1f;border:1px solid #1f1f1f;border-radius:20px;color:#f1f3f4;margin:24px 0} #flow-team-showcase>p:first-child{color:#f9ab00;font-size:11px;letter-spacing:.24em}#flow-team-showcase>h2{color:#feefc3;font-size:clamp(23px,2.5vw,32px)}#flow-team-showcase>p{color:#9aa0a6}.flow-team-journey{color:#d3e3fd}.flow-team-journey li{background:#0b57d0;border-color:#1f1f1f}.flow-team-journey strong{color:#fdd663}.flow-team-journey small{color:#9aa0a6} #flow-team-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.flow-teammate{display:block;border:1px solid #3c4043;border-radius:16px;background:#0b57d0;box-shadow:0 12px 32px #0003;transition:transform .2s,border-color .2s}.flow-teammate:hover{transform:translateY(-4px);border-color:#80868b} .flow-teammate-portrait{display:block;height:auto!important;aspect-ratio:1;background:#1f1f1f!important;border-bottom:1px solid #3c4043;overflow:hidden}.flow-teammate-portrait:before{display:none}.flow-teammate-portrait .guild-portrait{border-radius:0}.guild-archetype{position:absolute;left:12px;top:12px;border:1px solid #b99858;background:#111725e8;color:#f0d798;border-radius:5px;padding:6px 10px;font-size:11px;letter-spacing:.06em}.flow-teammate-portrait>small{bottom:12px;right:12px;left:auto;background:#0c182bec;color:#d3e3fd;border:1px solid #748aa480;border-radius:5px} .flow-teammate-copy{padding:20px}.flow-teammate-copy>small{color:#f9ab00;font-size:11px;letter-spacing:.06em}.flow-teammate-copy h3{color:#feefc3;font-size:30px;margin:6px 0 14px}.flow-teammate-copy h4{color:#d3e3fd}.flow-teammate-copy>p,.flow-teammate-copy li{color:#bdc1c6}.flow-teammate-copy li:before{color:#f9ab00}.flow-teammate-actions button:first-child{background:#f9ab00;border-color:#9aa0a6;color:#1f1f1f}.flow-teammate-actions button:first-child:hover{background:#fdd663}.flow-teammate-actions button{background:#0b57d0;color:#d3e3fd;border-color:#3c4043}.flow-teammate-actions button:nth-child(2){background:#0b57d0;color:#e8f0fe;border-color:#80868b} .teammate-growth{background:#131e30;border-color:#384a64}.teammate-level-heading>strong,.teammate-next-level{color:#efd29a!important}.teammate-level-heading b{color:#c7d9f3}.teammate-level-heading>div>small,.teammate-growth>small{color:#aab8cc}.teammate-quest{background:#1f2e46;border-color:#415676;color:#dee7f6}.teammate-quest:hover{background:#2b3b59;border-color:#cfaf75}.teammate-quest b{color:#efd29a}.teammate-growth progress{accent-color:#d4b779}.teammate-growth progress::-webkit-progress-value{background:linear-gradient(90deg,#8b70c6,#dcc18e)} #team-growth-summary{background:#0b57d0;border-color:#0b57d0;color:#fdd663}#team-growth-summary p,#team-growth-summary>small{color:#bdc1c6}.team-growth-breakdown span{background:#0b57d0;color:#d3e3fd;border-color:#0b57d0}.team-growth-history{color:#a8c7fa}.team-growth-history article{background:#e8f0fe} .office-world{border:1px solid #5b5260;box-shadow:0 16px 50px #10182726}.office-stage .office-scene{background:#0d1425}.office-scene .office-camera-controls button{background:#192338e8;color:#eddbb7;border:1px solid #83724e}.office-scene .office-camera-controls button[aria-pressed=true]{background:#d5b67b;color:#172339;border-color:#f4d497}.office-speech-dock .office-speech>button{background:#152038eb;border:1px solid #90784e}.office-speech-dock .office-speech p{background:#fff9eb;color:#35405a;border-color:#c9ae73}.office-scene[data-camera-view="室内"] .office-room-board{border-color:#8c7652;background:#f9efd7}.office-render-status{background:radial-gradient(ellipse at 50% 80%,#273a57,#0c1426)} @media(max-width:1000px){#flow-team-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){#flow-team-showcase{padding:22px 12px}#flow-team-cards{gap:12px}.flow-teammate-copy{padding:12px}.flow-teammate-copy h3{font-size:23px}.guild-archetype{top:7px;left:7px;padding:4px 6px;font-size:9px}.flow-teammate-portrait>small{font-size:8px;bottom:6px;right:6px}.teammate-level-heading{flex-wrap:wrap}.teammate-level-heading>div{text-align:left}.teammate-quest{flex-wrap:wrap;padding:7px}.flow-teammate-copy>p{font-size:11px}.flow-teammate-copy h4{font-size:12px}.flow-teammate-actions button{font-size:10px;padding:10px 6px}} @media(max-width:370px){#flow-team-cards{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.flow-teammate{transition:none}.flow-teammate:hover{transform:none}} .guild-proposal{background-position:0% 0%}.guild-content{background-position:50% 0%}.guild-instagram{background-position:100% 0%}.guild-seo{background-position:0% 100%}.guild-youtube{background-position:50% 100%}.guild-operations{background-position:100% 100%} /* Studio product direction: work first, character as identity, knowledge on demand. */ :root{--studio-ink:#0b57d0;--studio-action:#0b57d0;--studio-border:#dadce0} body{background:#f1f3f4}.office-world{border:1px solid #cbd8df;box-shadow:0 12px 36px #20374b12;border-radius:16px}.office-world-toolbar{padding:14px 16px!important}.office-delegate-actions #flow-new-work{background:var(--studio-action);box-shadow:none;border:0;border-radius:9px}.office-delegate-actions a{color:#365c70} .office-stage .office-scene{background:#d9e1e8}.office-scene .office-camera-controls button{background:#ffffffed;color:#344d60;border-color:#bbcbd5}.office-scene .office-camera-controls button[aria-pressed=true]{background:#254b58;color:#fff;border-color:#254b58}.office-speech-dock .office-speech>button{background:#ffffffed;border:1px solid #bfd0d9;box-shadow:0 3px 12px #19344812}.office-speech-dock .office-speech>button small{color:#203f4d!important;font-size:12px!important}.office-speech-dock .office-speech>button strong{color:#526b7d!important;font-size:9px!important}.office-speech-dock .office-speech p{background:#edf3f6;color:#4e6375;border-color:#cad7e0;box-shadow:none}.office-speech-dock .office-speech.has-assignment p{background:#fff8e7;border-color:#d1a85d;color:#70521e;font-weight:650}.office-speech-dock .office-speech .speech-level{background:#edf4f7;color:#405f72}.office-scene[data-camera-view="室内"] .office-room-board{background:#fff;border-color:#bbcdd5;color:#21404e;box-shadow:0 8px 25px #1e344522}.office-scene[data-camera-view="室内"] .office-room-board strong{color:#21404e} #flow-team-showcase{background:#ffffff;border:1px solid var(--studio-border);padding:28px;border-radius:16px;color:var(--studio-ink)}#flow-team-showcase>p:first-child{color:#3c4043;letter-spacing:.16em}#flow-team-showcase>h2{color:var(--studio-ink);font-size:27px}#flow-team-showcase>p{color:#5f6368}.flow-team-journey li{background:#f1f3f4;border:1px solid #e8eaed}.flow-team-journey strong{color:#1f1f1f}.flow-team-journey small{color:#5f6368} #team-growth-summary{background:#f8f9fa;color:#3c4043;border-color:#dadce0;padding:12px 16px;margin:14px 0}#team-growth-summary>strong{font-size:14px}#team-growth-summary p{font-size:11px;color:#5f6368;margin:6px 0}#team-growth-summary>small{color:#80868b;font-size:9px}.team-growth-breakdown{margin:8px 0}.team-growth-breakdown span{background:#ffffff;color:#5f6368;border-color:#dadce0;font-size:10px}.team-growth-history{color:#5f6368} #flow-team-cards{gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.flow-teammate{background:#ffffff;border:1px solid #dadce0;border-radius:12px;box-shadow:0 4px 12px #20374b06;position:relative;overflow:hidden}.flow-teammate:hover{border-color:#80868b;transform:translateY(-2px);box-shadow:0 8px 20px #20374b10}.flow-teammate-portrait{height:112px!important;aspect-ratio:auto;background:linear-gradient(120deg,#e8f0fe,#dadce0)!important;border-bottom:1px solid #dadce0;display:flex;align-items:center;padding:14px;box-sizing:border-box}.flow-teammate-portrait .guild-portrait{width:78px;height:78px;aspect-ratio:1;border-radius:16px;box-shadow:0 3px 10px #102a4333}.guild-archetype{position:static;background:none;color:#263f50;border:0;padding:0 0 22px 14px;font-size:14px;letter-spacing:0;font-weight:700}.flow-teammate-portrait>small{left:106px;right:auto;bottom:24px;font-size:9px;color:#3c4043;background:#ffffff;border:1px solid #bdc1c6;box-shadow:none} .flow-teammate-copy{padding:18px}.flow-teammate-copy>small{display:none}.flow-teammate-copy h3{font-size:23px;color:#1f1f1f;margin:0 0 12px}.flow-teammate-copy h4{color:#1f1f1f;font-size:14px}.flow-teammate-copy>p{color:#5f6368;min-height:65px;font-size:12px}.flow-teammate-copy li{color:#3c4043;font-size:11px}.flow-teammate-copy li:before{color:#3c4043}.flow-teammate-actions button:first-child{background:#0b57d0;border-color:#0b57d0;color:#ffffff}.flow-teammate-actions button:first-child:hover{background:#0b57d0}.flow-teammate-actions button{background:white;color:#3c4043;border-color:#dadce0}.flow-teammate-actions button:nth-child(2){background:#e8f0fe;color:#3c4043;border-color:#dadce0;font-weight:500}.member-training-detail{border-top:1px solid #dadce0;padding-top:10px;margin-top:14px}.member-training-detail>summary{font-size:11px;color:#5f6368;cursor:pointer;padding:6px 0}.teammate-growth{background:#f5f8fa;border-color:#d7e3e9}.teammate-level-heading>strong,.teammate-next-level{color:#3f7069!important}.teammate-level-heading b{color:#34516c}.teammate-level-heading>div>small,.teammate-growth>small{color:#637b88}.teammate-quest{background:#fff;border-color:#cfdee5;color:#3c5768}.teammate-quest:hover{background:#eef6f3;border-color:#70a595}.teammate-quest b{color:#367c69} .employee-work-new{background:#0b57d0;color:white;border:0;border-radius:8px;padding:11px 16px;margin:8px 0 16px} @media(max-width:1100px){#flow-team-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){#flow-team-showcase{padding:20px 12px}#flow-team-cards{gap:12px}.flow-teammate-copy{padding:13px}.flow-teammate-portrait{height:96px!important;padding:10px}.flow-teammate-portrait .guild-portrait{width:54px;height:64px}.guild-archetype{font-size:11px;padding-left:8px}.flow-teammate-portrait>small{left:73px;bottom:21px;max-width:calc(100% - 82px);font-size:8px;padding:4px}.flow-teammate-copy h3{font-size:21px}.flow-teammate-copy h4{font-size:12px}.flow-teammate-copy>p{min-height:0;font-size:11px}.flow-teammate-actions button{font-size:10px}} @media(max-width:390px){#flow-team-cards{grid-template-columns:1fr}} .studio-work-strip{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #e0e7ec;background:#f8fafb}.studio-work-label{min-width:125px}.studio-work-label small{display:block;font-size:8px;letter-spacing:.14em;color:#7c909e}.studio-work-label strong{font-size:12px;color:#354e5e}.studio-work-link{flex:1;display:grid;grid-template-columns:1fr auto;text-align:left;gap:4px 12px;background:white;border:1px solid #d9e2e8;border-left:3px solid #cba764;border-radius:8px;padding:10px 12px;color:#254654}.studio-work-link small{font-size:9px;color:#846534;grid-column:1/-1}.studio-work-link strong{font-size:12px}.studio-work-link span{font-size:10px;color:#437867}.studio-work-link[data-state=sent]{border-left-color:#4c927d}.studio-work-link[data-state=sent] small{color:#437867}.studio-work-strip>p{font-size:12px;color:#637a8b} @media(max-width:700px){.studio-work-strip{flex-wrap:wrap;padding:10px}.studio-work-label{width:100%;display:flex;gap:9px;align-items:center}.studio-work-link{min-width:0;grid-template-columns:1fr;padding:9px}.studio-work-link span{font-size:9px}.studio-work-link strong{font-size:11px}} .flow-teammate-portrait{justify-content:flex-start}.flow-teammate-portrait .guild-portrait{margin:0}.flow-teammate-portrait .guild-archetype{max-width:calc(100% - 90px);line-height:1.5} /* Art-directed studio presentation. Fixed perspective artwork, distinct from WebGL. */ .guild-portrait{background-image:none}.studio-presentation{display:none;position:absolute;inset:0;overflow:hidden;background:#b2b6ba}.studio-art-mode .studio-presentation{display:block}.studio-interior{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.studio-art-mode>.office-webgl,.studio-art-mode>.office-speech-dock,.studio-art-mode>.office-camera-controls,.studio-art-mode>.office-room-board,.studio-art-mode>.office-render-status{display:none!important}.studio-art-mode #office-characters{visibility:hidden!important}.office-stage .office-scene.studio-art-mode{height:620px;min-height:620px}.studio-mode-toggle{position:absolute;z-index:26;bottom:14px;left:14px;background:#ffffffef;color:#315466;border:1px solid #becfd9;border-radius:8px;padding:10px 13px;font-size:11px;box-shadow:0 3px 10px #14243520}.office-scene:not(.studio-art-mode) .studio-mode-toggle{bottom:auto;top:70px;left:14px}.studio-members{position:absolute;inset:0}.studio-member{position:absolute;transform:translate(-50%,-50%);width:112px;display:flex;align-items:center;flex-direction:column;padding:0;background:none;border:0;color:#243b49;cursor:pointer;filter:drop-shadow(0 4px 7px #10232e35)}.studio-member>.guild-portrait{width:78px;height:78px;border:2px solid #f6fafb;border-radius:22px;box-shadow:0 2px 15px #1116}.studio-member-label{display:grid;width:112px;gap:4px;background:#fffffff5;border:1px solid #d2e0e5;padding:8px 5px;border-radius:9px;margin-top:-3px;z-index:1;box-sizing:border-box}.studio-member-label strong{font-size:11px}.studio-member-label small{font-size:9px;color:#5d7482}.studio-member:hover>.guild-portrait{border-color:#73b09e;transform:translateY(-3px)}.studio-member:focus-visible{outline:3px solid #487fba;outline-offset:6px;border-radius:10px}.studio-member-status{font-size:9px;background:#fff1ce;color:#79581b;border:1px solid #d4b06b;padding:4px 7px;border-radius:5px;margin-top:4px}.studio-member-proposal{left:25%;top:41%}.studio-member-instagram{left:77%;top:41%}.studio-member-content{left:24%;top:76%}.studio-member-seo{left:50%;top:76%}.studio-member-operations{left:78%;top:76%}.studio-member-youtube{left:50%;top:21%} @media(max-width:900px){.office-stage .office-scene.studio-art-mode{height:520px;min-height:520px}.studio-interior{object-fit:fill}} @media(max-width:600px){.office-stage .office-scene.studio-art-mode{height:470px;min-height:470px}.studio-member{width:96px}.studio-member>.guild-portrait{width:58px;height:58px;border-radius:17px}.studio-member-label{width:96px;padding:6px 3px}.studio-member-label strong{font-size:10px}.studio-member-label small{font-size:8px}.studio-member-youtube{top:26%}} .studio-task-board{position:absolute;right:14px;top:16px;max-width:42%;display:grid;gap:5px;background:#183d3af2;color:#fff;border:1px solid #72a397;border-radius:10px;padding:12px 16px;text-align:left;box-shadow:0 5px 20px #142c3930}.studio-task-board strong{font-size:13px}.studio-task-board span{font-size:10px;color:#d4e7e1}.studio-task-board:focus-visible{outline:3px solid #fff;outline-offset:3px} /* Large, open 3D workspace is the primary experience. */ .office-stage .office-scene:not(.studio-art-mode){height:clamp(650px,76vh,900px);min-height:650px}.office-scene:not(.studio-art-mode) .studio-mode-toggle{top:auto;bottom:14px;left:auto;right:14px}.office-speech p[hidden]{display:none!important}.office-speech button{padding:5px 7px!important}.office-speech-status{font-size:8px!important}.office-camera-controls{z-index:30}.office-speech{pointer-events:none}.office-speech button{pointer-events:auto} @media(max-width:700px){.office-stage .office-scene:not(.studio-art-mode){height:620px;min-height:620px}.office-speech button strong{font-size:9px!important}.office-speech button small{font-size:9px!important}.office-speech-status{display:none!important}} .office-scene:not(.studio-art-mode) .office-room-board{top:16px!important;right:16px!important;bottom:auto!important;left:auto!important;width:180px!important;max-height:112px;overflow:hidden;padding:10px 12px!important;z-index:24}.office-scene:not(.studio-art-mode) .office-room-board strong{font-size:13px!important}.office-scene:not(.studio-art-mode) .office-room-board span{font-size:10px!important}.office-speech-dock .office-speech>button{min-height:0!important;padding:4px 6px!important;gap:2px!important}.office-speech-dock .office-speech .speech-level{font-size:8px!important;padding:1px 4px!important;margin-top:2px!important} @media(max-width:700px){.office-speech-dock .office-speech>button small{font-size:10px!important}.office-speech-dock .office-speech>button strong{font-size:8px!important}.office-speech-dock .office-speech p{font-size:8px!important}.office-scene:not(.studio-art-mode) .office-room-board{width:150px!important}} .office-camera-controls select{width:180px;margin:0;padding:7px 10px;border:1px solid #b9cbc8;border-radius:8px;background:#fff;color:#25464c;font-size:11px}.office-scene[data-camera-view="キャラ"] .office-room-board{display:none!important}.office-scene[data-camera-view="キャラ"] .office-speech-status,.office-scene[data-camera-view="キャラ"] .office-speech p{display:none!important} /* Executive studio: quiet product controls surrounding the spatial workspace. */ .office-workspace{--studio-ink:#203b38;--studio-metal:#b6a17a;--studio-paper:#f4f6f4}.office-workspace .office-stage{border-top:1px solid #cfdbd5;border-bottom:1px solid #cfdbd5}.office-scene .office-camera-controls{display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 28px);padding:8px;background:#eef3f0ed;border:1px solid #c5d1ca;border-radius:12px;box-shadow:0 6px 18px #18382d1a}.office-scene .office-camera-controls button{min-height:34px;font-size:11px;padding:7px 10px;touch-action:manipulation}.office-camera-controls :is(button,select):focus-visible,.office-speech button:focus-visible,.office-room-board:focus-visible{outline:3px solid #c29942!important;outline-offset:3px}.office-camera-controls button:hover{background:#dbe8e0}.office-speech-dock .office-speech>button{border-radius:7px!important;border-color:#c7d4ca!important;box-shadow:0 3px 10px #162f3026!important}.office-speech-dock .office-speech>button small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.office-speech-dock .office-speech>button:hover{background:#e3eee5}.office-scene:fullscreen{width:100vw!important;height:100vh!important;min-height:100vh!important;background:#c3ceca}.office-scene:fullscreen .office-camera-controls{bottom:18px;left:18px}.studio-work-strip{background:#edf2ee;border-top:0;padding:16px 20px}.studio-work-link{border-radius:8px;border-color:#cbd8ce;box-shadow:none}.studio-work-label small{display:none}.studio-work-label strong{font-size:13px}.office-scene:not(.studio-art-mode) .studio-mode-toggle{bottom:78px;font-size:10px;opacity:.9} @media(max-width:700px){.office-scene .office-camera-controls{gap:4px;padding:6px;bottom:10px;left:10px}.office-camera-controls select{width:160px}.office-scene:not(.studio-art-mode) .studio-mode-toggle{bottom:112px}.office-scene:not(.studio-art-mode) .office-room-board{max-height:104px}} .office-presentation-dialog{max-width:none!important;max-height:none!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important}.office-presentation-dialog #office-scene{width:100%;height:100dvh!important;min-height:100dvh!important}.office-presentation-dialog .office-camera-controls{bottom:14px;left:14px}.office-presentation-dialog::backdrop{background:#172d2c} /* Specialist-first interactions: consistent with the actual work pipeline. */ .studio-specialists{display:flex;align-items:center;gap:8px;padding:18px 20px;background:#fff;border-bottom:1px solid #dbe3dd;flex-wrap:wrap}.studio-specialists-heading{min-width:150px;margin-right:auto}.studio-specialists-heading strong{display:block;color:#233e37;font-size:15px}.studio-specialists-heading small{display:block;color:#65766e;font-size:11px;margin-top:5px}.studio-specialists>button{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #dce4df;border-radius:10px;background:#fafcfb;text-align:left;min-height:62px;color:#254338;flex:1;min-width:140px}.studio-specialists>button:hover{background:#eaf3ec;border-color:#7c9f89}.studio-specialists>button:focus-visible{outline:3px solid #b49756;outline-offset:3px}.studio-specialists .guild-portrait{width:42px;height:48px;min-width:42px;margin:0;border-radius:8px}.studio-specialists>button>span:last-child{display:grid;gap:4px}.studio-specialists strong{font-size:11px}.studio-specialists small{font-size:11px;color:#718477}.employee-work-dialog{width:min(880px,94vw)!important;padding:26px!important;background:#f8f9fa!important}.employee-work-header{border-bottom:1px solid #dadce0;padding-bottom:18px}.employee-work-header h2{font-size:26px!important}.employee-specialist-hero{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:24px;padding:24px 0}.employee-specialist-art .guild-portrait{width:130px;height:146px;border-radius:18px;margin:0}.employee-specialist-hero h3{font-size:21px;color:#25483d;margin:0 0 12px}.employee-specialist-hero p{font-size:13px;line-height:1.9;color:#586e62;max-width:48ch}.employee-output-preview{border:1px solid #dadce0;border-radius:14px;padding:20px;background:white}.employee-output-preview>h3{font-size:15px;margin:0}.employee-output-preview>p{font-size:11px;color:#5f6368;line-height:1.6}.employee-output-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.employee-output-pages article{background:#f1f3f4;padding:18px;border-top:3px solid #80868b;border-radius:3px 3px 8px 8px}.employee-output-pages h4{font-size:13px;margin:0 0 12px;color:#1f1f1f}.employee-output-pages p{font-size:12px;color:#5f6368;line-height:1.8;margin:0}.employee-work-new{background:#0b57d0!important;color:#ffffff!important;min-height:46px;border:0!important;margin:20px 0!important}.employee-work-new:focus-visible{outline:3px solid #80868b;outline-offset:3px}.employee-work-filters{margin-top:10px}.office-speech-dock .office-speech>button{background:#fcfffcf0!important;border-radius:6px!important;padding:5px 6px!important;gap:2px!important;box-shadow:0 2px 5px #162f3017!important}.office-speech-dock .office-speech .speech-level{background:transparent!important;color:#254c43!important;font-weight:600;margin:0!important;text-shadow:0 1px 3px #fff}.office-speech-status[hidden]{display:none!important} @media(max-width:700px){.studio-specialists{padding:14px;gap:7px}.studio-specialists-heading{width:100%;margin-bottom:5px}.studio-specialists>button{flex:1 0 28%;min-width:0;flex-direction:column;align-items:flex-start;padding:9px}.studio-specialists>button strong{font-size:10px}.employee-work-dialog{padding:18px!important}.employee-specialist-hero{grid-template-columns:86px 1fr;gap:16px}.employee-specialist-art .guild-portrait{width:86px;height:104px}.employee-specialist-hero h3{font-size:17px}.employee-output-pages{grid-template-columns:1fr}.employee-output-pages article{padding:14px}.employee-output-pages h4{margin-bottom:6px}} .office-label-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8;overflow:hidden}.office-label-leaders line{stroke:#f3f8f3;stroke-width:1.3;filter:drop-shadow(0 1px 1px #25473e)}.studio-art-mode .office-label-leaders{display:none} .employee-view-switch{display:flex;gap:7px;padding:14px 0 0}.employee-view-switch button{border:1px solid #bdc1c6;background:#ffffff;color:#3c4043;padding:10px 18px;border-radius:8px;font-size:12px}.employee-view-switch button[aria-pressed=true]{background:#0b57d0;color:#ffffff;border-color:#0b57d0}.employee-view-switch button:focus-visible{outline:3px solid #80868b;outline-offset:2px}.employee-work-dialog [hidden]{display:none!important}.employee-specialist-hero{padding:16px 0;grid-template-columns:70px 1fr;gap:16px}.employee-specialist-art .guild-portrait{width:70px;height:80px;border-radius:12px}.employee-specialist-hero h3{font-size:16px;margin-bottom:5px}.employee-specialist-hero p{margin:0;font-size:12px}.deliverable-example-notice{font-size:11px!important;line-height:1.7;color:#3c4043!important;background:#feefc3;padding:10px 12px;border-radius:7px;margin:0 0 12px}.example-input{font-size:12px;color:#3c4043;margin:12px 0}.example-input summary{cursor:pointer;padding:8px 0}.example-input p{line-height:1.8}.sample-document{background:white;border:1px solid #dadce0;box-shadow:0 8px 24px #2442310a;border-radius:5px;overflow:hidden}.sample-document>header{background:#0b57d0;color:#ffffff;padding:28px 30px}.sample-document>header small{font-size:10px;color:#bdc1c6}.sample-document>header h3{font-size:25px;line-height:1.5;margin:14px 0 0;max-width:22ch;letter-spacing:-.025em}.sample-document>section{padding:20px 30px;border-bottom:1px solid #e8eaed}.sample-document h4{font-size:13px;color:#1f1f1f;margin:0 0 8px}.sample-document section p{font-size:12px;line-height:1.85;color:#3c4043;margin:0}.sample-document footer{padding:14px 30px;font-size:10px;color:#80868b}.deliverable-example[data-kind=content] .sample-document>header{padding:36px;background:#e8eaed;color:#1f1f1f}.deliverable-example[data-kind=content] .sample-document>header small{color:#5f6368}.deliverable-example[data-kind=instagram] .sample-document>header{background:#3c4043}.deliverable-example[data-kind=youtube] .sample-document>header{background:#1f1f1f}.deliverable-example[data-kind=seo] .sample-document>header{background:#0b57d0}.employee-work-new{position:sticky;bottom:0;width:100%;box-shadow:0 0 0 8px #f8f9fa,0 -8px 24px #f8f9fa;z-index:2}.employee-work-header{position:sticky;top:-26px;background:#f8f9fa;z-index:3;padding-top:12px}.employee-work-header>button{min-height:40px}.employee-work-list>article{background:white} @media(max-width:700px){.sample-document>header{padding:24px}.sample-document>header h3{font-size:22px}.sample-document>section{padding:18px 24px}.employee-work-header{top:-18px}.employee-specialist-hero{grid-template-columns:64px 1fr}.employee-specialist-art .guild-portrait{width:64px;height:76px}} .sample-document>header{display:block!important;position:static!important;border:0!important;height:auto!important;min-height:0!important}.sample-document>header h3{display:block!important;margin-top:12px!important}.employee-work-header{display:flex!important;justify-content:space-between;align-items:center}.employee-view-switch{position:sticky;top:65px;z-index:3;background:#f8f9fa;padding-bottom:12px}.employee-work-list{padding-bottom:12px} .office-settings-menu{position:relative;color:#476154}.office-settings-menu>summary{list-style:none;cursor:pointer;border:1px solid #d8e2da;background:#fff;padding:9px 12px;border-radius:7px;font-size:11px}.office-settings-menu>summary::-webkit-details-marker{display:none}.office-settings-menu>summary:after{content:'⌄';margin-left:8px}.office-settings-panel{position:absolute;top:calc(100% + 7px);right:0;min-width:190px;display:grid;gap:7px;padding:12px;border:1px solid #d5dfd7;background:#fff;border-radius:10px;box-shadow:0 10px 32px #21382d20;z-index:50}.office-settings-panel button{display:block;width:100%;text-align:left;padding:10px!important;margin:0!important}.office-settings-menu:not([open]) .office-settings-panel{display:none}.office-settings-menu>summary:focus-visible{outline:3px solid #b49756;outline-offset:3px}.office-world-toolbar{padding-top:14px!important;padding-bottom:12px!important}.office-view-actions{padding-top:10px!important;padding-bottom:0!important}.office-view-actions #office-motion{min-height:34px}.employee-view-switch{top:78px} .office-view-actions .office-settings-menu{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.office-settings-menu>summary{margin:0!important}.office-world-toolbar .office-view-actions{padding:8px 0 0!important;margin:0!important;min-height:0!important;gap:8px;align-items:center}.office-world-toolbar{row-gap:8px!important}.office-speech-dock .office-speech .speech-level{background:#edf4eef2!important;color:#3b5746!important;font-size:8px!important;border-radius:3px;margin-top:2px!important;text-shadow:none!important} /* Business team: distinct character art, predictable input → output paths. */ .guild-portrait{background-image:none} .studio-specialists{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:22px;gap:12px;background:#f6f7f9} .studio-specialists-heading{grid-column:1/-1;margin:0 0 5px}.studio-specialists-heading strong{font-size:18px;color:#172b36}.studio-specialists-heading small{font-size:12px;line-height:1.8;color:#647782} .studio-specialists>button{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;padding:0;background:#fff;overflow:hidden;border:1px solid #dbe2e7;border-radius:13px;transition:box-shadow .18s,border-color .18s} .studio-specialists>button:hover{background:white;box-shadow:0 10px 24px #1e34441a;border-color:#879ead}.studio-specialists .guild-portrait{width:100%;height:auto;aspect-ratio:1;min-width:0;border-radius:0} .studio-specialists .specialist-card-copy{display:grid;gap:6px;padding:13px}.studio-specialists .specialist-card-copy strong{font-size:12px;color:#203443}.studio-specialists .specialist-card-copy small{font-size:15px;color:#263a48;font-weight:700}.specialist-card-copy>span{font-size:10px;color:#657783;margin-top:6px}.specialist-card-copy>b{font-size:11px;line-height:1.6;color:#334d5d}.specialist-card-copy>em{font-size:10px;font-style:normal;border-top:1px solid #e9edf0;margin-top:6px;padding-top:10px;color:#216955;font-weight:700} .flow-teammate-portrait{height:auto!important;aspect-ratio:1.3;display:block;padding:0!important;position:relative;overflow:hidden;background:#0b57d0!important}.flow-teammate-portrait .guild-portrait{width:100%;height:auto;aspect-ratio:1;border-radius:0;box-shadow:none;transform:translateY(-5%)} .flow-teammate-portrait .guild-archetype{position:absolute;top:12px;left:12px;padding:6px 10px;max-width:calc(100% - 24px);border-radius:6px;color:#fff;background:#152a3ce8;font-size:11px}.flow-teammate-portrait>small{left:auto;right:10px;bottom:10px;max-width:calc(100% - 20px);background:#fffffff0;color:#1f1f1f;font-size:10px;padding:6px 9px} .employee-specialist-hero{grid-template-columns:140px 1fr;padding:20px 0;gap:22px}.employee-specialist-art .guild-portrait{width:140px;height:140px;border-radius:16px}.employee-specialist-hero h3{font-size:20px;line-height:1.5}.employee-specialist-hero p{font-size:13px} .assignment-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px;padding:16px;background:#f1f3f4;border:1px solid #dadce0;border-radius:12px}.assignment-guide>div{display:grid;grid-template-columns:24px 1fr;gap:6px;align-content:start}.assignment-guide>div>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0b57d0;color:#ffffff;font-size:11px}.assignment-guide strong{font-size:12px;align-self:center}.assignment-guide p{grid-column:1/-1;margin:4px 0 0;font-size:11px;line-height:1.7;color:#5f6368}.assignment-guide>small{grid-column:1/-1;font-size:10px;line-height:1.7;color:#5f6368;border-top:1px solid #dadce0;padding-top:10px} @media(max-width:1100px){.studio-specialists{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-specialists>button{display:grid;grid-template-columns:88px 1fr;align-items:center}.studio-specialists .guild-portrait{height:100%;min-height:145px;aspect-ratio:auto;background-size:auto 200%}.studio-specialists .specialist-card-copy{padding:10px}} @media(max-width:700px){.studio-specialists{padding:16px;gap:10px}.studio-specialists>button{display:flex}.studio-specialists .guild-portrait{height:auto;min-height:0;aspect-ratio:1;background-size:300% 200%}.specialist-card-copy>b{font-size:10px}.studio-specialists .specialist-card-copy{padding:10px}.studio-specialists-heading small{font-size:10px}.employee-specialist-hero{grid-template-columns:90px 1fr;gap:15px}.employee-specialist-art .guild-portrait{width:90px;height:100px}.employee-specialist-hero h3{font-size:16px}.assignment-guide{gap:10px;padding:12px}.assignment-guide>div{grid-template-columns:20px 1fr}.assignment-guide strong{font-size:11px}.assignment-guide p{font-size:10px}} @media(prefers-reduced-motion:reduce){.studio-specialists>button{transition:none}} .office-interaction-hint{grid-column:1/-1;margin:0!important;padding:10px 16px!important;background:#f6f8fa;color:#536a79;font-size:11px;border-top:1px solid #e2e8ed}.office-stage{row-gap:0!important} #studio-work-strip[hidden]{display:none!important} .studio-specialists+.flow-team-training{border-top:1px solid #e1e6e9} .team-chooser{width:min(760px,calc(100vw - 32px));max-height:88dvh;box-sizing:border-box;padding:26px;border:1px solid #dadce0;border-radius:20px;background:#f0f4f9;color:#1f1f1f;box-shadow:0 24px 100px #172d4140}.team-chooser::backdrop{background:#162b4180;backdrop-filter:blur(5px)}.team-chooser-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.team-chooser-header h2{font-size:25px;margin:0}.team-chooser-header button{background:white;border:1px solid #dadce0;border-radius:8px;min-height:42px;padding:8px 12px;color:#5f6368}.team-chooser>p{font-size:12px;line-height:1.8;color:#5f6368;margin:16px 0 22px}.team-chooser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.team-chooser-grid>button{padding:0;border:1px solid #dadce0;border-radius:12px;overflow:hidden;background:white;text-align:left;color:#1f1f1f}.team-chooser-grid>button:hover{border-color:#0b57d0;box-shadow:0 5px 18px #2445351a}.team-chooser-grid>button:focus-visible{outline:3px solid #80868b;outline-offset:3px}.team-chooser-grid>button>.guild-portrait{width:100%;height:auto;aspect-ratio:1;border-radius:0}.team-chooser-grid>button>span:last-child{display:grid;padding:14px;gap:7px}.team-chooser-grid strong{font-size:14px}.team-chooser-grid small{font-size:13px;color:#5f6368}.team-chooser-grid>button>span>span{font-size:11px;line-height:1.6;color:#5f6368}.office-company-brand>#office-company-logo{display:none} @media(max-width:600px){.team-chooser{padding:18px}.team-chooser-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.team-chooser-header h2{font-size:21px}.team-chooser-grid>button>span:last-child{padding:10px}.team-chooser-grid strong{font-size:12px}} /* Office interaction hierarchy: one entry to request, one to resume. */ .office-work-access{background:#edf4f1!important;border:1px solid #c8d9d1!important;color:#24513e!important;font-weight:650;min-height:38px}.office-work-access:focus-visible{outline:3px solid #4d89b4;outline-offset:2px} .office-camera-settings{position:absolute;z-index:31;bottom:12px;left:12px;margin:0!important;padding:0!important;border:0!important;background:transparent!important;max-width:calc(100% - 24px)}.office-camera-settings>summary{padding:10px 14px;background:#fffffff0;color:#344e5c;border:1px solid #cedae0;border-radius:9px;list-style:none;cursor:pointer;font-size:11px;box-shadow:0 4px 14px #233e4820}.office-camera-settings>summary:after{content:'⌃';margin-left:14px}.office-camera-settings[open]>summary:after{content:'⌄'}.office-camera-settings .office-camera-controls{position:static!important;margin:7px 0 0;max-width:100%;box-sizing:border-box}.office-camera-settings .studio-mode-toggle{position:static!important;opacity:1;margin:0;box-shadow:none}.office-camera-settings>summary:focus-visible{outline:3px solid #4d89b4;outline-offset:3px} .office-view-actions{gap:7px}.office-workspace .office-world-toolbar{padding-top:12px;padding-bottom:12px}.office-room-brand{max-width:45%;box-sizing:border-box}.office-room-brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:700px){.office-world-toolbar .office-view-actions{padding-top:8px!important;flex-wrap:wrap}.office-camera-settings .office-camera-controls{max-width:calc(100vw - 52px)}.office-room-brand{padding:10px!important;gap:8px!important}.office-room-brand img{max-width:70px!important}.office-room-brand strong{font-size:10px!important}} /* Avoid the old uninitialized launcher flashing before the dialog is mounted. */ .work-launcher{display:none!important}#flow-work-dialog .work-launcher{display:grid!important} .employee-work-list>article{padding:16px!important;margin-bottom:12px!important;border:1px solid #dadce0;border-radius:10px}.employee-work-list>article h3{font-size:17px;margin:9px 0!important}.employee-work-list>article p{font-size:12px;line-height:1.7;margin:9px 0!important}.employee-work-list>article>small{font-size:10px}.employee-work-meta{gap:8px}.employee-work-meta small{font-size:11px}.employee-work-list>article>button{min-height:38px;padding:8px 12px!important} /* Focused request entry — optional enrichment follows the actual brief. */ #proposal-tool-dialog{background:#ffffff!important;color:#1f1f1f;max-width:800px} #proposal-tool-form>.editor-top{background:#ffffff!important} #proposal-tool-form>.editor-top+p{font-size:12px;color:#5f6368} #proposal-tool-form .work-input-guide{font-size:13px;line-height:1.7;margin:16px 0 8px} .brief-filled-count{display:block;font-size:11px;color:#3c4043;margin-bottom:16px} #standalone-brief-fields{display:grid!important;grid-template-columns:1fr!important;gap:15px!important} #standalone-brief-fields>label{font-weight:650;font-size:14px;color:#1f1f1f} #standalone-brief-fields textarea{display:block;width:100%;box-sizing:border-box;background:#ffffff;border:1px solid #bdc1c6;border-radius:9px;padding:12px;font-weight:400;font-size:13px;line-height:1.65;min-height:82px;margin-top:8px;resize:vertical} #standalone-brief-fields textarea:focus{outline:3px solid #bdc1c6;border-color:#0b57d0} .brief-required{display:inline-block;font-size:9px;font-weight:500;color:#1f1f1f;background:#f1f3f4;border-radius:4px;padding:3px 5px;margin-left:8px} .brief-enrichment,.brief-output-details,.brief-extra{background:#ffffff!important;border:1px solid #dadce0!important;border-radius:10px!important;padding:0!important;margin:12px 0!important;box-shadow:none!important} .brief-enrichment>summary,.brief-output-details>summary,.brief-extra>summary{cursor:pointer;padding:15px!important;font-size:12px;font-weight:600;color:#3c4043;min-height:44px;box-sizing:border-box} .brief-extra>label{display:block;padding:12px 15px;font-size:13px}.brief-enrichment .brief-context{border:0;margin:0;padding:16px}.brief-enrichment .brief-context legend{display:none}.brief-output-details .work-output-guide{margin:0;border:0;padding:16px;box-shadow:none} #proposal-tool-form .brief-save-hint{font-size:11px;line-height:1.7} #proposal-tool-submit{min-height:46px;background:#0b57d0!important;color:white!important;border:0!important;border-radius:9px!important;width:100%} .office-world-toolbar{padding:10px 16px!important}.office-company-brand>#office-company-logo{display:none!important} .office-workspace .office-world-toolbar .office-view-actions{padding:0!important;justify-content:flex-start}.office-settings-menu{margin-left:auto!important} .office-speech-dock .office-speech>button{border:1px solid #ffffffb0!important;box-shadow:0 3px 10px #132e3626!important;backdrop-filter:blur(7px);background:#f9fcf9eb!important} .office-speech-dock .office-speech>button:hover,.office-speech-dock .office-speech>button:focus-visible{background:#fff!important;outline:2px solid #479d88;outline-offset:2px} .office-room-board{background:#fffffff2!important;border:1px solid #d9e4df!important;box-shadow:0 5px 18px #162c3b26!important} .office-room-brand{background:#1d333beb!important;box-shadow:0 4px 14px #112d3426!important} @media(max-width:700px){.brief-journey{gap:5px}.brief-journey li{font-size:10px!important}.brief-return-actions button{font-size:11px!important;padding:8px!important}.office-world-toolbar{padding:10px 12px!important}} .brief-review-back{background:#ffffff;border:1px solid #bdc1c6;border-radius:7px;color:#1f1f1f;padding:9px 13px;margin-bottom:14px;min-height:40px} .brief-review-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0} .brief-review-cards>div{padding:14px;border:1px solid #dadce0;background:#ffffff;border-radius:9px;min-width:0} .brief-review-cards dt{font-size:10px;color:#5f6368;margin:0 0 8px}.brief-review-cards dd{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:#1f1f1f}.brief-review-cards .is-unconfirmed{background:#f1f3f4}.brief-review-cards .is-unconfirmed dd{font-size:11px;color:#5f6368}.brief-review-source{grid-column:1/-1} #proposal-tool-preview[hidden]{display:none!important} @media(max-width:480px){.brief-review-cards{grid-template-columns:1fr}} #proposal-tool-form [hidden],#standalone-brief-fields[hidden]{display:none!important} /* Board contrast is consistent across all camera distances. */ .office-scene .office-room-board{color:#294551!important}.office-scene .office-room-board strong{color:#294551!important}.office-scene .office-room-board span{color:#506975!important} /* Personality copy remains available in close-up as well as the default desk view. */ .office-speech-dock .office-speech p{font-size:9px!important} .office-scene[data-camera-view="キャラ"] .office-speech p{display:-webkit-box!important} .office-scene[data-camera-view="キャラ"] .office-speech p[hidden]{display:none!important} .office-work-access{display:flex!important;align-items:center;gap:12px;padding:9px 12px!important;text-align:left}.office-work-access strong{font-size:11px}.office-work-access>small{font-size:10px;color:#546f64;font-weight:400} .office-work-drawer{width:min(760px,calc(100vw - 28px));max-height:88dvh;padding:24px;box-sizing:border-box;border:1px solid #d6e1de;border-radius:18px;background:#f8faf9;color:#294437;box-shadow:0 24px 90px #10261e42} .office-work-drawer::backdrop{background:#172d3980;backdrop-filter:blur(4px)}.office-work-drawer-header{position:sticky;top:-24px;padding:14px 0;background:#f8faf9;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3}.office-work-drawer-header h2{font-size:23px;margin:0}.office-work-drawer-header button{background:#fff;border:1px solid #cad8d1;border-radius:8px;padding:10px 12px;color:#395d4f;min-height:42px} .office-work-drawer>p{font-size:12px;line-height:1.8;color:#657c71}.office-work-drawer .office-progress{display:block!important;width:auto!important;padding:0!important;background:transparent!important;border:0!important;max-height:none!important;overflow:visible!important;box-shadow:none!important}.office-work-drawer .office-board-heading h2,.office-work-drawer .office-board-heading small{display:none}.office-work-drawer .office-board-heading{justify-content:flex-end}.office-work-drawer #office-progress-items{max-height:none!important;overflow:visible!important}.office-work-drawer .office-work-item{display:block;width:100%;padding:16px!important;margin:10px 0;background:#fff!important;border:1px solid #d6e1dc!important;border-radius:12px!important;text-align:left;box-shadow:none!important}.office-work-drawer .office-work-title strong{font-size:16px!important;line-height:1.5}.office-work-drawer .office-work-owner,.office-work-drawer .office-work-state,.office-work-drawer .office-work-source,.office-work-drawer .office-work-next{display:block;margin-top:8px;font-size:12px!important;line-height:1.6}.office-work-drawer .office-work-next{padding:10px;background:#eef4f0;border-radius:7px;color:#38594b}.office-work-drawer .office-work-open{display:block;margin-top:12px;color:#24644e;font-weight:650;font-size:12px}.office-work-drawer .office-progress-group{font-size:12px;margin-top:20px}.office-work-drawer button:focus-visible{outline:3px solid #589e87;outline-offset:3px} @media(max-width:700px){.office-work-access{flex-direction:column;align-items:flex-start;gap:3px}.office-work-drawer{padding:16px}.office-work-drawer-header{top:-16px}.office-work-drawer-header h2{font-size:20px}} .office-work-drawer #office-progress-scope,.office-work-drawer #office-progress-summary{font-size:12px!important;line-height:1.7;color:#526e60!important}.office-work-drawer .office-progress-filter{font-size:12px!important}.office-work-drawer .office-progress-filter select{min-height:40px;font-size:12px!important}.office-work-drawer .office-work-owner,.office-work-drawer .office-work-source{color:#566e63!important}.office-work-drawer .office-work-state{color:#85601d!important;font-weight:650}.office-work-drawer .office-work-item[data-state=sent] .office-work-state{color:#286a51!important} .leadership-dialog{width:min(760px,calc(100vw - 28px));max-height:88dvh;padding:26px;border:1px solid #bdc1c6;border-radius:18px;background:#f8f9fa;color:#1f1f1f;box-shadow:0 24px 80px #17332640;box-sizing:border-box}.leadership-dialog::backdrop{background:#182e3c80;backdrop-filter:blur(4px)}.leadership-dialog>p{font-size:13px;line-height:1.8}.leadership-status{padding:12px;background:#e8eaed;border-radius:8px;color:#3c4043;font-size:11px!important}.leadership-flow{list-style:none;padding:0;counter-reset:step;display:grid;gap:10px}.leadership-flow li{counter-increment:step;border:1px solid #dadce0;border-radius:10px;background:white;padding:15px 15px 15px 52px;position:relative}.leadership-flow li:before{content:counter(step);position:absolute;left:15px;top:15px;background:#0b57d0;color:white;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:11px}.leadership-flow strong{font-size:13px}.leadership-flow p,.leadership-boundary p{font-size:12px;line-height:1.7;margin:7px 0 0;color:#3c4043}.leadership-boundary{padding:16px;background:#f1f3f4;border-radius:10px}.leadership-boundary h3{font-size:14px;margin:0}.leadership-emblem{display:grid;place-items:center;background:#263d42;color:#d6bf87;border-radius:14px;min-height:140px}.leadership-emblem b{font-size:54px}.leadership-emblem small{letter-spacing:.2em}.leadership-coo{background:#0b57d0;color:#dadce0} /* Choose a deliverable by its shape, then supply the material conversationally. */ .team-chooser-grid .mini-deliverable{height:200px;overflow:hidden;pointer-events:none;margin:0;background:#e8eaed;padding:12px;box-sizing:border-box}.mini-deliverable .deliverable-example-notice,.mini-deliverable .example-input,.mini-deliverable footer{display:none}.mini-deliverable .sample-document{height:245px;box-shadow:0 3px 8px #132e3720;border-radius:4px}.mini-deliverable .sample-document>header{padding:14px!important}.mini-deliverable .sample-document>header small{font-size:7px}.mini-deliverable .sample-document>header h3{font-size:14px!important;line-height:1.5;margin:8px 0 0!important}.mini-deliverable .sample-document>section{padding:10px 12px!important}.mini-deliverable .sample-document h4{font-size:9px;margin:0 0 5px}.mini-deliverable .sample-document section p{font-size:7px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mini-deliverable[data-kind=instagram] .sample-document{max-width:130px;margin:auto;border:5px solid #1f1f1f;border-radius:14px}.mini-deliverable[data-kind=proposal] .sample-document>header{min-height:80px!important}.mini-deliverable[data-kind=youtube] .sample-document>header{border-bottom:5px solid #80868b!important} .employee-how-it-works{margin:16px 0;border:1px solid #dadce0;border-radius:9px;padding:12px;font-size:12px}.employee-how-it-works summary{cursor:pointer}.employee-how-it-works .assignment-guide{margin:12px 0 0}.employee-specialist-hero{padding:14px 0!important;grid-template-columns:54px 1fr!important;gap:14px!important}.employee-specialist-art .guild-portrait{width:54px!important;height:60px!important;border-radius:9px}.employee-specialist-hero h3{font-size:15px!important}.employee-specialist-hero p{font-size:11px!important} .guided-brief-dialog{width:min(720px,calc(100vw - 28px));max-height:88dvh;box-sizing:border-box;padding:24px;border:1px solid #bdc1c6;border-radius:18px;background:#f8f9fa;color:#1f1f1f;box-shadow:0 24px 80px #17332640}.guided-brief-dialog::backdrop{background:#18332980;backdrop-filter:blur(4px)}.guided-brief-dialog .team-chooser-header h2{font-size:20px}.guided-brief-dialog>p{font-size:11px;line-height:1.8;color:#5f6368}.guided-conversation{margin:24px 0}.guided-conversation p{font-size:13px;line-height:1.8}.guided-conversation blockquote{margin:10px 0 20px 30px;padding:13px 16px;background:#e8eaed;border-radius:12px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.guided-conversation small{font-size:10px;color:#5f6368}.guided-conversation .guided-question{font-size:19px;font-weight:650;line-height:1.6;margin-top:10px}.guided-brief-dialog label{display:block;font-size:11px;color:#5f6368}.guided-brief-dialog textarea{display:block;width:100%;box-sizing:border-box;padding:14px;background:white;border:1px solid #bdc1c6;border-radius:10px;font-size:14px;line-height:1.8;resize:vertical;margin:8px 0 14px}.guided-brief-dialog textarea:focus{outline:3px solid #bdc1c6}.guided-actions{display:flex;justify-content:space-between;gap:12px}.guided-actions button{min-height:44px;padding:10px 16px;border:1px solid #bdc1c6;border-radius:8px;background:white;color:#1f1f1f}.guided-actions button[type=submit]{margin-left:auto;background:#0b57d0;color:white;border:0}.guided-actions [hidden]{display:none}.guided-brief-dialog [role=status]{font-size:12px;color:#b06000} /* Deliverable-led intake: keep the output direction beside the conversation. */ .guided-brief-dialog{width:min(1060px,calc(100vw - 28px));padding:24px;overflow:auto} .guided-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:start} .guided-plan{padding:22px;background:#ffffff;border:1px solid #dadce0;border-radius:14px;box-shadow:0 8px 24px #17332608;overflow-wrap:anywhere} .guided-plan>small{font-size:10px;font-weight:700;letter-spacing:.07em;color:#3c4043}.guided-plan h3{font-size:21px;line-height:1.5;margin:12px 0}.guided-plan>p{font-size:11px;color:#5f6368;line-height:1.7}.guided-plan section{border-top:1px solid #e8eaed;padding:12px 0}.guided-plan h4{font-size:12px;color:#1f1f1f;margin:0 0 10px}.guided-plan section small{font-size:10px;color:#5f6368}.guided-plan section p{font-size:13px;line-height:1.7;white-space:pre-wrap;margin:4px 0 12px}.guided-quality-help{border-top:1px dashed #bdc1c6;padding-top:14px}.guided-quality-help summary{cursor:pointer;font-size:12px;font-weight:700}.guided-quality-help strong{display:block;margin-top:16px;font-size:12px}.guided-quality-help p,.guided-quality-help>small{font-size:11px;line-height:1.8;color:#5f6368} @media(max-width:760px){.guided-layout{grid-template-columns:1fr;gap:16px}.guided-brief-dialog{padding:18px}.guided-plan{padding:18px}.guided-conversation{margin:12px 0}} .guided-sources{border:1px solid #dadce0;border-radius:12px;background:#f1f3f4;padding:14px 16px;margin:16px 0}.guided-sources>summary{font-size:13px;font-weight:650;cursor:pointer}.guided-sources>p{font-size:11px;line-height:1.8;color:#3c4043}.guided-sources label{margin:12px 0 5px}.guided-sources select{display:block;width:100%;box-sizing:border-box;padding:10px;border:1px solid #bdc1c6;background:white;border-radius:8px;color:#1f1f1f;font-size:13px;margin-top:6px}.guided-sources button,.guided-reuse button{padding:8px 12px;background:white;border:1px solid #bdc1c6;border-radius:8px;color:#1f1f1f;font-size:12px;cursor:pointer}.guided-reference-list{margin:16px 0}.guided-reference-list>strong{font-size:12px}.guided-reference-list>div{padding:8px 0;border-bottom:1px solid #dadce0}.guided-reference-list label{display:flex;gap:8px;align-items:center}.guided-reference-list summary{font-size:11px;cursor:pointer}.guided-reference-list pre{font:12px/1.7 inherit;white-space:pre-wrap;max-height:180px;overflow:auto;overflow-wrap:anywhere}.guided-reuse:not(:empty){padding:14px;border:1px solid #bdc1c6;border-radius:10px;background:#f1f3f4;margin-bottom:14px}.guided-reuse small{font-size:10px;color:#5f6368}.guided-reuse p{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0} .guided-brief-dialog .team-chooser-header{position:sticky;top:-24px;z-index:3;background:#f8f9fa;padding:14px 0;border-bottom:1px solid #dadce0;margin-top:-10px}.guided-brief-dialog .team-chooser-header button{flex-shrink:0}.guided-brief-dialog .guided-question{scroll-margin-top:100px}.guided-sources>[role=status]{color:#3c4043}.guided-reference-list pre{font-family:inherit;font-size:12px;line-height:1.7} @media(max-width:760px){.guided-brief-dialog .team-chooser-header{top:-18px}.guided-brief-dialog .team-chooser-header h2{font-size:17px}} .employee-format-choice{margin:8px 0 20px}.employee-format-choice h3{font-size:15px;color:#1f1f1f;margin:0 0 12px}.employee-format-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.employee-format-buttons button{text-align:left;display:flex;flex-direction:column;gap:7px;padding:14px!important;border-radius:10px!important;min-width:0}.employee-format-buttons strong{font-size:13px}.employee-format-buttons span{font-size:10px;line-height:1.6;font-weight:400;color:#5f6368}.employee-format-buttons button[aria-pressed=true]{border:2px solid #0b57d0;background:#f1f3f4;box-shadow:0 2px 6px #315d4910}.employee-format-buttons button:focus-visible{outline:3px solid #bdc1c6;outline-offset:2px}.deliverable-example[data-format=post] .sample-document{max-width:440px;margin:auto;border-radius:16px}.deliverable-example[data-format=website] .sample-document>header{border-top:12px solid #1f1f1f!important}.employee-work-dialog .employee-work-new{background:#0b57d0;color:white;border-color:#0b57d0;font-weight:650}.employee-work-dialog .employee-work-new:focus-visible{outline:3px solid #9aa0a6;outline-offset:3px} @media(max-width:480px){.employee-format-buttons{grid-template-columns:1fr}.employee-format-buttons button{padding:10px 12px!important}.employee-format-buttons span{display:none}} .request-next-materials{margin:20px 0;border:1px solid #dadce0;border-radius:12px;padding:18px;background:#ffffff}.request-next-materials>h3{font-size:17px;color:#1f1f1f;margin:0 0 8px}.request-next-materials>p{font-size:11px;color:#5f6368;line-height:1.8}.request-material-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.request-material-cards article{border:1px solid #dadce0;border-radius:10px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;background:#f8f9fa}.request-material-cards small{font-size:10px;color:#e37400}.request-material-cards [data-filled=true] small{color:#3c4043}.request-material-cards h4{font-size:13px;line-height:1.6;margin:0;color:#1f1f1f}.request-material-cards p{font-size:11px!important;line-height:1.8;margin:0 0 8px!important;flex:1}.request-material-cards blockquote{font-size:11px;line-height:1.7;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.request-material-cards button{font-size:12px;padding:8px 12px;border:1px solid #bdc1c6;border-radius:8px;background:#f1f3f4;color:#1f1f1f;min-height:40px}.request-next-materials>small{font-size:10px;color:#5f6368;line-height:1.8} @media(max-width:680px){.request-material-cards{grid-template-columns:1fr}.request-material-cards article{display:grid;grid-template-columns:1fr auto;gap:4px 12px}.request-material-cards small,.request-material-cards h4,.request-material-cards p,.request-material-cards blockquote{grid-column:1}.request-material-cards button{grid-column:2;grid-row:1/4;align-self:center}.request-next-materials{padding:14px}} .generation-followup{padding:20px;margin:20px 0;background:#f1f3f4;border:1px solid #bdc1c6;border-radius:12px}.generation-followup h3{font-size:17px;color:#1f1f1f}.generation-followup label{display:block;margin:18px 0;font-size:13px;line-height:1.7}.generation-followup textarea{display:block;width:100%;box-sizing:border-box;margin-top:8px;border:1px solid #bdc1c6;border-radius:10px;background:white;padding:12px;font:inherit;resize:vertical}.generation-followup button{min-height:44px;background:#0b57d0!important;color:white!important;border:0;border-radius:9px;padding:12px 16px}.generation-followup p{font-size:12px;line-height:1.8}.generation-followup [role=status]{color:#b06000}.generation-followup :disabled{opacity:.65} .shared-office-dialog{width:min(650px,calc(100vw - 32px));max-height:88dvh;overflow:auto;padding:24px;background:#f8f9fa;border:1px solid #bdc1c6;border-radius:18px;color:#1f1f1f}.shared-office-dialog::backdrop{background:#1b312777;backdrop-filter:blur(4px)}.shared-office-dialog h2{font-size:20px}.shared-office-dialog p{font-size:12px;line-height:1.8;color:#5f6368}.shared-office-setup{margin:18px 0;padding:20px;border:1px solid #dadce0;background:white;border-radius:12px}.shared-office-dialog h3{font-size:16px}.shared-office-dialog label{display:block;font-size:12px;margin:14px 0;color:#3c4043}.shared-office-dialog input{display:block;width:100%;box-sizing:border-box;padding:12px;margin:6px 0;border:1px solid #bdc1c6;border-radius:8px;background:#ffffff;font:inherit}.shared-office-dialog button{padding:10px 14px;border:1px solid #bdc1c6;border-radius:8px;background:white;color:#1f1f1f;cursor:pointer;min-height:42px}.shared-office-dialog button[type=submit]{background:#0b57d0;color:white}.shared-office-dialog :disabled{opacity:.6;cursor:wait}.shared-member-list{padding:0;list-style:none;display:grid;gap:10px}.shared-member-list li{display:flex;align-items:center;gap:12px;background:white;border:1px solid #dadce0;border-radius:10px;padding:12px}.shared-member-list strong{font-size:14px;overflow-wrap:anywhere}.shared-member-list span{font-size:11px;color:#5f6368;margin-left:auto}.shared-office-dialog [role=status]{color:#e37400} .office-online-members{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0;width:100%}.office-online-members[hidden]{display:none}.office-online-members>small{font-size:10px;color:#65816d;margin-right:4px}.office-human-badge{font-size:11px;color:#315d49;border:1px solid #cee0d2;background:#f2f8f3;padding:5px 9px;border-radius:20px}.office-human-badge::before{content:'●';color:#4c9566;margin-right:5px;font-size:8px}.office-arrival-notice{font-size:11px;color:#416d50}.office-arrival-notice:empty{display:none} .office-human-label{position:absolute;z-index:7;text-align:center;pointer-events:auto;background:#f5fbf5f2;border:1px solid #a5c1ab;border-radius:9px;padding:5px 4px;box-sizing:border-box;box-shadow:0 4px 12px #18322615}.office-human-label button{font-size:10px!important;line-height:1.4;color:#315c40!important;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;background:transparent!important;border:0!important;padding:0!important;min-height:0!important}.office-human-label small{display:block;font-size:8px;color:#668370;margin-top:2px}.office-human-label[hidden]{display:none!important} .office-chat-dialog{position:fixed;inset:auto 18px 18px auto;margin:0;width:min(420px,calc(100vw - 36px));max-height:88dvh;overflow:auto;box-sizing:border-box;padding:20px;border:1px solid #d3e0d8;border-radius:18px;background:#f8fbf9;color:#2f493b;box-shadow:0 20px 60px #172f2633}.office-chat-dialog::backdrop{background:#18312620}.office-chat-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.office-chat-header h2{font-size:19px}.office-chat-dialog>p{font-size:12px;line-height:1.8}.office-chat-dialog>small{font-size:10px;color:#77867b;line-height:1.7;display:block}.office-chat-dialog button{border:1px solid #cbd9d0;border-radius:8px;padding:9px 12px;color:#315d49;background:white;cursor:pointer}.office-chat-messages{height:300px;max-height:38dvh;overflow:auto;margin:16px 0;padding:6px;scrollbar-gutter:stable;border:1px solid #e2e9e4;border-radius:10px;background:#f1f5f2}.office-chat-message{padding:11px;margin:8px 0;background:white;border:1px solid #e0e8e3;border-radius:12px;overflow-wrap:anywhere}.office-chat-message.is-self{background:#e5f0e8;border-color:#ccdfd2}.office-chat-message>div{display:flex;justify-content:space-between;gap:10px;font-size:10px}.office-chat-message time{color:#7e8e83;font-size:9px}.office-chat-message p{white-space:pre-wrap;font-size:12px;line-height:1.8;margin:7px 0}.office-chat-message button{font-size:9px;padding:3px 7px;background:transparent}.office-chat-dialog label{display:block;font-size:11px}.office-chat-dialog textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;max-height:200px;padding:12px;border:1px solid #c7d6cd;border-radius:10px;margin:7px 0;font:inherit;background:white}.office-chat-dialog button[type=submit]{background:#315d49;color:white;width:100%;min-height:42px}.office-chat-dialog [role=status]{font-size:11px;color:#926128;line-height:1.7}.office-chat-dialog :disabled{opacity:.6;cursor:wait}.member-chat-bubble{font-size:9px!important;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-height:30px;background:#ffffff;border-bottom:1px solid #dadce0;padding:4px;margin:0 0 4px!important} /* Deliverable selection: show the shape before asking for information. */ .employee-outcome{font-size:12px;line-height:1.8;color:#3c4043;margin:0 0 16px;padding:12px 14px;background:#f1f3f4;border-radius:10px} .employee-format-buttons .format-miniature{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-content:center;width:100%;height:56px;padding:8px 12px;box-sizing:border-box;background:#f1f3f4;border:1px solid #dadce0;border-radius:6px} .format-miniature i{display:block;border-radius:2px;background:#bdc1c6;min-height:7px}.format-miniature i:first-child{grid-column:1/-1;background:#3c4043;min-height:15px}.format-miniature i:last-child{width:60%} .employee-format-buttons .format-miniature-lp{grid-template-columns:1fr;width:46px;height:65px;margin:auto}.format-miniature-lp i:last-child{background:#e37400;width:80%} .employee-format-buttons .format-miniature-post{width:60px;margin:auto;grid-template-columns:1fr}.employee-format-buttons .format-miniature-website i:first-child{min-height:8px}.employee-format-buttons .format-miniature-proposal{transform:rotate(-3deg);box-shadow:3px 3px 0 #dadce0} .employee-work-dialog .deliverable-example-notice{padding:7px 12px;font-size:10px;margin:0 0 10px}.employee-work-dialog .example-input{margin-top:12px} .employee-work-dialog .employee-specialist-hero{margin:12px 0}.employee-format-buttons button[aria-pressed=true] strong:after{content:' ✓';color:#1f1f1f} .guided-plan[data-kind=lp]{border-top:5px solid #0b57d0}.guided-plan[data-kind=lp] section:last-of-type{background:#f1f3f4;padding:14px;border-radius:8px}.guided-plan[data-kind=proposal] section{border-left:3px solid #bdc1c6;padding-left:14px;margin-top:12px}.guided-plan[data-kind=instagram] section{border-left:3px solid #9aa0a6;padding-left:14px} .guided-actions{flex-wrap:wrap}.guided-actions button{font-size:12px}.guided-actions button:nth-child(2){border:0;background:transparent;color:#5f6368;text-decoration:underline;text-underline-offset:4px} @media(max-width:480px){.employee-format-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.employee-format-buttons button{padding:8px!important}.employee-format-buttons strong{font-size:11px}.employee-format-buttons .format-miniature{max-width:100%}.guided-actions button[type=submit]{flex:1}.employee-work-dialog .employee-work-new{font-size:12px}} .employee-work-dialog .employee-work-header{padding-bottom:10px}.employee-work-dialog .employee-work-header h2{font-size:22px!important}.employee-work-dialog .employee-view-switch{position:static;padding:10px 0 16px}.employee-work-dialog .employee-format-choice{margin:0 0 14px}.employee-work-dialog .employee-outcome{padding:8px 12px;font-size:11px}.employee-work-dialog .sample-document>header{padding:22px!important}.employee-work-dialog .sample-document>header h3{font-size:22px!important} .guided-draft-note{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#f1f3f4;border-radius:8px;font-size:11px;line-height:1.7;color:#3c4043}.guided-draft-note button{flex-shrink:0;font-size:11px;padding:8px;background:white;border:1px solid #bdc1c6;border-radius:6px;color:#3c4043;cursor:pointer}.guided-draft-note button:focus-visible{outline:3px solid #9aa0a6;outline-offset:2px}@media(max-width:480px){.guided-draft-note{align-items:flex-start;flex-direction:column}} #standalone-company-scope{font-size:11px;line-height:1.7;color:#1f1f1f;padding:10px 12px;border-radius:8px;background:#f1f3f4;margin:12px 0;overflow-wrap:anywhere} #office-runtime-status{font-size:10px;font-weight:550;white-space:nowrap;color:#79603b;background:#fff5df;border:1px solid #eddfbe;border-radius:5px;padding:4px 7px;line-height:1.3}#office-runtime-status[data-ready=true]{color:#315e48;background:#eef6ef;border-color:#c9dfcf} .office-speech .office-speech-status:not([hidden]){display:block!important;width:max-content;max-width:100%;box-sizing:border-box;margin:3px auto 0;padding:3px 6px;border:1px solid #d4dfd9;border-radius:5px;background:#f6faf7;color:#365443;font-size:9px;line-height:1.35;box-shadow:0 2px 5px #14251e15}.office-speech .office-speech-status[data-state=running]{background:#e9f1ff;border-color:#b7d0f0;color:#255c91}.office-speech .office-speech-status[data-state=attention]{background:#fff4dc;border-color:#e9d29f;color:#7a5625} #readiness-steps{list-style:none;counter-reset:setup;padding:0;display:grid;gap:12px}#readiness-steps li{counter-increment:setup;border:1px solid #dadce0;border-radius:12px;padding:16px;background:#ffffff}#readiness-steps li>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}#readiness-steps li>div:before{content:counter(setup);width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#f1f3f4;color:#3c4043;font-size:12px}#readiness-steps strong{font-size:14px;color:#1f1f1f}#readiness-steps li>div>span{margin-left:auto;font-size:10px;border-radius:5px;padding:4px 7px;background:#feefc3;color:#8a4b00}#readiness-steps li[data-ready=true]>div>span{background:#ceead6;color:#3c4043}#readiness-steps p{font-size:12px;line-height:1.8;margin:10px 0}#readiness-steps button{border:1px solid #bdc1c6;border-radius:8px;background:#f1f3f4;color:#1f1f1f;padding:10px 14px;font-size:12px;cursor:pointer}#readiness-dialog .heading{position:sticky;top:-28px;background:white;padding:16px 0;z-index:2}#readiness-dialog h2{font-size:20px}#readiness-dialog>p{font-size:12px;line-height:1.8}#readiness-steps button:focus-visible{outline:3px solid #9aa0a6;outline-offset:2px} #readiness-dialog .heading{display:flex;align-items:center;justify-content:space-between;gap:16px}#readiness-dialog .heading h2{margin:0;line-height:1.5}#readiness-close{flex-shrink:0} /* Read names and responsibilities without relying on a hover tooltip. */ .office-speech-dock .office-speech>button small{font-size:12px!important;line-height:1.4;font-weight:700;color:#243f37!important}.office-speech-dock .office-speech>button strong{font-size:10px!important;line-height:1.5;font-weight:500;color:#52675f!important}.office-speech-dock .office-speech>button{min-height:43px!important;padding:6px!important}.office-human-label button{font-size:12px!important;line-height:1.5}.office-human-label small{font-size:10px;line-height:1.4;color:#3d6750}.office-human-label{border-left:3px solid #5d9973}.office-speech-dock .office-speech>button:focus-visible{outline:3px solid #b28b39!important;outline-offset:3px} /* Deliverable-first intake: keep the current question and its purpose visible. */ .guided-journey{display:flex;gap:8px;list-style:none;padding:0;margin:18px 0 12px;counter-reset:none}.guided-journey li{flex:1;padding:10px 8px;border-radius:8px;background:#e8eaed;color:#1f1f1f;font-size:12px;text-align:center}.guided-journey li[aria-current=step]{background:#0b57d0;color:#ffffff;font-weight:700} .guided-material{margin:10px 0;padding:12px 14px;background:#ffffff;border:1px dashed #bdc1c6;border-radius:10px}.guided-material summary,.guided-answer-history summary{font-size:12px;font-weight:650;cursor:pointer}.guided-material label{margin-top:14px}.guided-material p{font-size:11px;line-height:1.7;color:#5f6368}.guided-answer-history{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #dadce0}.guided-conversation .guided-answer-purpose{font-size:12px;line-height:1.8;color:#3c4043;background:#f1f3f4;border-radius:8px;padding:10px 12px;margin-bottom:16px}.guided-layout>section{min-width:0}.guided-plan{position:sticky;top:64px}.guided-actions{flex-wrap:wrap}.guided-actions button{font-size:12px} @media(max-width:760px){.guided-plan{position:static}.guided-journey li{font-size:11px;padding:10px 4px}} .guided-brief-dialog .guided-draft-note{margin-top:18px}.guided-brief-dialog .guided-sources{margin:10px 0;padding:11px 14px}.guided-brief-dialog .guided-material{margin:8px 0}.guided-brief-dialog .guided-question{font-size:18px}.guided-brief-dialog .guided-conversation{margin:18px 0 12px} .guided-reuse-all:not(:empty){margin-top:16px;border-top:1px solid #bdc1c6;padding-top:14px}.guided-reuse-all>strong{font-size:13px}.guided-reuse-all>p{font-size:12px;line-height:1.6}.guided-reuse-all>label{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #bdc1c6;border-radius:8px;background:white}.guided-reuse-all input{margin-top:4px;flex-shrink:0}.guided-reuse-all span{min-width:0}.guided-reuse-all strong,.guided-reuse-all small{display:block}.guided-reuse-all small{font-size:11px;line-height:1.7;color:#5f6368}.guided-reuse-all label p{font-size:12px;color:#1f1f1f;white-space:pre-wrap;overflow-wrap:anywhere}.guided-reuse-all button{margin-top:8px}.guided-reuse-all button:disabled{opacity:.5} .brief-review-cards .brief-answer-edit{display:block;margin-top:12px;padding:6px 0;border:0;background:transparent;color:#1f1f1f;font-size:12px;font-weight:650;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.brief-review-cards .brief-answer-edit:hover{color:#1f1f1f}.brief-review-cards .brief-answer-edit:focus-visible{outline:2px solid #0b57d0;outline-offset:4px} .video-preparation-templates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;padding:18px;border:1px solid #dadce0;border-radius:12px;background:#f8f9fa}.video-preparation-templates h3,.video-preparation-templates>p{grid-column:1/-1;margin:0}.video-preparation-templates>p{font-size:12px;line-height:1.7;color:#5f6368}.video-preparation-templates button{display:flex;flex-direction:column;gap:10px;padding:18px;text-align:left;background:white;border:1px solid #9aa0a6;border-radius:10px;color:#1f1f1f;cursor:pointer}.video-preparation-templates button strong{font-size:15px}.video-preparation-templates button span{font-size:12px;line-height:1.6;color:#5f6368}.video-preparation-templates button:hover{border-color:#0b57d0;background:#f1f3f4}.video-preparation-templates button:focus-visible{outline:3px solid #9aa0a6;outline-offset:3px}@media(max-width:560px){.video-preparation-templates{grid-template-columns:1fr}} .lecture-preparation>header{position:sticky;top:-28px;z-index:4;background:#f0f4f9;padding:14px 0;border-bottom:1px solid #dadce0;margin-top:-14px}.lecture-preparation>header button{flex-shrink:0}.lecture-chapters{scroll-margin-top:90px} .lecture-scope-note{padding:10px 12px;border-radius:8px;background:#f1f3f4;color:#3c4043;font-size:12px;line-height:1.7} .feed-empty button{margin:12px 8px 0 0;padding:11px 16px;border:1px solid #bdc1c6;border-radius:9px;background:white;color:#1f1f1f;cursor:pointer;font-weight:650}.feed-empty button:first-of-type{background:#0b57d0;color:white;border-color:#0b57d0}.feed-empty button:focus-visible{outline:3px solid #9aa0a6;outline-offset:3px} #creation-feed.needs-connection #workflow-overview,#creation-feed.needs-connection .production-sidebar,#creation-feed.needs-connection .library-breadcrumb,#creation-feed.needs-connection #library-description,#creation-feed.needs-connection .feed-controls,#creation-feed.needs-connection .feed-list-toolbar,#creation-feed.needs-connection #feed-active-filters,#creation-feed.needs-connection .workspace-context,#creation-feed.needs-connection #feed-refresh{display:none!important}#creation-feed.needs-connection .production-layout{display:block}#creation-feed.needs-connection .feed-empty{padding:32px 24px;background:#f1f3f4;border:1px solid #dadce0;border-radius:14px;text-align:left}#creation-feed.needs-connection .feed-empty h3{font-size:21px;color:#1f1f1f}#creation-feed.needs-connection .feed-empty p{font-size:14px;line-height:1.8;max-width:620px} .sample-journey-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.sample-journey-tabs button{border:1px solid #bdc1c6;border-radius:8px;padding:10px 12px;background:white;color:#3c4043;font-size:12px;cursor:pointer}.sample-journey-tabs button[aria-pressed=true]{background:#0b57d0;color:white;border-color:#0b57d0}.sample-review-panel,.sample-sharing-panel{padding:22px;background:#ffffff;border:1px solid #dadce0;border-radius:12px;line-height:1.8}.sample-review-panel h3,.sample-sharing-panel h3{font-size:18px;margin:8px 0 16px}.sample-review-panel>div{display:flex;gap:14px;align-items:baseline;border-top:1px solid #e8eaed;padding:12px 0}.sample-review-panel>div span{color:#80868b;font-weight:700}.sample-review-panel p,.sample-sharing-panel p{font-size:13px;white-space:pre-wrap;margin:8px 0}.sample-review-panel small,.sample-sharing-panel small{font-size:11px;color:#5f6368}.sample-sharing-panel>strong{display:block;font-size:14px;color:#1f1f1f}.sample-sharing-thread{border-left:3px solid #bdc1c6;padding:8px 14px;margin-top:20px;background:#f8f9fa}.sample-sharing-thread strong{display:block;font-size:13px}.sample-review-panel[hidden],.sample-sharing-panel[hidden],.sample-document[hidden]{display:none!important} .coo-handoff{margin:18px 0;padding:20px;border:1px solid #bdc1c6;border-radius:12px;background:#f8f9fa}.coo-handoff h3{font-size:18px;margin:0 0 10px}.coo-handoff p,.coo-handoff small{font-size:12px;line-height:1.7;color:#5f6368}.coo-handoff label{display:block;font-size:13px;font-weight:650}.coo-handoff textarea{box-sizing:border-box;display:block;width:100%;padding:12px;margin:10px 0;border:1px solid #bdc1c6;border-radius:8px;background:white;font:inherit;line-height:1.7;resize:vertical}.coo-handoff-routes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.coo-handoff button{border:1px solid #bdc1c6;background:white;border-radius:8px;text-align:left;padding:12px;color:#1f1f1f;cursor:pointer}.coo-handoff button strong,.coo-handoff button span{display:block}.coo-handoff button strong{font-size:13px}.coo-handoff button span{font-size:11px;line-height:1.7;margin-top:6px}.coo-handoff button:focus-visible{outline:3px solid #9aa0a6;outline-offset:3px}@media(max-width:520px){.coo-handoff-routes{grid-template-columns:1fr}} .app-navigation a[aria-current=location]{background:#e7efe9;color:#254f38;border-radius:8px;box-shadow:inset 0 -2px #315d49} /* Show the deliverable and the next action before the long example. */ .employee-outcome strong,.employee-outcome span{display:block}.employee-outcome strong{font-size:14px;color:#1f1f1f;margin-bottom:6px}.employee-outcome span{line-height:1.7}.employee-work-dialog .employee-outcome+.employee-work-new{display:block;width:100%;margin:8px 0 18px!important}.sample-section-label{display:block;font-size:10px;letter-spacing:.06em;font-weight:750;color:#3c4043;margin-bottom:10px}.employee-example-host .sample-document[data-layout=proposal]>section{margin:12px;padding:24px;border:1px solid #dadce0;border-radius:8px;box-shadow:0 3px 10px #253d3009;background:#ffffff}.employee-example-host .sample-document[data-layout=proposal]{background:#e8eaed;padding-bottom:1px}.employee-example-host .sample-document[data-layout=lp]>section:last-of-type{background:#e8eaed;text-align:center;padding:28px}.employee-example-host .sample-document[data-layout=lp]>section:last-of-type h4{display:inline-block;background:#0b57d0;color:white;border-radius:8px;padding:12px 18px}.employee-example-host .sample-document[data-layout=instagram]>section{border-left:3px solid #80868b;margin:12px;background:#f8f9fa}.employee-example-host .sample-document[data-layout=seo]>section{border-left:3px solid #80868b;margin:12px;background:#f0f4f9}.mini-deliverable .sample-section-label{font-size:6px;margin-bottom:4px} .guided-actions .guided-early-review{flex-basis:100%;background:#f1f3f4;color:#1f1f1f;border:1px solid #bdc1c6;margin-top:8px;font-weight:650}.guided-optional-note{font-size:11px!important;line-height:1.7;color:#5f6368}.guided-early-review[hidden]{display:none!important} .guided-brief-dialog .guided-actions button.guided-early-review{background:#f1f3f4!important;color:#1f1f1f!important;border:1px solid #bdc1c6!important} .request-guide-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}#request-guide .request-guide-actions .secondary{background:transparent;color:#1f1f1f;border:1px solid #bdc1c6;font-weight:500}#request-current-state[data-state=setup],#request-current-state[data-state=blocked]{background:#feefc3;color:#8a4b00} /* Keep the name and preparation level together; leave space for the people. */ .office-speech-dock .office-speech>button{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:0 4px!important;min-height:38px!important;padding:5px 6px!important;text-align:left!important}.office-speech-dock .office-speech>button small{grid-column:1;grid-row:1;font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.office-speech-dock .office-speech>button strong{grid-column:1/-1;grid-row:2;font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.office-speech-dock .office-speech>button .speech-level{grid-column:2;grid-row:1;margin:0!important;padding:1px 2px!important;font-size:7px!important;white-space:nowrap;background:transparent!important}.office-speech-dock .office-speech p{margin-bottom:4px!important} .draft-reader-open{font-size:11px;padding:7px 10px;border:1px solid #bdc1c6;background:#f1f3f4;color:#1f1f1f;border-radius:6px;white-space:nowrap}.rough-live-heading{flex-wrap:wrap}.draft-reader{width:min(1180px,96vw);height:92vh;max-height:92vh;padding:0;border:1px solid #bdc1c6;border-radius:16px;background:#f1f3f4;overflow:hidden}.draft-reader[open]{display:flex;flex-direction:column}.draft-reader::backdrop{background:#10251ec4;backdrop-filter:blur(4px)}.draft-reader>header{display:flex;justify-content:space-between;gap:20px;padding:20px 26px;background:#ffffff;border-bottom:1px solid #dadce0;flex-shrink:0}.draft-reader h2{font-size:20px;margin:6px 0 0;color:#1f1f1f}.draft-reader header small{font-size:12px;color:#5f6368}.draft-reader button{cursor:pointer;border:1px solid #bdc1c6;background:white;color:#1f1f1f;padding:10px 14px;border-radius:7px;font:inherit;font-size:12px}.draft-reader button:focus-visible{outline:3px solid #9aa0a6;outline-offset:2px}.draft-reader-layout{display:grid;grid-template-columns:210px minmax(0,1fr);overflow:auto;min-height:0;flex:1}.draft-reader nav{padding:24px 16px}.draft-reader nav strong{display:block;margin-bottom:12px;font-size:12px;color:#5f6368}.draft-reader nav button{display:block;width:100%;text-align:left;margin-bottom:6px;background:transparent;border:0;line-height:1.7}.draft-reader nav button:hover{background:#e8eaed}.draft-reader nav p{font-size:12px;line-height:1.8;color:#5f6368}.draft-reader .draft-reader-body{background:white;margin:24px;max-width:760px;padding:36px 42px;max-height:none;overflow:visible;border:1px solid #dadce0;border-radius:6px;box-shadow:0 8px 24px #17342209;font-size:15px;line-height:1.95;overflow-wrap:anywhere}.draft-reader-body h2,.draft-reader-body h3,.draft-reader-body h4{scroll-margin-top:20px;line-height:1.5;color:#1f1f1f}.draft-reader-body h2{font-size:25px}.draft-reader-body h3{font-size:21px;border-bottom:1px solid #dadce0;padding-bottom:10px}.draft-reader-body p{font-size:15px;line-height:1.95}.draft-reader>footer{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:14px 24px;background:#ffffff;border-top:1px solid #dadce0;flex-shrink:0}.draft-reader footer span{font-size:11px;line-height:1.7;color:#5f6368}.draft-reader footer button{flex-shrink:0;background:#0b57d0;color:white}@media(max-width:760px){.draft-reader-layout{display:block}.draft-reader nav{padding:12px 18px;display:flex;gap:8px;overflow-x:auto;align-items:center}.draft-reader nav strong,.draft-reader nav button{white-space:nowrap;margin:0;flex-shrink:0;width:auto}.draft-reader .draft-reader-body{padding:22px;margin:0 12px 18px}.draft-reader>header{padding:16px}.draft-reader>header button{flex-shrink:0}.draft-reader>footer{padding:12px}.draft-reader h2{font-size:17px}} .document-table-scroll{width:100%;overflow-x:auto;margin:18px 0;border:1px solid #dadce0;border-radius:8px}.document-table-scroll:focus-visible{outline:3px solid #9aa0a6;outline-offset:2px}.document table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;line-height:1.7}.document th,.document td{padding:12px 14px;border-bottom:1px solid #dadce0;vertical-align:top;min-width:100px}.document th{background:#f1f3f4;color:#1f1f1f;font-weight:700}.document tbody tr:last-child td{border-bottom:0}.document tbody tr:nth-child(even){background:#f8f9fa}.document blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid #80868b;background:#f1f3f4;white-space:pre-wrap}.document pre{overflow:auto;padding:16px;background:#f1f3f4;border-radius:8px;white-space:pre}.document code{font-size:.9em;background:#e8eaed;padding:2px 4px;border-radius:3px}.document pre code{padding:0;background:none}.document hr{border:0;border-top:1px solid #dadce0;margin:24px 0} .office-scene[data-model-assets=loading]>.office-webgl,.office-scene[data-model-assets=loading]>.office-speech-dock,.office-scene[data-model-assets=loading]>.office-label-leaders{visibility:hidden}.office-model-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0!important;padding:24px;background:linear-gradient(145deg,#e6ede8,#cbd8d1);color:#315344;font-size:14px!important;font-weight:600;z-index:2;pointer-events:none}.office-model-loading.is-fallback{inset:auto 12px 10px;display:block;padding:8px 12px;background:#fff6e5eb;border:1px solid #e4d2a7;border-radius:7px;color:#765c27;font-size:10px!important;font-weight:400;z-index:4} .guided-new-reference{margin:10px 0;border:1px solid #bdc1c6;border-radius:10px;padding:12px 14px;background:#f8f9fa}.guided-new-reference summary{cursor:pointer;font-size:13px;font-weight:600;color:#1f1f1f}.guided-new-reference form{display:grid;gap:12px;margin-top:16px}.guided-new-reference label{display:grid;gap:8px;font-size:12px;font-weight:600}.guided-new-reference input,.guided-new-reference textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid #bdc1c6;border-radius:7px;background:white;font:inherit;line-height:1.7}.guided-new-reference p,.guided-new-reference small{font-size:11px;line-height:1.8;color:#5f6368;margin:0}.guided-new-reference button{padding:12px;border:0;border-radius:7px;background:#0b57d0;color:white;font-weight:650;cursor:pointer}.guided-new-reference button:disabled{opacity:.6;cursor:wait} /* Output-first confirmation: concrete inputs before editable conditions. */ .brief-review-outcome{margin:18px 0 26px;padding:24px;background:#f0f4f9;border:1px solid #dadce0;border-radius:18px;color:#1f1f1f}.brief-review-outcome>small{font-size:11px;color:#5f6368}.brief-review-outcome>h3{font-size:22px;line-height:1.5;margin:10px 0;overflow-wrap:anywhere}.brief-review-outcome>p{font-size:12px;color:#5f6368;line-height:1.7}.brief-review-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.brief-review-pages article{background:white;border:1px solid #e8eaed;border-top:3px solid #0b57d0;border-radius:10px;padding:16px;min-width:0}.brief-review-pages small{display:block;font-size:10px;color:#0b57d0;letter-spacing:.05em}.brief-review-pages strong{display:block;font-size:14px;line-height:1.7;margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}.brief-review-pages p{font-size:11px;color:#5f6368;line-height:1.6}.brief-review-outcome[data-kind=lp] .brief-review-pages article:last-child{border-top-color:#0b57d0;background:#e8f0fe}@media(max-width:600px){.brief-review-outcome{padding:16px}.brief-review-pages{grid-template-columns:1fr}.brief-review-pages article{padding:12px}.brief-review-pages strong{margin:6px 0}} .generation-followup .followup-saved-notice{padding:12px 16px;border-left:3px solid #0b57d0;background:#e8f0fe;color:#1f1f1f;border-radius:6px;font-size:13px;line-height:1.7} .generation-followup .followup-reset{display:block;width:auto;margin:6px 0 14px;padding:6px 0;border:0;background:transparent;box-shadow:none;color:#5f6368;font-size:12px;text-align:left;text-decoration:underline;text-underline-offset:3px}.generation-followup .followup-reset:hover{color:#1f1f1f;background:transparent} .rough-view-switch{display:flex;gap:4px;padding:4px;border:1px solid #dadce0;border-radius:10px;background:#e8f0fe;width:fit-content;margin:14px 0}.rough-view-switch button{border:0;border-radius:7px;background:transparent;box-shadow:none;padding:9px 14px;font-size:12px;color:#5f6368}.rough-view-switch button[aria-pressed=true]{background:#ffffff;color:#1f1f1f;box-shadow:0 1px 4px #233e5917}.rough-view-switch button:focus-visible{outline:2px solid #0b57d0;outline-offset:2px}.rough-live-layout[data-view=edit],.rough-live-layout[data-view=preview]{grid-template-columns:minmax(0,1fr)}.rough-live-layout[data-view=edit] .rough-live-column,.rough-live-layout[data-view=preview] .rough-edit-column{display:none}.rough-live-layout[data-view=preview] #rough-live-preview{height:auto;max-height:62vh;min-height:250px;padding:26px;line-height:1.9}.rough-live-layout[data-view=edit] #rough-editor{font-size:15px}@media(max-width:600px){.rough-view-switch{width:100%;box-sizing:border-box}.rough-view-switch button{flex:1;padding:9px 5px}.rough-live-layout[data-view=preview] #rough-live-preview{padding:16px}} /* Outcome-first intake: choose a real work product before answering questions. */ .work-recipe-panel{margin:20px 0}.work-recipe-panel>h3{font-size:17px;color:#1f1f1f}.work-recipe-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:10px}.work-recipe-cards button{display:flex;flex-direction:column;gap:10px;padding:18px;text-align:left;border:1px solid #bdc1c6;border-radius:12px;background:#ffffff;color:#1f1f1f}.work-recipe-cards button strong{font-size:15px}.work-recipe-cards button span{font-size:12px;line-height:1.8;font-weight:400;color:#3c4043}.work-recipe-cards button[aria-pressed=true]{border-color:#0b57d0;background:#ceead6;box-shadow:inset 0 0 0 1px #3c4043}.work-recipe-cards button[aria-pressed=true] strong:before{content:'✓ ';color:#3c4043}.work-recipe-cards button:focus-visible{outline:3px solid #9aa0a6;outline-offset:3px}.work-recipe-detail{padding:20px;margin-top:14px;background:#ffffff;border:1px solid #dadce0;border-radius:12px}.work-recipe-detail h4{font-size:19px;margin:8px 0 14px}.work-recipe-detail ol{padding-left:22px;display:grid;gap:12px;font-size:13px;line-height:1.7}.work-recipe-detail p{border-top:1px solid #dadce0;padding-top:14px;font-size:12px;line-height:1.8}.work-recipe-detail small{color:#5f6368;font-size:11px;line-height:1.8}.recipe-example-toggle{margin:12px 0}.recipe-example-toggle>summary{cursor:pointer;font-size:13px;padding:14px 0;color:#1f1f1f}.guided-recipe-target{border-left:3px solid #0b57d0;padding:12px 16px;background:#f1f3f4;border-radius:6px;margin:14px 0}.guided-recipe-target p{font-size:12px;line-height:1.8;margin-bottom:0}@media(max-width:520px){.work-recipe-cards{grid-template-columns:1fr}.work-recipe-cards button{padding:14px;gap:5px}.work-recipe-detail{padding:16px}} .work-recipe-detail ol{list-style:none;counter-reset:recipe-page;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;gap:10px}.work-recipe-detail li{counter-increment:recipe-page;padding:14px 12px 20px;background:linear-gradient(#f8f9fa,#ffffff);border:1px solid #dadce0;border-top:3px solid #5f6368;border-radius:5px;min-height:105px;box-shadow:0 3px 8px #213b2c08}.work-recipe-detail li:before{content:'0' counter(recipe-page);display:block;font-size:11px;letter-spacing:.1em;color:#5f6368;margin-bottom:14px}@media(max-width:520px){.work-recipe-detail ol{grid-template-columns:1fr}.work-recipe-detail li{min-height:0;padding:12px}.work-recipe-detail li:before{display:inline;margin-right:10px}} /* A compact strategic display integrated into the office viewport. */ .office-market-radar{position:absolute;right:14px;bottom:18px;z-index:12;width:290px;background:linear-gradient(135deg,#132e31f5,#17393df5);color:#e9f3ee;border:1px solid #779a9370;border-radius:14px;box-shadow:0 10px 35px #001d2850;backdrop-filter:blur(12px);padding:12px}.market-radar-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.market-radar-heading strong{font-size:12px;letter-spacing:.04em}.market-radar-heading button{padding:3px 7px!important;font-size:10px!important;background:#ffffff10!important;color:#dadce0!important;border:1px solid #ffffff25!important;border-radius:5px}.market-radar-body{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;padding:9px 0}.market-radar-body:focus-visible{outline:3px solid #f9ab00;outline-offset:3px}.market-radar-chart{position:relative;flex-shrink:0;width:110px;height:100px;background:repeating-radial-gradient(circle at center,#83bdb512 0 16px,#9bccbe55 17px,#83bdb512 18px 32px);border-radius:50%;border:1px solid #accdbc40}.radar-own{position:absolute;left:38px;top:37px;width:34px;height:28px;display:grid;place-items:center;background:#e1ede5;color:#21473c;border-radius:7px;font-size:10px;font-weight:750;box-shadow:0 0 14px #b9e8d630}.radar-competitor{position:absolute;font-size:8px;max-width:65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 4px;background:#293f49;color:#d4e8f0;border:1px solid #94b3c088;border-radius:4px}.radar-slot-0{left:1px;top:5px}.radar-slot-1{right:-5px;bottom:5px}.radar-slot-2{right:-6px;top:15px}.radar-competitor[data-signal=risk]{background:#703a3c;color:#ffe5db;border-color:#e19481;box-shadow:0 0 9px #dd786544}.radar-competitor[data-signal=opportunity]{background:#285744;color:#d8f9e5}.office-market-radar[data-signal=risk]{border-color:#d8866d;box-shadow:0 10px 35px #001d2850,inset 0 2px #cf8667}.office-market-radar[data-signal=risk] .market-radar-copy>strong{color:#ffd0b9}.market-radar-copy{min-width:0;display:grid;gap:6px}.market-radar-copy>strong{font-size:15px}.market-radar-copy>span{font-size:10px;color:#bdc1c6;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.market-radar-copy>small{font-size:10px;color:#fdd663}.market-radar-foot{font-size:8px;display:block;color:#9aa0a6;line-height:1.5}.office-market-radar.is-collapsed{width:200px}.office-market-radar.is-collapsed .market-radar-chart,.office-market-radar.is-collapsed .market-radar-foot,.office-market-radar.is-collapsed .market-radar-copy>span{display:none}.office-market-radar.is-collapsed .market-radar-copy>strong{font-size:12px}.office-market-radar.is-collapsed .market-radar-body{padding-bottom:0}@media(max-width:700px){.office-market-radar{right:8px;bottom:14px;width:230px;padding:9px}.market-radar-chart{width:80px;height:80px}.radar-own{left:24px;top:29px;width:30px;height:24px}.market-radar-copy>strong{font-size:12px}.radar-competitor{font-size:7px;max-width:50px}.market-radar-body{gap:8px}.radar-slot-0{top:0}.market-radar-foot{font-size:8px}} .radar-competitor[data-signal=risk]:after{content:'↘';position:absolute;color:#f5ad93;font-size:18px;right:-13px;bottom:-16px}.radar-competitor[data-signal=risk]{overflow:visible}.radar-slot-1[data-signal=risk]:after{content:'↖';right:25px;bottom:13px}.radar-slot-2[data-signal=risk]:after{content:'↙';right:20px;bottom:-19px} /* Match the task rail to the actual office row, including the expanded 3D view. */ @media(min-width:701px){ .office-stage>.office-inroom-board{align-self:stretch;min-height:0;max-height:none;height:auto;contain:size;overflow-y:auto;scrollbar-gutter:stable;background:#f4f6fb!important} } .office-inroom-board .office-board-note,.office-inroom-board #office-board-items>p{color:#526275;font-size:11px;line-height:1.6} .office-inroom-board .office-board-heading>span,.office-inroom-board .office-board-date{color:#526275} .office-inroom-board #office-task-title::placeholder{color:#65758a;opacity:1} /* Member permissions remain readable on narrow screens. */ .shared-member-list li{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .shared-member-list li>strong{flex:1 1 140px;overflow-wrap:anywhere} .shared-member-list li>span{flex:0 0 auto} .shared-member-list li>label{flex:1 1 180px;display:grid;gap:6px;font-size:12px;min-width:0} .shared-member-list li>label select{width:100%;min-height:42px;box-sizing:border-box;font-size:13px} .shared-member-list li>button{flex:0 0 auto;min-height:42px;white-space:nowrap} .shared-artifacts-dialog{width:min(850px,94vw);max-height:90vh;padding:24px;border:1px solid #bdc1c6;border-radius:18px;background:#ffffff;color:#1f1f1f}.shared-artifacts-dialog::backdrop{background:#182f2866;backdrop-filter:blur(3px)}.shared-artifacts-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.shared-artifacts-dialog h2{font-size:22px}.shared-artifacts-dialog p{font-size:13px;line-height:1.8}.shared-artifacts-dialog article{border:1px solid #dadce0;border-radius:10px;padding:16px;margin:12px 0}.shared-artifacts-dialog button{min-height:42px;margin:6px 8px 6px 0;border:1px solid #bdc1c6;border-radius:8px;padding:8px 12px;background:#f1f3f4;color:#1f1f1f}.shared-artifacts-dialog textarea{box-sizing:border-box;width:100%;font-size:14px;line-height:1.8;padding:14px}.shared-artifacts-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.8 system-ui;background:#f1f3f4;padding:14px;border-radius:8px}.shared-artifacts-dialog label{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:flex-start}.shared-artifacts-dialog label span{flex:1;min-width:160px}.shared-artifacts-dialog input[type=checkbox]{width:18px;height:18px;flex:0 0 18px}.shared-artifacts-dialog details{margin:12px 0}.shared-artifacts-dialog fieldset{border:1px solid #dadce0;border-radius:10px;margin-top:18px} .shared-artifacts-dialog header{padding:0;background:transparent}.shared-artifacts-dialog header>button{flex-shrink:0;white-space:nowrap}.shared-artifacts-dialog textarea{min-height:220px;resize:vertical} #session-recovery-notice{margin:16px;padding:18px 22px;border:1px solid #f9ab00;border-left:4px solid #e37400;border-radius:12px;background:#fef7e0;color:#1f1f1f}#session-recovery-notice strong{font-size:16px}#session-recovery-notice p{line-height:1.65;margin:8px 0 12px}#session-recovery-notice button{margin:4px 12px 4px 0;padding:9px 14px;border:1px solid #9aa0a6;border-radius:8px;background:#ffffff;color:#1f1f1f} #session-recovery-notice{position:sticky;top:76px;z-index:65;box-shadow:0 6px 22px #47391918;max-height:calc(100vh - 110px);overflow:auto}#session-recovery-notice pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:#ffffff;padding:14px;border-radius:8px} .billing-checkout-panel{margin-top:16px}.billing-plan-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.shared-artifacts-dialog .billing-plan-list article{margin:0;background:#f8f9fa}.billing-plan-list h4{font-size:18px;margin:0 0 10px}.shared-artifacts-dialog .billing-plan-price{font-size:23px;font-weight:750;color:#1f1f1f}.billing-plan-list ul{padding-left:22px;line-height:1.8}.billing-plan-list button:disabled{opacity:.5;cursor:not-allowed}.billing-checkout-panel a{display:inline-block;padding:12px 16px;border-radius:8px;background:#0b57d0;color:#ffffff;text-decoration:none} /* DADS-inspired business UI, 2026-09-20. Brand/world assets remain independent. Scope: navigation, work entry, task board, authoring dialogs and inputs. Dense calendar and miniature document previews keep their own layout. */ :root{--flow-ink:#1f1f1f;--flow-muted:#3c4043;--flow-line:#80868b;--flow-action:#0b57d0;--flow-action-hover:#0b57d0;--flow-surface:#ffffff;--flow-canvas:#f8f9fa;--flow-link:#0b57d0;--flow-focus:#f9ab00} body{color:var(--flow-ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif} html{scroll-padding-top:100px} body :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid #1f1f1f!important;outline-offset:3px!important;box-shadow:0 0 0 6px var(--flow-focus)!important} .flow-skip-link{position:fixed;top:8px;left:16px;z-index:10000;transform:translateY(-180%);padding:12px 20px;background:#ffffff;color:#0b57d0;font-size:16px;font-weight:700;border:2px solid #1f1f1f;border-radius:6px} .flow-skip-link:focus{transform:none} .app-header{gap:16px;background:#fff;border-bottom:1px solid #d7dee2} .app-header .app-navigation{gap:4px;min-width:0} .app-header :is(.app-navigation a,.app-navigation button,.header-actions button,.workspace-menu>summary){font-size:14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;color:var(--flow-ink);line-height:1.5;box-sizing:border-box;white-space:nowrap} .app-header .app-navigation a[aria-current]{color:var(--flow-action);background:#eaf2ee;border-radius:6px;font-weight:700;box-shadow:inset 0 -3px var(--flow-action)} #notice{font-size:14px;line-height:1.5;color:var(--flow-muted);padding:8px 20px;background:var(--flow-canvas)} #my-office .office-world-toolbar{padding:14px 20px;gap:12px;background:#fff} #my-office .office-world-toolbar :is(button,summary,a){font-size:14px!important;line-height:1.5!important;min-height:44px;box-sizing:border-box;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;color:var(--flow-ink)} #my-office .office-company-brand{gap:12px;flex-wrap:wrap} #my-office #office-company{font-size:16px!important;min-height:44px;color:var(--flow-ink)} #my-office #office-runtime-status{font-size:14px!important;color:#684700;background:#fff5da;border:1px solid #c6a761;white-space:normal;opacity:1;min-height:36px;padding:6px 10px} #my-office #office-runtime-status[data-ready=true]{color:#245544;background:#edf5f0;border-color:#a5bdb0} #my-office #flow-new-work{background:var(--flow-action)!important;color:#fff!important;border:1px solid var(--flow-action)!important;font-size:16px!important;font-weight:700;min-height:48px;padding:12px 20px} #my-office #flow-new-work:hover{background:var(--flow-action-hover)!important} #my-office .office-delegate-actions>a{color:var(--flow-link);text-decoration:underline;text-underline-offset:4px} #my-office .office-view-actions{gap:8px;flex-wrap:wrap} #my-office .office-work-access{background:#fff!important;border:1px solid var(--flow-action)!important;color:var(--flow-action)!important;gap:10px;flex-wrap:wrap;justify-content:flex-start} #my-office .office-work-access :is(strong,small){font-size:14px!important;color:inherit!important;line-height:1.5} #my-office .office-view-actions>button:not(.office-work-access){border-color:#bdc7cd;background:#fff} #my-office :is(.office-settings-menu,.flow-company-settings)>summary{border:1px solid #bdc7cd;background:#fff;cursor:pointer;gap:10px} #my-office :is(.office-settings-menu,.flow-company-settings)>summary::after{content:'⌄';font-size:16px} .flow-company-settings{position:relative} .flow-company-settings-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:220px;padding:8px;border:1px solid #bdc7cd;border-radius:8px;background:white;box-shadow:0 12px 32px #142b3526} #my-office .flow-company-settings-panel button{display:flex;width:100%;justify-content:flex-start;background:white;border:0;text-align:left} #my-office .flow-company-settings-panel button:hover{background:#eaf2ee} #my-office .office-inroom-board :is(p,label,small){font-size:14px!important;line-height:1.6!important;color:var(--flow-muted)} #my-office .office-inroom-board h2{font-size:18px;line-height:1.5;color:var(--flow-ink)} #my-office .office-inroom-board :is(button,input,select){font-size:14px!important;min-height:44px;line-height:1.5} #my-office .office-inroom-board :is(input,select){border:1px solid var(--flow-line);background:white;color:var(--flow-ink)} #my-office .office-board-note{display:block;margin-top:12px} dialog{color:var(--flow-ink)} dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select){font-size:16px!important;line-height:1.6!important;border:1px solid var(--flow-line)!important;border-radius:6px;background:#ffffff;color:var(--flow-ink);padding:10px 12px;box-sizing:border-box;max-width:100%;min-height:48px} dialog :is(input,textarea)::placeholder{color:#5f6368;opacity:1} dialog :is(input,textarea,select)[aria-invalid=true]{border:2px solid #c5221f!important} dialog :is(input,textarea):read-only{background:#f1f3f4} dialog button{min-height:44px;font-size:14px;line-height:1.5} dialog>p,dialog form>p,.guided-brief-dialog>p,.guided-brief-dialog label{font-size:16px!important;line-height:1.7!important;color:var(--flow-muted)} .team-chooser{background:#ffffff!important;width:min(980px,calc(100vw - 40px))!important;max-height:90dvh;border:1px solid #bdc1c6!important;border-radius:14px!important;padding:24px!important} .team-chooser-header{align-items:center;gap:16px} .team-chooser-header h2{font-size:26px!important;line-height:1.4;color:var(--flow-ink)} .team-chooser-header>button{flex-shrink:0;min-width:88px;font-size:16px!important;color:var(--flow-ink);border:1px solid #80868b;background:white;border-radius:6px} .team-chooser-grid{gap:16px!important} .team-chooser-grid>button{border:1px solid #9aa0a6!important;background:#ffffff!important;border-radius:10px!important;overflow:hidden;text-align:left;transition:border-color .15s,box-shadow .15s} .team-chooser-grid>button:hover{border-color:var(--flow-action)!important;box-shadow:0 0 0 2px var(--flow-action)} .team-chooser-grid>button>span{padding:16px!important;display:block} .team-chooser-grid>button>span>strong{font-size:18px!important;line-height:1.5;color:var(--flow-ink)} .team-chooser-grid>button>span>:is(small,span){display:block;font-size:14px!important;line-height:1.6!important;color:var(--flow-muted)!important;margin-top:6px} .flow-creation-steps{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:12px 0;margin:12px 0 8px;border-top:1px solid #dadce0;border-bottom:1px solid #dadce0;counter-reset:step} .flow-creation-steps li{counter-increment:step;display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.5;color:var(--flow-muted)} .flow-creation-steps li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;border:1px solid #80868b;border-radius:50%;background:#ffffff;color:var(--flow-ink)} .flow-creation-steps li[aria-current=step]{font-weight:700;color:var(--flow-action)} .flow-creation-steps li[aria-current=step]::before{background:var(--flow-action);color:#ffffff;border-color:var(--flow-action)} @media(max-width:1100px){.app-header{flex-wrap:wrap;padding:10px 16px}.app-header .app-navigation{order:3;width:100%;overflow-x:auto;justify-content:flex-start}.app-header .header-actions{margin-left:auto}html{scroll-padding-top:150px}} @media(max-width:680px){#my-office .office-world-toolbar{padding:12px}.office-delegate-actions{flex-wrap:wrap}#my-office .office-work-access{width:100%}.team-chooser{padding:16px!important;width:calc(100vw - 24px)!important}.team-chooser-grid{grid-template-columns:1fr!important}.team-chooser-header h2{font-size:22px!important}.flow-creation-steps{gap:8px}.flow-creation-steps li{font-size:14px}.app-header .header-actions button{white-space:normal}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}body *,body *::before,body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} #my-office .flow-company-settings{margin:0;padding:0;border:0;background:transparent;border-radius:0} #my-office .office-view-actions{align-items:center} #my-office .office-world-toolbar{align-items:center} @media(min-width:681px) and (max-width:1100px){.app-header>strong{width:auto!important;flex:0 0 auto!important}.app-header .header-actions{width:auto!important;flex:1;justify-content:flex-end}.app-header .app-navigation{flex-basis:100%}} /* Fantasy guild: quiet parchment labels leave room for expressive 3D silhouettes. */ .office-scene[data-world="fantasy-guild"] .office-speech>button{background:#fff7e9f5!important;border:1px solid #b6a078!important;border-radius:9px!important;box-shadow:0 3px 9px #493b2720!important} .office-scene[data-world="fantasy-guild"] .office-speech>button small{color:#453c30!important;font-weight:750!important} .office-scene[data-world="fantasy-guild"] .office-speech p{background:#fffaf0ed!important;color:#635647!important;border-color:#cbbd9f!important;font-size:9px!important;line-height:1.4!important;max-height:29px;overflow:hidden;padding:4px 6px!important} .office-scene[data-world="fantasy-guild"] .office-label-leaders line{stroke:#947d57;stroke-width:1;opacity:.48} .office-scene[data-world="fantasy-guild"] .office-room-board{background:#fff9ebf5!important;border:1px solid #baa16d!important;color:#463e31!important;box-shadow:0 5px 18px #41372420} .office-scene[data-world="fantasy-guild"] .office-speech button:focus-visible{outline:3px solid #3675b4!important;outline-offset:3px} .guild-portrait.has-guild-rig{background-image:none!important;overflow:hidden}.guild-rig-portrait{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* 背景はキャラごとに3D側が描く。ここで一色に塗るとその絵が消える */ .guild-rig-portrait{object-fit:cover} /* Keep the speech directly associated with its character, even in a narrow office. */ .office-scene[data-world="fantasy-guild"] .office-speech>button{padding:4px 5px!important;gap:1px!important} .office-scene[data-world="fantasy-guild"] .office-speech-status{display:none!important} .office-scene[data-world="fantasy-guild"] .office-speech p{margin-bottom:3px!important} @media(max-width:700px){.office-scene[data-world="fantasy-guild"] .office-speech p{max-height:14px;white-space:nowrap;text-overflow:ellipsis}.office-scene[data-world="fantasy-guild"] .office-speech>button small{font-size:10px!important}} /* Guild world v4 — room and its controls share one readable RPG visual language. */ #my-office:has([data-world="fantasy-guild"]){background:#eee5cf;border:1px solid #bca371;border-radius:12px;box-shadow:0 12px 34px #3e312022;overflow:hidden} #my-office:has([data-world="fantasy-guild"]) .office-world-toolbar{background:linear-gradient(110deg,#21354a,#354d63);color:#fff0cc;border-bottom:3px solid #bd9855} #my-office:has([data-world="fantasy-guild"]) .office-world-toolbar button,#my-office:has([data-world="fantasy-guild"]) .office-world-toolbar summary{border-color:#bba473;background:#fff5df;color:#413725} #my-office:has([data-world="fantasy-guild"]) .office-inroom-board{background:#e5d8b9;border-right:2px solid #bda16c} #my-office:has([data-world="fantasy-guild"]) .office-board,#my-office:has([data-world="fantasy-guild"]) .office-progress{background:#fff5de;border:1px solid #c6ae7b;border-radius:6px;box-shadow:0 2px 0 #b79b6625} .office-scene[data-world="fantasy-guild"] .office-speech>button{background:#263c51f5!important;border:1px solid #ddbe77!important;box-shadow:0 2px 0 #1a283f,0 4px 10px #17233435!important} .office-scene[data-world="fantasy-guild"] .office-speech>button small{color:#fff1cd!important}.office-scene[data-world="fantasy-guild"] .office-speech>button strong{color:#dce5e9!important}.office-scene[data-world="fantasy-guild"] .office-speech .speech-level{color:#f7d888!important;text-shadow:none!important} .office-scene[data-world="fantasy-guild"] .office-room-brand{background:#22374ded!important;border:1px solid #c6a565;border-radius:6px;box-shadow:0 4px 15px #17263733} .office-scene[data-world="fantasy-guild"] .office-camera-settings{background:#fff4dbf5;border:1px solid #c4a66c} .office-scene[data-world="fantasy-guild"] .office-market-radar{background:#233c50f2;border:1px solid #ba9b60;border-radius:8px;color:#f7ecd0} #my-office:has([data-world="fantasy-guild"]) .studio-specialists{background:#eee1c3;border-color:#bfa570} #my-office:has([data-world="fantasy-guild"]) .studio-specialists>button{background:#fff6df;border-color:#c3a66b;border-radius:8px} #my-office:has([data-world="fantasy-guild"]) .office-world-toolbar{background:linear-gradient(110deg,#21354a,#354d63)!important;color:#fff0cc!important} #my-office:has([data-world="fantasy-guild"]) .office-world-toolbar .office-company-brand,#my-office:has([data-world="fantasy-guild"]) .office-world-toolbar .office-company-brand select{color:#fff0cc!important} /* Guild composition: compact controls, legible actions, and portraits above the fold. */ #my-office:has([data-world="fantasy-guild"]) .office-delegate-actions a{color:#f3d694!important;text-decoration-thickness:1px;text-underline-offset:4px} #my-office:has([data-world="fantasy-guild"]) .office-delegate-actions #flow-new-work{background:#e3be70!important;color:#252f3b!important;border:1px solid #f5dca2!important;box-shadow:0 2px 0 #836b42!important} #my-office:has([data-world="fantasy-guild"]) .office-view-actions{gap:6px!important} #my-office:has([data-world="fantasy-guild"]) .office-work-access{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px!important;min-height:44px!important} #my-office:has([data-world="fantasy-guild"]) .office-work-access strong,#my-office:has([data-world="fantasy-guild"]) .office-work-access span{margin:0!important;font-size:12px!important;line-height:1.4!important} @media(max-width:700px){ #my-office:has([data-world="fantasy-guild"]) .office-world-toolbar{gap:8px!important;padding:10px!important} #my-office:has([data-world="fantasy-guild"]) .office-company-brand{gap:8px!important} #my-office:has([data-world="fantasy-guild"]) .office-delegate-actions{justify-content:space-between;width:100%;gap:8px;margin:0!important} #my-office:has([data-world="fantasy-guild"]) .office-delegate-actions button{min-height:44px!important;padding:8px 14px!important;font-size:14px!important} #my-office:has([data-world="fantasy-guild"]) .office-view-actions{width:100%;display:flex;flex-wrap:wrap} #my-office:has([data-world="fantasy-guild"]) .office-view-actions>button,#my-office:has([data-world="fantasy-guild"]) .office-view-actions>details>summary{font-size:12px!important;min-height:36px!important;padding:6px 10px!important} } /* RPG command language — restrained typography keeps business documents readable. */ body:has(.office-scene[data-world="fantasy-guild"]){--guild-ink:#17273d;--guild-gold:#ddbd77;--guild-paper:#fff4d8} body:has([data-world="fantasy-guild"]) .app-header{background:#192b40!important;color:#fff3d4;border-bottom:3px double #dab971;box-shadow:0 3px 12px #15203535} body:has([data-world="fantasy-guild"]) .app-header .brand-logo{background:#fff;border-radius:3px;padding:4px} body:has([data-world="fantasy-guild"]) .app-header :is(a,button,summary,.product-wordmark){color:#fff1d0!important} /* **文字色だけ変えると、白地のボタンが黄色文字で読めなくなる。** ヘッダーのボタンは背景も一緒に濃くする（2026-09-25 卓馬指摘）。 a や summary は元から透明なので、button だけを対象にする。 */ body:has([data-world="fantasy-guild"]) .app-header button{ background:#263d57!important;border:1px solid #c0a061!important; border-radius:5px!important;box-shadow:inset 0 1px 0 #ffffff14} body:has([data-world="fantasy-guild"]) .app-header button:hover{ background:#35506e!important;border-color:#e3c489!important} body:has([data-world="fantasy-guild"]) .app-header button:focus-visible{ outline:3px solid #ffd98a!important;outline-offset:2px} body:has([data-world="fantasy-guild"]) .app-header .app-navigation a[aria-current=page]{background:#344b64!important;border:1px solid #ddbd77;box-shadow:inset 0 0 0 2px #1b2d43;border-radius:4px} body:has([data-world="fantasy-guild"]) .app-header .app-navigation :is(a,button):hover{background:#344b64!important} body:has([data-world="fantasy-guild"]) .app-header .workspace-menu-panel{background:#20364e;border:2px double #ddbd77} #my-office :is(.office-world-toolbar,.office-speech button,.office-room-board,.studio-specialists-heading,.flow-team-training>summary),#flow-team-showcase :is(h2,h3){font-family:'Hiragino Mincho ProN','Yu Mincho',serif!important;letter-spacing:.035em} .office-scene[data-world="fantasy-guild"] .office-speech>button{border:3px double #e6cc91!important;border-radius:4px!important;background:#192e48f5!important;padding:5px 7px!important} .office-scene[data-world="fantasy-guild"] .office-speech>button small{font-size:12px!important;letter-spacing:.08em!important} .office-scene[data-world="fantasy-guild"] .office-speech p{border:2px solid #8e7753!important;border-radius:5px!important;color:#3d3428!important;background:#fff5dceF!important;font-family:'Hiragino Kaku Gothic ProN',sans-serif} #my-office .office-world-toolbar :is(button,summary),.office-scene[data-world="fantasy-guild"] .office-camera-settings{border:3px double #ab8b50!important;border-radius:4px!important} #my-office #flow-new-work::before{content:'▶';font-size:10px;margin-right:8px} #my-office .flow-team-training>summary{background:#213951;color:#fff0c9!important;border:3px double #d0ae6d;border-radius:4px;padding:14px!important} #my-office .studio-specialists-heading strong{font-size:20px;color:#473b2a} .guild-portrait{position:relative!important} .guild-role-crest{position:absolute;right:7px;bottom:7px;z-index:2;width:30px;height:30px;padding:5px;box-sizing:border-box;border:3px double #e3c882;border-radius:50%;color:#f9dea0;background:#253b54;box-shadow:0 2px 5px #15203544} #flow-team-showcase{background:#fdd663!important;border:1px solid #9aa0a6;border-radius:8px;padding:24px!important} #flow-team-showcase h2{color:#1f1f1f} #flow-team-showcase .guild-portrait{border-bottom:3px double #c2a365!important} #flow-team-showcase button{border-radius:4px!important;border-color:#80868b!important} body:has([data-world="fantasy-guild"]) .employee-work-dialog{border:4px double #c9aa69!important;background:#fff8e8!important;border-radius:8px!important} body:has([data-world="fantasy-guild"]) .employee-work-header{border-bottom:3px double #c9aa69;padding-bottom:16px} body:has([data-world="fantasy-guild"]) .employee-work-header h2{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;color:#283c54} body:has([data-world="fantasy-guild"]) :is(.office-world-toolbar,.app-navigation,.studio-specialists) :is(button,a,summary):focus-visible{outline:3px solid #f2cc71!important;outline-offset:3px} body:has([data-world="fantasy-guild"]) .app-header .app-navigation a[aria-current]{background:#344b64!important;color:#fff1d0!important;border:3px double #ddbd77;border-radius:4px;box-shadow:none} /* Anchored labels: readable speech, compact identity, no single-line clipping. */ .office-scene[data-world="fantasy-guild"] .office-speech p{white-space:normal!important;font-size:10px!important;line-height:1.35!important;max-height:36px!important;min-height:24px;display:flex;align-items:center;justify-content:center;padding:4px 5px!important;box-sizing:border-box} .office-scene[data-world="fantasy-guild"] .office-speech>button{padding:4px 5px!important;min-height:38px!important} .office-scene[data-world="fantasy-guild"] .office-label-leaders line{stroke:#fff0b5;stroke-width:1.5;opacity:.85} /* Speech must fit its text at every viewport; no clipping or line clamping. */ .office-scene[data-world="fantasy-guild"] .office-speech p{display:block!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;white-space:normal!important;overflow-wrap:anywhere!important;text-overflow:clip!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;line-height:1.5!important;padding:6px!important} .office-scene[data-world="fantasy-guild"] .office-speech p[hidden]{display:none!important} /* Simple companion portraits: prioritize silhouette and role over decorative artwork. */ .guild-portrait.has-guild-rig{background-image:none!important} .guild-portrait .guild-rig-portrait{visibility:visible;object-fit:cover} #my-office .studio-specialists>button{border:1px solid #c3ac7d!important;box-shadow:none!important;background:#fff7e6!important} #my-office .studio-specialists>button:hover{border-color:#8a6c38!important;box-shadow:0 2px 7px #55402115!important} .office-rival-frontier{margin:0;padding:18px 22px;border-top:4px double #ac8551;border-bottom:4px double #ac8551;background:linear-gradient(180deg,#223b49,#334840 60%,#60553b);color:#fff2d6} .office-rival-frontier header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.office-rival-frontier h2{font-size:19px!important;color:#fff1cd!important;margin:0!important}.office-rival-frontier header>span{font-size:9px;letter-spacing:.15em;color:#ebcb87}.office-rival-frontier header>button{margin-left:auto;background:#fff2d5;border:2px solid #b3945e;color:#3b342a;border-radius:4px;min-height:36px} .office-rival-frontier>p{font-size:12px!important;color:#ece1c7!important;margin:8px 0!important} .rival-encounters{display:flex;gap:18px;justify-content:center;padding:8px 0;position:relative;background:repeating-linear-gradient(0deg,transparent 0 27px,#e6cf9820 28px 29px);border-bottom:2px dashed #d7bd78} .rival-monster{width:170px;max-width:30%;background:transparent!important;color:#fff2d6!important;border:0!important;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px!important;cursor:pointer} .rival-avatar{display:block;width:110px;height:100px;border-radius:55% 55% 25% 25%;overflow:hidden;background:#d8c8a1;box-shadow:0 7px 0 #152b3544;animation:rival-approach 5s ease-in-out infinite}.rival-avatar canvas{width:100%;height:100%;object-fit:cover}.rival-monster[data-slot="1"] .rival-avatar{animation-delay:-1.6s}.rival-monster[data-slot="2"] .rival-avatar{animation-delay:-3.3s} .rival-monster strong{font-size:14px;overflow-wrap:anywhere}.rival-monster small{font-size:10px;color:#f0dcc0}.rival-command{font-size:11px;color:#ffe1a1;border-bottom:1px solid #bb9c65}.rival-monster:hover .rival-avatar{outline:3px solid #ffe0a1}.rival-monster:focus-visible{outline:3px solid #ffe0a1!important} .office-rival-frontier footer{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:10px}.office-rival-frontier footer small{font-size:10px;color:#e8dac0}.office-rival-frontier a{color:#ffe0a1!important;font-size:12px;white-space:nowrap} .rival-status-dialog{width:min(850px,92vw);max-height:85dvh;overflow:auto;background:#fff6e1;border:4px double #c3a066;color:#26384d;border-radius:8px;padding:24px} .rival-status-dialog header{position:relative;padding-right:90px}.rival-status-dialog header button{position:absolute;right:0;top:0}.rival-status-dialog h2{font-size:26px;margin:8px 0}.rival-power{background:#243c52;color:#fff0cb;border:3px double #c6a46a;padding:16px;margin:18px 0}.rival-power strong{font-size:22px}.rival-power p{font-size:13px;line-height:1.7;margin-bottom:0}.rival-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.rival-stat-grid section{border:1px solid #d2ba8d;padding:12px;background:#fffbef}.rival-stat-grid h3{font-size:14px;margin:0 0 8px}.rival-stat-grid p,.rival-evidence p{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.rival-stat-grid small{font-size:11px}.rival-evidence{padding:16px 0;border-top:1px solid #cdb489}.rival-evidence>strong{display:block;margin-top:12px}.rival-evidence a{display:block}.rival-manage{display:block;margin-top:20px;font-weight:bold} @keyframes rival-approach{0%,100%{transform:translateY(-3px) rotate(-2deg)}50%{transform:translateY(5px) rotate(2deg)}} @media(prefers-reduced-motion:reduce){.rival-avatar{animation:none!important}} @media(max-width:680px){.office-rival-frontier{padding:14px 12px}.office-rival-frontier footer{flex-direction:column;align-items:start}.rival-monster{max-width:100%;width:140px}.rival-encounters{flex-wrap:wrap;gap:4px}.rival-stat-grid{grid-template-columns:1fr}.rival-status-dialog{padding:16px}.rival-avatar{width:88px;height:82px}} .office-rival-frontier>header{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important} .rival-status-dialog>header{background:transparent!important;color:#253b54!important;box-shadow:none!important;position:relative!important} .office-appearance-settings{flex-basis:100%;padding:6px;border-top:1px solid #c8b58e}.office-appearance-settings>summary{cursor:pointer;font-size:12px;font-weight:700;padding:8px}.office-appearance-settings label{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:6px 0;font-size:11px;color:#2d3e51}.office-appearance-settings select{max-width:150px;font-size:12px;padding:5px;background:#fff9ea;color:#24394d;border:1px solid #ad9668;border-radius:3px}.office-appearance-settings small{display:block;font-size:10px;line-height:1.6;max-width:300px;color:#5b5140}.office-camera-settings:has(.office-appearance-settings[open]){max-height:65vh;overflow:auto} .rival-status-dialog>header{display:block!important;min-height:70px;padding:0 90px 10px 0!important}.rival-status-dialog>header>small{display:block;font-size:11px}.rival-status-dialog>header>h2{font-size:24px!important;line-height:1.4;overflow-wrap:anywhere} /* 外周のライバルはバーチャルオフィスの「下」に置く（2026-09-25 卓馬）。 以前はオフィスの右側の列に入れていた。その名残の has-rival-frontier で .office-stage が3列になり、使われない188pxの列が残って3Dの部屋を潰していた。 並び順はDOMどおりで正しかったが、画面ではここが効いていた。 */ /* Company dashboard: priorities, source evidence, and measurable follow-through. */ .growth-controls{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.growth-controls select{width:100%;min-height:32px;font-size:11px}.growth-controls button{font-size:11px;min-height:30px}.growth-summary{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0}.growth-summary span{padding:7px 4px;background:#e9dfc9;color:#283d50;font-size:10px;border-radius:4px;text-align:center} #office-board-items .growth-task{display:grid;grid-template-columns:26px minmax(0,1fr);width:100%;gap:4px 7px;padding:10px 7px;background:#fff9ed;color:#253750;text-align:left;border:1px solid #ccb991;border-radius:6px;margin-bottom:7px;box-shadow:none} .growth-task strong{font-size:12px;line-height:1.6;overflow-wrap:anywhere}.growth-task small{grid-column:2;font-size:10px;line-height:1.5;color:#53616e}.growth-priority{font-size:11px;background:#dce5ec;border-radius:4px;align-self:start;text-align:center;padding:4px 1px}.growth-priority[data-priority=A]{background:#a73d39;color:white}.growth-priority[data-priority=B]{background:#d8a744;color:#201e18}.growth-task:focus-visible{outline:3px solid #2472ae} .growth-task-dialog{width:min(720px,92vw);max-height:88vh;overflow:auto;padding:22px;border:1px solid #b29a6e;border-radius:12px;color:#233b51;background:#fffdf8}.growth-task-dialog::backdrop{background:#10243999}.growth-dialog-header{display:flex;justify-content:space-between;gap:10px;align-items:center}.growth-dialog-header h2{font-size:20px}.growth-task-dialog form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.growth-task-dialog label{display:flex;flex-direction:column;gap:6px;font-size:12px}.growth-task-dialog label:first-child,.growth-task-dialog h3,.growth-task-dialog form>p,.growth-task-dialog form>button,.growth-task-dialog label:has(textarea){grid-column:1/-1}.growth-task-dialog input,.growth-task-dialog select,.growth-task-dialog textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #a6b4be;border-radius:5px;background:white;color:#203446}.growth-task-dialog textarea{min-height:110px}.growth-task-dialog form>button{background:#263d54;color:white;min-height:42px}.growth-evidence{background:#eef2f5;padding:14px;border-left:3px solid #ad8d52;margin:16px 0}.growth-evidence h3{font-size:14px}.growth-evidence blockquote{margin:10px 0;line-height:1.8;white-space:pre-wrap;font-size:13px}.growth-evidence small,.growth-note{font-size:11px;color:#566574} .office-board [hidden]{display:none!important} .growth-pulse{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#eee5d2;padding:10px 14px;border-block:1px solid #bca97b;color:#21384d}.growth-pulse strong{font-size:13px;margin-right:auto}.growth-pulse button{background:#fffaf0;border:1px solid #c3b08a;box-shadow:none;border-radius:5px;font-size:11px;min-height:32px;padding:6px 9px;color:#243d54}.growth-pulse button:hover{background:#dac69c}.growth-summary{display:none}.office-board .growth-task strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .growth-evidence pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;background:white;padding:12px;font:12px/1.8 sans-serif}.growth-evidence summary{cursor:pointer;color:#285680;font-size:12px;padding:8px 0} .office-work-hub{padding:20px;background:#f6f0e3;border-top:1px solid #c3ae82}.office-work-hub>h2{font-size:18px;color:#273e52;margin:0 0 15px}.office-work-hub>.office-progress{margin-top:20px;padding:18px;border:1px solid #cbb98f;border-radius:8px;background:#fffaf0;max-height:none!important}.office-work-hub #office-progress-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:none!important;overflow:visible!important}.office-work-hub .office-progress-group{grid-column:1/-1}.office-work-hub .office-work-title{color:#203b50}.growth-chat{display:flex;flex-direction:column;gap:7px;padding:10px 0;border-bottom:1px solid #d6c6a4}.growth-chat label{font-size:12px;font-weight:600}.growth-chat textarea{box-sizing:border-box;width:100%;resize:vertical;min-height:92px;padding:10px;font:12px/1.6 sans-serif;color:#22384b;background:#fff;border:1px solid #b7ac97;border-radius:8px}.growth-chat button{background:#28495b;color:white;border:0;border-radius:6px;min-height:36px;font-size:12px}.growth-chat p{font-size:11px;margin:0;line-height:1.5}.growth-candidates{width:min(900px,92vw)}.growth-candidate-card{display:block;text-align:left;width:100%;padding:16px;margin:10px 0;background:#fffaf0;color:#243d52;border:1px solid #c9baa0;border-radius:8px}.growth-candidate-card small{display:block;font-size:11px;color:#626f78}.growth-candidate-card strong{display:block;font-size:15px;line-height:1.6;margin-top:8px}.growth-candidate-card p{font-size:12px;line-height:1.7;color:#4c5e6b}.growth-candidate-card span{font-size:11px;color:#2a6487}.growth-candidate-card:hover{border-color:#365c76;background:#edf3f5}.office-board-heading{flex-wrap:wrap}.office-board-heading h2{font-size:15px!important;white-space:nowrap}.office-board-heading #office-board-count{font-size:10px} @media(max-width:700px){.office-work-hub{padding:12px}.office-work-hub #office-progress-items{grid-template-columns:1fr}} /* A readable freestanding noticeboard in the foreground, outside the back wall. */ #my-office .office-scene[data-world="fantasy-guild"] .office-room-board{top:auto!important;left:auto!important;right:2%!important;bottom:3%!important;width:42%!important;height:45%!important;max-height:none!important;min-width:0!important;box-sizing:border-box;z-index:7!important;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:20px!important;overflow:auto!important;background:linear-gradient(145deg,#213b45,#132a34)!important;border:8px ridge #a68148!important;border-radius:7px!important;box-shadow:0 12px 18px #11202e55!important;text-align:left} #my-office .office-scene[data-world="fantasy-guild"] .office-room-board strong{color:#6b4f1d!important;font-size:clamp(13px,1.3vw,19px)!important;border-bottom:1px solid #9e8756;padding-bottom:10px} #my-office .office-scene[data-world="fantasy-guild"] .office-room-board span{color:#f1ead9!important;font-size:clamp(11px,1vw,14px)!important;white-space:normal!important;line-height:1.6;overflow-wrap:anywhere} #my-office .office-room-board span:last-child{margin-top:auto;color:#f4ce83!important} @media(max-width:700px){#my-office .office-scene[data-world="fantasy-guild"] .office-room-board{width:46%!important;height:42%!important;padding:10px!important;gap:7px;border-width:5px!important}} /* AI generation history: shares the production queue dialog and controls. */ #run-history-dialog{width:min(1080px,94vw);max-width:94vw;max-height:88dvh;overflow:auto;padding:28px;border:1px solid var(--line);border-radius:24px;background:#ffffff;color:var(--flow-ink)} #run-history-dialog::backdrop{background:#20304d66} #run-history-dialog>.editor-top{top:-28px;gap:12px} #run-history-dialog h2{margin:0;font-size:24px} #run-history-dialog>.editor-top button{flex-shrink:0} .run-history-summary{display:flex;flex-wrap:wrap;gap:12px} .run-history-count{display:flex;align-items:center;gap:20px;padding:14px 20px;border:1px solid var(--line);border-radius:12px;background:#f0f4f9} .run-history-count strong{font-size:24px;font-variant-numeric:tabular-nums} .run-history-count[data-state=saved]{background:#ceead6;color:#1f1f1f;border-color:#bdc1c6} .run-history-count[data-state=failed]{background:#fce8e6;color:#c5221f;border-color:#9aa0a6} .run-history-list{display:grid;gap:12px} .run-history-row{min-width:0;border:1px solid var(--line);border-left:4px solid #9aa0a6;border-radius:12px;padding:16px;background:#ffffff} .run-history-row[data-state=saved]{border-left-color:#0b57d0} .run-history-row[data-state=failed]{border-color:#bdc1c6;border-left:4px solid #c5221f;background:#fce8e6} .run-history-fields{display:grid;grid-template-columns:1.3fr 1.4fr .75fr .85fr 1.1fr;gap:14px;margin:0} .run-history-fields>div{min-width:0;overflow-wrap:anywhere} .run-history-fields dt{font-size:12px;color:var(--flow-muted);margin-bottom:8px} .run-history-fields dd{margin:0;line-height:1.6;font-variant-numeric:tabular-nums} .run-history-fields small{display:block;color:var(--flow-muted);font-size:12px} .run-history-state{display:inline-block;background:#e8f0fe;border-radius:6px;padding:3px 8px;font-weight:700} .run-history-row[data-state=saved] .run-history-state{background:#ceead6;color:#1f1f1f} .run-history-row[data-state=failed] .run-history-state{background:#c5221f;color:#ffffff} .run-history-row details{margin-top:12px;border-top:1px solid #dadce0;padding-top:8px} .run-history-row summary{cursor:pointer;color:#c5221f;font-weight:600;padding:6px 0;min-height:36px} .run-history-row pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:13px;line-height:1.8;margin:8px 0 0;padding:12px;background:#ffffff;border:1px solid #dadce0;border-radius:8px} #run-history-dialog .run-history-note{font-size:13px!important;overflow-wrap:anywhere;color:var(--flow-muted)} @media(max-width:700px){#run-history-dialog{padding:16px;border-radius:16px}#run-history-dialog>.editor-top{top:-16px}.run-history-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.run-history-fields>div:last-child{grid-column:1/-1}.run-history-count{gap:12px;padding:10px 14px}.run-history-row{padding:14px}} /* Stable guild nameplates: one authoritative rule set for the 3D overlay. */ #office-scene .office-speech-dock .office-speech, #office-scene .office-human-label{left:0;top:0;transition:none;will-change:transform} #office-scene .office-speech-dock .office-speech>button{backdrop-filter:none;font-family:system-ui,sans-serif!important;letter-spacing:0!important;min-height:50px!important} #office-scene .office-speech-dock .office-speech>button strong{white-space:normal;font-size:10px!important;line-height:1.3;overflow:visible;text-overflow:clip} #office-scene .office-speech-dock .office-speech>button small{font-size:12px!important;letter-spacing:0!important} #office-scene .office-speech-dock .office-speech p{display:none!important;margin:0 0 4px!important;padding:4px!important;font-size:10px!important;line-height:1.4!important} #office-scene .office-speech-dock .office-speech-status:not([hidden]){display:block!important;font-size:9px!important} #office-scene .office-speech[data-agent=marketing_design]>button{border-color:#ffe395!important;box-shadow:0 0 12px #f8d57566!important} /* A compact board keeps the entrance and the front-row hero visible. */ #my-office #office-scene .office-room-board{top:12px!important;bottom:auto!important;right:12px!important;width:170px!important;height:76px!important;padding:7px 9px!important;gap:3px;border-width:3px!important;overflow:hidden!important} #my-office #office-scene .office-room-board strong{font-size:12px!important;padding:0;border:0} #my-office #office-scene .office-room-board span{font-size:10px!important} @media(max-width:700px){ #office-scene .office-speech-dock .office-speech p{display:none!important} #office-scene .office-speech-dock .office-speech>button{min-height:50px!important;padding:3px!important} #office-scene .office-room-brand{max-width:145px} #my-office #office-scene .office-room-board{width:145px!important;height:70px!important} #flow-work-dialog .work-launcher{grid-template-columns:1fr} } /* Optional thoughts never resize or displace the persistent nameplate. */ #office-scene .office-speech-dock .office-speech:hover p:not([hidden]), #office-scene .office-speech-dock .office-speech:focus-within p:not([hidden]){display:block!important;position:absolute;bottom:100%;left:0;width:100%;height:auto!important;max-height:none!important;box-sizing:border-box} @media(max-width:700px){ #office-scene .office-speech-dock .office-speech>button{min-height:43px!important;gap:0!important} #office-scene .office-speech-dock .office-speech>button strong{font-size:9px!important;line-height:1.2} #office-scene .office-speech-dock .office-speech-status:not([hidden]){font-size:8px!important;padding:1px 3px;margin:1px auto 0;line-height:1.2} } #my-office #office-scene .office-room-board span:not(:nth-child(2)):not(:last-child){display:none} @media(max-width:360px){#office-scene .office-room-brand{max-width:125px}#my-office #office-scene .office-room-board{width:130px!important}} /* Detailed scene board; the left-hand task panel keeps its existing layout. */ #my-office #office-scene.has-growth-room-panel .office-room-board{display:none!important} #office-scene .growth-room-panel{position:absolute;top:12px;right:12px;z-index:24;width:min(390px,calc(100% - 24px));box-sizing:border-box;padding:15px 16px;background:#fff8e8;color:#24394d;border:3px double #a4874a;border-radius:10px;box-shadow:0 5px 20px #16273738;text-align:left;font-family:system-ui,sans-serif} .growth-room-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #d8c7a2;padding-bottom:10px} #office-scene .growth-room-heading h2{margin:0;font:700 17px/1.5 system-ui,sans-serif;color:#24394d} .growth-room-heading>span{font-size:11px;color:#53616e} .growth-room-list{margin:0;padding:0 0 0 18px;max-height:285px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;list-style:disc} .growth-room-item{padding:12px 3px 12px 0;border-bottom:1px solid #deceb0;overflow-wrap:anywhere} .growth-room-item::marker{color:#9d7531} #office-scene .growth-room-title{display:block;width:100%;height:auto;min-height:0;margin:0;padding:0;background:none;border:0;box-shadow:none;color:#21374c;text-align:left;font:700 15px/1.65 system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;text-overflow:clip} .growth-room-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:7px;font-size:12px;line-height:1.6} .growth-room-state{background:#e7edf3;padding:2px 6px;border-radius:4px;font-weight:650} .growth-room-item[data-state=done] .growth-room-state,.growth-room-item[data-state=reviewed] .growth-room-state{color:#225d43;background:#dceddf} .growth-room-item[data-state=dismissed] .growth-room-state{background:#e9e6df;color:#5b5b58} .growth-room-metric{display:grid;gap:4px;margin:9px 0 0;padding:8px;background:#ede6d4;border-radius:5px;font-size:12px;line-height:1.7;white-space:pre-wrap} .growth-room-owner{font-size:12px;line-height:1.6;margin:7px 0 0} #office-scene .growth-room-detail{background:none;border:0;box-shadow:none;color:#2c617f;font-size:11px;padding:6px 0 0;min-height:28px;text-align:left} .growth-room-empty{font-size:13px;line-height:1.8;padding:14px 0} .growth-room-status{font-size:12px;line-height:1.6;overflow-wrap:anywhere;margin:6px 0 0} .growth-room-status:empty{display:none} .growth-room-list:focus-visible,#office-scene .growth-room-panel button:focus-visible{outline:3px solid #367dab;outline-offset:2px} @media(max-width:700px){ #office-scene .growth-room-panel{top:74px;right:10px;width:calc(100% - 20px);padding:10px 12px} .growth-room-list{max-height:190px} #office-scene .growth-room-heading h2{font-size:16px} } /* Guild growth overview: readable levels and missing knowledge, always visible. */ #my-office .flow-team-training{background:#142638;border:3px double #c6a565!important;border-radius:8px!important;margin:24px 0!important;color:#fff1ce} #my-office .flow-team-training>h2{font-size:24px;margin:0;padding:22px 22px 8px;color:#fff1ce} #my-office .flow-team-training .office-roster-heading{background:transparent;color:#e0d5bb;padding:8px 22px 18px;flex-wrap:wrap} #my-office #office-growth-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px;background:transparent;border-top:1px solid #a48854} .guild-team-level{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:8px 0 18px} .guild-team-level>span{font-size:18px;font-weight:700}.guild-team-level>strong{font-size:36px;color:#ffe0a0;font-variant-numeric:tabular-nums;line-height:1.2}.guild-team-level>p{width:100%;margin:0;color:#d3deea;font-size:15px} #my-office .office-growth-card{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:20px;text-align:left;border:3px double #c5a568;border-radius:6px;background:#20374e;color:#f2eee3;box-shadow:inset 0 0 0 3px #142638;line-height:1.5;overflow-wrap:anywhere;font-size:15px;min-width:0} #my-office .office-growth-card:hover:not(:disabled){background:#2b4762;border-color:#ffe1a0} #my-office .office-growth-card:disabled{opacity:.7;cursor:default} #my-office .guild-card-level{font-size:28px;font-weight:800;color:#ffe0a0;font-variant-numeric:tabular-nums;line-height:1.2} #my-office .growth-card-info{gap:3px;flex:0;min-width:0}#my-office .growth-card-info>strong{font-size:23px;color:#fff5db}#my-office .growth-card-info>span{font-size:16px;color:#f2d9a3}#my-office .growth-card-info>small{font-size:14px;color:#c3d0de} .guild-level-progress{display:block;width:100%;height:12px;border:1px solid #ad966b;border-radius:3px;overflow:hidden;appearance:none;background:#0d1b29;accent-color:#e3ba64} .guild-level-progress::-webkit-progress-bar{background:#0d1b29}.guild-level-progress::-webkit-progress-value{background:linear-gradient(90deg,#bc8b3f,#ffe2a0)}.guild-level-progress::-moz-progress-bar{background:#e3ba64} #my-office .guild-card-missing{border-top:1px solid #65717a;padding-top:12px;color:#ffe3ac;flex:1} #my-office .office-growth-card>span:last-child{display:block;font-size:15px;color:#ffdfa0;font-weight:700} #my-office .guild-level-note{grid-column:1/-1;color:#c3d0de;font-size:14px;margin:0;line-height:1.7} #office-growth-dialog{border:4px double #b99653;border-radius:8px;box-sizing:border-box;max-height:90vh;overflow-y:auto} #office-growth-dialog .growth-hero{border:3px double #c5a568;border-radius:6px;padding:18px} #office-growth-dialog .growth-hero-level small{font-size:14px} #office-growth-dialog .growth-mission{border-radius:5px;align-items:flex-start} #office-growth-dialog .growth-mission:not(.completed){border:1px solid #b49350;background:#fff9e9} #office-growth-dialog .growth-mission strong{font-size:16px}#office-growth-dialog .growth-mission p{font-size:14px}#office-growth-dialog .growth-mission button{font-size:14px} #office-growth-dialog .guild-criteria-group>h3{font-size:20px;color:#573e17}#office-growth-dialog .guild-criteria-group>p{font-size:15px;line-height:1.7} @media(max-width:1000px){#my-office #office-growth-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){#my-office #office-growth-strip{grid-template-columns:minmax(0,1fr);padding:12px;gap:12px}#my-office .flow-team-training>h2{padding:18px 14px 8px;font-size:22px}#my-office .flow-team-training .office-roster-heading{padding:8px 14px 14px}.guild-team-level{gap:10px;padding:8px 4px 16px}.guild-team-level>strong{font-size:32px}#my-office .office-growth-card{padding:18px}#office-growth-dialog{padding:16px}#office-growth-dialog .growth-mission{flex-direction:column;gap:8px}#office-growth-dialog .growth-mission button{align-self:flex-start}#office-growth-dialog .growth-hero-level strong{font-size:48px}} .guild-level-progress>i{display:block;height:100%;background:linear-gradient(90deg,#bc8b3f,#ffe2a0)} /* Distinguish shared craft from company input in the existing growth dialog. */ .skill-inventory-sections{display:grid;gap:18px;margin:18px 0} .skill-inventory-section{min-width:0;padding:18px;border:1px solid;border-radius:14px;overflow-wrap:anywhere} .skill-inventory-section>span{font-size:11px;font-weight:800;letter-spacing:.05em} .skill-inventory-section h3{font-size:18px;margin:7px 0 10px;line-height:1.5} .skill-inventory-section h4{font-size:14px;line-height:1.6;margin:10px 0} .skill-inventory-section p{font-size:12px;line-height:1.8;margin:8px 0} .skill-inventory-craft{background:#edf3fa;border-color:#bccfe5;color:#294a70} .skill-inventory-customer{background:#f9f3e5;border-color:#d7bd7d;color:#634915} .skill-inventory-craft label{display:grid;gap:6px;font-size:12px;font-weight:700;margin:14px 0} .skill-inventory-craft select{box-sizing:border-box;max-width:100%;width:100%;padding:10px;border:1px solid #afc5de;border-radius:8px;background:white;color:#294a70;font:inherit} .skill-craft-item{padding:14px;background:#ffffffb8;border:1px solid #d4e0ed;border-radius:10px;margin-top:10px} .skill-inventory-badge{display:inline-block;padding:4px 8px;border-radius:6px;background:#dce9f7;color:#254a72;font-size:11px;font-weight:700} .skill-inventory-customer .growth-mission p{color:#4c5d70} @media(max-width:520px){#office-growth-dialog{box-sizing:border-box;padding:16px}.skill-inventory-section{padding:12px}.skill-inventory-section .growth-mission{align-items:stretch;flex-direction:column;gap:8px;padding:12px}.skill-inventory-section .growth-mission button{align-self:flex-start}.skill-inventory-section h3{font-size:16px}} /* Public rival facts: neutral differences, explicit missing measurements. */ .rival-comparison-dialog{box-sizing:border-box;width:min(800px,calc(100vw - 32px));max-height:90vh;overflow:auto} .rival-comparison-dialog p,.rival-comparison-dialog small{line-height:1.8;overflow-wrap:anywhere} .rival-diff-list{display:grid;gap:12px;margin:18px 0} .rival-diff-row{padding:16px;background:#fffdf7;border:1px solid #c4b28e;border-radius:10px;min-width:0} .rival-diff-row[data-measured=false]{background:#f0f2f4;border-color:#b6c0c8} .rival-diff-row h3{font-size:15px;margin:0 0 10px} .rival-diff-row dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:0} .rival-diff-row dt{font-size:11px;color:#5b6874}.rival-diff-row dd{font-size:14px;margin:4px 0;overflow-wrap:anywhere;font-weight:700} .rival-diff-row p{font-size:12px;margin:10px 0 0} .rival-profile-facts{padding:16px;margin:16px 0;background:#edf2f5;border:1px solid #c8d3da;border-radius:10px;min-width:0} .rival-profile-facts h3{font-size:16px}.rival-profile-facts h4{font-size:13px;margin:16px 0 6px}.rival-profile-facts a{font-size:12px;overflow-wrap:anywhere}.rival-profile-facts p{font-size:12px}.rival-profile-facts small{font-size:11px} .rival-section-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}.rival-section-list li{padding:5px 8px;background:#fff;border:1px solid #c4cfd7;border-radius:5px;font-size:12px;overflow-wrap:anywhere;max-width:100%} @media(max-width:700px){.office-rival-frontier .rival-encounters{flex-direction:column}.office-rival-frontier .rival-monster{display:grid;grid-template-columns:60px minmax(0,1fr);text-align:left;column-gap:10px!important;padding:10px!important}.office-rival-frontier .rival-avatar{grid-row:1/4}.office-rival-frontier .rival-diff-summary{font-size:12px}.office-rival-frontier .rival-command{white-space:normal;font-size:11px}.office-rival-frontier header>button{font-size:12px}.rival-comparison-dialog{padding:16px}.rival-diff-row{padding:12px}} @media(max-width:380px){.rival-diff-row dl{grid-template-columns:minmax(0,1fr)}.rival-comparison-dialog>header>h2{font-size:20px!important}} /* Keep the compact summary readable despite earlier frontier small-text rules. */ @media(max-width:700px){.office-rival-frontier .rival-monster .rival-diff-summary{font-size:12px}} /* The twelve-member guild needs its floor visible on compact screens, including expanded view. */ #office-scene.has-growth-room-panel .office-room-board{display:none!important} #office-scene .growth-room-heading{cursor:pointer;list-style:none} #office-scene .growth-room-heading::-webkit-details-marker{display:none} #office-scene .growth-room-heading::after{content:'開く ▾';font-size:11px;color:#53616e} #office-scene .growth-room-panel[open] .growth-room-heading::after{content:'閉じる ▴'} #office-scene .growth-room-panel:not([open]) .growth-room-heading{padding-bottom:0;border-bottom:0} @media(max-width:700px){ #office-scene .growth-room-panel:not([open]){top:12px;right:10px;width:150px;padding:7px 9px} #office-scene .growth-room-panel:not([open]) .growth-room-heading{gap:2px 5px} #office-scene .growth-room-panel:not([open]) .growth-room-heading h2{font-size:12px} #office-scene .growth-room-panel:not([open]) .growth-room-heading>span{font-size:10px} } .interview-dialog{width:min(1040px,96vw);max-width:1040px;max-height:94dvh;padding:0;border:1px solid #bdc1c6;border-radius:24px;background:#fef7e0;color:#1f1f1f}.interview-dialog::backdrop{background:#142234b8;backdrop-filter:blur(5px)}.interview-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 30px;border-bottom:1px solid #bdc1c6}.interview-header h2{font-size:22px;margin:0}.interview-layout{display:grid;grid-template-columns:32% 1fr}.interview-character{padding:36px 20px;text-align:center;background:radial-gradient(ellipse at center,#fdd663,#feefc3 70%);border-radius:0 0 0 24px}.interview-character .guild-portrait{display:block!important;width:100%!important;height:320px!important;margin:auto;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}.interview-character h3{font-size:28px;margin:20px 0 8px}.interview-main{min-width:0;padding:24px 30px}.interview-progress{position:sticky;top:0;background:#fef7e0;z-index:1;padding:8px 0}.interview-progress p{font-weight:700;margin:0 0 8px}.interview-progress progress{width:100%;height:10px;accent-color:#0b57d0}.interview-bubble{position:relative;padding:22px;background:white;border:1px solid #bdc1c6;border-radius:4px 22px 22px 22px;margin:16px 0}.interview-bubble h3{font-size:20px;line-height:1.7;margin:0 0 12px;white-space:pre-wrap}.interview-bubble p{line-height:1.8;white-space:pre-wrap;color:#3c4043}.interview-main textarea{display:block;width:100%;box-sizing:border-box;padding:14px;border:1px solid #9aa0a6;border-radius:12px;font:inherit;margin:8px 0;resize:vertical}.interview-actions,.interview-formats{display:flex;flex-wrap:wrap;gap:10px}.interview-actions button:first-child,.interview-ready button{background:#0b57d0;color:white;border:0;padding:13px 22px;border-radius:10px}.interview-ready{border-top:1px solid #bdc1c6;margin-top:24px;padding-top:12px}.interview-main [role=alert]{color:#c5221f}.interview-main details{margin:14px 0}.interview-main details p{white-space:pre-wrap;overflow-wrap:anywhere}.interview-main button{min-height:44px}.interview-formats [aria-pressed=true]{background:#0b57d0;color:white}.interview-home{margin:16px 0 24px;padding:24px;background:#feefc3;border:1px solid #bdc1c6;border-radius:18px}.interview-home h2{margin:0 0 8px}.interview-home-actions{display:flex;flex-wrap:wrap;gap:12px}.interview-home-actions button{padding:14px 22px;background:#0b57d0;color:#ffffff;border:0;border-radius:10px;font-weight:700}.interview-secondary{margin:18px 0}.interview-secondary>summary{cursor:pointer;padding:16px;border-bottom:1px solid #bdc1c6;font-weight:700}.client-gauge{display:grid;gap:14px;margin:0 0 22px;padding:20px;border-radius:18px;border:1px solid #dadce0;background:#f0f4f9}.client-gauge[data-band=good]{border-color:#bdc1c6;background:#e6f4ea}.client-gauge[data-band=partial]{border-color:#bdc1c6;background:#fef7e0}.client-gauge[data-band=thin]{border-color:#bdc1c6;background:#fce8e6}.client-gauge-head{display:flex;align-items:center;gap:16px}.client-gauge-score{font-size:52px;line-height:1;font-weight:800;color:#1f1f1f;min-width:3.2em}.client-gauge[data-band=good] .client-gauge-score{color:#146c2e}.client-gauge[data-band=thin] .client-gauge-score{color:#c5221f}.client-gauge-bar{flex:1;height:12px;border-radius:999px;background:#d3e3fd;overflow:hidden}.client-gauge-fill{height:100%;border-radius:999px;background:#0b57d0;transition:width .4s}.client-gauge[data-band=good] .client-gauge-fill{background:#146c2e}.client-gauge[data-band=thin] .client-gauge-fill{background:#d93025}.client-gauge-headline{margin:0;line-height:1.75;font-weight:700;color:#1f1f1f}.client-step{padding:14px 16px;border-radius:14px;background:#ffffff;border:1px solid #e8eaed}.client-step h4{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;font-size:15px;color:#1f1f1f}.client-step-worth{font-size:18px;font-weight:800;color:#0b57d0}.client-step-items{margin:0 0 10px;padding-left:18px}.client-step-items li{margin:6px 0;line-height:1.7}.client-step-items strong{display:inline-block;margin-right:8px}.client-step-why{color:#5f6368}.client-step-note{display:block;margin:4px 0 0;font-size:13px;color:#5f6368;line-height:1.7}.client-gauge-conn{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #f1f3f4}.conn-ok{color:#146c2e;font-weight:700}.conn-missing{color:#c5221f;font-weight:700}.client-connect-now{padding:10px 18px;border:0;border-radius:10px;background:#0b57d0;color:#ffffff;font-weight:700}.client-behaviour{margin:0 0 22px;padding:18px 20px;border-radius:16px;border:1px solid #e8eaed;background:#ffffff}.client-behaviour[data-band=shallow]{border-color:#bdc1c6;background:#fce8e6}.client-behaviour[data-band=deep]{border-color:#bdc1c6;background:#e6f4ea}.client-behaviour h4{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px;font-size:15px;color:#1f1f1f}.client-behaviour-period{font-size:12px;color:#80868b;font-weight:400}.client-behaviour-headline{margin:0 0 12px;line-height:1.75;font-weight:700;color:#1f1f1f}.client-behaviour[data-band=shallow] .client-behaviour-headline{color:#c5221f}.client-behaviour-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.client-behaviour-facts dt{font-size:13px;color:#5f6368;font-weight:700}.client-behaviour-facts dd{margin:0;font-size:13px;line-height:1.7;color:#3c4043}#dossier-open{padding:10px 16px;border:1px solid #bdc1c6;border-radius:10px;background:#ffffff;color:#1f1f1f;font-weight:700}#dossier-open:hover{background:#f0f4f9}.site-check{margin:0 0 22px;padding:18px 20px;border:1px solid #e8eaed;border-radius:16px;background:#ffffff}.site-check h4{margin:0 0 6px;font-size:15px;color:#1f1f1f}.site-check-note{margin:0 0 10px;font-size:12px;line-height:1.7;color:#80868b;display:block}.site-check button{padding:10px 18px;border:0;border-radius:10px;background:#0b57d0;color:#ffffff;font-weight:700}.site-check-said{margin:12px 0 0;line-height:1.7;color:#3c4043}.site-check-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 0}.site-check-facts dt{font-size:13px;color:#5f6368;font-weight:700}.site-check-facts dd{margin:0;font-size:13px;color:#3c4043}.journey-box{margin:0 0 22px;padding:18px 20px;border:1px solid #e2e9f1;border-radius:16px;background:#fff}.journey-box h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:15px;color:#20344f}.journey-count{font-size:18px;font-weight:800;color:#2f7d83}.journey-note{margin:0 0 14px;line-height:1.7;color:#5a6a7d}.journey-track{list-style:none;margin:0;padding:0;display:grid;gap:8px}.journey-stage{position:relative;padding:12px 14px 12px 18px;border-radius:12px;border:1px solid #edf1f6;background:#fafcfe;display:grid;gap:3px}.journey-stage::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:999px;background:#d4dde8}.journey-stage[data-state=filled]{border-color:#b7dcc0;background:#f4fbf6}.journey-stage[data-state=filled]::before{background:#2f9155}.journey-stage[data-state=empty]::before{background:#e0b4ad}.journey-stage strong{color:#20344f}.journey-stage[data-state=empty] strong{color:#a5382c}.journey-moment{font-size:12px;color:#6b7a8c}.journey-why{font-size:12px;line-height:1.6;color:#8a95a3}.canvas-box{margin:0 0 22px;padding:18px 20px;border:1px solid #e2e9f1;border-radius:16px;background:#fff}.canvas-box h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:15px;color:#20344f}.canvas-count{font-size:18px;font-weight:800;color:#2f7d83}.canvas-note{margin:0 0 14px;line-height:1.7;color:#5a6a7d}.canvas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.canvas-cell{padding:12px 14px;border-radius:12px;border:1px dashed #d4dde8;background:#fafcfe;display:grid;gap:4px;align-content:start}.canvas-cell[data-filled=true]{border-style:solid;border-color:#b7dcc0;background:#f4fbf6}.canvas-cell strong{color:#20344f;font-size:14px}.canvas-cell[data-filled=false] strong{color:#8a95a3}.canvas-cell[data-filled=true] strong::before{content:'✓ ';color:#1f7a3f}.canvas-purpose{font-size:12px;line-height:1.6;color:#6b7a8c}.canvas-from{font-size:11px;color:#3d6b51}.canvas-ask{font-size:11px;color:#8a6a1c}.design-map{margin:0 0 22px;padding:18px 20px;border:1px solid #e8eaed;border-radius:16px;background:#ffffff}.design-map h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:15px;color:#1f1f1f}.design-map-count{font-size:18px;font-weight:800;color:#0b57d0}.design-map-note{margin:0 0 14px;line-height:1.7;color:#5f6368}.design-track{list-style:none;margin:0;padding:0;display:grid;gap:8px}.design-stage{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid #f1f3f4;background:#ffffff}.design-stage[data-state=built]{border-color:#bdc1c6;background:#e6f4ea}.design-stage[data-state=requested]{border-color:#bdc1c6;background:#fef7e0}.design-stage strong{min-width:11em;color:#1f1f1f}.design-stage-why{flex:1;min-width:12em;font-size:13px;color:#5f6368}.design-stage-badge{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#e8f0fe;color:#5f6368}.design-stage[data-state=built] .design-stage-badge{background:#ceead6;color:#1f1f1f}.design-stage[data-state=requested] .design-stage-badge{background:#fdd663;color:#1f1f1f}.design-stage-count{font-size:12px;color:#80868b}.client-sheet{margin:0 0 22px;padding:14px 18px;border:1px solid #e8eaed;border-radius:14px;background:#ffffff}.client-sheet>summary{cursor:pointer;font-weight:700;color:#1f1f1f}.client-sheet h5{margin:16px 0 6px;font-size:14px;color:#3c4043}.client-sheet-list{margin:0;padding-left:16px;list-style:none}.client-sheet-list li{margin:8px 0;line-height:1.7;padding-left:4px}.client-sheet-list li[data-filled=false] strong{color:#80868b}.client-sheet-link{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#d3e3fd;color:#3c4043;font-size:12px;font-weight:700}.client-sheet-why{display:block;font-size:13px;color:#5f6368}.client-sheet-hint{display:block;font-size:12px;color:#80868b}.interview-client{margin:16px 0 0;padding:14px 16px;border-radius:12px;border:1px solid #e8eaed;background:#f0f4f9}.interview-client label{display:block;margin-bottom:6px;font-weight:700;font-size:14px;color:#1f1f1f}.interview-client select{width:100%;padding:10px 12px;border:1px solid #9aa0a6;border-radius:10px;font:inherit;background:#ffffff}.interview-client-note{margin:8px 0 0;font-size:13px;line-height:1.7;color:#5f6368}.interview-made-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:12px 0}.interview-made-shot{margin:0}.interview-made-shot img{width:100%;border-radius:10px;border:1px solid #e8eaed;background:#ffffff;display:block}.interview-made-shot figcaption{margin-top:4px;font-size:12px;color:#5f6368;display:flex;justify-content:space-between;align-items:center;gap:8px}.interview-made-save{color:#1f1f1f;font-weight:700;text-decoration:none}.interview-made-save:hover{text-decoration:underline}.order-when{display:block;margin:4px 0 0;font-size:12px;color:#5f6368;font-variant-numeric:tabular-nums}.interview-paste{margin:12px 0;padding:14px 16px;border:1px solid #e8eaed;border-radius:12px;background:#f0f4f9}.interview-paste>summary{cursor:pointer;font-weight:700;color:#1f1f1f}.interview-paste-hint{margin:10px 0;font-size:13px;line-height:1.7;color:#5f6368}.interview-paste textarea{width:100%;box-sizing:border-box;padding:12px;border:1px solid #9aa0a6;border-radius:10px;font:inherit;resize:vertical}.interview-paste button{margin-top:8px;padding:10px 18px;border:0;border-radius:10px;background:#0b57d0;color:#ffffff;font-weight:700}.interview-paste-said{margin:10px 0 0;font-size:13px;line-height:1.7;color:#3c4043}.interview-paste-missing{margin:6px 0 0;padding-left:18px;color:#b06000}.making{margin:0 0 12px}.making-track{height:8px;border-radius:999px;background:#d3e3fd;overflow:hidden}.making-fill{height:100%;width:0;border-radius:999px;background:#0b57d0;transition:width .6s ease}.making-what{margin:8px 0 10px;font-weight:700;color:#1f1f1f}.making-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}.making-steps li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:8px 12px;border-radius:10px;background:#f0f4f9;color:#1f1f1f}.making-steps li::before{content:'待機';font-size:11px;padding:2px 8px;border-radius:999px;background:#d3e3fd;color:#1f1f1f}.making-steps li[data-state=doing]{background:#e8f0fe;color:#1f1f1f}.making-steps li[data-state=doing]::before{content:'作成中';background:#0b57d0;color:#ffffff}.making-steps li[data-state=done]{background:#e6f4ea;color:#3c4043}.making-steps li[data-state=done]::before{content:'完了';background:#ceead6;color:#1f1f1f}.making-note{font-size:12px}.interview-made{margin:16px 0 0;padding:16px 18px;border-radius:14px;border:1px solid #bdc1c6;background:#e6f4ea}.interview-made h4{margin:0 0 6px;font-size:15px;color:#1f1f1f}.interview-made>p{margin:0 0 10px;line-height:1.7;color:#3c4043}.interview-made-list{margin:0 0 10px;padding-left:18px}.interview-made-list li{margin:8px 0;line-height:1.7}.interview-made-list strong{display:block;color:#1f1f1f}.interview-made-where{display:inline-block;margin-right:10px;padding:2px 8px;border-radius:999px;background:#e8eaed;color:#3c4043;font-size:12px}.interview-made-cta{font-size:13px;color:#5f6368}.interview-made-warn{margin:8px 0 0;font-size:13px;line-height:1.7;color:#b06000}.interview-ceiling{margin:0 0 16px;padding:16px 18px;background:#feefc3;border:1px solid #bdc1c6;border-left:4px solid #f9ab00;border-radius:12px}.interview-ceiling h4{margin:0 0 6px;font-size:15px;color:#b06000}.interview-ceiling p{margin:0 0 10px;line-height:1.7;color:#3c4043}.interview-ceiling ul{margin:0;padding-left:18px}.interview-ceiling li{line-height:1.7;margin:4px 0;color:#3c4043}.interview-ceiling li b{color:#1f1f1f}.interview-dialog [hidden]{display:none!important}@media(max-width:640px){.interview-header{padding:16px;align-items:flex-start}.interview-header h2{font-size:18px}.interview-layout{grid-template-columns:1fr}.interview-character{padding:12px;display:flex;align-items:center;gap:14px;border-radius:0}.interview-character .guild-portrait{width:100px!important;height:105px!important;margin:0}.interview-character h3{font-size:22px;margin:0}.interview-character p{font-size:12px}.interview-main{padding:16px}.interview-bubble{padding:16px}.interview-home-actions button{width:100%}} /* Character intake: a single, readable sheet with server-defined fields. */ /* 横幅を広げて1枚で見せる（820→1560px・2026-09-27 卓馬指示）。 縦長で延々スクロールするより、横に並べて一望できるほうが速い。 余白も詰めて、1画面に入る量を増やす */ /* 入力画面の設計の土台（2026-09-28 卓馬指示：高級感・機能性）。 スコア枠まわりに色が37種・角丸が5種あり、#53687a と #5c6a74 の ように見分けのつかない灰色が混ざっていた。**段を決めて、 そこからしか選ばない。** 揃っていないことが安さに見える。 文字と線は3段だけ。影は1種。角丸は3種 */ .intake-dialog{ --ink:#0b57d0; /* 見出し・本文 */ --ink-2:#5f6368; /* 補足 */ --ink-3:#80868b; /* 例文・単位 */ --line:#d3e3fd; /* 枠線 */ --line-2:#bdc1c6; /* 強い枠線（入力欄） */ --sheet:#ffffff; /* 面 */ --sheet-2:#f0f4f9; /* 一段沈んだ面 */ --accent:#0b57d0; /* 主たる色 */ --accent-soft:#e8f0fe; --good:#146c2e; /* 埋まった */ --good-soft:#e6f4ea; --warn:#b06000; /* 足りない */ --warn-soft:#fef7e0; --r-s:8px; --r-m:12px; --r-l:16px; --shadow:0 1px 2px #16283d0a,0 4px 16px #16283d0f; } .intake-dialog{width:min(1560px,calc(100vw - 24px));max-height:92dvh;box-sizing:border-box;padding:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--sheet-2);color:var(--ink);overflow:auto;box-shadow:0 32px 90px #16283d2e,0 2px 8px #16283d14} .intake-dialog::backdrop{background:#14233b99} .intake-dialog *{box-sizing:border-box} .intake-header{ display:flex;align-items:center;gap:13px;padding:14px 20px; background:var(--sheet);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:3} .intake-header h2{ font-size:19px;margin:0 0 3px;font-weight:700;color:var(--ink); letter-spacing:.01em} /* 見出しの下の説明。何をすればよいかを小さく添える（2026-09-27）。 見出しと同じ濃さだと、2つとも見出しに見えて読み飛ばされる */ .intake-header p{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2)}.intake-header>div:nth-child(2){flex:1;min-width:0} /* .intake-portrait は廃止（2026-09-28）。キャラはスコア枠の中に大きく出す */.intake-portrait svg,.intake-portrait img{width:100%;height:100%;object-fit:contain} .intake-dialog button{min-height:44px;cursor:pointer}.intake-dialog button:disabled{cursor:default;opacity:.55} .intake-formats{display:flex;gap:8px;padding:10px 20px}.intake-formats[hidden]{display:none}.intake-formats [aria-pressed=true]{background:#0b57d0;color:white} .intake-fields{padding:6px 16px 12px}.intake-group h3{font-size:16px;margin:24px 0 18px}.intake-field{padding:13px;margin-bottom:10px;background:#ffffff;border:1px solid #dadce0;border-radius:10px} .intake-field label{display:flex;align-items:center;gap:10px;font-weight:700;line-height:1.6}.intake-required,.intake-optional{flex:none;font-size:11px;border-radius:4px;padding:2px 7px}.intake-required{background:#e8f0fe;color:#0b57d0}.intake-optional{background:#e8f0fe;color:#5f6368} .intake-why{font-size:13px;line-height:1.7;color:#5f6368;margin:6px 0 12px}.intake-field textarea{display:block;width:100%;resize:vertical;padding:8px;border:1px solid #9aa0a6;border-radius:8px;font:inherit;font-size:14px;line-height:1.55;background:#ffffff;color:#1f1f1f}.intake-field textarea:focus-visible{outline:3px solid #bdc1c6;border-color:#0b57d0} .intake-field details{margin-top:10px;font-size:13px;color:#5f6368}.intake-field details p{white-space:pre-wrap;overflow-wrap:anywhere}.intake-field summary{cursor:pointer} /* 下の帯（2026-09-28）。5行が縦に積まれて場所を取っていた。 件数・棒・注意書きを1行に流し、ボタンを右に寄せる */ .intake-footer{ padding:12px 18px 14px;background:var(--sheet); border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px; position:sticky;bottom:0;z-index:3;box-shadow:0 -1px 12px #16283d0d} .intake-footer p{line-height:1.6;margin:0;font-size:12px;color:#5f6368} .intake-footer>p:first-child{font-weight:700;color:#1f1f1f;font-size:12.5px} .intake-footer progress{ flex:1 1 180px;display:block;min-width:140px;height:7px;accent-color:#0b57d0}.intake-footer [role=alert]{color:#c5221f}.intake-footer [role=status]{color:#3c4043}.intake-footer>button:last-child{ display:block;width:100%;margin-top:8px;background:var(--accent);color:#ffffff; border:0;border-radius:var(--r-s);padding:12px;font-weight:700;font-size:15px; letter-spacing:.02em;transition:filter .15s ease} .intake-footer>button:last-child:hover:not(:disabled){filter:brightness(1.08)} /* 注意書きは目立たせない。毎回読むものではない */ .intake-footer>p:nth-of-type(n+3){font-size:11px;color:#80868b} @media(max-width:600px){.intake-header{padding:16px;gap:10px;flex-wrap:wrap}.intake-header h2{font-size:20px}.intake-portrait{width:58px;height:72px}.intake-header>button{margin-left:auto}.intake-fields{padding:0 14px 16px}.intake-field{padding:14px}.intake-footer{padding:18px}.intake-formats{padding:14px;flex-wrap:wrap}} .intake-portrait .guild-portrait{display:block;width:100%;height:100%;aspect-ratio:auto}.intake-portrait canvas{width:100%;height:100%;object-fit:cover}.intake-portrait .guild-role-crest{display:none} /* Funnel: design → appeal axes → landing page → ad creative, one stage at a time. */ .funnel-dialog{width:min(880px,calc(100vw - 24px));max-height:92dvh;box-sizing:border-box;padding:0;border:1px solid #dadce0;border-radius:20px;background:#f0f4f9;color:#1f1f1f;overflow:auto;box-shadow:0 24px 90px #10274840} .funnel-dialog::backdrop{background:#14233b99} .funnel-dialog *{box-sizing:border-box} .funnel-dialog button{min-height:44px;cursor:pointer}.funnel-dialog button:disabled{cursor:default;opacity:.55} .funnel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;background:#ffffff;border-bottom:1px solid #dadce0} .funnel-header h2{font-size:22px;margin:0} .funnel-steps{list-style:none;display:grid;gap:12px;margin:0;padding:20px 24px} .funnel-step{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 18px;background:#ffffff;border:1px solid #dadce0;border-radius:12px} .funnel-step-name{font-weight:700;min-width:9em} .funnel-step-note{font-size:13px;color:#5f6368} .funnel-step-wait{font-size:13px;color:#80868b} .funnel-done{border-color:#bdc1c6;background:#e6f4ea} .funnel-step button{padding:10px 16px;border:1px solid #9aa0a6;border-radius:8px;background:#ffffff;font:inherit} .funnel-step button:first-of-type{background:#0b57d0;color:#ffffff;border-color:#0b57d0} .funnel-body{padding:0 24px 24px} .funnel-body h3{font-size:17px;margin:8px 0 16px} .funnel-axis,.funnel-block,.funnel-variant{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:14px 16px;margin-bottom:10px;background:#ffffff;border:1px solid #dadce0;border-radius:10px} .funnel-block,.funnel-variant{display:block} .funnel-axis-id{flex:none;font-size:12px;font-weight:700;padding:3px 8px;border-radius:4px;background:#e8f0fe;color:#0b57d0} .funnel-axis-name{font-weight:700} .funnel-axis-layer,.funnel-surface{font-size:12px;padding:3px 8px;border-radius:4px;background:#e8f0fe;color:#5f6368} .funnel-block h4,.funnel-variant h4{font-size:16px;margin:8px 0 6px;line-height:1.6} .funnel-block p,.funnel-variant p{margin:0 0 6px;line-height:1.8;color:#3c4043} .funnel-cta{font-weight:700;color:#0b57d0} .funnel-hypothesis{font-size:13px;color:#5f6368} .funnel-goal{padding:12px 16px;margin:0 0 14px;background:#e8f0fe;border-radius:8px;font-weight:700} .funnel-missing{padding:14px 16px;margin-top:8px;background:#fef7e0;border:1px solid #bdc1c6;border-radius:10px} .funnel-missing p{margin:0 0 6px;font-size:14px;line-height:1.7} .funnel-footer{padding:16px 24px 24px;border-top:1px solid #dadce0} .funnel-footer p{margin:0 0 8px;line-height:1.8} .funnel-error{color:#c5221f} .funnel-dialog [hidden]{display:none!important} @media(max-width:640px){.funnel-header{padding:16px}.funnel-steps{padding:16px}.funnel-step{align-items:flex-start}.funnel-step button{width:100%}.funnel-body{padding:0 16px 16px}} .funnel-images{display:grid;gap:16px} .funnel-check{padding:12px 16px;margin:0;background:#fef7e0;border:1px solid #bdc1c6;border-radius:10px;line-height:1.8} .funnel-image{margin:0;background:#ffffff;border:1px solid #dadce0;border-radius:12px;overflow:hidden} .funnel-image img{display:block;width:100%;height:auto} .funnel-image figcaption{padding:10px 14px;font-size:13px;color:#5f6368} .funnel-image-failed{margin:0;padding:12px 16px;background:#fce8e6;border:1px solid #bdc1c6;border-radius:10px;color:#c5221f;line-height:1.7} .funnel-reference{display:grid;gap:12px} .funnel-swatches{display:flex;gap:10px;flex-wrap:wrap} .funnel-swatch{flex:1 1 90px;min-height:52px;display:flex;align-items:flex-end; padding:6px 8px;border:1px solid #dadce0;border-radius:8px; font-size:11px;color:#1f1f1f;background:#ffffff;text-shadow:0 1px 2px rgba(255,255,255,.8)} /* まだ作っていない仲間。隠さず、いつ使えるかが分かるようにする。 姿は見せたまま、上に薄いグレーを重ねて押せなくする。 */ .office-person-soon{position:relative;cursor:default} .office-person-soon:after{content:'';position:absolute;inset:0;border-radius:inherit; background:rgba(22,35,58,.45);pointer-events:none;z-index:1} .office-person-soon>svg,.office-person-soon>img, .office-person-soon .guild-portrait{filter:grayscale(.85)} .office-soon-badge{position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);padding:6px 14px;border-radius:999px; background:rgba(22,35,58,.92);color:#fff;font-size:12px;font-weight:800; letter-spacing:.06em;white-space:nowrap; box-shadow:0 4px 14px rgba(16,35,58,.4);pointer-events:none;z-index:2} .office-person-soon .office-person-name, .office-person-soon .studio-member-label{opacity:.6} .office-person-soon:disabled{opacity:1} /* 設計の抜けを見せる9マス。埋まっているかを色で分け、 止めるマス（課題・顧客セグメント・収益）は枠で区別する。 */ .intake-canvas{padding:0 28px 24px} .intake-canvas h3{font-size:16px;margin:8px 0 6px} .intake-canvas-note{font-size:13px;line-height:1.7;color:#5f6368;margin:0 0 14px} .intake-canvas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .intake-canvas-cell{padding:14px;background:#ffffff;border:1px solid #dadce0;border-radius:10px} .intake-canvas-cell h4{margin:0 0 6px;font-size:14px;line-height:1.5} .intake-canvas-cell.filled{background:#e6f4ea;border-color:#bdc1c6} .intake-canvas-cell.blocking{border-color:#9aa0a6;border-width:2px;background:#fce8e6} .intake-canvas-purpose{margin:0;font-size:12px;line-height:1.7;color:#5f6368} .intake-canvas-from{margin:8px 0 0;font-size:12px;line-height:1.6;color:#3c4043} .intake-canvas-ask{margin:8px 0 0;font-size:12px;line-height:1.6;color:#5f6368} /* 顧客管理。実発言とAIの生成物を、見た目でも必ず分ける。 */ .dossier-dialog{width:min(1040px,calc(100vw - 24px));max-height:92dvh;box-sizing:border-box;padding:0;border:1px solid #dadce0;border-radius:20px;background:#f0f4f9;color:#1f1f1f;overflow:auto;box-shadow:0 24px 90px #10274840} .dossier-dialog::backdrop{background:#14233b99} .dossier-dialog *{box-sizing:border-box} .dossier-dialog button{min-height:44px;cursor:pointer} .dossier-dialog button:disabled{cursor:default;opacity:.55} .dossier-header{display:flex;align-items:center;gap:14px;padding:20px 28px;border-bottom:1px solid #e8eaed;flex-wrap:wrap} .dossier-header h2{margin:0;font-size:22px} .dossier-header input{flex:1;min-width:200px;min-height:44px;padding:10px 12px;border:1px solid #9aa0a6;border-radius:8px;font:inherit;font-size:16px} .dossier-header input:focus-visible{outline:3px solid #bdc1c6;border-color:#0b57d0} .dossier-dialog>p{margin:0;padding:0 28px;font-size:13px;line-height:1.8;color:#5f6368} .dossier-layout{display:grid;grid-template-columns:280px 1fr;gap:20px;padding:18px 28px 28px;align-items:start} .dossier-list h3{font-size:14px;margin:0 0 10px;color:#5f6368} .dossier-clients{list-style:none;margin:0;padding:0;display:grid;gap:8px} .dossier-clients button{display:block;width:100%;text-align:left;padding:12px;background:#ffffff;border:1px solid #dadce0;border-radius:10px;font:inherit;color:#1f1f1f} .dossier-clients button small{display:block;margin-top:4px;font-size:12px;color:#5f6368;overflow-wrap:anywhere} .dossier-clients button:hover{border-color:#0b57d0} .dossier-detail h3{margin:0 0 12px;font-size:20px} .dossier-detail h4{margin:0 0 4px;font-size:15px} .dossier-detail h5{margin:14px 0 6px;font-size:13px;color:#5f6368} .dossier-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 20px;font-size:14px;line-height:1.7} .dossier-facts dt{color:#5f6368} .dossier-facts dd{margin:0;overflow-wrap:anywhere} .dossier-origin-note{margin:0 0 10px;font-size:12px;line-height:1.7;color:#5f6368} /* 一次資料は緑側、生成物はグレー側。ここが同じ見た目だと事故る。 */ .dossier-primary,.dossier-generated,.dossier-gaps{padding:16px;border-radius:12px;margin-bottom:16px} .dossier-primary{background:#e6f4ea;border:1px solid #bdc1c6} .dossier-generated{background:#f0f4f9;border:1px dashed #9aa0a6} .dossier-gaps{background:#fce8e6;border:1px solid #bdc1c6} .dossier-records{list-style:none;margin:0;padding:0;display:grid;gap:8px} .dossier-record{padding:12px;background:#ffffff;border:1px solid #dadce0;border-radius:8px;font-size:14px;line-height:1.7} .dossier-record strong{display:block;overflow-wrap:anywhere} .dossier-who,.dossier-size,.dossier-url{display:block;font-size:12px;color:#5f6368;overflow-wrap:anywhere} .dossier-gap-list{margin:0;padding-left:1.3em;font-size:14px;line-height:1.9} .dossier-empty{margin:0;font-size:13px;color:#5f6368} @media(max-width:820px){ .dossier-layout{grid-template-columns:1fr;padding:14px} .dossier-header{padding:16px;gap:10px} .dossier-header h2{font-size:20px} .dossier-dialog>p{padding:0 16px} .intake-canvas{padding:0 14px 16px} .intake-canvas-grid{grid-template-columns:1fr} } /* 資料を入れる段。文字起こしは全文を貼るので、本文欄を大きく取る。 */ .intake-records{padding:0 28px 24px} .intake-records h3{font-size:16px;margin:8px 0 6px} .intake-records-note{font-size:13px;line-height:1.7;color:#5f6368;margin:0 0 14px} .intake-records-row{margin-bottom:12px} .intake-records-row label{display:block;font-weight:700;font-size:14px;line-height:1.6;margin-bottom:6px} .intake-records-row select,.intake-records-row input,.intake-records-row textarea{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid #9aa0a6;border-radius:8px;font:inherit;font-size:16px;line-height:1.7;background:#ffffff;color:#1f1f1f} .intake-records-row textarea{resize:vertical} .intake-records-row select:focus-visible,.intake-records-row input:focus-visible,.intake-records-row textarea:focus-visible{outline:3px solid #bdc1c6;border-color:#0b57d0} .intake-records-count{margin:0 0 10px;font-size:12px;color:#5f6368} .intake-records>button{padding:0 18px;border:1px solid #0b57d0;border-radius:8px;background:#0b57d0;color:#ffffff;font:inherit;font-weight:700} .intake-records>button:disabled{background:#9aa0a6;border-color:#9aa0a6} .intake-records>p[role]{margin:10px 0 0;font-size:13px;line-height:1.8;color:#5f6368} .intake-records-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px} .intake-records-item{padding:12px;background:#e6f4ea;border:1px solid #bdc1c6;border-radius:8px;font-size:14px;line-height:1.7} .intake-records-item strong{display:block;overflow-wrap:anywhere} .intake-records-meta{display:block;font-size:12px;color:#5f6368;overflow-wrap:anywhere} .intake-records-empty{font-size:13px;color:#5f6368} @media(max-width:600px){.intake-records{padding:0 14px 16px}} /* 施策の結果。観測された傾向まで。成果として強調しない。 */ .dossier-experiments{padding:16px;border-radius:12px;margin-bottom:16px;background:#f1f3f4;border:1px solid #bdc1c6} .dossier-delta{display:block;font-size:13px;font-weight:700;color:#3c4043} .dossier-reason{display:block;font-size:12px;color:#e37400;overflow-wrap:anywhere} .dossier-next{display:block;margin-top:4px;font-size:12px;color:#5f6368;overflow-wrap:anywhere} /* 他社の施策。横展開の材料。実績として強調しない。 */ .dossier-reuse{padding:16px;border-radius:12px;margin-bottom:16px;background:#f1f3f4;border:1px dashed #bdc1c6} /* 入力の段。縦に全部積むのをやめ、1度に1段だけ見せる。 どの段に何が残っているかを、開かずに分かるようにする。 */ /* 上の3つの段（2026-09-28）。大きな箱3つで1帯を使っていた。 タブとして横に並べ、高さを半分にする */ .intake-steps{ padding:0 18px;border-bottom:1px solid var(--line);background:var(--sheet); position:sticky;top:57px;z-index:2} .intake-stepbar{display:flex;gap:6px;padding:8px 0} .intake-step{ display:flex;flex-direction:row;align-items:baseline;gap:7px; padding:7px 14px;border:1px solid var(--line);border-radius:999px; background:var(--sheet);font:inherit;color:var(--ink-2);text-align:left; transition:border-color .15s ease,color .15s ease} /* 段の説明文はタブに入れない。名前と件数だけで足りる */ .intake-step>small{display:none} .intake-step strong{font-size:12.5px;line-height:1.4;color:#1f1f1f} .intake-step-mark{margin:0;font-size:10.5px;font-weight:700;color:#0b57d0;background:#e8f0fe;border-radius:999px;padding:1px 8px} .intake-step[aria-pressed="true"]{ background:var(--accent-soft);border-color:var(--accent); color:var(--accent);font-weight:600} .intake-step:hover:not([aria-pressed="true"]){border-color:#bdc1c6} /* 項目のまとまり。何のための項目かを見出しに添える。 */ .intake-group h3{display:flex;align-items:center;gap:10px} .intake-group-count{flex:none;font-size:11px;font-weight:700;color:#5f6368;background:#e8f0fe;border-radius:4px;padding:2px 8px} .intake-group-why{margin:-12px 0 16px;font-size:12px;line-height:1.7;color:#5f6368} @media(max-width:600px){ .intake-steps{padding:0 14px} .intake-stepbar{gap:5px;padding:8px 0;overflow-x:auto} .intake-step{flex:none;gap:6px;padding:7px 11px} .intake-step small{display:none} .intake-step-mark{margin:0 0 0 auto} } /* 狭い画面の見出し。肖像と見出しと閉じるボタンを1行に詰めると、 見出しが「ライルと、一/緒に作る」のように途中で折れる（2026-09-23 実機確認）。 肖像を小さくし、見出しは横幅いっぱいを使えるようにする。 */ @media(max-width:600px){ .intake-header{align-items:flex-start} .intake-portrait{width:44px;height:55px;flex:none} .intake-header>div{flex:1 1 100%;order:3;min-width:0} .intake-header h2{font-size:19px;line-height:1.4} .intake-header>button{flex:none;order:2;margin-left:auto;font-size:13px;padding:0 12px} } /* 具体の欄を3カラムで並べる。ファーストビューで何を入れるか見えるように。 */ .intake-grid{display:grid;gap:10px;align-items:start} .intake-col{display:grid;gap:9px} .intake-col>h3{margin:0 0 2px;font-size:14px;color:#0b57d0;letter-spacing:.02em} .intake-block{ padding:13px 14px;background:var(--sheet);border:1px solid var(--line); border-radius:var(--r-m);transition:border-color .15s ease} .intake-block h4{ display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:12.5px; color:var(--ink);letter-spacing:.01em} .intake-block-count{flex:none;margin-left:auto;font-size:11px;font-weight:700;color:#5f6368;background:#e8f0fe;border-radius:4px;padding:2px 7px} .intake-cell{margin-bottom:6px} .intake-cell:last-child{margin-bottom:0} .intake-cell label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1.5;margin-bottom:4px;color:#1f1f1f} .intake-unit{flex:none;font-size:10px;font-weight:700;color:#5f6368;background:#e8f0fe;border-radius:4px;padding:1px 6px} .intake-cell input,.intake-cell select,.intake-cell textarea{ display:block;width:100%;min-height:36px;padding:7px 10px; border:1px solid var(--line-2);border-radius:var(--r-s);font:inherit; font-size:14px;line-height:1.6;background:var(--sheet);color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease} .intake-cell input:hover,.intake-cell textarea:hover{border-color:#bdc1c6} .intake-cell textarea{resize:vertical;min-height:52px} .intake-cell input:focus-visible,.intake-cell select:focus-visible,.intake-cell textarea:focus-visible{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .intake-cell input:not(:placeholder-shown),.intake-cell textarea:not(:empty){background:#e6f4ea;border-color:#bdc1c6} .intake-cell-hint{margin:4px 0 0;font-size:11px;line-height:1.6;color:#80868b} /* 文章でしか書けないものは、3カラムの下に広く取る */ .intake-wide{margin-top:0;padding:12px;background:#ffffff;border:1px solid #dadce0;border-radius:10px} .intake-wide>h3{margin:0 0 2px;font-size:14px;color:#0b57d0} /* 1枚に収める配置（2026-09-27 卓馬指示）。 左 1/3 にスコアと文章欄、右 2/3 に短い欄を全部置く。 文章欄に1560pxの横幅は要らない。空いた右側を使い切る */ .intake-sheet{display:grid;grid-template-columns:1fr;gap:11px;align-items:start} @media(min-width:1150px){ .intake-sheet{grid-template-columns:minmax(300px,1fr) 2fr;gap:13px} /* 左は画面に貼り付ける。右を送っても点数が見えていてほしい。 **上の見出しとタブの下で止める。**top:0 だとその下に潜り込む */ .intake-left{position:sticky;top:112px} } .intake-left,.intake-right{display:grid;gap:10px;align-content:start;min-width:0} /* 右側は段組みで流す（2026-09-28）。列ごとに縦積みすると、 欄の少ない列が早く終わって下が空く（スクショで真ん中の列の 下半分が空白だった）。段組みなら次のブロックが繰り上がる */ .intake-grid{display:block;column-gap:10px} @media(min-width:760px){.intake-grid{column-count:2}} @media(min-width:1480px){.intake-grid{column-count:3}} /* ブロックを段の途中で割らない。割れると1つの箱が2段にまたがる */ .intake-block,.intake-col-head,.intake-col-lead{ break-inside:avoid;page-break-inside:avoid} /* 見出しと最初のブロックは1つの箱。段をまたいで離れない */ .intake-col-lead{display:block;margin:0 0 10px} .intake-col-lead>.intake-block{margin:0} .intake-block{display:block;margin:0 0 10px} /* 列の見出し。段組みの中では塊の先頭に置く */ .intake-col-head{ margin:2px 0 9px;padding:0 0 6px;font-size:10.5px;color:var(--ink-3); font-weight:700;letter-spacing:.13em;text-transform:uppercase; border-bottom:1px solid var(--line)} .intake-col-head:first-child{margin-top:0} @media(max-width:600px){.intake-grid{grid-template-columns:1fr}.intake-wide{padding:12px}} /* 仲間の一覧を段組みにする。1列だと1画面に2〜3人しか入らず、 誰に頼めるのかを見るのに毎回スクロールすることになる（2026-09-23 実測）。 */ .office-stage #office-team,#office-team{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .office-list-agent{align-items:flex-start} .office-list-agent svg{width:46px;height:54px} .office-list-agent strong{font-size:14px;line-height:1.5} .office-list-agent small{margin-top:4px;font-size:11px} @media(max-width:700px){ .office-stage #office-team,#office-team{grid-template-columns:1fr} } /* 顧客の言葉（カスタマージャーニー）。実発言の枠と同系色にして、 一次資料から来ていることが見た目で分かるようにする。 */ .dossier-journey{padding:16px;border-radius:12px;margin-bottom:16px;background:#e8f0fe;border:1px solid #bdc1c6} .dossier-stages{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:stage} .dossier-stage{position:relative;padding:12px 12px 12px 40px;background:#ffffff;border:1px solid #dadce0;border-radius:8px;font-size:14px;line-height:1.7} .dossier-stage::before{counter-increment:stage;content:counter(stage);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e8f0fe;color:#5f6368;font-size:11px;font-weight:700} .dossier-stage.filled{background:#f0f4f9;border-color:#bdc1c6} .dossier-stage.filled::before{background:#0b57d0;color:#ffffff} .dossier-stage strong{display:block} .dossier-stage-summary{display:block;font-size:12px;color:#5f6368} .dossier-stage-ask{display:block;margin-top:4px;font-size:12px;color:#5f6368} /* 順路の帯。3Dオフィスの上に薄く置く。 撮影で3Dを見せるため、面積を奪わない高さに収める（40px前後）。 */ .journey-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:10px 18px;margin-bottom:12px;background:#fff; border:1px solid #dce4ed;border-radius:12px;box-shadow:0 2px 10px #25395708} .journey-strip[hidden]{display:none!important} .journey-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0} .journey-pick{min-height:34px;padding:4px 8px;border:1px solid #cbd6e4; border-radius:8px;font:inherit;font-size:12px;background:#fff;color:#2b3c53; max-width:190px} @media(max-width:900px){ .journey-strip{padding:10px 14px} } /* 設計より先に制作物を開いたときの一行。止めないので、警告色にはしない。 */ .intake-order-note{margin:0;padding:10px 28px;background:#fef7e0; border-bottom:1px solid #bdc1c6;font-size:12px;line-height:1.7;color:#8a4b00} .intake-order-note[hidden]{display:none!important} @media(max-width:600px){.intake-order-note{padding:10px 14px}} /* トップ下半分の折りたたみ。畳んだ見出しは、押せるものだと分かる形にする。 */ .top-section-fold{margin:14px 0;border:1px solid #dadce0;border-radius:12px;background:#ffffff} .top-section-fold>summary{padding:14px 18px;cursor:pointer;font-size:14px; font-weight:700;color:#1f1f1f;list-style:none;display:flex;align-items:center;gap:8px} .top-section-fold>summary::-webkit-details-marker{display:none} .top-section-fold>summary::before{content:'▸';color:#80868b;font-size:12px} .top-section-fold[open]>summary::before{content:'▾'} .top-section-fold[open]>summary{border-bottom:1px solid #f1f3f4} .top-section-fold>section{padding:0 18px 18px} /* ファネル全体図。段が下へ行くほど狭まる形にして、 絞り込まれていくことを幅で見せる（2026-09-24 卓馬提示の図） */ .funnel-map{margin:18px 0;padding:16px;border:1px solid #e8eaed; border-radius:10px;background:#ffffff} .funnel-map h4{display:flex;justify-content:space-between;align-items:baseline; margin:0 0 6px;font-size:15px} .funnel-count{font-size:12px;color:#5f6368;font-weight:400} .funnel-note{margin:0 0 14px;font-size:12.5px;color:#3c4043;line-height:1.7} .funnel-track{list-style:none;margin:0;padding:0} .funnel-stage{position:relative;margin:0 auto 10px;padding:12px 14px; border-radius:8px;border:1px solid #dadce0;background:#ffffff} /* 上から順に幅を詰める。漏斗の形 */ .funnel-stage:nth-child(1){width:100%} .funnel-stage:nth-child(2){width:94%} .funnel-stage:nth-child(3){width:88%} .funnel-stage:nth-child(4){width:82%} .funnel-stage:nth-child(5){width:76%} .funnel-stage[data-state="empty"]{border-style:dashed;background:#ffffff} .funnel-head{display:flex;align-items:baseline;gap:8px} .funnel-head strong{font-size:14px} .funnel-moment{font-size:12px;color:#5f6368} .funnel-aim{margin:4px 0 10px;font-size:12.5px;color:#1f1f1f} .funnel-cards{display:flex;flex-wrap:wrap;gap:8px} .funnel-card{flex:1 1 180px;min-width:0;padding:8px 10px;border-radius:6px; border:1px solid #e8eaed;background:#f8f9fa} .funnel-card[data-placed="false"]{border-style:dashed;background:#ffffff} .funnel-card-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .funnel-card-head strong{font-size:12.5px} .funnel-badge{font-size:10.5px;padding:1px 6px;border-radius:999px; border:1px solid #0b57d0;color:#0b57d0} .funnel-badge-gap{font-size:10.5px;padding:1px 6px;border-radius:999px; border:1px solid #c5221f;color:#c5221f} .funnel-why{display:block;margin-top:3px;font-size:11.5px;color:#5f6368; line-height:1.6} .funnel-url{display:block;margin-top:4px;font-size:11px;color:#0b57d0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .funnel-numbers{margin:8px 0 0;font-size:11.5px;color:#0b57d0} @media (max-width:620px){.funnel-stage{width:100%!important}} /* その顧客のために作った広告。画像は並べて見比べられるように */ .ads-made{margin:0 0 22px;padding:18px 20px;border:1px solid #e8eaed; border-radius:16px;background:#ffffff} .ads-made h4{display:flex;justify-content:space-between;align-items:baseline; margin:0 0 12px;font-size:15px;color:#1f1f1f} .ads-made-count{font-size:18px;font-weight:800;color:#0b57d0} .ads-made-run{padding:14px;margin:0 0 10px;border-radius:12px; border:1px solid #f1f3f4;background:#ffffff} .ads-made-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px} .ads-made-head strong{color:#1f1f1f;font-size:14px} .ads-made-when{font-size:12px;color:#80868b;font-variant-numeric:tabular-nums} .ads-made-meta{margin:4px 0 8px;font-size:12px;color:#5f6368} .ads-made-heads{margin:0 0 10px;padding-left:18px} .ads-made-heads li{margin:3px 0;font-size:13px;line-height:1.7;color:#3c4043} .ads-made-shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .ads-made-shot{margin:0} .ads-made-shot img{width:100%;border-radius:10px;border:1px solid #e8eaed; background:#ffffff;display:block} .ads-made-shot figcaption{margin-top:4px;font-size:12px;color:#5f6368; display:flex;justify-content:space-between;align-items:center;gap:8px} .ads-made-save{color:#1f1f1f;font-weight:700;text-decoration:none} .ads-made-save:hover{text-decoration:underline} .ads-made-none{margin:0;font-size:12px;color:#80868b} .ads-made-warn{margin:8px 0 0;font-size:12px;line-height:1.7;color:#b06000} /* 会社の全体像。キャラクターより先に、右から左まで見せる （2026-09-24 卓馬指示）。空の段は赤く出し、推測で埋めない */ .journey-band{margin:0 0 18px;padding:18px 20px;border-radius:18px; border:1px solid #d9e2ed;background:linear-gradient(180deg,#f7fafd,#fff)} .journey-band[data-state="gap"]{border-color:#e8c4bf;background:linear-gradient(180deg,#fdf4f2,#fff)} .journey-band[data-state="filled"]{border-color:#b7dcc0;background:linear-gradient(180deg,#f2fbf4,#fff)} .journey-band-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; margin-bottom:10px} .journey-band-head small{font-size:10px;letter-spacing:.14em;color:#8a95a3} .journey-band-head h2{margin:0;font-size:17px;color:#20344f} .journey-band-count{margin-left:auto;font-size:15px;font-weight:800;color:#2f7d83} .journey-band[data-state="gap"] .journey-band-count{color:#a5382c} .journey-band-alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#fff; border:1px solid #edf1f6;line-height:1.75} .journey-band[data-state="gap"] .journey-band-alert{border-color:#e8c4bf;background:#fffaf9} .journey-band-alert strong{color:#a5382c} .journey-band[data-state="filled"] .journey-band-alert strong{color:#1f7a3f} .journey-band-alert span{font-size:13px;color:#5a6a7d} .journey-band-alert button{margin-left:auto;padding:9px 16px;border:0; border-radius:10px;background:#225e62;color:#fff;font-weight:700;white-space:nowrap} .journey-band-track{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(5,1fr);gap:10px} .journey-band-stage{position:relative;padding:12px 14px;border-radius:14px; border:1px solid #e2e9f1;background:#fff;display:grid;gap:4px;align-content:start} .journey-band-stage[data-state="filled"]{border-color:#b7dcc0;background:#f7fdf9} .journey-band-stage[data-state="empty"]{border-style:dashed;border-color:#e0b4ad; background:#fffbfa} /* 段のあいだに矢印を出して、道であることを見せる */ .journey-band-stage+.journey-band-stage::before{content:'›';position:absolute; left:-9px;top:50%;transform:translateY(-50%);color:#b8c4d2;font-size:16px} .journey-band-moment{font-size:10px;color:#8a95a3} .journey-band-stage strong{font-size:15px;color:#20344f} .journey-band-stage[data-state="empty"] strong{color:#a5382c} .journey-band-why{margin:2px 0 0;font-size:11.5px;line-height:1.65;color:#6b7a8c} .journey-band-have{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .journey-band-have>span{font-size:10.5px;padding:2px 7px;border-radius:999px; background:#e6f4ea;color:#2c6b44} .journey-band-need>span{display:inline-block;margin-top:4px;font-size:10.5px; padding:2px 7px;border-radius:999px;background:#fbe6e2;color:#a5382c} .journey-band-source{font-size:10px;color:#3d6b51} .journey-band-note{display:block;margin-top:10px;font-size:11px;color:#8a95a3; line-height:1.7} .journey-band-loading{margin:0;font-size:13px;color:#6b7a8c} .journey-band-invite{display:grid;gap:8px;justify-items:start} .journey-band-invite strong{color:#20344f} .journey-band-invite p{margin:0;font-size:13px;line-height:1.75;color:#5a6a7d} .journey-band-invite button{padding:10px 18px;border:0;border-radius:10px; background:#225e62;color:#fff;font-weight:700} @media(max-width:900px){.journey-band-track{grid-template-columns:repeat(2,1fr)} .journey-band-stage+.journey-band-stage::before{display:none}} @media(max-width:560px){.journey-band-track{grid-template-columns:1fr} .journey-band-alert button{margin-left:0;width:100%}} /* カスタマージャーニーの表（2026-09-24 卓馬提示の図に合わせた）。 横＝フェーズ、縦＝顧客行動/チャネル/顧客感情/自社対応策。 点数を右上に大きく。空のマスは押すとライルへ */ .jm-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px} .jm-title small{font-size:10px;letter-spacing:.14em;color:#8a95a3} .jm-title h2{margin:2px 0 0;font-size:18px;color:#20344f} .jm-score{margin-left:auto;text-align:right;line-height:1} .jm-score strong{font-size:44px;font-weight:800;color:#2f7d83} .jm-score span{font-size:14px;color:#8a95a3;margin-left:2px} .jm-score small{display:block;margin-top:4px;font-size:11px;color:#8a95a3} .journey-band[data-state="gap"] .jm-score strong{color:#c2564a} .journey-band[data-state="partial"] .jm-score strong{color:#c08a2e} .journey-band[data-state="filled"] .jm-score strong{color:#2f9155} .jm-todo{margin:0 0 14px;padding:12px 14px;border-radius:12px; background:#fff;border:1px solid #edf1f6} .jm-todo>strong{display:block;font-size:13px;color:#20344f;margin-bottom:8px} .jm-todo-list{display:flex;flex-wrap:wrap;gap:8px} .jm-todo-chip{display:flex;align-items:center;gap:6px;padding:6px 12px; border:1px dashed #d8a79e;border-radius:999px;background:#fffaf9;cursor:pointer} .jm-todo-chip:hover{background:#fdeeeb;border-color:#c2564a} .jm-todo-chip em{font-style:normal;font-size:10px;color:#a5382c;font-weight:700} .jm-todo-chip span{font-size:11.5px;color:#5a6a7d} .jm-todo small{display:block;margin-top:8px;font-size:11px;color:#8a95a3} /* 表本体。1列目が行名、以降がフェーズ */ .jm-grid{display:grid;grid-template-columns:152px repeat(var(--phases),1fr); gap:6px;overflow-x:auto} .jm-corner{} .jm-phase{padding:9px 10px;border-radius:9px;text-align:center; background:linear-gradient(180deg,#e8833c,#e0742c);color:#fff} .jm-phase strong{display:block;font-size:13px} .jm-phase small{font-size:10px;opacity:.9} .jm-row-label{display:grid;gap:2px;align-content:center;padding:9px 10px; border-radius:9px;background:#2d4a72;color:#fff;position:relative} .jm-row-label strong{font-size:13px} .jm-row-label small{font-size:10px;opacity:.82;line-height:1.5} .jm-row-count{position:absolute;top:6px;right:8px;font-size:10px;opacity:.85} .jm-cell{min-height:74px;padding:8px;border-radius:9px;border:1px solid #e2e9f1; background:#fff;display:grid;gap:5px;align-content:start} .jm-cell[data-filled="false"]{border-style:dashed;border-color:#e0b4ad; background:#fffbfa;align-content:center;justify-items:center} .jm-have{display:grid;gap:1px} .jm-have em{font-style:normal;font-size:9.5px;color:#2c6b44;font-weight:700} .jm-have>span{font-size:11px;line-height:1.5;color:#42526b; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .jm-add{display:grid;justify-items:center;gap:2px;padding:6px;border:0; background:none;cursor:pointer;width:100%} .jm-add i{font-style:normal;font-size:17px;color:#c2564a;line-height:1} .jm-add span{font-size:10.5px;color:#a5382c;line-height:1.4} .jm-add:hover i{transform:scale(1.15)} @media(max-width:900px){.jm-grid{grid-template-columns:120px repeat(var(--phases),150px)} .jm-score strong{font-size:34px}} /* ペルソナ・スタート・ゴール（参考図の上部）と、顧客感情の顔 */ .jm-header{display:grid;grid-template-columns:repeat(3,1fr);gap:8px; margin:0 0 12px} .jm-header-cell{padding:8px 12px;border-radius:9px;border:1px solid #dfe7f0; background:#fff;display:grid;gap:3px;align-content:start} .jm-header-cell[data-filled="false"]{border-style:dashed;border-color:#e0b4ad; background:#fffbfa} .jm-header-cell em{font-style:normal;font-size:10px;font-weight:700;color:#2d4a72} .jm-header-cell>span{font-size:11.5px;line-height:1.55;color:#42526b; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .jm-header-add{justify-self:start;padding:2px 8px;border:0;border-radius:6px; background:#fbe6e2;color:#a5382c;font-size:10.5px;font-weight:700;cursor:pointer} .jm-face{font-size:17px;line-height:1} .jm-cell[data-filled="false"] .jm-face{opacity:.55} @media(max-width:700px){.jm-header{grid-template-columns:1fr}} /* 顧客なしで答えた分の取り込み。人が押したときだけ動く */ .jm-orphan{display:grid;gap:6px;margin:0 0 12px;padding:12px 14px; border-radius:12px;border:1px dashed #c8a96a;background:#fffaf0} .jm-orphan strong{font-size:13px;color:#7a5a12} .jm-orphan>span{font-size:11.5px;line-height:1.6;color:#6b5a3a; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .jm-orphan button{justify-self:start;padding:8px 16px;border:0;border-radius:9px; background:#8a6a1c;color:#fff;font-weight:700;font-size:12px;cursor:pointer} .jm-orphan button:disabled{opacity:.6} /* ===== カスタマージャーニー ===================================== 2026-09-24：継ぎ足しで119ルール・95色まで増え、同じセレクタを 4回上書きしていた。1か所にまとめ、色は下の変数だけで決める。 世界観＝羊皮紙とギルド。行ごとに色を持たせて目で追えるようにする */ .journey-band{ --jp:#fffdf7; /* 羊皮紙 */ --jp-deep:#f5ecd8; /* 羊皮紙の濃い側 */ --jline:#d9c8a2; /* 罫 */ --jink:#3d342a; /* 文字 */ --jmute:#7b6849; --jgold:#b8975a; /* 金 */ --jgold-lit:#f2c43f; /* 光る金 */ --jdark:#26312a; /* 濃い地 */ --jgap:#c47f2e; /* 未記入 */ --jrow-b:#36618c; /* 顧客行動 */ --jrow-c:#2f7a63; /* チャネル */ --jrow-f:#a3564f; /* 顧客感情 */ --jrow-m:#6b5292; /* 自社対応策 */ background:linear-gradient(180deg,#fffdf7,#f6eedd)!important; border:1px solid var(--jline)!important;border-radius:0!important; box-shadow:inset 0 1px 0 #ffffffcc!important;padding:20px 22px!important; margin:0!important;color:#3d342a; border-left:0!important;border-right:0!important;border-top:0!important} /* --- 見出しと点数 --- */ .journey-band .jm-head{display:flex;align-items:stretch;gap:20px;margin-bottom:12px} .journey-band .jm-title{display:grid;align-content:center;gap:3px} .journey-band .jm-title-name{margin:0!important;font-size:24px!important; letter-spacing:-.02em;color:#33291b!important} .journey-band .jm-title-lead{margin:0;font-size:12px;line-height:1.6;color:#7b6849} .journey-band .jm-score{display:grid;justify-items:center;align-content:center; gap:3px;min-width:168px;margin-left:auto;padding:11px 18px;border-radius:12px; background:linear-gradient(180deg,#314034,#222c25); border:2px solid var(--jgold);text-align:center; box-shadow:0 5px 16px #1d251d38,inset 0 1px 0 #ffffff22} .journey-band .jm-stars{display:flex;gap:3px} .journey-band .jm-star{font-style:normal;font-size:15px;line-height:1;color:#4a5a4c} .journey-band .jm-star[data-on="true"]{color:var(--jgold-lit); text-shadow:0 0 9px #f2c43f7a} .journey-band .jm-score-num{display:flex;align-items:baseline;gap:3px} .journey-band .jm-score-num strong{font-size:42px!important;line-height:1; color:#fbeec6!important;font-variant-numeric:tabular-nums; text-shadow:0 2px 0 #00000045} .journey-band .jm-score-num span{font-size:13px!important;color:#aca182!important} .journey-band .jm-score-rank{display:block!important;padding:2px 12px; border-radius:99px;background:var(--jgold);color:#241d0f!important; font-size:11px!important;font-weight:800;letter-spacing:.06em} .journey-band .jm-score[data-rank="1"] .jm-score-rank{background:#b06a45;color:#fff!important} .journey-band .jm-score[data-rank="2"] .jm-score-rank{background:#c08a3a} .journey-band .jm-score[data-rank="5"] .jm-score-rank{background:#5fa563;color:#0e1f10!important} /* --- 経験値の帯 --- */ .journey-band .jm-bar{position:relative;height:14px;border-radius:99px; background:#2b3730;border:1px solid #1d261f;margin:0 0 6px; box-shadow:inset 0 2px 5px #00000047} .journey-band .jm-bar-fill{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#f2c43f,#d0912f)!important; box-shadow:0 0 12px #f2c43f70;transition:width .6s ease} .journey-band[data-state="filled"] .jm-bar-fill{ background:linear-gradient(90deg,#93d372,#4e9c53)!important} .journey-band .jm-bar-next{position:absolute;top:-4px;width:2px;height:21px; border-radius:2px;background:#fff6dd;box-shadow:0 0 6px #fff6ddb0;font-style:normal} .journey-band .jm-bar-under{display:flex;justify-content:space-between; gap:10px;flex-wrap:wrap;margin:0 0 16px} .journey-band .jm-bar-done{font-size:11.5px;color:#7b6849; font-variant-numeric:tabular-nums} .journey-band .jm-bar-next-say{font-size:12px;font-weight:700;color:#9a6f18} /* --- 次にやること・取り込み --- */ .journey-band .jm-todo{display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:0 0 14px;padding:11px 15px;border-radius:11px; background:#fffefa;border:1px solid #e3d6b6} .journey-band .jm-todo-say{font-size:12.5px;line-height:1.6;color:#5f4f33} .journey-band .jm-todo-go{margin-left:auto;padding:9px 17px;border:0; border-radius:9px;background:linear-gradient(180deg,#7a6446,#5f4c33); color:#fff7e9;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap; box-shadow:0 2px 0 #4a3a26} .journey-band .jm-todo-go:hover{background:linear-gradient(180deg,#8a7250,#6d5839)} .journey-band .jm-orphan{display:grid;gap:6px;margin:0 0 14px;padding:12px 15px; border-radius:11px;border:1px dashed var(--jgold);background:#fffaee} .journey-band .jm-orphan strong{font-size:13px;color:#7a5a12} .journey-band .jm-orphan>span{font-size:11.5px;line-height:1.6;color:#6b5a3a; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .journey-band .jm-orphan button{justify-self:start;padding:8px 16px;border:0; border-radius:9px;background:#8a6a1c;color:#fff;font-weight:700;font-size:12px; cursor:pointer} /* --- ペルソナ・スタート・ゴール --- */ .journey-band .jm-header{display:grid;grid-template-columns:repeat(3,1fr); gap:9px;margin:0 0 12px} .journey-band .jm-header-cell{padding:9px 13px;border-radius:10px; border:1px solid var(--jline);background:var(--jp);display:grid;gap:3px; align-content:start} .journey-band .jm-header-cell[data-filled="false"]{border-style:dashed; border-color:var(--jgap);background:#fff8ec} .journey-band .jm-header-cell em{font-style:normal;font-size:10px; font-weight:800;color:#7a6236;letter-spacing:.04em} .journey-band .jm-header-cell>span{font-size:11.5px;line-height:1.55;color:#473a27; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .journey-band .jm-header-add{justify-self:start;padding:2px 9px;border:0; border-radius:6px;background:#f2e4c6;color:#22303f;font-size:10.5px; font-weight:700;cursor:pointer} /* --- 表 --- */ .journey-band .jm-grid{display:grid; grid-template-columns:150px repeat(var(--phases),1fr);gap:7px;overflow-x:auto} .journey-band .jm-corner{} .journey-band .jm-phase{position:relative;display:grid;gap:1px; padding:9px 8px 8px;border-radius:9px;text-align:center;color:#fff; box-shadow:inset 0 1px 0 #ffffff2e} .journey-band .jm-phase:nth-of-type(2){background:linear-gradient(180deg,#6d9163,#587a50)} .journey-band .jm-phase:nth-of-type(3){background:linear-gradient(180deg,#5f8a5a,#4a7349)} .journey-band .jm-phase:nth-of-type(4){background:linear-gradient(180deg,#528251,#3d6b41)} .journey-band .jm-phase:nth-of-type(5){background:linear-gradient(180deg,#457a49,#326239)} .journey-band .jm-phase:nth-of-type(6){background:linear-gradient(180deg,#3a7241,#275832)} .journey-band .jm-phase[data-done="4"]{box-shadow:inset 0 0 0 2px var(--jgold-lit), 0 0 12px #f2c43f4d} .journey-band .jm-phase::after{content:'›';position:absolute;right:-6px;top:50%; transform:translateY(-50%);color:var(--jline);font-size:18px;z-index:2} .journey-band .jm-phase:last-of-type::after{content:''} .journey-band .jm-phase-no{display:inline-grid;place-items:center;width:20px; height:20px;margin:0 auto;border-radius:50%;background:#ffffff33; color:#fff;font-size:11px;font-weight:800} .journey-band .jm-phase-name{font-size:13px} .journey-band .jm-phase-moment{font-size:10px;opacity:.86} .journey-band .jm-phase-count{font-size:10px;opacity:.92; font-variant-numeric:tabular-nums} .journey-band .jm-phase[data-done="0"] .jm-phase-count{color:#ffdcd3} /* 行の見出し */ .journey-band .jm-row-label{position:relative;display:grid;gap:2px; align-content:center;padding:9px 11px;border-radius:9px;color:#fff; box-shadow:inset 0 1px 0 #ffffff22} .journey-band .jm-row-label[data-row="behaviour"]{background:linear-gradient(180deg,#4172a0,#36618c)} .journey-band .jm-row-label[data-row="channel"]{background:linear-gradient(180deg,#398a72,#2f7a63)} .journey-band .jm-row-label[data-row="feeling"]{background:linear-gradient(180deg,#b06860,#a3564f)} .journey-band .jm-row-label[data-row="measure"]{background:linear-gradient(180deg,#7c61a6,#6b5292)} .journey-band .jm-row-label[data-done="0"]{opacity:.6} .journey-band .jm-row-label strong{font-size:13px} .journey-band .jm-row-label small{font-size:10px;opacity:.85;line-height:1.5} .journey-band .jm-row-count{position:absolute;top:6px;right:9px;font-size:10px; opacity:.9;font-variant-numeric:tabular-nums} /* マス */ .journey-band .jm-cell{position:relative;min-height:72px;padding:9px 10px; border-radius:9px;border:1px solid var(--jline);border-left-width:4px; background:var(--jp);display:grid;gap:5px;align-content:start; transition:background .15s,transform .15s} .journey-band .jm-cell[data-row="behaviour"]{border-left-color:var(--jrow-b)} .journey-band .jm-cell[data-row="channel"]{border-left-color:var(--jrow-c)} .journey-band .jm-cell[data-row="feeling"]{border-left-color:var(--jrow-f)} .journey-band .jm-cell[data-row="measure"]{border-left-color:var(--jrow-m)} .journey-band .jm-cell[data-filled="true"]::after{content:'✓';position:absolute;font-weight:800} .journey-band .jm-cell[data-filled="false"]{border-style:dashed; border-color:var(--jgap)!important;border-left-width:4px; background:linear-gradient(180deg,#fff8ea,#fdf0dc); align-content:center;justify-items:center} .journey-band .jm-cell[data-filled="false"]:hover{background:#fdecd6; transform:translateY(-1px)} .journey-band .jm-have{display:grid;gap:1px} .journey-band .jm-have em{font-style:normal;font-size:9.5px;font-weight:800} .journey-band .jm-cell[data-row="behaviour"] .jm-have em{color:var(--jrow-b)} .journey-band .jm-cell[data-row="channel"] .jm-have em{color:var(--jrow-c)} .journey-band .jm-cell[data-row="feeling"] .jm-have em{color:var(--jrow-f)} .journey-band .jm-cell[data-row="measure"] .jm-have em{color:var(--jrow-m)} .journey-band .jm-have>span{font-size:11px;line-height:1.5;color:#473a27; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .journey-band .jm-face{font-size:16px;line-height:1} /* 空のマス＝これから埋める依頼 */ .journey-band .jm-add{display:grid;justify-items:center;gap:3px;padding:8px 6px; border:0;background:none;cursor:pointer;width:100%} .journey-band .jm-add-mark{font-style:normal;display:grid;place-items:center; width:27px;height:27px;border-radius:50%;font-size:16px; background:linear-gradient(180deg,#f6dfa4,#e6c176);color:#5a3f0e; border:1px solid #c9a65c;box-shadow:0 2px 0 #c9a65c7a;transition:transform .15s} .journey-band .jm-add:hover .jm-add-mark{transform:translateY(-1px); background:linear-gradient(180deg,#ffeab6,#f0cf84)} .journey-band .jm-add-say{font-size:11px;font-weight:700;color:#7a5410; line-height:1.35;text-align:center} .journey-band .jm-add-go{display:block;font-style:normal;margin-top:1px; padding:1px 9px;border-radius:99px;background:#6b573a;color:#fff7e9; font-size:9.5px;font-weight:700} .journey-band .jm-add:hover .jm-add-go{background:#9a6f18} /* 凡例と注記 */ .journey-band .jm-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px; padding-top:10px;border-top:1px solid #e8dcc0} .journey-band .jm-key-item{display:inline-flex;align-items:center;gap:6px; font-size:11px;color:#7b6849} .journey-band .jm-key-box{width:14px;height:14px;border-radius:3px; border:1px solid var(--jline);background:var(--jp);border-left:4px solid var(--jrow-b)} .journey-band .jm-key-empty{border-style:dashed;border-color:var(--jgap); background:#fdf0dc;border-left:4px dashed var(--jgap)} .journey-band .journey-band-note{display:block;margin-top:9px;font-size:11px; line-height:1.7;color:#7b6849} .journey-band .journey-band-loading{margin:0;font-size:13px;color:#7b6849} @media(max-width:900px){ .journey-band .jm-grid{grid-template-columns:118px repeat(var(--phases),152px)} .journey-band .jm-header{grid-template-columns:1fr} .journey-band .jm-score{min-width:140px} .journey-band .jm-score-num strong{font-size:34px!important}} /* ===== ゲームらしい動き（2026-09-24 卓馬「ゲームっぽく楽しく」）===== 動きは控えめに。減速を好む人の設定は尊重する */ @keyframes jmStarPop{ 0%{transform:scale(.3) rotate(-25deg);opacity:0} 60%{transform:scale(1.25) rotate(6deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1}} @keyframes jmGlow{ 0%,100%{text-shadow:0 0 9px #f2c43f7a} 50%{text-shadow:0 0 16px #f2c43fcc}} @keyframes jmSheen{ 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)}} .journey-band .jm-star[data-on="true"]{ animation:jmStarPop .45s cubic-bezier(.34,1.56,.64,1) backwards, jmGlow 2.6s ease-in-out 1s infinite} /* 経験値バーに光を流す */ .journey-band .jm-bar{overflow:hidden} .journey-band .jm-bar-fill{position:relative;overflow:hidden} .journey-band .jm-bar-fill::after{content:'';position:absolute;inset:0; width:36%;border-radius:99px; background:linear-gradient(90deg,transparent,#ffffff8c,transparent); animation:jmSheen 2.8s ease-in-out 1.2s infinite} /* 点数パネルを立体的に。金の縁に光 */ .journey-band .jm-score{position:relative;overflow:hidden} .journey-band .jm-score::before{content:'';position:absolute;inset:0; background:radial-gradient(120% 70% at 50% -10%,#ffffff1f,transparent 60%); pointer-events:none} .journey-band .jm-score-num strong{letter-spacing:-.02em} /* クリアした段は金に光る */ .journey-band .jm-phase[data-done="4"]{ background:linear-gradient(180deg,#5f8a55,#3f6b41)!important; box-shadow:inset 0 0 0 2px var(--jgold-lit),0 0 14px #f2c43f55} .journey-band .jm-phase[data-done="4"] .jm-phase-count{color:#ffe9a8;font-weight:800} .journey-band .jm-phase[data-done="4"] .jm-phase-no{background:var(--jgold-lit); color:#3a2c08} /* 埋まったマスは達成済みの箱に見せる */ .journey-band .jm-cell[data-filled="true"]{ background:linear-gradient(180deg,#fffefa,#f9f3e4); box-shadow:0 1px 0 #ffffffcc inset,0 1px 3px #6b573a12} .journey-band .jm-cell[data-filled="true"]::after{ display:grid;place-items:center;width:15px;height:15px;top:5px;right:6px; border-radius:50%;background:#3f7a45;color:#fff;font-size:9px} /* 空のマスは「取りに行ける」感じに。少し呼吸させる */ @keyframes jmBreathe{ 0%,100%{box-shadow:0 0 0 0 #c47f2e00} 50%{box-shadow:0 0 0 3px #c47f2e1f}} .journey-band .jm-cell[data-filled="false"]{animation:jmBreathe 3.2s ease-in-out infinite} .journey-band .jm-cell[data-filled="false"]:hover{transform:translateY(-2px); box-shadow:0 4px 10px #c47f2e33} .journey-band .jm-add:hover .jm-add-mark{transform:translateY(-2px) scale(1.06)} /* 動きを減らす設定なら止める */ @media(prefers-reduced-motion:reduce){ .journey-band .jm-star[data-on="true"], .journey-band .jm-bar-fill::after, .journey-band .jm-cell[data-filled="false"]{animation:none!important} .journey-band .jm-bar-fill{transition:none!important}} /* ===== 構成を2つに分ける ===================================== 2026-09-24：8つの箱が縦に積まれ、肝心の表が7番目だった。 「いまの状態」と「地図」の2つにまとめる */ .journey-band .jm-status{margin:0 0 18px;padding:16px 18px;border-radius:14px; background:linear-gradient(180deg,#fffefa,#f8f1e0); border:1px solid #e0d1ae;box-shadow:0 2px 10px #6b573a0f} .journey-band .jm-status>*:last-child{margin-bottom:0!important} .journey-band .jm-status .jm-head{margin-bottom:14px} .journey-band .jm-status .jm-todo{margin:14px 0 0;background:#fdf7e8; border-color:#e6d6b0} .journey-band .jm-status .jm-orphan{margin:14px 0 0} /* 地図の小見出し */ .journey-band .jm-map-head{display:flex;align-items:baseline;gap:10px; flex-wrap:wrap;margin:0 0 9px;padding-bottom:7px; border-bottom:2px solid #e8dcc0} .journey-band .jm-map-title{font-size:13.5px;font-weight:800;color:#4a3c22; letter-spacing:.01em} .journey-band .jm-map-hint{font-size:11px;color:#7b6849} /* 表まわりの余白を整える */ .journey-band .jm-header{margin:0 0 9px} .journey-band .jm-grid{padding-bottom:2px} /* 行の見出しと段の帯に厚みを出す */ .journey-band .jm-row-label,.journey-band .jm-phase{ box-shadow:inset 0 1px 0 #ffffff2e,0 1px 3px #3d342a1f} /* マスの角をそろえ、影を弱く一定に */ .journey-band .jm-cell{box-shadow:0 1px 2px #6b573a0d} .journey-band .jm-cell[data-filled="true"]{ box-shadow:inset 0 1px 0 #ffffffcc,0 1px 3px #6b573a14} /* ===== 狭い画面 ===================================== 表は横に流れるので、行の名前が消えると何の話か分からなくなる。 行の見出しだけ左に固定する（2026-09-24） */ @media(max-width:900px){ .journey-band{padding:16px 14px!important} .journey-band .jm-grid{scroll-snap-type:x proximity} .journey-band .jm-row-label{position:sticky;left:0;z-index:3} .journey-band .jm-corner{position:sticky;left:0;z-index:4;background:#fbf4e5} .journey-band .jm-phase{scroll-snap-align:start} /* 横に流れることを知らせる */ .journey-band .jm-map-hint::after{content:' ・横にスクロールできます'} } @media(max-width:560px){ .journey-band .jm-head{flex-wrap:wrap;gap:12px} .journey-band .jm-score{margin-left:0;width:100%;min-width:0} .journey-band .jm-title-name{font-size:20px!important} .journey-band .jm-bar-under{gap:4px} .journey-band .jm-todo{flex-direction:column;align-items:flex-start} .journey-band .jm-todo-go{margin-left:0;width:100%;text-align:center} .journey-band .jm-grid{grid-template-columns:96px repeat(var(--phases),140px)} .journey-band .jm-row-label small{display:none} .journey-band .jm-key{gap:10px} } /* 上の帯は「どの顧客を見るか」の切り替えだけ。 段（顧客/材料/設計/制作物）は役割が重複していたので外した （2026-09-24 卓馬指示） */ .journey-strip{display:flex;align-items:center;justify-content:flex-end; gap:10px;margin:0 0 10px;padding:8px 2px} .journey-strip .journey-side{display:flex;align-items:center;gap:8px;margin:0} .journey-strip .journey-pick{min-width:210px;padding:8px 12px; border:1px solid #cbd6e2;border-radius:9px;background:#fff;font:inherit; color:#22303f} /* ===== 広告の案を選ぶ画面 ===================================== スプレッドシートで案を並べて選んでいた流れを画面にする。 画像はここでは作らない（2026-09-24 卓馬指示） */ .ad-plan-dialog{width:min(1480px,96vw);max-height:94dvh;padding:0; border:1px solid #bdc1c6;border-radius:18px;background:#f0f4f9;color:#1f1f1f} .ad-plan-dialog::backdrop{background:#142234b8;backdrop-filter:blur(4px)} .ad-plan-head{display:flex;align-items:center;gap:14px;padding:18px 24px; border-bottom:1px solid #e8eaed;background:#ffffff;position:sticky;top:0;z-index:2} .ad-plan-head small{font-size:10px;letter-spacing:.14em;color:#80868b} .ad-plan-head h2{margin:2px 0 0;font-size:20px;color:#1f1f1f} .ad-plan-close{margin-left:auto;padding:8px 16px;border:1px solid #bdc1c6; border-radius:9px;background:#ffffff;color:#1f1f1f;font-weight:700;cursor:pointer} .ad-plan-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:16px 24px;background:#ffffff;border-bottom:1px solid #e8eaed} .ad-plan-pick label{font-size:12.5px;font-weight:700;color:#3c4043} .ad-plan-pick select{min-width:240px;padding:9px 12px;border:1px solid #bdc1c6; border-radius:9px;background:#ffffff;font:inherit;color:#1f1f1f} .ad-plan-go{margin-left:auto;padding:10px 20px;border:0;border-radius:9px; background:#0b57d0;color:#ffffff;font-weight:700;cursor:pointer} .ad-plan-go:disabled{opacity:.6} .ad-plan-status{margin:0;padding:12px 24px;font-size:12.5px;line-height:1.7; color:#3c4043} .ad-plan-list{padding:0 24px 24px} .ad-plan-who,.ad-plan-insight{margin:0 0 12px;padding:12px 15px; border-radius:11px;background:#ffffff;border:1px solid #e8eaed} .ad-plan-who{display:flex;gap:12px;align-items:baseline} .ad-plan-who strong,.ad-plan-insight strong{font-size:11px;letter-spacing:.08em; color:#3c4043} .ad-plan-who span{font-size:13px;line-height:1.6;color:#1f1f1f} .ad-plan-insight ul{margin:6px 0 0;padding-left:18px} .ad-plan-insight li{font-size:12.5px;line-height:1.7;color:#3c4043} .ad-plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .ad-plan-card{display:grid;gap:8px;align-content:start;padding:14px; border-radius:12px;background:#ffffff;border:1px solid #e8eaed; box-shadow:0 2px 8px #23364b0a;transition:border-color .15s,transform .15s} .ad-plan-card:hover{transform:translateY(-2px);border-color:#9aa0a6} .ad-plan-card[data-chosen="true"]{border-color:#0b57d0;box-shadow:0 0 0 2px #225e6233} .ad-plan-tags{display:flex;gap:6px;flex-wrap:wrap} .ad-plan-tags span{padding:2px 9px;border-radius:99px;font-size:10.5px; font-weight:700;background:#e8eaed;color:#1f1f1f} .ad-plan-card[data-format="incentive"] .ad-plan-tags span{background:#feefc3;color:#8a4b00} .ad-plan-card[data-format="empathy_voice"] .ad-plan-tags span{background:#e9d2fd;color:#3c4043} .ad-plan-tags em{font-style:normal;padding:2px 9px;border-radius:99px; font-size:10.5px;background:#e8f0fe;color:#3c4043} .ad-plan-card h3{margin:0;font-size:16px;line-height:1.45;color:#1f1f1f} .ad-plan-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0} .ad-plan-card dt{font-size:10px;font-weight:700;color:#80868b;white-space:nowrap} .ad-plan-card dd{margin:0;font-size:11.5px;line-height:1.6;color:#3c4043} .ad-plan-card>small{font-size:10.5px;line-height:1.6;color:#80868b} .ad-plan-take{padding:9px 14px;border:0;border-radius:9px;background:#0b57d0; color:#ffffff;font-weight:700;font-size:12px;cursor:pointer} .ad-plan-take:hover{background:#0b57d0} @media(max-width:620px){ .ad-plan-pick{flex-direction:column;align-items:stretch} .ad-plan-go{margin-left:0} .ad-plan-cards{grid-template-columns:1fr}} /* 型ごとにまとめ、文字を直せるようにする（2026-09-24 卓馬指示） */ .ad-plan-group{margin:0 0 18px} .ad-plan-group-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; margin:0 0 9px;padding-bottom:6px;border-bottom:2px solid #e8eaed} .ad-plan-group-head strong{font-size:14px;color:#1f1f1f} .ad-plan-group-head small{font-size:11px;color:#5f6368;line-height:1.5} .ad-plan-group[data-format="incentive"] .ad-plan-group-head{border-color:#bdc1c6} .ad-plan-group[data-format="incentive"] .ad-plan-group-head strong{color:#b06000} .ad-plan-score{padding:2px 9px;border-radius:99px;font-size:10.5px; font-weight:700;background:#feefc3;color:#8a4b00} .ad-plan-score[data-ok="true"]{background:#ceead6;color:#1f1f1f} .ad-plan-blocked{padding:2px 9px;border-radius:99px;font-size:10.5px; font-weight:700;background:#fad2cf;color:#a50e0e} .ad-plan-field{display:grid;gap:3px} .ad-plan-field span{font-size:10px;font-weight:700;color:#80868b} .ad-plan-field input,.ad-plan-field textarea{width:100%;box-sizing:border-box; padding:7px 9px;border:1px solid #dadce0;border-radius:7px;font:inherit; font-size:12px;line-height:1.55;color:#1f1f1f;background:#ffffff;resize:vertical} .ad-plan-field input:focus,.ad-plan-field textarea:focus{border-color:#0b57d0; background:#ffffff;outline:2px solid #225e6233;outline-offset:1px} .ad-plan-card h3{display:none} /* マーケ設計が済むまで、他のAIはグレーアウト（2026-09-24 卓馬指示） */ [data-design-locked="true"]{opacity:.42;filter:grayscale(.85); cursor:not-allowed!important;position:relative} .work-menu [data-design-locked="true"]{pointer-events:auto} /* 作ったものの置き場。Googleドライブの見え方に寄せる （2026-09-24 卓馬指示：題名の帯＋中身の一部／一覧と格子を切替） */ .flow-outputs{margin:0 0 18px;padding:16px 18px;border-radius:14px; background:#ffffff;border:1px solid #e8eaed} .outputs-head{display:flex;align-items:center;gap:12px;margin:0 0 14px} .outputs-title{margin:0;font-size:16px;color:#1f1f1f} .outputs-count{font-size:11.5px;color:#80868b} .outputs-modes{margin-left:auto;display:flex;gap:2px;padding:2px; border:1px solid #dadce0;border-radius:9px;background:#f0f4f9} .outputs-mode{min-width:34px;padding:5px 9px;border:0;border-radius:7px; background:transparent;color:#5f6368;font-size:13px;cursor:pointer;line-height:1} .outputs-mode[aria-pressed="true"]{background:#ffffff;color:#1f1f1f; box-shadow:0 1px 3px #23364b1f} /* 格子（既定） */ .outputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:14px} .outputs-card{display:grid;gap:0;border-radius:11px;overflow:hidden; border:1px solid #e8eaed;background:#ffffff;text-decoration:none;color:inherit; transition:border-color .15s,box-shadow .15s} .outputs-card:hover{border-color:#9aa0a6;box-shadow:0 4px 16px #23364b14} .outputs-bar{display:flex;align-items:center;gap:7px;padding:9px 11px; background:#f0f4f9;border-bottom:1px solid #f1f3f4} .outputs-icon{font-style:normal;font-size:13px;line-height:1} .outputs-name{font-size:12.5px;font-weight:600;color:#1f1f1f;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .outputs-thumb{aspect-ratio:4/3;background:#ffffff;overflow:hidden; display:grid;place-items:start center} .outputs-thumb img{width:100%;height:100%;object-fit:cover;object-position:top} .outputs-textthumb{padding:11px 13px;display:grid;gap:5px;width:100%; box-sizing:border-box} .outputs-textthumb p{margin:0;font-size:11px;line-height:1.5;color:#3c4043; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .outputs-sub{padding:7px 11px;font-size:10.5px;color:#80868b; border-top:1px solid #f1f3f4} /* 一覧 */ .flow-outputs[data-view="list"] .outputs-grid{grid-template-columns:1fr;gap:0} .flow-outputs[data-view="list"] .outputs-card{grid-template-columns:auto 1fr auto; align-items:center;border:0;border-bottom:1px solid #f1f3f4;border-radius:0; padding:0 4px} .flow-outputs[data-view="list"] .outputs-card:hover{background:#f0f4f9; box-shadow:none} .flow-outputs[data-view="list"] .outputs-bar{order:2;background:none;border:0; padding:10px 12px;min-width:0} .flow-outputs[data-view="list"] .outputs-thumb{order:1;width:42px;height:42px; aspect-ratio:1;border-radius:7px;margin:7px 0 7px 8px;border:1px solid #f1f3f4} .flow-outputs[data-view="list"] .outputs-textthumb{padding:4px;gap:1px} .flow-outputs[data-view="list"] .outputs-textthumb p{font-size:7px;line-height:1.3} .flow-outputs[data-view="list"] .outputs-sub{order:3;border:0;white-space:nowrap; padding-right:14px} .outputs-empty,.outputs-loading{margin:0;font-size:12.5px;color:#5f6368} @media(max-width:560px){ .outputs-grid{grid-template-columns:repeat(2,1fr);gap:10px} .flow-outputs[data-view="list"] .outputs-sub{display:none}} /* 案の一覧を読みやすくする（2026-09-24 卓馬「非常に見にくい」）。 1案＝1枚のカード。見出しを大きく、編集欄は下にまとめる */ .ad-plan-dialog{width:min(1480px,96vw)!important} .ad-plan-list{padding:0 28px 28px} .ad-plan-group{margin:0 0 22px} .ad-plan-group-head{align-items:center;padding-bottom:8px;border-bottom-width:3px} .ad-plan-group-head strong{font-size:15px} .ad-plan-cards{grid-template-columns:repeat(3,1fr)!important;gap:14px!important} .ad-plan-card{padding:0!important;gap:0!important;overflow:hidden} /* 上：入り口と点数 */ .ad-plan-card .ad-plan-tags{padding:10px 14px;background:#f0f4f9; border-bottom:1px solid #f1f3f4;margin:0;align-items:center} /* 見出しの欄だけ大きく見せる */ .ad-plan-card .ad-plan-field{padding:12px 14px 0;gap:4px} .ad-plan-card .ad-plan-field:first-of-type span{font-size:10.5px;color:#1f1f1f} .ad-plan-card .ad-plan-field:first-of-type input{font-size:15px;font-weight:700; line-height:1.45;padding:9px 11px;color:#1f1f1f;background:#ffffff; border-color:#bdc1c6} .ad-plan-card .ad-plan-field textarea{min-height:52px} .ad-plan-card>small{padding:8px 14px 0;color:#80868b} .ad-plan-take{margin:12px 14px 14px;padding:11px 14px!important} @media(max-width:1180px){.ad-plan-cards{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:760px){.ad-plan-cards{grid-template-columns:1fr!important}} /* 生成中に閉じても作り続ける。出来たら「作ったもの」で知らせる */ .outputs-done{margin:0 0 12px;padding:11px 14px;border-radius:10px; background:#e6f4ea;border:1px solid #bdc1c6;font-size:12.5px;line-height:1.7; color:#1f1f1f} /* 使えない仲間は薄く灰色に。上に「あと◯点」を出す （2026-09-24 卓馬指示） */ [data-design-locked="true"]{position:relative;cursor:not-allowed!important} /* **親を薄くすると札まで薄くなる。** 中身だけを薄くする。 キャラクターの絵は innerHTML で入るので、直下の子に限定しない */ [data-design-locked="true"] svg, [data-design-locked="true"] img, [data-design-locked="true"] canvas, [data-design-locked="true"]>*:not(.design-lock-badge){opacity:.4; filter:grayscale(.95)} [data-design-locked="true"] .design-lock-badge{opacity:1;filter:none} .design-lock-badge{position:absolute;top:4px;left:50%; transform:translateX(-50%);padding:2px 9px;border-radius:99px; background:#3c4043;color:#ffffff;font-size:10px;font-weight:800; white-space:nowrap;z-index:3;filter:none;opacity:1; box-shadow:0 2px 6px #1c2a3a4d;pointer-events:none} /* 札は灰色にしない（読めなくなる） */ [data-design-locked="true"] .design-lock-badge{filter:none;opacity:1} /* 3Dオフィスの名札。使えない仲間は薄くし、残り点数を出す */ .office-speech[data-design-locked="true"]>*:not(.label-lock){opacity:.4; filter:grayscale(.9)} .label-lock{display:block;margin:0 auto 3px;padding:2px 9px;border-radius:99px; background:#3c4043;color:#ffffff;font-size:10px;font-weight:800;white-space:nowrap; width:fit-content;box-shadow:0 2px 6px #1c2a3a55} /* 未解放の仲間。ゲームの鍵付きキャラのように見せる （2026-09-24 卓馬指示。ファーストビューの3Dは通常表示のまま）。 キャラは見えるくらいに残し、錠前と帯をはっきり出す */ [data-design-locked="true"]{position:relative;overflow:hidden; cursor:not-allowed!important;box-shadow:inset 0 0 0 2px #e8c46359} /* **キャラは見える濃さに。** 薄すぎると誰か分からない */ [data-design-locked="true"] svg, [data-design-locked="true"] img, [data-design-locked="true"] .specialist-card-copy{opacity:.55; filter:grayscale(.72) brightness(.82)} .agent-lock{position:absolute;inset:0;display:grid;align-content:center; justify-items:center;gap:9px;padding:10px;text-align:center;border-radius:inherit; /* 中央だけ暗くする。周りは薄くして、キャラを隠しきらない */ background:radial-gradient(78% 62% at 50% 46%,#0b1220e8 0%,#0b1220c4 52%,#0b122061 100%); color:#fff;z-index:2} /* 錠前。六角の台座に金の錠を載せる（ゲームの実績バッジの形） */ .agent-lock-shield{position:relative;display:grid;place-items:center; width:66px;height:66px; clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); background:linear-gradient(160deg,#6d829f 0%,#33445c 46%,#16202e 100%); filter:drop-shadow(0 5px 14px #000000a6)} /* 金の内枠 */ .agent-lock-shield::before{content:'';position:absolute;inset:3px; clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); background:linear-gradient(160deg,#ffe9a8,#c9992e 48%,#8a6716); z-index:0} /* 内側の暗い面。ここに錠を描く */ .agent-lock-shield::after{content:'';position:absolute;inset:6px; clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); background:linear-gradient(170deg,#2b3a50,#131c29);z-index:1} .agent-lock-shield i{position:relative;z-index:2;display:block; width:23px;height:18px;border-radius:4px; background:linear-gradient(180deg,#ffe9a8,#d9a531); box-shadow:0 2px 4px #00000080,inset 0 1px 0 #fff9} .agent-lock-shield i::before{content:'';position:absolute;left:50%;top:-13px; transform:translateX(-50%);width:16px;height:14px;border-radius:9px 9px 0 0; border:4px solid #ffe9a8;border-bottom:0; filter:drop-shadow(0 1px 1px #00000073)} .agent-lock-shield i::after{content:'';position:absolute;left:50%;top:4px; transform:translateX(-50%);width:5px;height:9px;border-radius:3px; background:#3a2c0c} .agent-lock-title{font-size:14px;font-weight:900;letter-spacing:.2em; color:#ffe08a;text-shadow:0 2px 5px #000000c4,0 0 14px #ffd97a52} [data-lock-kind="building"] .agent-lock-title{color:#dce5f1;letter-spacing:.1em; text-shadow:0 2px 5px #000000c4} /* 解放までの帯。**枠と地をはっきり出す**（薄くて見えなかった） */ .agent-lock-track{position:relative;width:min(136px,86%);height:11px; border-radius:99px;background:#050a12;border:2px solid #9fb0c6; box-shadow:inset 0 2px 4px #000000a6,0 1px 0 #ffffff26;overflow:hidden} .agent-lock-fill{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#ffe9a8,#e8a83a); box-shadow:0 0 10px #ffd97acc;transition:width .6s ease;min-width:3px} .agent-lock-say{font-size:12px;font-weight:800;line-height:1.45; color:#ffffff;max-width:16em;text-shadow:0 2px 4px #000000cc} [data-design-locked="true"]:hover .agent-lock-shield{filter:drop-shadow(0 6px 18px #000000b8) brightness(1.12)} /* マス1つぶんだけを聞く画面（2026-09-24 卓馬指示） */ .jf-dialog{width:min(560px,94vw);padding:22px 24px;border:1px solid #cbb78d; border-radius:16px;background:#fffdf7;color:#3d342a} .jf-dialog::backdrop{background:#142234b8;backdrop-filter:blur(4px)} .jf-head{margin:0 0 10px} .jf-where{display:block;font-size:11px;color:#8a7757;letter-spacing:.04em} .jf-title{margin:3px 0 0;font-size:20px;color:#33291b} .jf-why{margin:0 0 12px;padding:10px 13px;border-radius:9px;background:#f7f0de; font-size:12.5px;line-height:1.75;color:#5f4f33} .jf-input{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px; border:1px solid #d9c8a2;background:#fff;font:inherit;font-size:14px; line-height:1.7;color:#3d342a;resize:vertical} .jf-input:focus{border-color:#8a6a1c;outline:2px solid #8a6a1c33;outline-offset:1px} .jf-status{margin:9px 0 0;font-size:12px;line-height:1.6;color:#7b6849;min-height:1.2em} .jf-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} .jf-cancel{padding:10px 18px;border:1px solid #d9c8a2;border-radius:9px; background:#fff;color:#5f4f33;font-weight:700;cursor:pointer} .jf-save{padding:10px 22px;border:0;border-radius:9px; background:linear-gradient(180deg,#7a6446,#5f4c33);color:#fff7e9; font-weight:700;cursor:pointer;box-shadow:0 2px 0 #4a3a26} .jf-save:disabled{opacity:.6} /* 点数をもっと大きく（2026-09-24 卓馬指示） */ .journey-band .jm-score{min-width:186px} .journey-band .jm-score-num strong{font-size:54px!important} .journey-band .jm-star{font-size:17px} .journey-band .jm-score-rank{font-size:12px!important;padding:3px 14px} /* 施策の状態。期限の右に小さく収める（2026-09-24 卓馬指示）。 縦に積むと、数件で画面が埋まってしまう */ .growth-room-meta{align-items:center} .growth-room-pick{padding:2px 22px 2px 8px;border:1px solid #cbd6e2; border-radius:6px;background:#fff;font:inherit;font-size:11px;line-height:1.6; color:#22303f;max-width:150px;cursor:pointer; appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,#7e8a9d 50%), linear-gradient(135deg,#7e8a9d 50%,transparent 50%); background-position:calc(100% - 12px) 51%,calc(100% - 8px) 51%; background-size:4px 4px,4px 4px;background-repeat:no-repeat} .growth-room-pick:hover{border-color:#9fb4cc} .growth-room-pick:disabled{opacity:.6} .growth-room-detail{padding:2px 0 2px 4px!important;min-height:0!important; margin-left:auto} /* 会社を切り替えたとき、看板が変わったことを一瞬だけ光らせて伝える （2026-09-24 卓馬指示） */ .office-room-brand{transition:box-shadow .3s,border-color .3s} .office-room-brand[data-switched="true"]{ box-shadow:0 0 0 2px #e8c463,0 6px 22px #e8c46359!important} .office-room-brand[data-switched="true"] #office-room-company{ animation:brandSwap .5s ease} @keyframes brandSwap{ 0%{opacity:0;transform:translateY(-4px)} 100%{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .office-room-brand[data-switched="true"] #office-room-company{animation:none}} /* 他社の制作物は少し控えめに。作り方の参考にはなるが、 いま見ている会社のものと混同させない */ .outputs-card[data-other="true"]{opacity:.82} .outputs-card[data-other="true"] .outputs-bar{background:#e8f0fe} .outputs-card[data-other="true"]:hover{opacity:1} /* 外周のライバル。バーチャルオフィスの直下に置き、読みやすくする （2026-09-24 卓馬指示）。色は他と違うままにして、区別が付くように */ .office-rival-frontier{padding:16px 22px 18px!important; border-top:0!important;border-bottom:3px solid #8a6c38!important; margin:0 0 16px!important} .office-rival-frontier header{gap:10px!important;margin-bottom:2px} .office-rival-frontier header h2{font-size:17px!important} .office-rival-frontier header span{font-size:9px!important} /* 説明は短く1行に */ .office-rival-frontier>p:not(.rival-status){margin:2px 0 12px!important; font-size:11.5px!important;opacity:.9} /* 競合を横に並べる。数が増えても崩れないように */ .rival-encounters{gap:12px!important;flex-wrap:wrap;justify-content:flex-start!important; padding:4px 0 2px!important} .rival-monster{width:auto!important;max-width:none!important;flex:0 1 190px; padding:10px 12px!important;border-radius:10px!important; background:#ffffff14!important;border:1px solid #ffffff2e!important; text-align:left!important;gap:3px!important;align-items:flex-start!important; transition:background .15s,border-color .15s} .rival-monster:hover{background:#ffffff26!important;border-color:#e8c463!important} .rival-monster strong{font-size:13px;line-height:1.35} .rival-diff-summary{font-size:10.5px!important;line-height:1.5;opacity:.86; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rival-command{font-size:10px!important;color:#ffd97a!important;margin-top:2px} .rival-avatar{width:34px!important;height:34px!important;margin-bottom:2px} .office-rival-frontier footer{margin-top:10px!important; display:flex;align-items:center;gap:12px;flex-wrap:wrap} .office-rival-frontier footer small{font-size:10px!important;opacity:.78} .office-rival-frontier footer a{margin-left:auto;font-size:11.5px} /* ===== 外周のライバル：オフィスへの襲撃 ========================== （2026-09-25 卓馬指示「もっとモンスターが敵が攻めてる感じに」） ・オフィスとの境目を「破られた床」にして、下から突き上げさせる ・のっぺりした丸を、目と牙のある怪物の顔にする ・攻撃が当たるたび、オフィスが揺れて衝撃波が走る */ /* --- 境目をなくして地続きに --- */ #my-office{margin-bottom:0!important;padding-bottom:0!important} .office-rival-frontier{ position:relative; margin:0 0 18px!important; padding:30px 22px 18px!important; border-top:0!important; background:linear-gradient(180deg,#1b2b36,#26383a 45%,#4a4230)!important; overflow:hidden} /* 破られた床。ギザギザに裂けて、赤い光が漏れている */ .office-rival-frontier::before{ content:'';position:absolute;left:0;right:0;top:0;height:22px;z-index:3; background: linear-gradient(180deg,#ff8a4c66,transparent), conic-gradient(from 140deg at 50% 0,transparent 0,#0000 100%); clip-path:polygon(0 0,100% 0,100% 38%,96% 70%,92% 30%,87% 82%,82% 36%, 77% 74%,72% 28%,67% 86%,62% 40%,57% 72%,52% 26%,47% 80%,42% 34%, 37% 76%,32% 30%,27% 84%,22% 38%,17% 70%,12% 26%,7% 78%,3% 36%,0 64%); pointer-events:none} /* 攻撃が当たった瞬間の衝撃波 */ .office-rival-frontier::after{ content:'';position:absolute;left:0;right:0;top:0;height:5px;z-index:4; background:linear-gradient(90deg,transparent,#ffbe5e,#fff1cf,#ffbe5e,transparent); filter:blur(1px);opacity:0; animation:rival-shock 2.2s ease-out infinite;pointer-events:none} @keyframes rival-shock{ 0%,38%{opacity:0;transform:scaleX(.4)} 46%{opacity:1;transform:scaleX(1)} 70%,100%{opacity:0;transform:scaleX(1.15)}} /* --- 怪物の顔。目と牙をつける --- */ .office-rival-frontier .rival-avatar{ /* 直前に width:34px!important があり、そのままだと顔が潰れる。 怪物として読める大きさに戻す（2026-09-25） */ width:76px!important;height:70px!important; border-radius:52% 52% 30% 30%!important; position:relative; background:radial-gradient(70% 70% at 50% 30%,#7d3a3a,#3d1f24 70%)!important; border:2px solid #120c10!important; box-shadow:0 0 0 2px #ffb15e33,0 10px 0 #0006!important; transform-origin:50% 100%; animation:rival-lunge 2.2s cubic-bezier(.36,0,.3,1) infinite!important} /* 光る目。攻撃の瞬間に赤くなる */ .office-rival-frontier .rival-avatar::before{ content:'';position:absolute;left:18%;right:18%;top:31%;height:17%; background: radial-gradient(closest-side,#ffe07a,#ff8a2e 60%,transparent) left center/34% 100% no-repeat, radial-gradient(closest-side,#ffe07a,#ff8a2e 60%,transparent) right center/34% 100% no-repeat; animation:rival-glare 2.2s ease-in-out infinite} /* ===== 敵は4種類。並んだとき見分けがつくようにする ================== （2026-09-25 卓馬指示「それぞれ違うキャラクターにして」） ギルドの世界観は保つ。色・輪郭・目の形・角や牙で描き分ける。 */ /* ① 竜。角を持つ赤の大型。最も攻撃的に見せる */ .rival-avatar[data-rival-kind="dragon"]{ background:radial-gradient(68% 68% at 50% 32%,#8f3a32,#3a1a1c 72%)!important; border-radius:54% 54% 26% 26%!important} /* 2本の角 */ .rival-avatar[data-rival-kind="dragon"] .rival-horn{ position:absolute;top:-16%;width:20%;height:34%;background:#e4c489; clip-path:polygon(50% 0,100% 100%,0 100%)} .rival-avatar[data-rival-kind="dragon"] .rival-horn:first-child{left:8%;transform:rotate(-16deg)} .rival-avatar[data-rival-kind="dragon"] .rival-horn:last-child{right:8%;transform:rotate(16deg)} /* ② ゴーレム。石の四角い体。目はひとつ */ .rival-avatar[data-rival-kind="golem"]{ background:linear-gradient(165deg,#6d6a60,#33322e 75%)!important; border-radius:16% 16% 12% 12%!important; box-shadow:0 0 0 2px #b9ad8f55,inset 0 6px 0 #ffffff12,0 10px 0 #0006!important} .rival-avatar[data-rival-kind="golem"]::before{ left:33%;right:33%;top:28%;height:20%; background:radial-gradient(closest-side,#fff0b0,#e8a33a 62%,transparent) center/100% 100% no-repeat!important} /* 石は牙ではなく、割れ目の口 */ .rival-avatar[data-rival-kind="golem"]::after{ left:27%;right:27%;bottom:19%;height:9%;border-radius:2px!important; clip-path:polygon(0 0,100% 0,100% 100%,0 100%)!important} /* ③ 亡霊。輪郭がぼやけ、下が消えていく */ .rival-avatar[data-rival-kind="wraith"]{ background:radial-gradient(66% 62% at 50% 30%,#4a6f84,#141f2b 76%)!important; border-radius:58% 58% 42% 42%!important; border-color:#2b3d4a!important; filter:blur(.2px)} .rival-avatar[data-rival-kind="wraith"]::before{ background: radial-gradient(closest-side,#dffbff,#59c4e0 58%,transparent) left center/32% 100% no-repeat, radial-gradient(closest-side,#dffbff,#59c4e0 58%,transparent) right center/32% 100% no-repeat!important} /* 裾が霧になって散る */ .rival-avatar[data-rival-kind="wraith"]::after{ left:16%;right:16%;bottom:2%;height:24%;background:#16222e!important; border-radius:0!important; clip-path:polygon(0 0,100% 0,92% 58%,80% 22%,66% 72%,52% 28%,38% 76%, 24% 30%,12% 62%,0 24%)!important; box-shadow:none!important;opacity:.85} /* ④ 大蛇。細身で、縦に裂けた目 */ .rival-avatar[data-rival-kind="serpent"]{ background:radial-gradient(64% 70% at 50% 34%,#4f7a3c,#17281a 74%)!important; border-radius:60% 60% 34% 34%!important} .rival-avatar[data-rival-kind="serpent"]::before{ left:22%;right:22%;top:30%;height:20%; background: linear-gradient(#f3e27a,#c8a12c) left center/13% 100% no-repeat, linear-gradient(#f3e27a,#c8a12c) right center/13% 100% no-repeat!important} /* 二叉の舌 */ .rival-avatar[data-rival-kind="serpent"]::after{ left:40%;right:40%;bottom:6%;height:26%;background:#c9455a!important; border-radius:0!important;box-shadow:none!important; clip-path:polygon(38% 0,62% 0,62% 62%,100% 100%,50% 74%,0 100%,38% 62%)!important} @keyframes rival-glare{ 0%,36%{filter:none} 46%{filter:brightness(1.7) drop-shadow(0 0 7px #ff8a2e)} 70%,100%{filter:none}} /* 牙の並んだ口 */ .office-rival-frontier .rival-avatar::after{ content:'';position:absolute;left:24%;right:24%;bottom:17%;height:15%; background:#140c10;border-radius:0 0 40% 40%; clip-path:polygon(0 0,100% 0,100% 40%,90% 100%,80% 40%,68% 95%, 56% 40%,44% 95%,32% 40%,20% 100%,10% 40%,0 70%); box-shadow:inset 0 -4px 0 #fff4de} /* 「?」は顔の邪魔なので消す */ .office-rival-frontier .rival-avatar>span{display:none} /* --- 突き上げる。下から上（オフィス）へ --- */ @keyframes rival-lunge{ 0% {transform:translateY(14px) scale(1.04,.9)} /* ためる */ 34% {transform:translateY(12px) scale(1.06,.88)} 46% {transform:translateY(-20px) scale(.92,1.14)} /* 突き上げ */ 56% {transform:translateY(-14px) rotate(-4deg)} 68% {transform:translateY(2px) rotate(2deg)} 100% {transform:translateY(14px) scale(1.04,.9)}} /* 3体が順番に殴りかかる */ .office-rival-frontier .rival-monster[data-slot="0"] .rival-avatar, .office-rival-frontier .rival-monster[data-slot="0"] .rival-avatar::before{animation-delay:0s!important} .office-rival-frontier .rival-monster[data-slot="1"] .rival-avatar, .office-rival-frontier .rival-monster[data-slot="1"] .rival-avatar::before{animation-delay:-.73s!important} .office-rival-frontier .rival-monster[data-slot="2"] .rival-avatar, .office-rival-frontier .rival-monster[data-slot="2"] .rival-avatar::before{animation-delay:-1.46s!important} .office-rival-frontier .rival-monster[data-slot="3"] .rival-avatar, .office-rival-frontier .rival-monster[data-slot="3"] .rival-avatar::before{animation-delay:-.37s!important} /* オフィス本体は揺らさない（2026-09-25 卓馬指示「鬱陶しいので止めて」）。 ファーストビューが常時動いていると、見るたびに気が散る。 攻撃の手応えは、境目の衝撃波と怪物の動きだけで見せる。 */ /* 動きを止めたい人には、静かな姿で見せる */ @media(prefers-reduced-motion:reduce){ .office-rival-frontier .rival-avatar, .office-rival-frontier .rival-avatar::before, .office-rival-frontier::after{animation:none!important} .office-rival-frontier::after{opacity:0}} /* 狭い幅では、怪物の列が60pxになる。顔が列からはみ出さない大きさに。 上の width:76px!important を打ち消す（2026-09-25） */ @media(max-width:700px){ .office-rival-frontier .rival-avatar{ width:54px!important;height:50px!important} } /* ===== マーケの5つの力（2026-09-25 卓馬指示）========================== 自社はオフィスの右下に。競合は各モンスターの下に同じ形で出す。 同じ見た目にするのは、並べて比べられるようにするため。 */ /* --- 棒グラフの共通部分 --- */ .rival-stats{display:grid;gap:3px;width:100%;margin:5px 0 3px} .rival-stat{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:6px;font-size:9.5px;line-height:1.3} .rival-stat-name{color:#f0e2c2;white-space:nowrap} .rival-stat-bar{height:6px;border-radius:99px;background:#0d151b; border:1px solid #00000055;overflow:hidden;min-width:0} .rival-stat-fill{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#c98b4b,#f0c274)} .rival-stat-level{color:#ffe1a6;font-variant-numeric:tabular-nums; white-space:nowrap;font-weight:700} /* 軸ごとに色を変えて、見分けられるようにする */ .rival-stat[data-axis="seo"] .rival-stat-fill{background:linear-gradient(90deg,#3f7fa8,#79b6dc)} .rival-stat[data-axis="sns"] .rival-stat-fill{background:linear-gradient(90deg,#a1508f,#dd8ec9)} .rival-stat[data-axis="ads"] .rival-stat-fill{background:linear-gradient(90deg,#b0703a,#e8ab63)} .rival-stat[data-axis="product"] .rival-stat-fill{background:linear-gradient(90deg,#3f8560,#7bc39a)} .rival-stat[data-axis="ai"] .rival-stat-fill{background:linear-gradient(90deg,#6a5ab5,#a99ae8)} /* 実測の軸は、公開情報と見分けられるようにする */ .rival-stat[data-measured="true"] .rival-stat-bar{box-shadow:0 0 0 1px #ffd98a88} .rival-stats-wait,.rival-stats-total{display:block;font-size:9px;color:#d8c49a;margin-top:2px} /* --- 自社のステータス表。オフィスの右下 --- */ /* 右上はカメラ操作と掲示板、左下は表示切替が使っている。右下が空き */ .own-stats{position:absolute;right:14px;bottom:14px;z-index:20; width:212px;max-width:calc(100% - 28px);padding:11px 13px; background:#16202bf2;border:3px double #80868b;border-radius:8px; color:#feefc3;box-shadow:0 10px 30px #0b131c66} .own-stats-head{display:flex;align-items:baseline;gap:7px; margin-bottom:6px;flex-wrap:wrap} .own-stats-head strong{font-size:12px;color:#fdd663} .own-stats-src{font-size:9px;color:#bdc1c6} .own-stats-invite{margin-top:6px;width:100%;padding:6px 8px;font-size:9.5px; background:#f9ab00;color:#1f1f1f;border:1px solid #bdc1c6; border-radius:4px;font-weight:700;cursor:pointer} .own-stats-invite:hover{background:#fdd663} /* 狭い画面では、3Dに重ねると読めない。下に回して幅いっぱいに */ @media(max-width:760px){ .own-stats{position:static;width:auto;max-width:none;margin:8px 0 0; border-radius:0;border-left:0;border-right:0} .rival-stat{font-size:10.5px} } /* ヘッダーの会社表示（2026-09-25 卓馬指示）。 タブで会社を切り替えたら、左上もその会社に変わる。 EXTAGE のままだと、別の顧客の画面を自社のものと見間違える。 */ .brand-monogram{display:inline-grid;place-items:center;width:30px;height:30px; border-radius:6px;background:#2d4664;color:#ffe9bd;font-size:12px; font-weight:700;letter-spacing:.02em;flex-shrink:0} .brand-company{font-size:13px;font-weight:700;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:190px} body:has([data-world="fantasy-guild"]) .app-header .brand-company{color:#fff1d0} body:has([data-world="fantasy-guild"]) .brand-monogram{ background:#e3be70;color:#24313d;border:1px solid #f5dca2} @media(max-width:760px){.brand-company{max-width:110px;font-size:12px}} /* ===== 会社ごとの色づけ（2026-09-25 卓馬指示）======================= 「切り替えたら色も少し変わる。ただし違和感がない程度に」 守っていること： ・**文字と背景の色は変えない。** 読みやすさは会社で変わらない ・変えるのは「縁・帯・印」だけ。面を塗ると別のアプリに見える ・混ぜる比率は 8〜22%。色味が分かる下限で止める */ body{--company-color:#0b57d0} /* 会社の名札。ここだけは色がはっきり出てよい */ .brand-monogram{background:color-mix(in srgb,var(--company-color) 58%,#16222f)} /* 節の見出しの下に細い線。どの会社を見ているかの手がかり */ #journey-band,.flow-outputs,.studio-specialists,#creation-feed{ border-top:2px solid color-mix(in srgb,var(--company-color) 22%,transparent)} /* オフィスの枠。既存の 13% より少しだけ強く、輪郭で見せる */ .office-world{ border-color:color-mix(in srgb,var(--company-color) 34%,#d8e0dc)!important} /* 会社の切り替え欄そのもの。選んでいる会社の色を帯びる */ .office-company-brand{ border-left:3px solid color-mix(in srgb,var(--company-color) 55%,transparent); padding-left:9px} /* 進捗や依頼の印。面ではなく点で色を出す */ .office-work-item[data-group=active]{ border-left-color:color-mix(in srgb,var(--company-color) 62%,#4b7dcc)!important} /* 切り替えた瞬間だけ、ごく淡く光らせて気づかせる。 ずっと動かすと鬱陶しいので1回だけ（0.9秒） */ .office-world{transition:border-color .5s ease} @media(prefers-reduced-motion:reduce){.office-world{transition:none}} /* ===== カスタマージャーニーにも、ライバルと同じ光を ================= （2026-09-25 卓馬指示「外周のライバルの光るエフェクトが良い。 カスタマージャーニーにも反応するように」） ライバルは金の輪郭（#ffe0a1）で光る。同じ色・同じ太さを使い、 画面全体で「触れるものは金色に光る」という一貫した合図にする。 */ /* マス。空でも埋まっていても、触れたら光る */ .journey-band .jm-cell{ transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease} /* **空のマスにも同じ光を届ける。** 上流に .jm-cell[data-filled="false"]:hover があり、 そちらの方が詳しいので box-shadow を奪われる。 両方を名指しして、埋まっていても空でも同じ光にする （2026-09-25 実測で判明） */ .journey-band .jm-cell:hover, .journey-band .jm-cell[data-filled="false"]:hover, .journey-band .jm-cell[data-filled="true"]:hover{ border-color:#e0bf7d; box-shadow:0 0 0 2px #ffe0a1,0 6px 16px #c47f2e2e; transform:translateY(-2px)} /* キーボードで辿る人にも同じ合図を出す */ .journey-band .jm-cell:focus-within{ border-color:#e0bf7d; box-shadow:0 0 0 3px #ffe0a1} /* 「＋」の印は、マスに触れた時点で先に光らせる。 どこを押せば埋まるのかが分かる */ .journey-band .jm-cell:hover .jm-add-mark{ box-shadow:0 0 0 2px #ffe0a1,0 0 12px #ffd98a7a} /* 段の見出しと行の見出し。列や行の当たりを追えるようにする */ .journey-band :is(.jm-phase,.jm-row-label,.jm-header-cell){ transition:box-shadow .16s ease} .journey-band :is(.jm-phase,.jm-row-label,.jm-header-cell):hover{ box-shadow:0 0 0 2px #ffe0a1} /* 経験値の帯と点数。成果に触れたときも同じ光 */ .journey-band :is(.jm-score,.jm-todo,.jm-orphan){ transition:box-shadow .16s ease} .journey-band :is(.jm-score,.jm-todo,.jm-orphan):hover{ box-shadow:0 0 0 2px #ffe0a1} /* 押せるものは、輪郭をはっきり。ライバルと同じ扱い */ .journey-band :is(.jm-add,.jm-header-add,.jm-todo-go):focus-visible{ outline:3px solid #ffe0a1!important;outline-offset:2px} @media(prefers-reduced-motion:reduce){ .journey-band :is(.jm-cell,.jm-phase,.jm-row-label,.jm-header-cell, .jm-score,.jm-todo,.jm-orphan){transition:none} .journey-band .jm-cell:hover{transform:none}} /* ===== ギルドの2区画を揃える（2026-09-25 卓馬指示）================= 「仲間に頼もう」と「外周のライバル」を同じ背景にして目立たせる。 同じ色にすると、どちらもゲームの盤面だと分かる。 */ .studio-specialists{ background:linear-gradient(180deg,#1b2b36,#26383a 45%,#4a4230)!important; border-top:4px double #ac8551!important; border-bottom:4px double #ac8551!important; color:#fff2d6!important;padding:18px 22px!important} .studio-specialists .studio-specialists-heading strong{ color:#ffe9bd!important;font-size:15px} .studio-specialists .studio-specialists-heading small{color:#d8c49a!important} /* 中のカードは、暗い地に浮く札にする */ .studio-specialists>button{ background:#fdf6e6!important;border:1px solid #c3ac7d!important; color:#2b3a45!important;box-shadow:0 4px 12px #0a131c4d!important} .studio-specialists>button:hover{ border-color:#ffe0a1!important; box-shadow:0 0 0 2px #ffe0a1,0 6px 16px #0a131c66!important} /* ===== ロックを読めるようにする =================================== 周りが 38% の薄さで、白文字が背景に溶けていた（卓馬指摘）。 外まで暗くして、文字と帯をはっきり出す。 */ .agent-lock{ background:radial-gradient(86% 72% at 50% 46%, #070d16f7 0%,#080f1aef 58%,#0a1320e0 100%)!important} .agent-lock-title{ color:#ffd166!important;font-size:15px!important; text-shadow:0 2px 6px #000,0 0 14px #ffb01f55!important} .agent-lock-say{ color:#fff!important;font-size:12.5px!important; text-shadow:0 1px 4px #000,0 1px 10px #000c!important} /* --- 解除条件。あと何をすれば何点入るか --- */ .agent-lock-todo-head{ font-size:10px;font-weight:800;letter-spacing:.16em; color:#ffd98a;text-shadow:0 1px 4px #000;margin-top:2px} .agent-lock-todo{ list-style:none;margin:0;padding:0;display:grid;gap:3px; width:min(184px,94%)} .agent-lock-todo li{ display:flex;align-items:center;gap:6px; padding:4px 8px;border-radius:5px; background:#12203040;border:1px solid #6d7f94aa; font-size:10.5px;line-height:1.35;text-align:left} /* 埋めかけは、あと少しだと分かるように金で縁取る */ .agent-lock-todo li[data-thin="true"]{ border-color:#c9a45f;background:#2a220f55} .agent-lock-todo-name{ flex:1;min-width:0;color:#fff; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; text-shadow:0 1px 3px #000} .agent-lock-todo-pt{ flex-shrink:0;color:#17242f;background:#ffd166; border-radius:99px;padding:1px 7px;font-size:10px;font-weight:900} @media(max-width:600px){ .agent-lock-todo{width:96%} .agent-lock-todo li{font-size:9.5px;padding:3px 6px} } /* ===== ゲーム性：称号とレベルアップ（2026-09-25 卓馬指示）========== 「自分でレベル上げをしたいというワクワク感を入れたい」 数字だけでは上がった実感が出ない。称号と、次の節目を見せる。 */ .guild-rank{ display:inline-block;padding:3px 12px;border-radius:99px; font-size:11px;font-weight:900;letter-spacing:.1em; border:2px solid;margin:4px 0 2px} .guild-rank[data-tier="wood"]{background:#3b3026;border-color:#7d674f;color:#e6d3b8} .guild-rank[data-tier="bronze"]{background:#4a2f1d;border-color:#b0743c;color:#ffd9a8} .guild-rank[data-tier="silver"]{background:#2b3640;border-color:#a9bcc9;color:#eaf3fa} .guild-rank[data-tier="gold"]{background:#4a3a14;border-color:#e0b25f;color:#ffe9b0} .guild-rank[data-tier="platinum"]{background:#1f3b3a;border-color:#8fd7cf;color:#dffbf7} .guild-rank[data-tier="legend"]{ background:linear-gradient(100deg,#4b2d55,#7a3f5e 60%,#5a3a1f); border-color:#ffc978;color:#fff0c8; box-shadow:0 0 14px #ffc97866} /* 経験値の帯。次の称号の位置に印を立てる */ .guild-team-bar{ position:relative;display:block;width:min(240px,90%);height:10px; margin:6px auto 4px;border-radius:99px; background:#10161f;border:1px solid #00000066;overflow:visible} .guild-team-fill{ display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#c98b4b,#ffe3a1); transition:width .5s ease} .guild-team-next{ position:absolute;top:-4px;width:2px;height:18px;border-radius:2px; background:#fff6dd;box-shadow:0 0 6px #fff6ddb0;font-style:normal} /* レベルが上がった瞬間だけ出す札 */ .guild-levelup{ grid-column:1/-1;display:grid;justify-items:center;gap:2px; padding:10px 14px;margin-bottom:8px;border-radius:10px; background:linear-gradient(180deg,#2b3f27,#1b2a1a); border:2px solid #8fcf6a;color:#eaffdc; animation:guild-levelup-in .45s cubic-bezier(.2,1.3,.4,1)} .guild-levelup[data-rank="true"]{ background:linear-gradient(180deg,#4b3a12,#2a1f08); border-color:#ffc978;color:#fff0c8; box-shadow:0 0 22px #ffc97855} .guild-levelup-title{ font-size:11px;font-weight:900;letter-spacing:.24em} .guild-levelup span{font-size:13px;font-weight:700} @keyframes guild-levelup-in{ 0%{opacity:0;transform:translateY(-10px) scale(.94)} 100%{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .guild-levelup{animation:none} .guild-team-fill{transition:none}} /* デモ用の顧客を用意するボタン（2026-09-25 卓馬指示）。 ほかの設定と見分けがつくよう、少しだけ色を持たせる */ .office-demo-seed{ background:#24405c!important;color:#ffe9bd!important; border:1px solid #c0a061!important;border-radius:5px!important; font-weight:700} .office-demo-seed:hover:not(:disabled){background:#2f5678!important} .office-demo-seed:disabled{opacity:.72;cursor:progress} /* ===== 次にやること（2026-09-25 卓馬指示）========================= この画面はボタンが295個ある。初めて開いた人が迷わないよう、 **いま押すべきものを1つだけ**、いちばん上に大きく出す。 ここだけ押せば前に進む、という状態にする。 */ .flow-next-step{ display:grid;gap:7px;justify-items:start; margin:0 0 16px;padding:18px 22px;border-radius:14px; background:linear-gradient(135deg,#0b57d0,#0b57d0 60%,#0b57d0); border:1px solid #80868b;color:#feefc3; box-shadow:0 8px 24px #0d1a2733} .flow-next-step-eyebrow{ font-size:10px;font-weight:800;letter-spacing:.2em;color:#fdd663} .flow-next-step-title{ font-size:19px;line-height:1.45;font-weight:800;color:#ffffff} .flow-next-step-why{ margin:0;font-size:12.5px;line-height:1.75;color:#dadce0;max-width:62em} .flow-next-step-go{ margin-top:4px;padding:11px 22px;border:0;border-radius:9px; background:#f9ab00;color:#1f1f1f;font-size:14px;font-weight:800; cursor:pointer;box-shadow:0 3px 0 #5f6368} .flow-next-step-go:hover{background:#fdd663} .flow-next-step-go:active{transform:translateY(2px);box-shadow:0 1px 0 #5f6368} .flow-next-step-go:focus-visible{outline:3px solid #bdc1c6;outline-offset:3px} /* 場面で色を変える。「土台づくり」と「確認待ち」は別の気分 */ .flow-next-step[data-tone="setup"]{ background:linear-gradient(135deg,#1f1f1f,#1f1f1f 60%,#1f1f1f)} .flow-next-step[data-tone="check"]{ background:linear-gradient(135deg,#1f1f1f,#0b57d0 60%,#0b57d0)} .flow-next-step[data-tone="grow"]{ background:linear-gradient(135deg,#0b57d0,#0b57d0 60%,#0b57d0)} /* 仲間の一覧まで連れて行ったとき、一度だけ光らせる */ .studio-specialists-hint{ box-shadow:0 0 0 3px #ffe0a1,0 0 24px #ffd98a66!important; transition:box-shadow .3s ease} @media(max-width:600px){ .flow-next-step{padding:14px 15px;border-radius:11px} .flow-next-step-title{font-size:16px} .flow-next-step-go{width:100%;text-align:center} } @media(prefers-reduced-motion:reduce){ .flow-next-step-go:active{transform:none} .studio-specialists-hint{transition:none} } /* 窓の背景。押せることが分かるよう、少しだけ濃くして指先を変える。 （2026-09-25 UX見直し：閉じ方が分からず止まる人を減らす） */ dialog::backdrop{cursor:pointer} /* 畳んである中身の件数（2026-09-25 UX見直し）。 見出しだけでは「空なのか10件あるのか」が分からなかった。 */ .fold-count{ margin-left:auto;padding:1px 9px;border-radius:99px; background:#e8f0fe;color:#3c4043; font-size:10px;font-weight:800;white-space:nowrap; font-variant-numeric:tabular-nums} details[open] > summary .fold-count{opacity:.55} /* 暗い面の折りたたみでは、色を反転する */ .work-menu > summary .fold-count, .office-work-drawer > summary .fold-count{ background:#33465c;color:#dce8f2} /* ===== ボタンの強弱（2026-09-25 UX見直し）========================= 常に見えているボタンが49個あり、どれも同じ強さで並んでいた。 全部が目立つと、どれも目立たない。3段に分ける。 主 … その画面でいちばんやってほしいこと（1画面に1〜2個） 従 … よく使うが、主ではないもの 補助 … 更新・再読み込み・ログアウトなど、道具に近いもの **色や枠しか変えない。** 大きさや位置は動かさないので、 いまの配置に慣れた人が迷子にならない。 */ /* 補助：輪郭だけ。読めるが、目は素通りする */ #my-office :is(#office-progress-refresh,#office-render-retry,#office-motion), #creation-feed #feed-refresh, #calendar-section :is(#cal-today,#cal-prev,#cal-next,#calendar-sync, #account-logout,#sources-toggle,#tools-toggle), #feed-orders-more,#feed-more{ background:transparent!important; border:1px solid #c3ccd6!important; color:#53657a!important; font-weight:600!important; box-shadow:none!important} #my-office :is(#office-progress-refresh,#office-render-retry,#office-motion):hover, #creation-feed #feed-refresh:hover, #feed-orders-more:hover,#feed-more:hover{ background:#eef2f6!important;border-color:#9fb0c0!important} /* 従：面は白のまま、縁を会社の色で。押せることは分かる */ #my-office :is(#office-hire,#office-company-add,#office-view, #office-tool-add,#library-new), #office-roster-open,#client-hero-open{ border:1px solid color-mix(in srgb,var(--company-color) 42%,#c3ccd6)!important; color:#2b3a49!important;font-weight:700!important} /* 主：塗る。ここだけ色の面を持つ */ #office-clients,#office-knowledge,#office-progress-all,#order-open,#generate{ /* 70%。88%だと金の会社で白文字が 3.97 になり、基準(4.5)を下回る （2026-09-25 実測）。70%なら5色すべてで 5.13 以上 */ background:color-mix(in srgb,var(--company-color) 70%,#1d2c3d)!important; border:1px solid color-mix(in srgb,var(--company-color) 60%,#0d1620)!important; color:#fff!important;font-weight:800!important; box-shadow:0 2px 0 #0000002e!important} #office-clients:hover,#office-knowledge:hover, #office-progress-all:hover,#order-open:hover,#generate:hover{ filter:brightness(1.12)} /* どの段でも、キーボードで辿れることは同じように示す */ #my-office button:focus-visible,#creation-feed button:focus-visible{ outline:3px solid #ffd98a!important;outline-offset:2px} /* ===== リーンキャンバス（2026-09-25 卓馬指示）===================== 記事（sairu.co.jp/method/24846）の型。埋める順番が決まっていて、 空のマスは「何が危ないか」と一緒に出す。 */ .lean-canvas{margin:0 0 18px;padding:18px 20px;border-radius:14px; background:#ffffff;border:1px solid #e8eaed} .lc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .lc-title{margin:0;font-size:17px;color:#22303f} .lc-count{font-size:12px;font-weight:800;color:#41566b; background:#eef3f8;border-radius:99px;padding:2px 11px} .lc-note{margin:6px 0 12px;font-size:12px;line-height:1.8;color:#64748b} .lc-error{margin:0;font-size:12px;color:#a5382c} /* 次に埋める1マス */ .lc-next{display:grid;gap:3px;margin:0 0 14px;padding:12px 15px; border-radius:11px;background:#f5f9f4;border:1px solid #cfe0cd} .lc-next-no{font-size:10px;font-weight:800;letter-spacing:.14em;color:#3f7a45} .lc-next-name{font-size:15px;color:#22303f} .lc-next-risk{font-size:11px;line-height:1.7;color:#7b6849} /* 9マス。**リーンキャンバスの決まった並び**（2026-09-25 卓馬指示・画像どおり）。 5列 × 3段。上段と中段で1つの表になり、下段にコストと収益が横長で入る。 この形に意味がある：左が「作る側の話」、右が「顧客の話」、 下が「お金の話」。並びを崩すと、どこを見ればよいか分からなくなる。 課題2 解決策4 価値3 優位性9 顧客1 代替品 主要指標7 コンセプト チャネル5 アーリー ────── コスト構造8 ────── ─── 収益6 ─── */ /* 枠を重ねて1本に見せる（画像の表のように） */ .lc-grid{display:grid;gap:0; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:auto auto auto} /* 上段（画像の1行目） */ .lc-box[data-box="problem"] {grid-column:1;grid-row:1} .lc-box[data-box="solution"] {grid-column:2;grid-row:1} .lc-box[data-box="value"] {grid-column:3;grid-row:1} .lc-box[data-box="advantage"]{grid-column:4;grid-row:1} .lc-box[data-box="segment"] {grid-column:5;grid-row:1} /* 中段。主要指標とチャネルだけが本体のマス。残りは下位項目が入る */ .lc-box[data-box="metrics"] {grid-column:2;grid-row:2} .lc-box[data-box="channels"] {grid-column:4;grid-row:2} /* 下段。横長に2つ */ .lc-box[data-box="cost"] {grid-column:1/4;grid-row:3;min-height:96px} .lc-box[data-box="revenue"] {grid-column:4/6;grid-row:3;min-height:96px} /* 下位項目は、親のマスの真下（中段）に独立した枠で置く */ .lc-sub-cell{display:grid;gap:3px;align-content:start;padding:12px; border:1px solid #1f3050;border-radius:0;background:#fff; text-align:left;cursor:pointer;min-height:100px;margin:-0.5px} .lc-sub-cell:hover{border-color:#e0bf7d;box-shadow:0 0 0 2px #ffe0a1} .lc-sub-cell[data-filled="true"]{background:#f4faf5} .lc-sub-cell[data-sub="alternatives"] {grid-column:1;grid-row:2} .lc-sub-cell[data-sub="concept"] {grid-column:3;grid-row:2} .lc-sub-cell[data-sub="early_adopters"]{grid-column:5;grid-row:2} .lc-sub-label{font-size:13px;color:#1f7a8c;text-align:center;line-height:1.4} .lc-sub-purpose{margin:0;font-size:10px;line-height:1.65;color:#64748b} .lc-sub-body{margin:0;font-size:11px;line-height:1.7;color:#2b3a49} .lc-box{display:grid;gap:4px;align-content:start;position:relative; padding:14px 13px 11px;border-radius:0;text-align:left;cursor:pointer; border:1px solid #1f3050;background:#fff;min-height:124px; margin:-0.5px} .lc-box:hover{border-color:#e0bf7d;box-shadow:0 0 0 2px #ffe0a1} .lc-box:focus-visible{outline:3px solid #ffe0a1;outline-offset:2px} .lc-box[data-filled="true"]{background:#f4faf5} /* 番号は右上の濃紺の四角（画像どおり） */ .lc-no{position:absolute;top:0;right:0;display:grid;place-items:center; width:28px;height:28px;background:#1f3050;color:#fff; font-size:13px;font-weight:800;border-radius:0} /* 見出しは青緑、中央寄せ（画像どおり） */ .lc-label{font-size:14px;color:#1f7a8c;padding-right:30px; text-align:center;line-height:1.4} .lc-text{margin:0;font-size:11.5px;line-height:1.75;color:#2b3a49} .lc-from{margin:0;font-size:10.5px;color:#4f7a5a} .lc-purpose{margin:0;font-size:11px;line-height:1.7;color:#64748b} .lc-risk{font-size:10px;line-height:1.6;color:#a5382c} /* 下位項目（代替品・アーリーアダプター・ハイレベルコンセプト） */ .lc-sub{display:block;margin-top:6px;padding-top:6px; border-top:1px dashed #d6e0ea;font-size:10px;line-height:1.6} .lc-sub-name{color:#8a6a1c;margin-right:6px} .lc-sub-text{color:#64748b} /* 1マスを直す窓 */ .lc-dialog{width:min(560px,92vw);padding:20px;border:1px solid #cbd6e2; border-radius:16px;box-shadow:0 22px 70px #16283a2e} .lc-dialog::backdrop{background:#16283a55} .lc-dialog-head{display:flex;align-items:baseline;gap:10px} .lc-dialog-no{font-size:11px;font-weight:800;color:#fff;background:#22303f; border-radius:99px;padding:2px 10px} .lc-dialog-title{margin:0;font-size:16px;color:#22303f} .lc-dialog-purpose{margin:8px 0 4px;font-size:12px;line-height:1.8;color:#4b5b6b} .lc-dialog-risk{display:block;margin-bottom:10px;font-size:11px;color:#a5382c} .lc-dialog textarea{width:100%;box-sizing:border-box;padding:10px 12px; border:1px solid #cbd6e2;border-radius:9px;font-size:13px;line-height:1.8} .lc-quote-head{display:block;margin:12px 0 6px;font-size:11px; font-weight:700;color:#4b5b6b} .lc-quotes{display:grid;gap:5px;max-height:190px;overflow:auto} .lc-quote{display:grid;gap:2px;padding:8px 10px;text-align:left;cursor:pointer; border:1px solid #dbe4ee;border-radius:8px;background:#fbfdff} .lc-quote:hover{border-color:#e0bf7d;background:#fffaf0} .lc-quote-text{font-size:11.5px;line-height:1.7;color:#2b3a49} .lc-quote-src{font-size:9.5px;color:#8a95a3} .lc-dialog-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:14px} .lc-save{padding:9px 20px;border:0;border-radius:9px;background:#225e62; color:#fff;font-weight:800;cursor:pointer} .lc-close{padding:9px 16px;border:1px solid #c3ccd6;border-radius:9px; background:#fff;color:#53657a;cursor:pointer} /* ===== 2つの見方への内部リンク ===== */ .flow-jump{display:flex;gap:9px;margin:0 0 10px;flex-wrap:wrap} .flow-jump button{display:grid;gap:2px;text-align:left;cursor:pointer; padding:10px 15px;border-radius:11px; border:1px solid #bdc1c6;background:#ffffff} .flow-jump button:hover{border-color:#f9ab00;box-shadow:0 0 0 2px #bdc1c6} .flow-jump-name{font-size:13px;color:#1f1f1f} .flow-jump-note{font-size:10.5px;color:#5f6368} /* 飛んだ先を一度だけ光らせる */ .flow-jump-hit{box-shadow:0 0 0 3px #bdc1c6,0 0 24px #ffd98a55; transition:box-shadow .3s ease} @media(max-width:600px){ /* 狭い画面では1列に積む。**位置の指定も外す**。 外さないと、5列前提の grid-column が残って崩れる（2026-09-25） */ .lc-grid{grid-template-columns:1fr;gap:0} .lc-grid>*{grid-column:1!important;grid-row:auto!important} .flow-jump button{flex:1 1 100%} } @media(prefers-reduced-motion:reduce){.flow-jump-hit{transition:none}} /* ===== 何のための表かを示す（2026-09-25 卓馬指摘）================= 「表を見ても何のためにあるのか理解しにくい」。 9マスを埋めるのが目的ではなく、確かめていないところを 見つけるための道具、という位置づけを毎回示す。 */ .lc-purpose-note{margin:6px 0 10px;padding:10px 14px; border-left:3px solid #1f7a8c;background:#f3f9fa; font-size:12px;line-height:1.85;color:#2b4a52} /* 事実／仮説／空 の内訳 */ .lc-split{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px} .lc-split>span{font-size:11px;font-weight:800;padding:3px 11px; border-radius:99px;border:1px solid} .lc-fact-count{background:#eaf6ec;border-color:#9ccaa4;color:#2f6b39} .lc-guess-count{background:#fff6e5;border-color:#dcb974;color:#7b5a16} .lc-empty-count{background:#f2f5f8;border-color:#c3ccd6;color:#53657a} /* 次に確かめること */ .lc-verify{display:grid;gap:5px;margin:0 0 14px;padding:12px 15px; border-radius:11px;background:#fff8ec;border:1px solid #e3cd9a} .lc-verify-head{font-size:13px;color:#7b5a16} .lc-verify-note{font-size:10.5px;color:#8a7a52} .lc-verify-row{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap; padding-top:4px;border-top:1px dashed #e3cd9a} .lc-verify-name{font-size:12px;color:#22303f} .lc-verify-why{font-size:11px;color:#6b5a3a;line-height:1.7} /* マスの印 */ .lc-mark-fact,.lc-mark-guess{justify-self:start;font-size:9.5px; font-weight:800;padding:1px 8px;border-radius:99px;border:1px solid} .lc-mark-fact{background:#eaf6ec;border-color:#9ccaa4;color:#2f6b39} .lc-mark-guess{background:#fff6e5;border-color:#dcb974;color:#7b5a16} /* 仮説のマスは、左端に細い線を出して見分けられるようにする */ .lc-box[data-fact="false"][data-filled="true"]{box-shadow:inset 4px 0 0 #dcb974} .lc-box[data-fact="true"]{box-shadow:inset 4px 0 0 #9ccaa4} /* 書くときに「確かめたか」を決めさせる */ .lc-fact-toggle{display:grid;gap:3px;margin:12px 0 0;padding:10px 12px; border-radius:9px;background:#f7f9fb;border:1px solid #dbe4ee;cursor:pointer} .lc-fact-toggle input{margin-right:7px} .lc-fact-label{font-size:12px;color:#22303f} .lc-fact-note{font-size:10.5px;line-height:1.7;color:#64748b} /* ===== 待ち時間のパーセント表示（2026-09-25 卓馬指示）============= 「横棒があって、その棒がどんどん右に埋まって100%になる」 **95%で止める。** サーバは途中経過を返さないので、出せるのは 経過時間からの目安だけ。先に100%にして待たせるのが、 いちばん待たされた感じが出る。実際に終わったときだけ100%。 */ .work-progress{display:grid;gap:6px;margin:8px 0;padding:13px 15px; border-radius:11px;background:#f0f4f9;border:1px solid #dadce0} .work-progress-head{display:flex;align-items:baseline;justify-content:space-between; gap:10px} .work-progress-label{font-size:12.5px;font-weight:700;color:#1f1f1f} .work-progress-pct{font-size:17px;font-weight:800;color:#0b57d0; font-variant-numeric:tabular-nums} .work-progress-track{display:block;height:10px;border-radius:99px; background:#d3e3fd;overflow:hidden} .work-progress-fill{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,#0b57d0,#0b57d0); transition:width .18s linear} .work-progress-note{font-size:10.5px;color:#5f6368} /* 終わった／失敗した */ .work-progress[data-state="done"]{background:#e6f4ea;border-color:#bdc1c6} .work-progress[data-state="done"] .work-progress-fill{ background:linear-gradient(90deg,#146c2e,#188038)} .work-progress[data-state="done"] .work-progress-pct{color:#3c4043} .work-progress[data-state="failed"]{background:#fce8e6;border-color:#bdc1c6} .work-progress[data-state="failed"] .work-progress-pct{color:#c5221f} .work-progress[data-state="failed"] .work-progress-fill{background:#d93025} @media(prefers-reduced-motion:reduce){ .work-progress-fill{transition:none}} /* ===== 欄の説明（2026-09-25 卓馬指摘）============================ 「何をここに書いたらいいのかが分からない。URLなのか、テキストなのか。 何のためになるのかまで説明がないと分からない」 カーソルを合わせたら、入れる形・何を書くか・何の役に立つかを出す。 カスタマージャーニーを知らない人でも、これだけで手が動くように。 */ .jm-tip-host{position:relative} .jm-tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:40; display:none!important;width:min(280px,72vw);padding:11px 13px; border-radius:10px;background:#16283a;color:#eef4f9; box-shadow:0 12px 34px #0b1a2a55;text-align:left; pointer-events:none} .jm-tip-host:hover>.jm-tip, .jm-tip-host:focus-within>.jm-tip{display:block!important} /* 三角のしっぽ */ .jm-tip::after{content:'';position:absolute;left:18px;top:100%; border:7px solid transparent;border-top-color:#16283a} .jm-tip-name{display:block;font-size:12px;color:#ffe9bd;margin-bottom:2px} .jm-tip-kind{display:inline-block;font-size:9.5px;font-weight:800; padding:1px 8px;border-radius:99px;background:#2f4a63;color:#cfe2f0; margin-bottom:5px} .jm-tip-what{margin:0 0 6px;font-size:11px;line-height:1.75;color:#eef4f9} .jm-tip-why{margin:0;font-size:10.5px;line-height:1.7;color:#a8c4da; padding-top:5px;border-top:1px solid #2f4a63} /* 画面の右端では、はみ出さないよう左へ寄せる */ .jm-grid>*:nth-child(5n) .jm-tip, .jm-grid>*:nth-child(5n+4) .jm-tip{left:auto;right:0} .jm-grid>*:nth-child(5n) .jm-tip::after, .jm-grid>*:nth-child(5n+4) .jm-tip::after{left:auto;right:18px} @media(max-width:600px){.jm-tip{width:min(240px,86vw)}} /* ===== 外周のライバルを 低く（2026-09-25 卓馬指示）============== 「無駄に縦幅を取っている。縦幅3分の1のサイズ感でOK」 横幅は変えず、縦だけ詰める。怪物・余白・文字を小さくし、 説明文は隠す（押せば詳細が出るので、常時は要らない）。 */ .office-rival-frontier{padding:9px 20px 10px!important;margin:0 0 12px!important} .office-rival-frontier>header{gap:6px!important;margin-bottom:0!important} .office-rival-frontier header h2{font-size:14px!important} /* 説明文と注記は畳む。縦幅のほとんどがこれだった */ .office-rival-frontier>p:not(.rival-status){display:none!important} .office-rival-frontier footer small{display:none!important} .office-rival-frontier footer{margin-top:4px!important;gap:8px!important} /* 怪物を小さく。76px → 42px */ .office-rival-frontier .rival-avatar{ width:42px!important;height:39px!important} .office-rival-frontier .rival-encounters{ gap:8px!important;padding:2px 0!important} .office-rival-frontier .rival-monster{ padding:4px 6px!important;gap:2px!important} .office-rival-frontier .rival-monster strong{font-size:11px!important} .office-rival-frontier .rival-diff-summary{ font-size:9.5px!important;-webkit-line-clamp:1!important} .office-rival-frontier .rival-command{font-size:9px!important} /* 突き上げの幅も、狭い帯に合わせて控えめに */ .office-rival-frontier::before{height:11px!important} /* ===== 全体の流れ（2026-09-25 卓馬指示）========================= 「どの順番でツールを使ったらいいのかが一発で分かるように。 情報を入れた後、他のものが開放されていくチュートリアル的なもの」 4段。済んだもの・いまここ・まだ開いていないもの、を色で分ける。 */ .flow-road{display:flex;gap:0;list-style:none;margin:0 0 12px;padding:0; flex-wrap:wrap} .flow-road li{display:grid;gap:1px;flex:1 1 150px;position:relative; padding:9px 13px 9px 17px; background:#ffffff14;border:1px solid #ffffff26} .flow-road li+li{border-left:0} .flow-road-no{display:inline-grid;place-items:center;width:19px;height:19px; border-radius:50%;font-size:10px;font-weight:800; background:#ffffff2e;color:#ffffff} .flow-road-name{font-size:12.5px;font-weight:700;color:#ffffff} .flow-road-note{font-size:10px;line-height:1.6;color:#bdc1c6} /* 済んだもの */ .flow-road li[data-state="done"]{background:#2f6b3933;border-color:#7fbd8d66} .flow-road li[data-state="done"] .flow-road-no{background:#81c995;color:#1f1f1f} .flow-road li[data-state="done"] .flow-road-no::after{content:'✓'} .flow-road li[data-state="done"] .flow-road-no{font-size:0} .flow-road li[data-state="done"] .flow-road-no::after{font-size:11px} /* いまここ */ .flow-road li[data-state="now"]{background:#e3be7033;border-color:#f9ab00} .flow-road li[data-state="now"] .flow-road-no{background:#f9ab00;color:#1f1f1f} .flow-road li[data-state="now"] .flow-road-name{color:#fdd663} /* まだ開いていない */ .flow-road li[data-state="locked"]{opacity:.55} @media(max-width:600px){ .flow-road li{flex:1 1 100%;padding:8px 12px} .flow-road li+li{border-left:1px solid #ffffff26;border-top:0} } /* ライバル帯をもう一段低く。見積もりで約半分にしかならなかった （2026-09-25：196px → 96px。指示は3分の1＝65px前後）。 見出しと怪物を同じ行に置き、footer も畳んで詰める。 */ .office-rival-frontier{ display:flex!important;align-items:center;gap:14px;flex-wrap:wrap; padding:7px 18px!important} .office-rival-frontier>header{ flex:0 0 auto;flex-direction:row!important;align-items:center;gap:8px} .office-rival-frontier header h2{font-size:13px!important;white-space:nowrap} .office-rival-frontier header>span{display:none!important} .office-rival-frontier header>button{ margin:0!important;min-height:24px!important;font-size:10px!important; padding:2px 8px!important} /* 怪物の列を、残りの幅いっぱいに */ .office-rival-frontier .rival-encounters{ flex:1 1 320px;border-bottom:0!important;min-width:0} .office-rival-frontier .rival-avatar{ width:30px!important;height:28px!important} .office-rival-frontier .rival-monster{ flex-direction:row!important;align-items:center;gap:6px!important; text-align:left;padding:2px 5px!important} .office-rival-frontier .rival-monster strong{font-size:10.5px!important} .office-rival-frontier .rival-diff-summary{display:none!important} /* 自社ステータスへの導線だけ残す */ .office-rival-frontier footer{ flex:0 0 auto;margin-top:0!important;padding:0!important} .office-rival-frontier footer a{font-size:10px!important} .office-rival-frontier .rival-status{ flex:0 0 auto;font-size:10px!important;margin:0!important} /* 攻撃の演出は、低い帯に合わせて控えめに */ .office-rival-frontier::before{height:7px!important} @media(max-width:700px){ .office-rival-frontier{gap:8px;padding:6px 12px!important} .office-rival-frontier .rival-encounters{flex-basis:100%} } /* 怪物を読める大きさに戻す（2026-09-25 卓馬指摘「小さすぎて潰れてる」）。 28pxだと目が4.8px・口が4.2pxで、顔として見えなかった。 52pxなら目が8.8px・口が7.8pxで、種類の描き分けが分かる。 帯は横並びの1行なので、52pxでも全体は70px前後に収まる。 */ .office-rival-frontier .rival-avatar{ width:56px!important;height:52px!important} .office-rival-frontier .rival-monster{ gap:8px!important;padding:3px 7px!important} .office-rival-frontier .rival-monster strong{font-size:11.5px!important} .office-rival-frontier{padding:8px 18px!important} /* 竜の角も、本体に合わせて見えるように */ .office-rival-frontier .rival-avatar[data-rival-kind="dragon"] .rival-horn{ top:-14%;width:22%;height:32%} @media(max-width:700px){ .office-rival-frontier .rival-avatar{ width:46px!important;height:43px!important}} /* ライバルが縦に潰れるのを止める（2026-09-25 卓馬指摘 「縦にキャラクターが伸びて、会社名も縦に英語が並んで見にくい」）。 原因は2つ。 ①古い指定の width:170px / flex:0 1 190px が残り、横並びにしたあとも 幅の取り合いになっていた。縮められると文字が1字ずつ折り返す。 ②怪物も名前も「縮んでよい」設定だったので、両方が潰れた。 **怪物は縮ませない。名前は折り返させない。** 入らなければ はみ出す前に「…」で切る。 */ .office-rival-frontier .rival-encounters{ flex-wrap:nowrap!important;overflow-x:auto; scrollbar-width:thin} .office-rival-frontier .rival-monster{ flex:0 0 auto!important;width:auto!important;max-width:none!important; min-width:0} /* 怪物そのものは、絶対に縮ませない */ .office-rival-frontier .rival-avatar{flex:0 0 auto!important} /* 会社名は1行で。入らなければ「…」 */ .office-rival-frontier .rival-monster strong{ white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis; max-width:15ch;display:block} /* ライバルの会社名が見えるようにする（2026-09-25 卓馬指摘 「対象の会社名が崩れて一切見えない。縦幅を少し伸ばしてもいい」）。 原因は、あとから足した5軸のステータス（width:100%）が同じ行に入り、 名前の居場所が無くなっていたこと。 名前を独立した列にして、ステータスはその下へ回す。 */ .office-rival-frontier .rival-monster{ display:grid!important; grid-template-columns:auto minmax(96px,1fr); grid-template-rows:auto auto; align-items:center;gap:3px 9px!important; padding:5px 9px!important;text-align:left} /* 怪物は左で2行ぶんの高さ */ .office-rival-frontier .rival-avatar{grid-row:1/3;grid-column:1} /* 会社名は右上。**必ず見える場所に置く** */ .office-rival-frontier .rival-monster strong{ grid-column:2;grid-row:1; font-size:12px!important;color:#fff3d8!important; max-width:none!important;align-self:end} /* ステータスは名前の下。行をまたがない */ .office-rival-frontier .rival-stats{ grid-column:2;grid-row:2;width:auto!important;margin:0!important;gap:2px!important} .office-rival-frontier .rival-stat{font-size:8.5px!important;gap:4px!important} .office-rival-frontier .rival-stat-bar{height:4px!important} .office-rival-frontier .rival-stat-name{max-width:5.5em;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* 「差分の全軸を見る」は帯では出さない（押せば詳細が開く） */ .office-rival-frontier .rival-command{display:none!important} /* 名前が入るぶん、帯の高さを少しだけ戻す */ .office-rival-frontier{padding:9px 18px!important} /* 会社の切り替えはオフィスの左上（紺色の帯）に戻した。 2026-09-26 卓馬指示「左上にあった会社名は残す。 右上のプルダウンは削除」 */ /* マスに入れるものを、枠で並べる（2026-09-25 卓馬指示 「テキストの自由記入というより、枠で強制的に何を入れるのかを」）。 */ .jf-count{display:block;margin-top:3px;font-size:11px;color:#64748b} .jf-list{display:grid;gap:12px;max-height:56vh;overflow:auto; margin:12px 0;padding-right:4px} .jf-slot{display:grid;gap:4px;padding:11px 13px; border:1px solid #dbe4ee;border-radius:10px;background:#fbfdff} .jf-slot:focus-within{border-color:#e0bf7d;box-shadow:0 0 0 2px #ffe0a1} .jf-slot-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap; font-size:12.5px;font-weight:700;color:#22303f} .jf-slot-kind{font-size:9.5px;font-weight:800;padding:1px 8px; border-radius:99px;background:#eef3f8;color:#41566b} .jf-slot-what{font-size:10.5px;line-height:1.7;color:#64748b} .jf-slot .jf-input{width:100%;box-sizing:border-box;padding:8px 10px; border:1px solid #cbd6e2;border-radius:7px;font-size:12.5px;line-height:1.7} .jf-slot-why{font-size:10px;line-height:1.65;color:#7b6849; padding-top:4px;border-top:1px dashed #e2e9f1} /* 仲間のキャラを12%小さく（2026-09-26 卓馬指示 「縦の幅が少しでかいので、全体的に10%から15%ほど小さく」）。 絵の列・余白・文字を、同じ割合で縮める。 */ .studio-specialists{padding:19px!important;gap:11px!important} .studio-specialists>button{ grid-template-columns:77px 1fr!important;min-height:55px!important} .studio-specialists .specialist-card-copy{padding:11px!important} .studio-specialists .specialist-card-copy strong{font-size:12px!important} .studio-specialists .specialist-card-copy small{font-size:10px!important} /* 鍵のかかった仲間の錠前も、同じ割合で */ .studio-specialists .agent-lock-shield{ width:58px!important;height:58px!important} .studio-specialists .agent-lock-title{font-size:13px!important} .studio-specialists .agent-lock-say{font-size:11px!important} @media(max-width:900px){ .studio-specialists>button{grid-template-columns:66px 1fr!important} } /* 仲間のキャラとバーチャルオフィスをくっつける（2026-09-26 卓馬指示 「間に少し隙間が空いている。完全にくっつけてOK」）。 上の余白（margin 10px + padding 26px）が隙間になっていた。 二重線も1本に見えるよう、下側の線を消す。 */ .studio-specialists{border-bottom:0!important;margin-bottom:0!important} #my-office{margin-top:0!important;padding-top:0!important} /* 外周のライバルの縦を12%広げる（2026-09-26 卓馬指示 「縦のサイズが足りていない。10%から15%ほど広く」）。 怪物と余白を同じ割合で大きくする。 */ .office-rival-frontier{padding:11px 18px!important} .office-rival-frontier .rival-avatar{ width:63px!important;height:58px!important} .office-rival-frontier .rival-monster strong{font-size:12.5px!important} .office-rival-frontier .rival-stat{font-size:9px!important} .office-rival-frontier .rival-stat-bar{height:5px!important} @media(max-width:700px){ .office-rival-frontier .rival-avatar{ width:52px!important;height:48px!important}} /* 仲間の帯を白に統一（2026-09-26 卓馬指示「背景を白色に統一」）。 下のオフィスとくっつけて、境目の線も出さない。 */ .studio-specialists{ background:#fff!important;color:#2b3a45!important; border-top:0!important;border-bottom:0!important; padding-bottom:0!important} .studio-specialists .studio-specialists-heading strong{color:#22303f!important} .studio-specialists .studio-specialists-heading small{color:#64748b!important} /* カードも白地に。縁だけで区切る */ .studio-specialists>button{ background:#fff!important;border:1px solid #dbe4ee!important; box-shadow:none!important} .studio-specialists>button:hover{ border-color:#e0bf7d!important;box-shadow:0 0 0 2px #ffe0a1!important} /* 白地になったぶん、鍵の錠前まわりも読めるように */ .studio-specialists .agent-lock{ background:radial-gradient(86% 72% at 50% 46%, #070d16f2 0%,#0a1320e8 100%)!important} /* オフィスとの境目に線を出さない（上下を完全にくっつける） */ #my-office{border-top:0!important} /* 見出しを「AIエージェント」に、大きめで（2026-09-26 卓馬指示）。 15px では、下のカードの名前（12px）と差が小さく、 節の見出しに見えなかった。 */ .studio-specialists .studio-specialists-heading strong{ font-size:22px!important;font-weight:800;letter-spacing:.02em; line-height:1.35} .studio-specialists .studio-specialists-heading small{font-size:11.5px!important} @media(max-width:600px){ .studio-specialists .studio-specialists-heading strong{font-size:19px!important}} /* AIエージェントとバーチャルオフィスの境目を滑らかに （2026-09-26 卓馬指摘「境目のデザインがおかしなことになっている」）。 白い帯の下に、角の丸い枠（.office-world）が来ていたため、 継ぎ目が段差として見えていた。上側の角と線を落として、 1つの面として続いて見えるようにする。 */ .studio-specialists{ padding-bottom:14px!important; /* 線は引かない。くっついて見せるのが目的 */ border-bottom:0!important} #my-office .office-world{ border-top:0!important; border-top-left-radius:0!important; border-top-right-radius:0!important; margin-top:0!important} /* オフィスの見出し（My Office）まわりの余白も詰める */ #my-office .office-heading{padding-top:14px!important;margin-bottom:10px!important} /* 会社のツールバーは、白い帯からそのまま続くように */ #my-office .office-world-toolbar{ border-top:0!important;border-radius:0!important} /* つなぎ目の違和感を取る（2026-09-26 卓馬指摘「まだ繋ぎが違和感ある」）。 原因は線や角ではなく、あいだに挟まっていた見出しの塊だった。 YOUR AI TEAM · EXTAGE FLOW My Office（32px） あなたの会社を知る仲間に、次の仕事をたのもう。 「AIエージェント」（22px）より大きい見出しが下に来るので、 別の節が始まったように見えていた。ここは出さない。 */ #my-office .office-heading{display:none!important} #my-office{padding:0 0 20px!important} /* 白い帯から、オフィスの面へそのまま続かせる */ #my-office .office-workspace{margin-top:0!important} #my-office .office-world{ border:0!important;border-radius:0!important; background:color-mix(in srgb,var(--company-color) 8%,#fff)!important} /* ツールバーは、白からの変わり目を柔らかく */ #my-office .office-world-toolbar{ border-bottom:1px solid #e6ecf2!important; background:transparent!important} /* ===== ロック中でも中身が読めるように（2026-09-26 卓馬指摘 「白が薄すぎて見えない。グレーをもっと濃くして裏の文字が見えるように」） opacity:.4 を白地にかけると、文字の実効色が #aab0b5 になり コントラスト2.19（読めない）。0.7 なら 4.70 で基準を満たす。 薄くするのではなく、**灰色の面を敷いて濃さを保つ**。 */ .studio-specialists>button[data-design-locked="true"]{ background:#e8ecf0!important; border-color:#b9c4cf!important} .studio-specialists>button[data-design-locked="true"]>*:not(.design-lock-badge):not(.agent-lock){ opacity:.7!important;filter:grayscale(.75)!important} /* ===== キャラにカーソルを合わせたら動く（2026-09-26 卓馬指示 「ゲームのようにキャラクターが動いたり、ワクワク感があるように」）=== */ .studio-specialists>button{ transition:transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s ease,border-color .18s ease} .studio-specialists>button:hover{ transform:translateY(-3px)} /* 絵だけ、少し跳ねる */ .studio-specialists>button .guild-portrait, .studio-specialists>button .specialist-card-art{ transition:transform .22s cubic-bezier(.3,1.5,.5,1)} /* 絵の拡大はしない（文字に被るため）。動きは下の specialist-bob に集約 */ .studio-specialists>button:hover .guild-portrait, .studio-specialists>button:hover .specialist-card-art{transform:none} .studio-specialists>button:active{transform:translateY(-1px) scale(.99)} /* 鍵のかかった仲間は、触れると錠前が揺れる（開かないことを体で示す） */ .studio-specialists>button[data-design-locked="true"]:hover .agent-lock-shield{ animation:lock-shake .4s ease} @keyframes lock-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px) rotate(-3deg)} 60%{transform:translateX(4px) rotate(3deg)}} /* ===== 鍵が開く瞬間（2026-09-26 卓馬指示 「クリックしたらアンロックして鍵が開くモーション」）========== */ .agent-lock[data-opening="true"]{ animation:lock-open-fade .9s ease forwards;pointer-events:none} .agent-lock[data-opening="true"] .agent-lock-shield{ animation:lock-open-pop .9s cubic-bezier(.3,1.5,.4,1) forwards} /* 錠前の掛け金が外れて跳ね上がる */ .agent-lock[data-opening="true"] .agent-lock-shield i::before{ animation:lock-shackle .5s ease forwards} @keyframes lock-shackle{ 0%{transform:translateX(-50%) rotate(0)} 100%{transform:translateX(-30%) translateY(-6px) rotate(38deg)}} @keyframes lock-open-pop{ 0%{transform:scale(1)} 30%{transform:scale(1.18) rotate(-6deg)} 100%{transform:scale(.4) rotate(14deg);opacity:0}} @keyframes lock-open-fade{ 0%{opacity:1} 55%{opacity:1} 100%{opacity:0}} /* 開いた合図の光 */ .agent-lock[data-opening="true"]::after{ content:'';position:absolute;inset:0;border-radius:inherit; background:radial-gradient(circle at 50% 46%,#ffe0a1cc,transparent 62%); animation:lock-flash .9s ease forwards} @keyframes lock-flash{ 0%{opacity:0;transform:scale(.6)} 40%{opacity:1;transform:scale(1.1)} 100%{opacity:0;transform:scale(1.5)}} @media(prefers-reduced-motion:reduce){ .studio-specialists>button, .studio-specialists>button .guild-portrait, .studio-specialists>button .specialist-card-art{transition:none} .studio-specialists>button:hover{transform:none} .studio-specialists>button:hover .guild-portrait, .studio-specialists>button:hover .specialist-card-art{transform:none} .studio-specialists>button[data-design-locked="true"]:hover .agent-lock-shield, .agent-lock[data-opening="true"], .agent-lock[data-opening="true"] .agent-lock-shield, .agent-lock[data-opening="true"]::after{animation:none} } /* つなぎ目をなくす、3度目（2026-09-26 卓馬指摘「まだ変なつなぎ目」）。 前回は見出しを消したが、まだ残っていた原因はこれ。 ・.office-world に影（box-shadow 0 12px 36px）があり、 境目に暗い帯として出ていた ・オフィス側にだけ左右の余白があり、白い帯と幅が揃っていなかった 影を消し、左右の余白を揃える。 */ #my-office .office-world{ box-shadow:none!important; margin:0!important} /* 白い帯とオフィスの左右を揃える。片方だけ内側に寄ると段差に見える */ .studio-specialists{padding-left:20px!important;padding-right:20px!important} #my-office .office-workspace{padding:0 20px!important} /* 上端の線も出さない */ #my-office .office-stage{border-top:0!important} /* ===== ロック中のカードを、暗い面＋白文字にする （2026-09-26 卓馬指示「白ではなく上の文字に変更するか、 背景をもっと黒くするか、ベストなものを」） 実測で比べた。 白地のまま文字を濃くする → 最大 4.33（薄さ0.7のとき） 地を暗くして文字を白にする → 8.87 暗い面のほうが読めるうえ、金の錠前とも合う。こちらを採る。 */ .studio-specialists>button[data-design-locked="true"]{ background:#1f2a33!important; border-color:#41525f!important} /* 裏の中身は、白寄りの文字で残す。消さずに「何の仲間か」を見せる */ .studio-specialists>button[data-design-locked="true"]>*:not(.design-lock-badge):not(.agent-lock){ opacity:.75!important;filter:grayscale(.45) brightness(1.9)!important} .studio-specialists>button[data-design-locked="true"] .specialist-card-copy strong, .studio-specialists>button[data-design-locked="true"] .specialist-card-copy small{ color:#e8edf1!important} /* 覆いは、下の文字が透けて見える濃さに留める */ .studio-specialists>button[data-design-locked="true"] .agent-lock{ background:radial-gradient(84% 70% at 50% 46%, #0b131ccc 0%,#0e1822b3 100%)!important} /* ===== 触れたときの手応えを強くする（2026-09-26 卓馬指摘 「カーソルを合わせてもいまいち動きが微妙。枠の外が光ったり、 キャラクターが動くなどゲーム性を上げて」） 前回は -3px 動かすだけだった。枠の外を光らせ、絵をはっきり 動かして、押せることが目で分かるようにする。 */ .studio-specialists>button{ position:relative; transition:transform .2s cubic-bezier(.3,1.5,.45,1), box-shadow .2s ease,border-color .2s ease} .studio-specialists>button:hover{ transform:translateY(-6px) scale(1.03)!important; border-color:#e3be70!important; box-shadow:0 0 0 3px #ffe0a1, 0 0 22px 4px #ffd98a88, 0 12px 26px #16283a2e!important; z-index:2} /* 絵は、はっきり跳ねる */ /* 絵の拡大はしない（文字に被るため）。動きは下の specialist-bob に集約 */ .studio-specialists>button:hover .guild-portrait, .studio-specialists>button:hover .specialist-card-art{ transform:none!important; filter:drop-shadow(0 6px 10px #16283a3d)} .studio-specialists>button .guild-portrait, .studio-specialists>button .specialist-card-art{ transition:transform .24s cubic-bezier(.28,1.7,.45,1),filter .2s ease} /* 名前も、ほんの少し前へ出る */ .studio-specialists>button:hover .specialist-card-copy strong{ letter-spacing:.03em;transition:letter-spacing .2s ease} .studio-specialists>button:active{ transform:translateY(-2px) scale(.99)!important} @media(prefers-reduced-motion:reduce){ .studio-specialists>button:hover{transform:none!important} .studio-specialists>button:hover::after{animation:none;opacity:.7} .studio-specialists>button:hover .guild-portrait, .studio-specialists>button:hover .specialist-card-art{transform:none!important} .studio-specialists>button:hover .guild-rig-portrait{animation:none!important} } /* 触れたときの動き（2026-09-26 卓馬指摘 「キャラの絵が名前の文字に被る。光るか、キャラが動く方がいい」）。 **絵を拡大してはいけない。** カードは縦並び（絵→名前）で、絵を 拡大するとその下の名前に重なる。ライルで実際に文字が潰れた。 拡大のかわりに、 ・枠が光る（カードの外側に出るので文字に当たらない） ・キャラが絵枠の中で跳ねる（高さは変えず、中で動く） の2つで手応えを出す。絵枠は overflow:hidden なので、 中で動かすぶんには外へはみ出さない。 */ .studio-specialists>button:hover{ transform:translateY(-4px)!important; border-color:#e0bd74!important; box-shadow:0 0 0 2px #f4d79a, 0 0 18px 2px #ffd98a80, 0 12px 24px #16283a24!important} /* 絵枠は動かさない。中のキャラだけが動く */ .studio-specialists>button .guild-portrait, .studio-specialists>button .specialist-card-art{ transform:none!important;overflow:hidden} .studio-specialists>button:hover .guild-rig-portrait{ animation:specialist-bob .62s cubic-bezier(.34,1.56,.5,1)} @keyframes specialist-bob{ 0%{transform:translateY(0) rotate(0)} 35%{transform:translateY(-5%) rotate(-2.2deg)} 65%{transform:translateY(-1.5%) rotate(1.4deg)} 100%{transform:translateY(0) rotate(0)}} /* ===== AIエージェントとバーチャルオフィスを「1枚の板」にする ========== （2026-09-26 卓馬指摘「つなぎ目が崩れて、かぶっていて非常に汚い。 改版するときに違和感のないクオリティまで持っていきたい」） ここは4回直して4回とも再発した。毎回「隙間を詰める」対症療法を 足していたせいで、原因に触れていなかった。**本当の原因は形が違うこと。** ・上（AIエージェント）＝ 角丸なし・枠線なしの、横いっぱいの帯 ・下（バーチャルオフィス）＝ 角丸12px・1px枠・影つきの「カード」 別々の形を突き合わせているので、角のところで枠線が途切れ、 影が重なって汚れて見えていた。隙間の問題ではない。 直し方は、2つを1枚の板として扱うこと。 ・外周の枠と角丸は「上の帯の上端」と「下のオフィスの下端」にだけ付ける ・突き合わせる辺（帯の下端／オフィスの上端）は、枠も角丸も影も持たない ・左右の枠線は両方に付けて、縦に continuous につなぐ これで、間に線が出ず、横幅も角も完全に一致する。 */ .studio-specialists{ border-left:1px solid #bca371!important; border-right:1px solid #bca371!important; border-top:1px solid #bca371!important; border-bottom:0!important; border-radius:12px 12px 0 0!important; margin-bottom:0!important; box-shadow:none!important} /* 下のオフィスは、上辺を持たない。帯の下端がそのまま続く */ #my-office:has([data-world="fantasy-guild"]), #my-office{ border-left:1px solid #bca371!important; border-right:1px solid #bca371!important; border-top:0!important; border-bottom:1px solid #bca371!important; border-radius:0 0 12px 12px!important; margin-top:0!important; /* 影は板の外側にだけ。上向きの影を消して、境目の汚れを断つ */ box-shadow:0 12px 34px #3e312022!important; clip-path:inset(0 -40px -40px -40px)} /* 突き合わせる辺のすぐ内側に、線に見えるものを置かない */ .studio-specialists{padding-bottom:18px!important} #my-office .office-world{ border-top:0!important;border-radius:0!important; margin-top:0!important;box-shadow:none!important} #my-office .office-world-toolbar{border-top:0!important} /* ===== 案を選ぶ前に「何を見たか」を出す（2026-09-26 卓馬指示）========= リクトはネット上の実文を読んでから案を作る。その出どころを見せずに 承認させると、根拠のない広告を人が通してしまう。 読めなかったURLも隠さない。材料が薄い理由が分かるようにする。 */ .ad-plan-research{ margin:0 0 14px;padding:10px 14px; border:1px solid #dadce0;border-radius:9px;background:#f0f4f9} .ad-plan-research>summary{ cursor:pointer;font-size:12px;font-weight:700;color:#1f1f1f} .ad-plan-research p{margin:10px 0 4px;font-size:11px;color:#5f6368} .ad-plan-source-list,.ad-plan-source-missing{ margin:0;padding-left:18px;display:grid;gap:4px} .ad-plan-source-list li,.ad-plan-source-missing li{ font-size:11px;line-height:1.7;color:#3c4043;overflow-wrap:anywhere} .ad-plan-source-list a{color:#0b57d0} .ad-plan-source-missing li{color:#b06000} /* ===== 案の下に、出来た広告をそのまま出す（2026-09-26 卓馬指示）======= 「制作ボタンを押すと広告が出力し、その画面上でどんな広告が できたのかを表示されるようになっていたらベスト」 別画面へ飛ばすと、どの案から出来たのか分からなくなる。 */ .ad-plan-image{ display:block;width:100%;max-width:340px;margin:0 auto 10px; border:1px solid #dadce0;border-radius:10px; box-shadow:0 6px 18px #16283a1f} .ad-plan-made-meta{display:grid;gap:6px} .ad-plan-made-meta>strong{font-size:12px;color:#1f1f1f} .ad-plan-made-meta ul{margin:0;padding-left:18px;display:grid;gap:3px} .ad-plan-made-meta li{font-size:11px;line-height:1.7;color:#3c4043} .ad-plan-made-meta small{font-size:10px;color:#80868b;line-height:1.6} .ad-plan-open{ justify-self:start;font-size:11px;color:#0b57d0;text-decoration:underline} .ad-plan-progress{margin:4px 0 10px} @media(max-width:700px){.ad-plan-image{max-width:100%}} /* デモ表示の入口（2026-09-26 卓馬指示）。 ログインせずに画面の中身を確かめられるようにする。 「本番の生成」と見分けがつく見た目にする（枠だけのボタン）。 */ .ad-plan-demo-go{ padding:10px 16px;border:1px solid #bdc1c6;border-radius:9px; background:#ffffff;color:#3c4043;font-weight:600;cursor:pointer} .ad-plan-demo-go:hover{background:#e8f0fe;border-color:#9aa0a6} .ad-plan-demo-go:disabled{opacity:.6} /* ===== 出来上がった広告を、大きく上に出す（2026-09-26 卓馬指示）======= 「生成後はこの画面に大きく生成された広告のクリエイティブが見えるように」 案のカードは3列で1枚ぶんが約450px。その中に出すと小さくしか見えない。 ダイアログ上部に専用の枠を置き、画像は縦の高さを基準に大きく見せる。 */ .ad-plan-stage{ margin:0 24px 4px;padding:18px 20px 20px; border:1px solid #dadce0;border-radius:14px;background:#ffffff; box-shadow:0 6px 20px #16283a12; display:grid;gap:14px;justify-items:center} .ad-plan-stage[hidden]{display:none!important} .ad-plan-stage-head{width:100%;display:grid;gap:3px;justify-items:center; text-align:center} .ad-plan-stage-head>strong{font-size:17px;color:#1f1f1f;line-height:1.5} .ad-plan-stage-head>small{font-size:11px;color:#5f6368} /* 画像は高さを基準にする。縦長なので幅で決めると画面からはみ出る */ .ad-plan-stage-image{ display:block;max-height:62dvh;max-width:min(100%,520px); width:auto;height:auto;object-fit:contain; border:1px solid #dadce0;border-radius:12px; box-shadow:0 10px 30px #16283a26;background:#ffffff} .ad-plan-stage-meta{width:100%;max-width:560px;display:grid;gap:6px} .ad-plan-stage-meta>strong{font-size:12px;color:#1f1f1f} .ad-plan-stage-meta ul{margin:0;padding-left:18px;display:grid;gap:3px} .ad-plan-stage-meta li{font-size:11.5px;line-height:1.75;color:#3c4043} .ad-plan-stage-meta small{font-size:10.5px;color:#80868b;line-height:1.6} .ad-plan-stage .ad-plan-progress{width:100%;max-width:520px} @media(max-width:760px){ .ad-plan-stage{margin:0 12px 4px;padding:14px} .ad-plan-stage-image{max-height:52dvh}} /* ロック中でも中身を見られる入口（2026-09-26 卓馬指示）。 解除には会社情報が要るが、画面の作りを確かめるだけなら手前で見せる。 */ .agent-lock-peek{ margin-top:10px;padding:8px 14px;border:1px solid #e3c98a;border-radius:8px; background:#fff6e2;color:#4a3a16;font-size:11.5px;font-weight:700; cursor:pointer;pointer-events:auto} .agent-lock-peek:hover{background:#ffeec9;border-color:#d4b76a} /* 施策を一覧から消すボタン（2026-09-26 卓馬指示）。 実体は「見送り」への変更で、記録は残る。誤って押しても戻せる。 */ .growth-room-drop{ padding:4px 10px;border:1px solid #dcc6c2;border-radius:7px; background:#fff;color:#8a4034;font-size:11px;cursor:pointer} .growth-room-drop:hover{background:#fdf1ef;border-color:#c2564a} .growth-room-drop:disabled{opacity:.5} /* 配信面の選択（2026-09-27）。面ごとに寸法とセーフゾーンが違うので、 作る前に選ぶ。無いとフィードしか作れなかった。 */ .ad-plan-face{display:flex;align-items:center;gap:8px} .ad-plan-face>span{font-size:11.5px;color:#5f6368;white-space:nowrap} .ad-plan-face select{ padding:8px 10px;border:1px solid #bdc1c6;border-radius:8px; background:#ffffff;font:inherit;font-size:12.5px;color:#1f1f1f} /* 「この広告で出す」の記録（2026-09-27）。 配信後に数字を見て型を更新するとき、どれを出したかが要る。 */ .ad-plan-approve{ justify-self:start;margin-top:6px;padding:9px 16px; border:0;border-radius:9px;background:#0b57d0;color:#ffffff; font-size:12px;font-weight:700;cursor:pointer} .ad-plan-approve:hover{background:#0b57d0} .ad-plan-approve:disabled{opacity:.6;cursor:default} .ad-plan-approve[data-done="true"]{background:#146c2e} /* ===== ライル（マーケティング設計AI）の成果物（2026-09-27 卓馬指示） 聞き取り画面しか無く、答えても何も出てこなかった。 顧客の顧客がたどる道と、誰に何を言うかを1画面で見せる。 */ .design-output{padding:0 24px 24px;display:grid;gap:18px} .design-score{ display:flex;align-items:baseline;gap:14px;padding:14px 18px; border-radius:12px;border:1px solid #bdc1c6;background:#fef7e0} .design-score[data-open="true"]{border-color:#bdc1c6;background:#e6f4ea} .design-score>strong{font-size:20px;color:#1f1f1f} .design-score>span{font-size:12px;color:#5f6368} .design-journey,.design-axes{ padding:18px 20px;border:1px solid #dadce0;border-radius:12px;background:#ffffff} .design-journey h3,.design-axes h3{margin:0 0 4px;font-size:15px;color:#1f1f1f} .design-journey>small,.design-axes>small{ display:block;margin-bottom:12px;font-size:11px;color:#5f6368} .design-stages{margin:0;padding-left:20px;display:grid;gap:9px} .design-stages li{font-size:12.5px;line-height:1.7;color:#3c4043} .design-stages li>strong{display:block;font-size:12px;color:#1f1f1f} /* 未入力の段を薄くしない（2026-09-27）。**埋めてほしい場所ほど 見えなくなっていた。** 薄くする代わりに、色で「ここが空」と示す */ .design-stages li[data-filled="false"]{border-left:3px solid #f9ab00} .design-stages li[data-filled="true"]{border-left:3px solid #9aa0a6} .design-stages li{ padding:11px 13px;border-radius:9px;background:#ffffff; border:1px solid #e8eaed;list-style:none} .design-stages{padding-left:0} .design-stage-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .design-stage-head>strong{font-size:13.5px;color:#1f1f1f} .design-stage-head>em{font-style:normal;font-size:11px;color:#80868b} .design-stage-head>span{ margin-left:auto;font-size:10px;padding:2px 9px;border-radius:999px; background:#e8f0fe;color:#5f6368} .design-stages li[data-filled="false"] .design-stage-head>span{ background:#feefc3;color:#8a4b00} .design-stage-why{margin:5px 0 9px;font-size:11.5px;line-height:1.7;color:#5f6368} /* 1項目ぶんの入力欄。何を入れるか・なぜ要るかを必ず添える */ .design-field{ margin-top:9px;padding:10px 11px;border-radius:8px; background:#ffffff;border:1px solid #e8eaed} .design-field[data-filled="true"]{background:#e6f4ea;border-color:#bdc1c6} .design-field>label{display:block;font-size:12px;color:#1f1f1f;font-weight:600} .design-field textarea{ display:block;width:100%;margin-top:5px;padding:7px 9px;box-sizing:border-box; border:1px solid #dadce0;border-radius:6px;font:inherit;font-size:12px; line-height:1.7;resize:vertical} .design-field-help{display:grid;gap:2px;margin-top:6px} .design-field-help>span{font-size:10.5px;line-height:1.65;color:#80868b} .design-field-save{ margin-top:7px;padding:5px 14px;font-size:11.5px;border-radius:6px; border:1px solid #bdc1c6;background:#ffffff;color:#1f1f1f;cursor:pointer} .design-field-save:hover:not(:disabled){background:#e8f0fe} .design-field-said{margin-left:9px;font-size:10.5px;color:#5f6368} .design-lead{margin:2px 0 0;font-size:12.5px;line-height:1.8;color:#3c4043} .design-why{ margin:9px 0 0;padding:9px 11px;border-radius:8px; background:#f0f4f9;font-size:11.5px;line-height:1.75;color:#3c4043} .design-journey-count{margin:11px 0 9px;display:flex;gap:8px;align-items:baseline} .design-journey-count>strong{font-size:16px;color:#1f1f1f} .design-journey-count>span{font-size:11px;color:#80868b} .design-journey>p{margin:12px 0 0;font-size:11.5px;line-height:1.8;color:#5f6368} .design-axis{ margin-bottom:10px;padding:13px 15px;border-radius:10px; border:1px solid #e8eaed;background:#f0f4f9} .design-axis>strong{font-size:13.5px;color:#1f1f1f} .design-axis>em{ margin-left:8px;font-style:normal;font-size:10px;padding:2px 8px; border-radius:999px;background:#e8f0fe;color:#3c4043} .design-axis>p{margin:7px 0 0;font-size:12px;line-height:1.75;color:#3c4043} .design-axis>small{ display:block;margin-top:7px;font-size:10.5px;line-height:1.7;color:#80868b} @media(max-width:700px){.design-output{padding:0 12px 16px}} /* ライルの設計図：集客の全体像・9マス・軸の手直し（2026-09-27）。 マーケが分からない人が見る前提。**空いている場所を目立たせる。** 薄くして隠すと、埋めてほしいところほど見えなくなる */ .design-funnel,.design-canvas{ margin-top:16px;padding:14px 16px;border-radius:11px; border:1px solid #e8eaed;background:#ffffff} .design-funnel h3{margin:0 0 4px;font-size:15px;color:#1f1f1f} .design-funnel>p{margin:0 0 10px;font-size:12px;line-height:1.8;color:#5f6368} .design-funnel-stages{margin:0;padding-left:0;display:grid;gap:8px} .design-funnel-stages li{ list-style:none;padding:10px 12px;border-radius:8px; background:#ffffff;border:1px solid #e8eaed} .design-funnel-stages li[data-filled="true"]{border-left:3px solid #9aa0a6} .design-funnel-stages li[data-filled="false"]{border-left:3px solid #f9ab00} .design-funnel-has{margin:6px 0 0;font-size:11.5px;line-height:1.7;color:#3c4043} .design-funnel-gap{margin:6px 0 0;display:grid;gap:2px} .design-funnel-gap>strong{font-size:11.5px;color:#b06000} .design-funnel-gap>span{font-size:10.5px;line-height:1.65;color:#80868b} .design-note{margin:11px 0 0;font-size:11.5px;line-height:1.8;color:#5f6368} /* 9マスは畳んでおく。初見で9マス広げると手が止まる */ .design-canvas>summary{cursor:pointer;display:flex;gap:9px;align-items:baseline} .design-canvas>summary>strong{font-size:14px;color:#1f1f1f} .design-canvas>summary>span{font-size:11px;color:#80868b} .design-canvas>p{margin:9px 0 0;font-size:11.5px;line-height:1.8;color:#5f6368} .design-canvas-guess{color:#b06000!important} .design-canvas-grid{ margin-top:11px;display:grid;gap:8px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr))} .design-canvas-grid>article{ padding:10px 11px;border-radius:8px;background:#ffffff; border:1px solid #e8eaed} .design-canvas-grid>article[data-filled="false"]{border-left:3px solid #f9ab00} .design-canvas-grid>article[data-filled="true"]{border-left:3px solid #9aa0a6} .design-canvas-grid>article>strong{font-size:12px;color:#1f1f1f} .design-canvas-grid>article>p{ margin:5px 0 0;font-size:11px;line-height:1.7;color:#5f6368} .design-canvas-grid>article>small{ display:block;margin-top:5px;font-size:10px;line-height:1.6;color:#b06000} /* 訴求軸の手直し */ .design-axis-edit{margin-top:9px} .design-axis-edit>summary{ cursor:pointer;font-size:11.5px;color:#3c4043;padding:3px 0} .design-axis-edit label{display:block;margin-top:8px;font-size:11.5px; color:#1f1f1f;font-weight:600} .design-axis-edit textarea{ display:block;width:100%;margin-top:4px;padding:7px 9px;box-sizing:border-box; border:1px solid #dadce0;border-radius:6px;font:inherit;font-size:12px; line-height:1.7;resize:vertical} .design-axis-edit label>small{ display:block;margin-top:3px;font-size:10px;color:#80868b;font-weight:400} .design-axis-drop{ margin:7px 0 0 8px;padding:5px 12px;font-size:11.5px;border-radius:6px; border:1px solid #bdc1c6;background:#ffffff;color:#5f6368;cursor:pointer} .design-axis-drop:hover:not(:disabled){background:#fce8e6} .design-axis-said{margin-left:9px;font-size:10.5px;color:#5f6368} /* 足りないものを効く順に */ .design-gaps{ margin-top:11px;padding:12px 14px;border-radius:10px; background:#fef7e0;border:1px solid #dadce0} .design-gaps>strong{display:block;font-size:12.5px;color:#b06000} .design-gap{ margin-top:8px;display:grid;grid-template-columns:auto 1fr; gap:3px 10px;align-items:baseline} .design-gap>span{ grid-row:span 2;font-size:12px;font-weight:700;color:#8a4b00; padding:2px 9px;border-radius:999px;background:#feefc3} .design-gap>strong{font-size:12px;color:#1f1f1f} .design-gap>small{font-size:10.5px;line-height:1.65;color:#80868b} /* 入力の最適化スコア（2026-09-27 卓馬指示：Meta広告の最適化スコアを マーケ版にする）。48欄をいきなり並べると入れる前に心が折れるので、 いまの点数と「この1手であと何点」を先頭に置く。 帯で色を変える。数字だけより、色のほうが速く伝わる */ /* スコア枠（2026-09-28 卓馬指示）。 枠の中を2枚に分け、右半分をキャラクターにする。 左 … 点数・帯・横棒 ／ 右 … キャラの立ち絵 点が上がるとキャラの様子が変わり、埋める手応えになる */ .intake-score{ margin:0 0 14px;padding:20px 24px 18px;border-radius:var(--r-l); display:block;border:1px solid var(--line);background:var(--sheet); box-shadow:var(--shadow)} /* 帯の上段（2026-09-29 卓馬指摘：「無駄にスペースがあってデザインが しょぼい」）。列は 点数 / 文 / キャラ の3つ。 **文の列に 1fr を与えていたので、短い1行のために横が大きく空いていた。** 文は読める幅（max-width）で止め、余りはキャラ側へ寄せる。 gap も 28px は開きすぎ。**空白は「余白」ではなく「隙間」に見えていた** */ .intake-score-top{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; gap:10px 20px;align-items:center; padding-bottom:14px;border-bottom:1px solid var(--line)} .intake-score-status{display:contents} .intake-score-side{ min-width:0;max-width:30em;display:grid;gap:3px; justify-self:start;text-align:left} /* 横棒5本は右寄せの一列に。上段の中で完結させる */ .intake-score-status>.intake-stats{ grid-column:1 / -1;padding-top:14px;border-top:1px solid var(--line); display:grid;gap:3px 26px; grid-template-columns:repeat(auto-fit,minmax(178px,1fr))} /* キャラの立ち絵。枠の右半分を使う */ /* キャラは帯の右端に置く。Google広告が右側に広告のプレビューを 置くのと同じ位置（2026-09-28） */ .intake-score-hero{ position:relative;display:grid;place-items:center; width:132px;min-height:132px} /* 立ち絵は2通りで描かれる（2026-09-28）。 スプライト … guild-roster.png の切り出し（背景画像） 3Dリグ … office-3d.js が canvas に描き込む（.has-guild-rig） ライルはスプライトの座標を持たないので、実際には後者で出る。 **両方に効く指定にする。**片方だけだと何も出ない */ .intake-score-hero .guild-portrait{ width:100%;max-width:none;margin:0 auto;border-radius:var(--r-m); box-shadow:var(--shadow); animation:intake-hero-breathe 3.4s ease-in-out infinite; transform-origin:50% 100%} .intake-score-hero .guild-rig-portrait{ width:100%;height:100%;object-fit:cover;border-radius:inherit} /* 背景は塗らない。3Dリグが役ごとの背景を描き込む （test_portrait_backdrop が「一色で塗るな」と見張っている。 並べたとき誰がどの役か分からなくなるため） */ .intake-score-hero .guild-role-crest{ position:absolute;left:50%;top:44%;transform:translate(-50%,-50%); width:52px;height:52px;color:#7d97ad} .intake-score-hero .guild-role-crest{display:none} /* 息をしているように、ゆっくり上下させる。 速い動きは入力の邪魔になるので、ごく小さく */ @keyframes intake-hero-breathe{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.012)} } /* 点が上がるほど元気に見せる */ .intake-score-hero[data-band="good"] .guild-portrait{ animation-duration:2.2s;filter:drop-shadow(0 4px 14px #5aa06a33)} .intake-score-hero[data-band="ok"] .guild-portrait{ animation-duration:2.8s;filter:drop-shadow(0 4px 12px #5a8fc733)} .intake-score-hero[data-band="empty"] .guild-portrait{ animation-duration:4.6s;opacity:.82} /* 吹き出しは廃止（2026-09-28）。隣の帯と同じことを言っていた */ /* キャラを大きくしたぶん、左が狭いと横棒が潰れる（2026-09-28）。 左列が細いときは、横棒を枠の全幅に移して下に置く。 **棒が読めないなら、並べる意味がない** */ @media (max-width:1400px){ .intake-score-hero{width:106px;min-height:106px} } @media (prefers-reduced-motion:reduce){ .intake-score-hero .guild-portrait{animation:none} } @media (max-width:640px){ .intake-score-top{grid-template-columns:auto 1fr;gap:12px} .intake-score-hero{display:none} } /* 帯は左の線1本で示す。面ごと塗ると枠が4色に見えて落ち着かない。 **4段とも明示する。**既定任せだと、指定し忘れと区別が付かない */ .intake-score{border-left:3px solid var(--accent)} .intake-score[data-band="good"]{border-left-color:var(--good)} .intake-score[data-band="ok"]{border-left-color:var(--accent)} .intake-score[data-band="low"]{border-left-color:var(--warn)} .intake-score[data-band="empty"]{border-left-color:var(--ink-3)} /* 点数（2026-09-28 卓馬指示：Google広告の最適化スコア画面に寄せる）。 あちらは大きな数字の下に細い棒を1本置くだけ。 輪より場所を取らず、残りどれだけかまで見える */ .intake-score-dial{display:grid;gap:9px;min-width:176px} .intake-score-big{display:flex;align-items:baseline;gap:4px} .intake-score-big>strong{ font-size:46px;line-height:1;color:var(--ink); letter-spacing:-.035em;font-variant-numeric:tabular-nums} .intake-score-big>span{font-size:12px;color:var(--ink-3)} .intake-score-track{ height:6px;border-radius:999px;background:var(--sheet-2); border:1px solid var(--line);overflow:hidden} .intake-score-fill{ display:block;height:100%;width:calc(var(--pct,0)*1%);border-radius:999px; background:var(--ring,#0b57d0);transition:width .5s ease} .intake-score[data-band="good"]{--ring:#5f6368} .intake-score[data-band="low"]{--ring:#f9ab00} .intake-score[data-band="empty"]{--ring:#9aa0a6} /* Lv. の字は小さく、数字を主役にする */ .intake-score-lv{ font-size:10px;line-height:1;color:var(--ink-3); letter-spacing:.1em;text-transform:uppercase} .intake-score-side>strong{ display:block;font-size:17px;line-height:1.35;color:var(--ink); letter-spacing:.01em} .intake-score-side>p{margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--ink-2)} .intake-score-goal{ display:inline-block;margin-top:7px;padding:3px 10px;border-radius:999px; background:#e8f0fe;font-size:11px;color:#3c4043} /* 推奨アクション。押すとその欄へ飛ぶ */ .intake-score-actions{grid-column:1 / -1;padding-top:16px} .intake-score-actions>h4{margin:0 0 6px;font-size:11.5px;color:#3c4043} /* 推奨はカードで並べる（2026-09-28 卓馬指示：Google広告の最適化 スコア画面と同じ作法）。1件ずつが独立して読める。 見出し・理由・操作の順に縦へ積み、数字は右上に置く */ /* 推奨は全幅に並べる。Google広告は3列で見せる */ .intake-score-list{ display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(256px,1fr))} .intake-score-action{ margin:0;padding:13px 14px;border-radius:var(--r-m);display:grid;gap:8px; align-content:start;text-align:left; border:1px solid var(--line);background:var(--sheet); transition:border-color .15s ease,box-shadow .15s ease} .intake-score-action:hover{border-color:var(--line-2);box-shadow:var(--shadow)} .intake-score-card-head{display:flex;align-items:baseline;gap:8px} .intake-score-card-head>strong{ font-size:13.5px;color:var(--ink);flex:1;min-width:0;letter-spacing:.01em} .intake-score-action[data-gone="1"]{opacity:.7;background:#f0f4f9} /* 推奨事項／却下済みのタブ */ .intake-score-tabs{display:flex;gap:7px;margin-bottom:9px} .intake-score-tab{ padding:5px 13px;border-radius:999px;font-size:11.5px;cursor:pointer; border:1px solid #dadce0;background:#ffffff;color:#5f6368} .intake-score-tab[aria-pressed="true"]{ background:#e8f0fe;border-color:#bdc1c6;color:#1f1f1f;font-weight:600} .intake-score-buttons{display:flex;gap:7px;white-space:nowrap} .intake-score-apply{ padding:7px 16px;border-radius:var(--r-s);font-size:12px;cursor:pointer; border:1px solid transparent;background:var(--accent);color:#ffffff; font-weight:600;letter-spacing:.02em;transition:filter .15s ease} .intake-score-apply:hover:not(:disabled){filter:brightness(1.08)} /* 「非表示」は滅多に押さない操作（2026-09-28 卓馬指摘：ごちゃごちゃ して見える）。枠線付きで「入力する」と同じ強さで並んでいた。 文字だけにして、行の中で主役をひとつにする */ .intake-score-hide{ padding:6px 8px;border:0;background:none;font:inherit;font-size:11px; color:var(--ink-3);cursor:pointer} .intake-score-hide:hover:not(:disabled){color:var(--ink-2);text-decoration:underline} .intake-score-restore{ padding:6px 13px;border-radius:7px;font-size:12px;cursor:pointer; border:1px solid #dadce0;background:#ffffff;color:#5f6368} .intake-score-restore:hover:not(:disabled){background:#f1f3f4} .intake-score-effect{color:#3c4043!important} .intake-score-empty{margin:0;font-size:12px;color:#5f6368} .intake-score-gain{ flex:none;font-size:11.5px;font-weight:700;color:var(--good); padding:3px 10px;border-radius:999px;background:var(--good-soft); white-space:nowrap;font-variant-numeric:tabular-nums} .intake-score-act-mid{display:grid;gap:2px;min-width:0} .intake-score-act-mid:empty{display:none} .intake-score-act-mid>small{font-size:11px;line-height:1.7;color:var(--ink-2)} /* 操作はカードの一番下に */ .intake-score-buttons{display:flex;gap:8px;align-items:center} .intake-score-go{font-size:11.5px;color:#3c4043;white-space:nowrap} /* 飛んだ先を光らせる。どこへ来たのか分からないと入力が始まらない */ .intake-cell[data-spot="1"]{ border-radius:8px;box-shadow:0 0 0 3px #dadce0; transition:box-shadow .3s ease} @media (max-width:640px){ .intake-score{grid-template-columns:1fr;justify-items:center;text-align:center} .intake-score-side{text-align:center} .intake-score-action{grid-template-columns:auto 1fr;text-align:left} .intake-score-go{display:none} } /* 入力欄を「穴埋め」に近づける（2026-09-27 卓馬指摘：入れようと思う までに労力がかかる）。48欄あるので、埋まった欄と空の欄が一目で 分かること、例が常に見えていることの2つを守る */ /* 埋まった欄は左の線で示す。**塗りではなく線1本。** 44欄を塗ると画面が色だらけになる */ .intake-cell{border-left:2px solid transparent;padding-left:9px; transition:border-color .2s ease} .intake-cell[data-filled="true"]{border-left-color:var(--good)} .intake-cell-hint{ margin:4px 0 0;font-size:10px;line-height:1.6;color:var(--ink-3)} .intake-optional{ margin-left:6px;font-size:9.5px;padding:1px 6px;border-radius:999px; background:#e8f0fe;color:#5f6368;font-weight:400} /* 設計図から入力画面へ行く口（2026-09-27）。 ライルを押すと設計図が開くだけで、最適化スコアの出る入力画面へ 行く道がどこにも無かった。点数を上げようがない状態だった */ .design-edit-open{ padding:7px 15px;border-radius:8px;font-size:12px;cursor:pointer; border:1px solid #bdc1c6;background:#ffffff;color:#1f1f1f} .design-edit-open:hover{background:#e8f0fe} /* 入力し終わった後に出す全体設計図と提案資料（2026-09-27 卓馬指示）。 1ページ1メッセージで並べる。文章を敷き詰めない */ .intake-summary-open{ padding:8px 17px;border-radius:8px;font-size:12.5px;cursor:pointer; border:1px solid #9aa0a6;background:#e8f0fe;color:#3c4043;font-weight:600} .intake-summary-open:hover:not(:disabled){background:#d3e3fd} .design-summary{display:grid;gap:11px} .design-summary-warn{ margin:0;padding:10px 13px;border-radius:9px;font-size:11.5px; line-height:1.75;background:#fef7e0;border:1px solid #dadce0;color:#8a4b00} .design-page{ padding:14px 16px;border-radius:11px; border:1px solid #e8eaed;background:#ffffff} .design-page[data-kind="cover"]{background:#f0f4f9;border-color:#bdc1c6} .design-page>h3{margin:0 0 8px;font-size:15px;color:#1f1f1f} .design-page ul{margin:0;padding-left:19px;display:grid;gap:5px} .design-page li{font-size:12.5px;line-height:1.8;color:#3c4043} .design-page-note{ display:block;margin-top:9px;padding-top:8px;border-top:1px solid #f1f3f4; font-size:10.5px;line-height:1.7;color:#80868b} .design-summary-tools{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px} /* どの力が育っているか（2026-09-27 卓馬指示：ゲームっぽく横棒5本）。 点数ひとつでは、何が強くて何が弱いかが分からない。 項目名・横棒・★・件数を1行に並べ、横に読めるようにする */ .intake-stats{grid-column:1 / -1;margin-top:2px} /* 節の見出し。小さく・字間を開けて「ラベル」に見せる */ .intake-stats>h4,.intake-score-actions>h4{ margin:0 0 10px;font-size:10px;color:var(--ink-3);font-weight:700; letter-spacing:.13em} /* 帯の中の行間（2026-09-28）。Google広告は要素どうしを離して置く。 詰めるほど情報量は増えるが、安く見える。**余白で格を出す** （2026-09-29：帯の字は上の .intake-score-side>strong で決める。 ここで1行だけ上書きすると、どちらが効くのか追えなくなる） */ .intake-stat{padding:3px 0} .intake-stat-name{font-size:11.5px;letter-spacing:.01em} /* 横棒は細く長く。太い棒は野暮ったい */ .intake-stat-bar{height:6px} /* カードの中。見出しと理由の間を少し空ける */ .intake-score-action{gap:9px} .intake-score-act-mid>small{color:var(--ink-2)} .intake-stat{ display:grid;grid-template-columns:5.2em minmax(40px,1fr) auto; gap:9px;align-items:center;padding:2px 0} .intake-stat-name{font-size:12px;color:var(--ink-2);font-weight:600} .intake-stat-bar{ height:7px;border-radius:999px;background:var(--sheet-2); border:1px solid var(--line);overflow:hidden} .intake-stat-fill{ display:block;height:100%;border-radius:999px; width:calc(var(--pct,0)*1%);background:var(--accent); transition:width .45s cubic-bezier(.4,0,.2,1)} .intake-stat[data-done="true"] .intake-stat-fill{background:var(--good)} .intake-stat-level{ font-size:11px;color:#3c4043;text-align:right;white-space:nowrap} .intake-stat-count{ font-size:10.5px;color:var(--ink-3);white-space:nowrap; font-variant-numeric:tabular-nums} @media (max-width:640px){ .intake-stat{grid-template-columns:4.5em 1fr auto} } /* 1枚に詰めるための調整（2026-09-27）。 見出しは小さく、余白は最小限に。**読めなくならない範囲で** */ .intake-col>h3{margin:0 0 6px;font-size:12px;color:#3c4043;font-weight:700} .intake-wide>h3{margin:0 0 2px;font-size:13px} .intake-wide .intake-group-why{margin:0 0 7px;font-size:10.5px;color:#80868b} .intake-wide .intake-field{padding:0;margin-bottom:8px;border:0;background:none} .intake-wide .intake-field label{font-size:12px} .intake-wide .intake-field textarea{min-height:56px} .intake-wide .intake-field details{margin-top:4px;font-size:11px} /* 見た目の仕上げ（2026-09-28 画面を見て調整）。 直したのは4つ。 ブロックの進み具合が「0 / 4」の文字だけで、埋まった感じが出ない 必須と任意の札が同じ強さで、必須が目立たない 列の見出し（相手を特定する等）が本文に埋もれている 入力済みの欄と空の欄の差が弱い */ /* 列の見出し。上に線を引いて、3つの塊であることを先に見せる */ .intake-col>h3{ margin:0 0 7px;padding:0 0 5px;font-size:12px;color:#0b57d0; font-weight:700;letter-spacing:.04em;border-bottom:2px solid #dadce0} /* ブロックの見出しと進み具合。件数を小さな棒に変える */ .intake-block{position:relative;overflow:hidden} .intake-block h4{font-size:12px;color:#1f1f1f;font-weight:700} .intake-block-count{ flex:none;margin-left:auto;font-size:10px;font-weight:700;color:var(--ink-3); background:var(--sheet-2);border:1px solid var(--line); border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums} /* 全部埋まったブロックは、上辺の色で分かるようにする */ .intake-block[data-full="true"]{border-color:#bdc1c6} .intake-block[data-full="true"] .intake-block-count{ background:var(--good-soft);border-color:#bdc1c6;color:var(--good)} /* 必須の札を強く、任意は弱く。いまは同じ強さで並んでいる */ .intake-cell .intake-required{ background:#fce8e6;color:#c5221f;font-weight:700;font-size:9.5px; border-radius:999px;padding:1px 7px} .intake-cell .intake-optional{ background:transparent;color:#9aa0a6;font-weight:400;font-size:9.5px;padding:1px 4px} /* 入力済みの欄。左の線だけでなく、背景も薄く変える */ .intake-cell[data-filled="true"] input, .intake-cell[data-filled="true"] select, .intake-cell[data-filled="true"] textarea{border-color:#bdc1c6} .intake-cell[data-filled="false"] input::placeholder, .intake-cell[data-filled="false"] textarea::placeholder{color:#9aa0a6} /* 左列のカード。白が続くので、境目を少しはっきりさせる */ .intake-score{box-shadow:0 1px 3px #1027480f} .intake-wide{box-shadow:0 1px 3px #1027480f} .intake-block{box-shadow:0 1px 2px #1027480a} /* 足りない必須項目を押すと、その欄へ飛ぶ（2026-09-28）。 下に名前だけ出しても、欄は画面の別の場所にあり探すのが手間 */ .intake-missing-jump{ padding:1px 4px;border:0;background:none;font:inherit;font-size:12px; color:#c5221f;font-weight:700;text-decoration:underline;cursor:pointer} .intake-missing-jump:hover{color:#a50e0e} /* すぐ下に同じ欄がある推奨は1行に畳む（2026-09-28）。 外して空にすると「必要なものはひと通りそろっています」と嘘になる （実測：38点でそう出た）。場所だけ詰めて、案内は残す */ .intake-score-action[data-inline="true"]{ padding:5px 10px;margin-bottom:4px;background:#ffffff} .intake-score-action[data-inline="true"] .intake-score-act-mid>strong{ font-size:12px;font-weight:600} .intake-score-action[data-inline="true"] .intake-score-apply{ padding:4px 11px;font-size:11px} .intake-score-action[data-inline="true"] .intake-score-hide{ padding:4px 9px;font-size:11px} /* 弾かれた欄を、その場で知らせる（2026-09-28）。 サーバは欄名つきで理由を返すのに、画面下の帯にしか出ておらず、 どの欄が悪いのか探すところから始まっていた */ .intake-cell[data-bad="true"] input, .intake-cell[data-bad="true"] select, .intake-cell[data-bad="true"] textarea{ border-color:#9aa0a6;background:#fce8e6} .intake-cell-bad{ margin:3px 0 0;font-size:10.5px;line-height:1.55;color:#c5221f} /* 絵柄・色味の選択（2026-09-28 会議：作る前に種類を選べないとずれる）。 選んだ絵柄の説明を下に出す。名前だけでは、どれを選べばよいか 分からない（「すっきり図解」がBtoB向けだとは読み取れない） */ .ad-plan-style-note{ display:block;margin-top:4px;font-size:10.5px;line-height:1.6;color:#80868b} .ad-plan-style-note:empty{display:none} /* 広告画像への「ここを直して」（2026-09-28 会議）。 画像を押すと、その場所に丸1・丸2…が付く。 位置は割合で持つので、表示が伸び縮みしてもずれない */ .ad-note-host{position:relative;display:inline-block;max-width:100%;cursor:crosshair} .ad-note-layer{position:absolute;inset:0;pointer-events:none} .ad-note-pin{ position:absolute;transform:translate(-50%,-50%);pointer-events:auto; width:26px;height:26px;border-radius:50%;cursor:pointer; border:2px solid #ffffff;background:#d93025;color:#ffffff; font-size:12px;font-weight:700;line-height:1; box-shadow:0 2px 8px #16283d55;font-variant-numeric:tabular-nums} .ad-note-pin[data-done="true"]{background:#5f6368;opacity:.75} .ad-note-pin:hover{filter:brightness(1.1)} .ad-note-said{margin:8px 0 0;font-size:11.5px;color:#5f6368} .ad-note-list{margin:8px 0 0;padding:0;display:grid;gap:6px;list-style:none} .ad-note-list>li{ display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline; padding:8px 10px;border-radius:8px;border:1px solid #e8eaed;background:#ffffff} .ad-note-list>li[data-done="true"]{opacity:.62;background:#f0f4f9} .ad-note-list>li>strong{ display:grid;place-items:center;width:20px;height:20px;border-radius:50%; background:#d93025;color:#ffffff;font-size:11px;font-variant-numeric:tabular-nums} .ad-note-list>li[data-done="true"]>strong{background:#5f6368} .ad-note-list>li>span{font-size:12px;line-height:1.7;color:#1f1f1f} .ad-note-list>li>small{font-size:10px;color:#80868b;grid-column:2;grid-row:2} .ad-note-done{ padding:4px 11px;border-radius:7px;font-size:11px;cursor:pointer; border:1px solid #bdc1c6;background:#ffffff;color:#5f6368} .ad-note-done:hover:not(:disabled){background:#f0f4f9} /* 動くGIF（2026-09-28 会議：クリック率が上がりきらないときに試す） */ .ad-motion-box{display:grid;gap:8px;margin-top:8px} .ad-motion-box:empty{display:none} /* 絵柄を選んで全案まとめて作る（2026-09-28 卓馬指示）。 1枚ずつ押す手間をなくす。**できた順に並べる** */ .ad-plan-all{margin:0 0 12px;display:grid;gap:8px} .ad-plan-all-grid{ display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .ad-plan-all-grid:empty{display:none} .ad-plan-all-item{margin:0;display:grid;gap:6px} .ad-plan-all-item img{ width:100%;height:auto;border-radius:10px;border:1px solid #e8eaed} .ad-plan-all-item figcaption{font-size:11px;line-height:1.6;color:#5f6368} .ad-plan-all-bad{margin:0;font-size:11px;color:#c5221f} /* 「どのような広告を制作しますか」の節（2026-09-28 卓馬指示）。 会社選びと混ざっていて、何を決める場面か分からなかった。 配信面・絵柄・色味を1か所にまとめ、作る前に決める形にする */ .ad-plan-setup{ margin:0 0 14px;padding:16px 18px;border-radius:14px; border:1px solid #e8eaed;background:#ffffff;box-shadow:0 1px 2px #16283d0a} .ad-plan-setup-head>h3{margin:0 0 4px;font-size:15px;color:#1f1f1f} .ad-plan-setup-head>p{margin:0 0 14px;font-size:12px;line-height:1.75;color:#5f6368} .ad-plan-setup-row{ display:grid;gap:12px;align-items:start; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .ad-plan-setup-row>label{display:grid;gap:4px;min-width:0} .ad-plan-setup-row>label>span{font-size:12px;font-weight:600;color:#1f1f1f} .ad-plan-setup-row select{ width:100%;min-height:36px;padding:7px 10px;border-radius:8px; border:1px solid #bdc1c6;font:inherit;font-size:13px;background:#ffffff} /* 案ごとに「作るか」「どの絵柄か」を選ぶ（2026-09-28 卓馬指示）。 同じ絵柄で9枚より、訴求ごとに変えたほうが比べられる */ .ad-plan-pickrow{ display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:8px 0 4px} .ad-plan-use{display:flex;gap:6px;align-items:center;font-size:11.5px;color:#1f1f1f} .ad-plan-use input{width:16px;height:16px;margin:0} .ad-plan-own-style{ flex:1;min-width:120px;min-height:30px;padding:4px 8px;border-radius:7px; border:1px solid #bdc1c6;font:inherit;font-size:11.5px;background:#ffffff} /* 外した案は薄くする。**消さない**（戻せなくなる） */ .ad-plan-card[data-make="false"]{opacity:.55} .ad-plan-all-head{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .ad-plan-vary{ padding:8px 15px;border-radius:8px;font-size:12px;cursor:pointer; border:1px solid #bdc1c6;background:#ffffff;color:#0b57d0;font-weight:600} .ad-plan-vary:hover{background:#e8f0fe} /* 過去に出した案（2026-09-29 卓馬指示：一度出した案を残す）。 **同じページに置く。**別ページにすると探しに行かなくなる */ .ad-plan-history{ display:flex;gap:9px;align-items:center;margin:0 0 12px; padding:10px 13px;border-radius:10px; border:1px solid #e8eaed;background:#f0f4f9} .ad-plan-history[hidden]{display:none} .ad-plan-history>span{font-size:11.5px;color:#5f6368;white-space:nowrap} .ad-plan-history select{ flex:1;min-width:0;min-height:32px;padding:5px 9px;border-radius:7px; border:1px solid #bdc1c6;font:inherit;font-size:12px;background:#ffffff} /* 作った広告をその場で保存する（2026-09-29 卓馬指示）。 **目立たせすぎない。**主役は画像で、保存は脇の操作 */ .ad-download{display:inline-block;margin:8px 0 0;padding:8px 16px;border:1px solid #bdc1c6;border-radius:10px;background:#ffffff;color:#1f1f1f;font-size:13px;font-weight:700;text-decoration:none;line-height:1.4} .ad-download:hover{background:#f0f4f9;border-color:#9aa0a6} .ad-plan-all-item figcaption .ad-download{margin:6px 0 0;padding:6px 12px;font-size:12px} .ad-motion-box .ad-download{margin-top:6px} /* 段で進む広告づくり（2026-09-29 卓馬指示：「ステップで入力していく形に しないと非常にわかりにくい」）。**いまどこかが一目で分かること** */ .ad-plan-steps{display:flex;gap:8px;list-style:none;margin:0;padding:18px 30px 0;flex-wrap:wrap;counter-reset:adstep} .ad-plan-step-dot{counter-increment:adstep;display:flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border-radius:999px;border:1px solid #e8eaed;background:#ffffff;font-size:13px;font-weight:700;color:#5f6368} .ad-plan-step-dot::before{content:counter(adstep);display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#e8f0fe;color:#5f6368;font-size:12px} .ad-plan-step-dot[data-state=now]{border-color:#0b57d0;background:#e8f0fe;color:#1f1f1f} .ad-plan-step-dot[data-state=now]::before{background:#0b57d0;color:#ffffff} .ad-plan-step-dot[data-state=done]{border-color:#bdc1c6;background:#e6f4ea;color:#3c4043} .ad-plan-step-dot[data-state=done]::before{content:'✓';background:#146c2e;color:#ffffff} /* 2段目：何を売るか。**候補は大きく。**押す場所だと分かる大きさにする */ .ad-plan-offer{margin:0 30px 18px;padding:20px 22px;border:1px solid #e8eaed;border-radius:16px;background:#ffffff} .ad-plan-offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:14px 0} .ad-plan-offer-item{display:grid;gap:6px;align-content:start;text-align:left;padding:18px;border:1px solid #e8eaed;border-radius:14px;background:#ffffff;cursor:pointer;min-height:120px;font:inherit;color:#1f1f1f} .ad-plan-offer-item:hover{border-color:#9aa0a6;background:#f0f4f9} .ad-plan-offer-item[data-on=true]{border-color:#0b57d0;background:#e8f0fe} .ad-plan-offer-item strong{font-size:16px;line-height:1.5} .ad-plan-offer-item span{font-size:14px;font-weight:700;color:#0b57d0} .ad-plan-offer-item small{font-size:12px;line-height:1.7;color:#5f6368} .ad-plan-offer-item em{font-size:11px;font-style:normal;color:#80868b} .ad-plan-offer-own{border-style:dashed;background:#ffffff} .ad-plan-offer-form{display:grid;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid #f1f3f4} .ad-plan-offer-field{display:grid;gap:5px} .ad-plan-offer-field>span{font-weight:700;font-size:14px;color:#1f1f1f} .ad-plan-offer-field input,.ad-plan-offer-field textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #9aa0a6;border-radius:10px;font:inherit;background:#ffffff} .ad-plan-offer-field textarea{min-height:72px;resize:vertical} .ad-plan-offer-field small{font-size:12px;color:#80868b} .ad-plan-conv h4{margin:0 0 4px;font-size:15px;color:#1f1f1f} .ad-plan-conv p{margin:0 0 12px;font-size:13px;line-height:1.7;color:#5f6368} .ad-plan-conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} /* 選べる札（2026-09-30 卓馬指摘：「クリックしていないと黒枠が 外側に出現しないので、押していない状態だとテキストだけが並んで いるように見えて視認性が悪い」）。 **押す前から枠が見えること。**枠を薄くすると、ただの文字列に見える。 選択で border-width を変えると中身がずれるので、**太さは変えず 影で示す**（1px→2px は 1px ぶん全部動く） */ .ad-plan-conv-item{display:grid;gap:6px;align-content:start;text-align:left;padding:34px 16px 15px;border:1px solid #bdc1c6;border-radius:12px;background:#ffffff;cursor:pointer;font:inherit;color:#1f1f1f;position:relative;box-shadow:0 1px 2px #1027480d;transition:border-color .15s,box-shadow .15s,background .15s} .ad-plan-conv-item:hover{border-color:#9aa0a6;background:#f0f4f9} .ad-plan-conv-item[data-on=true]{border-color:#0b57d0;background:#e8f0fe} /* リボンの字は下の .ad-plan-conv-item>strong で決める（2026-09-30） */ .ad-plan-conv-item small{font-size:12px;line-height:1.6;color:#5f6368} @media(max-width:640px){.ad-plan-steps{padding:14px 16px 0}.ad-plan-offer{margin:0 16px 14px;padding:16px}} /* 商品の段の仕上げ（2026-09-29 卓馬「完成度あげて」）。 **選んだものが、ひと目で分かること。**選択の印が枠線だけだと、 スクロールした先で「どれを選んだか」を見失う */ .ad-plan-offer-item{position:relative;transition:border-color .15s,background .15s} .ad-plan-offer-item[data-on=true]{box-shadow:0 0 0 1px #1f1f1f inset} .ad-plan-offer-item[data-on=true]::after{content:'選択中';position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:999px;background:#0b57d0;color:#ffffff;font-size:11px;font-weight:700} .ad-plan-offer-item[data-on=true] strong{padding-right:64px} .ad-plan-conv-item[data-on=true]{box-shadow:0 0 0 1px #1f1f1f inset} .ad-plan-conv-item[data-on=true] strong::before{content:'✓ ';color:#1f1f1f} /* 弱みを聞く理由。**欄と同じ幅に収める** */ .ad-plan-offer-form>small{margin:-6px 0 0;font-size:12px;line-height:1.7;color:#5f6368} /* この段の出口は、いちばん押したくなる見た目にする */ .ad-plan-offer-form>.ad-plan-go{justify-self:start;padding:14px 28px;font-size:15px} .ad-plan-offer-form>.ad-plan-go:disabled{opacity:.5;cursor:not-allowed} /* この案は何を売るものか（2026-09-29）。案のすぐ上に出す。 **履歴から開いた過去の案でも分かること** */ .ad-plan-madefor{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 30px 12px;padding:12px 18px;border:1px solid #bdc1c6;border-left:4px solid #0b57d0;border-radius:12px;background:#f8f9fa} .ad-plan-madefor strong{font-size:15px;color:#1f1f1f} .ad-plan-madefor span{font-size:13px;font-weight:700;color:#3c4043} .ad-plan-madefor small{font-size:12px;color:#5f6368} @media(max-width:640px){.ad-plan-madefor{margin:0 16px 10px;padding:10px 14px}} /* 1ページで決めることは1つ（2026-09-29 卓馬指示）。 **ページを切り替える。**全部を1枚に積むと、何が出てきたか分からない */ .ad-plan-page{margin:0 30px 20px;padding:0} .ad-plan-page-head{margin:0 0 18px} .ad-plan-page-head h3{margin:0 0 6px;font-size:22px;line-height:1.5;color:#1f1f1f} .ad-plan-page-head p{margin:0;font-size:14px;line-height:1.8;color:#5f6368} .ad-plan-back{margin:22px 0 0;padding:10px 18px;border:1px solid #e8eaed;border-radius:10px;background:#ffffff;color:#5f6368;font:inherit;font-size:13px;font-weight:700} .ad-plan-back:hover{background:#f0f4f9;color:#1f1f1f} /* 会社ページの読み込みゲージ。**押したら動いていることが見える** */ .ad-plan-pickbar{margin:14px 0 0} .ad-plan-pickbar:empty{margin:0} /* 右上の「過去に出した案」。よく使うものを下に埋めない */ .ad-plan-past{padding:10px 18px;border:1px solid #bdc1c6;border-radius:10px;background:#ffffff;color:#1f1f1f;font:inherit;font-size:13px;font-weight:700} .ad-plan-past:hover{background:#f0f4f9;border-color:#9aa0a6} .ad-plan-past-list{display:grid;gap:10px} .ad-plan-past-item{display:grid;gap:4px;text-align:left;padding:16px 18px;border:1px solid #bdc1c6;border-radius:12px;background:#ffffff;font:inherit;color:#1f1f1f;cursor:pointer} .ad-plan-past-item:hover{border-color:#0b57d0;background:#e8f0fe} .ad-plan-past-item strong{font-size:15px} .ad-plan-past-item span{font-size:14px;font-weight:700;color:#3c4043} .ad-plan-past-item small{font-size:12px;color:#5f6368} @media(max-width:640px){.ad-plan-page{margin:0 16px 16px}.ad-plan-page-head h3{font-size:19px}} /* 案の根拠は別ページへ（2026-09-29 卓馬指示）。 案を選ぶページには案だけを置き、根拠はここから見に行く */ .ad-plan-basis-link{display:block;width:100%;margin:0 0 16px;padding:12px 18px;border:1px dashed #bdc1c6;border-radius:12px;background:#ffffff;color:#3c4043;font:inherit;font-size:13px;font-weight:700;text-align:left} .ad-plan-basis-link:hover{background:#e8f0fe;border-color:#0b57d0;border-style:solid} .ad-plan-basis{display:grid;gap:14px} /* 作っているあいだのページ（2026-09-29）。 **待っていると分かる画面を出す。**裏で作りながら別のページを 見せると、終わったのかが分からない */ .ad-plan-making{margin:0 0 18px;min-height:76px} /* 見た目のページの出口（2026-09-29）。**絵柄を決めてから作る。** これまで案を押すとその場で作っており、絵柄のページへ来る道が無かった */ .ad-plan-lookgo{display:block;width:100%;margin:18px 0 0;padding:15px 24px;font-size:15px} .ad-plan-lookgo:disabled{opacity:.5;cursor:not-allowed} /* 報せは、いま見ているページの見出しのすぐ下に出す（2026-09-29）。 画面のいちばん下に置くと読まれない。**空のときは場所を取らない** */ .ad-plan-page-head .ad-plan-status{margin:10px 0 0;padding:10px 14px;border-radius:10px;background:#e8f0fe;border:1px solid #bdc1c6;font-size:13px;line-height:1.7;color:#1f1f1f} .ad-plan-page-head .ad-plan-status:empty{display:none} /* 誰に見せるか（2026-09-29）。**入力させず、確かめてもらう。** ライルが集めているのに、広告の画面で一度も確認していなかった */ .ad-plan-audience{margin:0 0 18px;padding:14px 18px;border-radius:12px;background:#f0f4f9;border:1px solid #e8eaed} .ad-plan-audience h4{margin:0 0 6px;font-size:13px;color:#5f6368;letter-spacing:.06em} .ad-plan-audience p{margin:0 0 6px;font-size:14px;line-height:1.75;color:#1f1f1f} .ad-plan-audience small{display:block;font-size:12px;line-height:1.7;color:#5f6368} .ad-plan-conv-item small{overflow-wrap:anywhere} /* 言い過ぎの疑い（2026-09-29）。禁止語とは別の印。 **赤にしない。**出せないのではなく、人が確かめるもの */ .ad-plan-risky{padding:3px 10px;border-radius:999px;background:#feefc3;border:1px solid #bdc1c6;color:#8a4b00;font-size:11px;font-weight:700} /* 文面の持ち出し（2026-09-29）。画像は落とせるのに文は落とせず、 広告管理画面へ手で打ち直していた。**主役の隣に置く脇役** */ .ad-plan-copy{margin:8px 8px 0 0;padding:8px 14px;border:1px solid #bdc1c6;border-radius:9px;background:#ffffff;color:#1f1f1f;font:inherit;font-size:12px;font-weight:700} .ad-plan-copy:hover{background:#f0f4f9;border-color:#9aa0a6} .ad-plan-copy-fallback{display:block;width:100%;box-sizing:border-box;margin:8px 0 0;padding:10px;border:1px solid #9aa0a6;border-radius:8px;font:inherit;font-size:12px} /* 札の見出しをリボンにする（2026-09-30 卓馬指示：「フォームからの 問い合わせ申し込みというところには何かリボンなどのラベルを付ける なり、分かりやすくして、その中に説明があるような作りに」）。 **何の選択肢かが、読まずに分かること。** */ .ad-plan-conv-item>strong{position:absolute;top:0;left:0;padding:6px 14px 6px 12px;border-radius:12px 0 12px 0;background:#e8f0fe;color:#3c4043;font-size:12px;font-weight:700;letter-spacing:.01em} .ad-plan-conv-item[data-on=true]>strong{background:#0b57d0;color:#ffffff} .ad-plan-conv-item[data-on=true] strong::before{content:'✓ ';color:#ffffff} /* リボンの下に、説明と例が入る */ .ad-plan-conv-item>small{font-size:12.5px;line-height:1.75;color:#3c4043} .ad-plan-conv-item>em{font-size:11.5px;font-style:normal;color:#5f6368} .ad-plan-conv-item:hover{border-color:#9aa0a6;box-shadow:0 2px 6px #10274814} .ad-plan-conv-item[data-on=true]{box-shadow:0 0 0 1px #1f1f1f inset,0 2px 6px #225e6224} /* 商品の候補も同じ作法に揃える。**押す前から枠が見える** */ .ad-plan-offer-item{border-color:#bdc1c6;background:#ffffff;box-shadow:0 1px 2px #1027480d} /* 送り先のURL。**説明より小さく、下に置く。**長い文字列なので、 先に出すと説明が押し出される */ .ad-plan-conv-url{font-size:11px;color:#80868b;overflow-wrap:anywhere;line-height:1.55} /* 送り先が無いときの案内。ただの文にせず、箱として見せる */ .ad-plan-conv-grid>p{grid-column:1/-1;margin:0;padding:14px 16px;border:1px dashed #bdc1c6;border-radius:12px;background:#ffffff;font-size:13px;line-height:1.75;color:#5f6368} /* 右上のデモ。**進める前に試せることが分かる見た目** */ .ad-plan-demo-slot{display:inline-flex} .ad-plan-demo-go{padding:10px 18px;border:1px dashed #bdc1c6;border-radius:10px;background:#ffffff;color:#3c4043;font-size:13px;font-weight:700} .ad-plan-demo-go:hover{background:#e8f0fe;border-color:#9aa0a6;border-style:solid} /* 札の見え方を全体で揃える（2026-09-30 卓馬指摘：「全体を通して これはよくなっていることなので見直してください」）。 **押す前から枠が見えること／選んでも中身がずれないこと。** 選択で border-width を変えると、1px ぶん全部が動く */ .ad-plan-offer-item,.ad-plan-past-item{border-color:#bdc1c6;background:#ffffff;box-shadow:0 1px 2px #1027480d;transition:border-color .15s,box-shadow .15s,background .15s} .ad-plan-offer-item:hover,.ad-plan-past-item:hover{border-color:#9aa0a6;box-shadow:0 2px 6px #10274814} .ad-plan-offer-item[data-on=true]{box-shadow:0 0 0 1px #1f1f1f inset,0 2px 6px #225e6224} /* 商品の候補にも「どこから来た候補か」をリボンで出す */ .ad-plan-offer-item>em{position:absolute;top:0;right:0;padding:5px 12px;border-radius:0 14px 0 12px;background:#e8f0fe;color:#5f6368;font-size:11px;font-style:normal} .ad-plan-offer-item[data-on=true]>em{background:#dadce0;color:#3c4043} .ad-plan-offer-item>strong{padding-top:6px} /* リボンを EXTAGE のトンマナに寄せる（2026-09-30 卓馬指示）。 名刺のデザイン指示書より：紺 #1A2238 / オフホワイト #FDFCFA / 金 #C4A57B。トーンは「BtoB品位・高級感・落ち着き／知的・実直・ モダン／過剰な装飾を避ける」。 **最初から見えていること。**カーソルを合わせて出るのでは、 どこがボタンか分からない（卓馬指摘 2026-09-30） */ .ad-plan-conv-item,.ad-plan-offer-item,.ad-plan-past-item{ border-color:#bdc1c6;background:#ffffff; box-shadow:0 1px 2px #0f1a2e0f} .ad-plan-conv-item>strong,.ad-plan-offer-item>em{ background:#0b57d0;color:#ffffff;font-weight:600; letter-spacing:.04em;box-shadow:none} /* 金は「選ばれている」ことだけに使う。名刺で赤を1箇所に絞ったのと同じ */ .ad-plan-conv-item[data-on=true],.ad-plan-offer-item[data-on=true]{ border-color:#0b57d0;background:#ffffff; box-shadow:0 0 0 1px #1f1f1f inset,0 2px 8px #0f1a2e1f} .ad-plan-conv-item[data-on=true]>strong, .ad-plan-offer-item[data-on=true]>em{ background:#f9ab00;color:#1f1f1f} .ad-plan-conv-item[data-on=true] strong::before{content:'✓ ';color:#1f1f1f} /* カーソルは**色だけ**動かす。形や出し入れは変えない */ .ad-plan-conv-item:hover,.ad-plan-offer-item:hover, .ad-plan-past-item:hover{ border-color:#80868b;background:#ffffff;box-shadow:0 2px 8px #0f1a2e1a} /* 出どころのリボンを左上へ（2026-09-30 卓馬指摘：「ライルの訴求軸から 聞き取りというラベルが右に寄ってしまっている」）。 右上に置くと、長い見出しと重なり、札ごとに位置がばらつく。 **ゴールの札と同じ左上に揃える。**見出しはリボンの下から始める */ .ad-plan-offer-item{padding-top:40px} .ad-plan-offer-item>em{left:0;right:auto;top:0;border-radius:14px 0 12px 0; padding:6px 14px 6px 12px;font-size:11.5px;max-width:calc(100% - 20px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ad-plan-offer-item>strong{padding-top:0;padding-right:0} /* 選択中の「選択中」バッジは右上に残す（リボンは左上なので重ならない） */ /* 自分で入れる の札はリボンを持たない */ .ad-plan-offer-own{padding-top:18px} /* 段の丸。**開いたことのある段は押せる**ことを見た目で示す */ .ad-plan-step-dot[data-reach=true]{cursor:pointer} .ad-plan-step-dot[data-reach=true]:hover{border-color:#0b57d0;color:#1f1f1f} .ad-plan-step-dot[data-reach=false]{cursor:default;opacity:.7} /* 商品ページの出口 */ .ad-plan-next{display:block;margin:18px 0 6px;padding:14px 28px;font-size:15px} .ad-plan-next:disabled{opacity:.45;cursor:not-allowed} .ad-plan-next-said{display:block;font-size:12.5px;color:#5f6368} /* 「選択中」は紺に揃える（2026-09-30 撮影で確認：ここだけ緑で浮いていた） */ .ad-plan-offer-item[data-on=true]::after{background:#0b57d0;color:#ffffff} /* まとめて作る枠。1枚作る導線と間を空け、線で分ける */ .ad-plan-all{margin:26px 0 0;padding:20px 0 0;border-top:1px solid #bdc1c6} .ad-plan-all>h4{margin:0 0 12px;font-size:14px;color:#1f1f1f} .ad-plan-all-head{justify-content:flex-start} /* 何をしてもらうか の見出し */ .ad-plan-conv>h4{margin:22px 0 4px;font-size:15px;color:#1f1f1f} .ad-plan-conv>p{margin:0 0 12px;font-size:13px;color:#5f6368} /* まとめて作るボタンを左に揃える（右寄せだと離れた場所に浮く） */ .ad-plan-all .ad-plan-all-head{justify-content:flex-start;margin:0 0 8px} .ad-plan-all .ad-plan-status{padding-left:0} /* .ad-plan-go は margin-left:auto を持つ（会社選びで右端に寄せるため）。 **まとめて作る枠の中では寄せない。**離れた場所に浮いて見えていた */ .ad-plan-all-head .ad-plan-go{margin-left:0} /* =================================================================== 広告づくりの画面を、青白ベース＋差し色にする（2026-09-30 卓馬指示： 「SaaSで考えるとイメージと違うので、一般的なSaaSの青白ベースで 差し色があるというようなボタンのカラーリング、全体のカラーリングに」）。 **この画面の中だけに閉じる。**ほかの画面（ライル等）の見た目は変えない。 主色 #2563eb（青） … 選ぶ・進む・選択中 地 #ffffff / #f6f8fb 線 #d5dde8 文字 #0f172a / #475569 差し色 #f97316（橙） … いちばん大事な1手（作る）だけ 2026-09-30 午前の紺・金（EXTAGE名刺）はこれで置き換え =================================================================== */ .ad-plan-dialog{--p:#0b57d0;--p-dark:#0b57d0;--p-soft:#f0f4f9;--p-line:#d3e3fd; --ink:#1f1f1f;--ink-2:#3c4043;--line:#dadce0;--bg:#f0f4f9;--accent:#d93025; --accent-dark:#c5221f;background:var(--bg);color:var(--ink)} .ad-plan-dialog .ad-plan-head{background:#ffffff;border-bottom:1px solid var(--line)} .ad-plan-dialog .ad-plan-page-head h3{color:var(--ink)} .ad-plan-dialog .ad-plan-page-head p{color:var(--ink-2)} /* ボタン：主（青）／脇（白地に青の線）／いちばん大事な1手（橙） */ .ad-plan-dialog .ad-plan-go{background:var(--p);color:#ffffff;border:0} .ad-plan-dialog .ad-plan-go:hover{background:var(--p-dark)} .ad-plan-dialog .ad-plan-go:disabled{background:#9aa0a6} .ad-plan-dialog .ad-plan-lookgo,.ad-plan-dialog .ad-plan-offer-form>.ad-plan-go{ background:var(--accent)} .ad-plan-dialog .ad-plan-lookgo:hover,.ad-plan-dialog .ad-plan-offer-form>.ad-plan-go:hover{ background:var(--accent-dark)} .ad-plan-dialog .ad-plan-back,.ad-plan-dialog .ad-plan-past, .ad-plan-dialog .ad-plan-copy,.ad-plan-dialog .ad-plan-vary, .ad-plan-dialog .ad-plan-close{background:#ffffff;color:var(--p);border:1px solid var(--p-line)} .ad-plan-dialog .ad-plan-back:hover,.ad-plan-dialog .ad-plan-past:hover, .ad-plan-dialog .ad-plan-copy:hover,.ad-plan-dialog .ad-plan-vary:hover{ background:var(--p-soft);border-color:var(--p)} .ad-plan-dialog .ad-plan-demo-go{background:var(--p-soft);color:var(--p); border:1px dashed var(--p)} .ad-plan-dialog .ad-plan-take{background:var(--p);color:#ffffff;border:0} .ad-plan-dialog .ad-plan-take:hover{background:var(--p-dark)} /* 段の丸 */ .ad-plan-dialog .ad-plan-step-dot{background:#ffffff;border-color:var(--line);color:var(--ink-2)} .ad-plan-dialog .ad-plan-step-dot::before{background:#d3e3fd;color:var(--ink-2)} .ad-plan-dialog .ad-plan-step-dot[data-state=now]{border-color:var(--p);background:var(--p-soft);color:var(--p)} .ad-plan-dialog .ad-plan-step-dot[data-state=now]::before{background:var(--p);color:#ffffff} .ad-plan-dialog .ad-plan-step-dot[data-state=done]{border-color:var(--p-line);background:#ffffff;color:var(--p)} .ad-plan-dialog .ad-plan-step-dot[data-state=done]::before{background:var(--p);color:#ffffff} .ad-plan-dialog .ad-plan-step-dot[data-reach=true]:hover{border-color:var(--p);color:var(--p)} /* 選べる札：押す前から白い札と線が見える／リボンは淡い青 */ .ad-plan-dialog .ad-plan-conv-item,.ad-plan-dialog .ad-plan-offer-item, .ad-plan-dialog .ad-plan-past-item{background:#ffffff;border-color:var(--line); box-shadow:0 1px 2px #0f172a0d} .ad-plan-dialog .ad-plan-conv-item:hover,.ad-plan-dialog .ad-plan-offer-item:hover, .ad-plan-dialog .ad-plan-past-item:hover{border-color:var(--p);background:#ffffff; box-shadow:0 2px 8px #2563eb1f} .ad-plan-dialog .ad-plan-conv-item>strong,.ad-plan-dialog .ad-plan-offer-item>em{ background:var(--p-soft);color:var(--p)} /* 選択中：青の線＋青のリボン＋右上に「選択中」 */ .ad-plan-dialog .ad-plan-conv-item[data-on=true], .ad-plan-dialog .ad-plan-offer-item[data-on=true]{border-color:var(--p); background:#ffffff;box-shadow:0 0 0 1px var(--p) inset,0 2px 8px #2563eb26} .ad-plan-dialog .ad-plan-conv-item[data-on=true]>strong, .ad-plan-dialog .ad-plan-offer-item[data-on=true]>em{background:var(--p);color:#ffffff} .ad-plan-dialog .ad-plan-conv-item[data-on=true] strong::before{content:'✓ ';color:#ffffff} /* 「選択中」は目的・送り先・してもらうことの札にも付ける（2026-09-30 卓馬指示： 取り上げるものにある「選択中」と同じように、どれを選んでいるか分かるように） */ .ad-plan-dialog .ad-plan-conv-item[data-on=true]::after, .ad-plan-dialog .ad-plan-offer-item[data-on=true]::after{content:'選択中'; position:absolute;top:8px;right:8px;padding:3px 10px;border-radius:999px; background:var(--p);color:#ffffff;font-size:11px;font-weight:700} /* 補足の吹き出し。**札の右上にかぶせて出す**（カーソル・フォーカスで） */ .ad-plan-dialog .ad-plan-tip{position:absolute;right:8px;bottom:calc(100% - 6px); z-index:5;width:max-content;max-width:260px;padding:9px 12px;border-radius:10px; background:#1f1f1f;color:#ffffff;font-size:12px;font-weight:500;line-height:1.65; white-space:pre-line;text-align:left;box-shadow:0 6px 18px #0f172a33; opacity:0;transform:translateY(4px);pointer-events:none; transition:opacity .12s,transform .12s} .ad-plan-dialog .has-tip:hover .ad-plan-tip, .ad-plan-dialog .has-tip:focus-visible .ad-plan-tip{opacity:1;transform:none} /* 吹き出しがあることを小さく示す（押す前に「説明がある」と分かる） */ .ad-plan-dialog .has-tip{overflow:visible} .ad-plan-dialog .has-tip>strong::after{content:'?';display:inline-grid;place-items:center; width:14px;height:14px;margin-left:6px;border-radius:50%;background:#ffffff;color:var(--p); font-size:9px;font-weight:800;vertical-align:1px} /* ゴールの札は名前だけなので小さく */ .ad-plan-dialog .ad-plan-conv-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .ad-plan-dialog .ad-plan-goal-card{min-height:0} /* 注釈（見せる相手など、確かめて読むもの）は下に控えめに */ .ad-plan-dialog .ad-plan-audience{background:#ffffff;border-color:var(--line)} .ad-plan-dialog .ad-plan-status{background:var(--p-soft);border-color:var(--p-line);color:var(--ink)} .ad-plan-dialog .ad-plan-madefor{background:#ffffff;border-color:var(--line);border-left-color:var(--p)} .ad-plan-dialog .ad-plan-madefor span{color:var(--p)} .ad-plan-dialog .ad-plan-basis-link{background:#ffffff;color:var(--p);border-color:var(--p-line)} /* 案を1列に並べる（2026-09-30 卓馬指示：横に5つ・今の4分の1ほど） */ .ad-plan-row{display:grid;grid-template-columns:repeat(var(--per-row,5),minmax(0,1fr)); gap:12px;align-items:start} .ad-plan-row .ad-plan-card{position:relative;padding:34px 12px 12px;margin:0; border:1px solid var(--line);border-radius:12px;background:#ffffff; display:grid;gap:8px;font-size:12px} .ad-plan-row .ad-plan-card[data-chosen=true]{border-color:var(--p); box-shadow:0 0 0 1px var(--p) inset,0 2px 8px #2563eb26} .ad-plan-card-kind{position:absolute;top:0;left:0;padding:5px 12px; border-radius:12px 0 10px 0;background:var(--p-soft);color:var(--p); font-size:11px;font-style:normal;font-weight:700} .ad-plan-row .ad-plan-tags{display:flex;flex-wrap:wrap;gap:4px;padding:0;border:0} .ad-plan-row .ad-plan-tags>*{font-size:10.5px} .ad-plan-row .ad-plan-pickrow{display:grid;gap:6px;padding:0} .ad-plan-row .ad-plan-own-style{font-size:11.5px;padding:6px 8px} .ad-plan-row .ad-plan-use{font-size:11.5px} .ad-plan-row .ad-plan-field{display:grid;gap:3px;margin:0} .ad-plan-row .ad-plan-field>span{font-size:10.5px;color:var(--ink-2)} .ad-plan-row .ad-plan-field input,.ad-plan-row .ad-plan-field textarea{ font-size:12px;padding:6px 8px;line-height:1.55;border-radius:8px} .ad-plan-row .ad-plan-field input[data-field=headline]{font-size:13px;font-weight:700} .ad-plan-row .ad-plan-take{width:100%;padding:9px 10px;font-size:12.5px;margin:2px 0 0} .ad-plan-row .ad-plan-copy{width:100%;margin:0;padding:6px 8px;font-size:11.5px} /* 型の説明は案の下にまとめる（読むものは下） */ .ad-plan-legend{display:grid;grid-template-columns:auto 1fr;gap:6px 14px; margin:18px 0 10px;padding:14px 16px;border:1px solid var(--line); border-radius:12px;background:#ffffff;font-size:12px} .ad-plan-legend dt{font-weight:700;color:var(--ink)} .ad-plan-legend dd{margin:0;color:var(--ink-2)} @media(max-width:1100px){.ad-plan-row{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.ad-plan-row{grid-template-columns:1fr}} /* 名前だけの札（ゴールのページ）。**リボン型にしない。** 中身が名前だけなのにリボンへ入れると札の本体が空になり、 「選択中」と重なって名前が切れた（2026-09-30 撮影で確認） */ .ad-plan-dialog .ad-plan-goal-card{padding:14px 16px;min-height:0;align-content:center; gap:4px} .ad-plan-dialog .ad-plan-goal-card>strong{position:static;padding:0;background:none; color:var(--ink);font-size:14px;border-radius:0;line-height:1.5} .ad-plan-dialog .ad-plan-goal-card[data-on=true]>strong{background:none;color:var(--p)} .ad-plan-dialog .ad-plan-goal-card[data-on=true] strong::before{color:var(--p)} /* 「選択中」と名前が重ならないよう、右に場所を空ける */ .ad-plan-dialog .ad-plan-goal-card[data-on=true]{padding-right:70px} .ad-plan-dialog .ad-plan-goal-card[data-on=true]::after{top:50%;transform:translateY(-50%)} .ad-plan-dialog .has-tip.ad-plan-goal-card>strong::after{background:var(--p-soft)} /* 価格の文字も青に揃える（緑が残っていた） */ .ad-plan-dialog .ad-plan-offer-item span{color:var(--p)} /* 見せる相手（確かめて読むもの）は、選ぶ札から離して置く */ .ad-plan-dialog .ad-plan-page[data-page=goal] .ad-plan-audience{margin-top:26px} /* 1列表示のカード（2026-09-30）。古い指定 .ad-plan-card{padding:0!important; gap:0!important} が余白を打ち消し、型のリボンと点数が重なっていた。 **1列表示のときだけ**上書きする（!important には !important でしか勝てない） */ .ad-plan-row .ad-plan-card{padding:36px 12px 12px!important;gap:8px!important; overflow:visible} .ad-plan-row .ad-plan-card>*{margin-left:0!important;margin-right:0!important} .ad-plan-row .ad-plan-card .ad-plan-field{padding:0!important} .ad-plan-row .ad-plan-card .ad-plan-field:first-of-type span{color:var(--ink-2)} .ad-plan-row .ad-plan-card .ad-plan-take{margin:4px 0 0!important;padding:9px 10px!important} /* 文が途中で切れないよう、欄は中身の高さに合わせて伸ばす */ .ad-plan-row .ad-plan-field textarea{min-height:0;resize:none;field-sizing:content} .ad-plan-row .ad-plan-card:hover{transform:none} /* カードの高さを揃え、「文面をコピー」「この案を選ぶ」を下端に揃える */ .ad-plan-row{align-items:stretch} .ad-plan-row .ad-plan-card{display:flex!important;flex-direction:column} .ad-plan-row .ad-plan-card .ad-plan-copy{margin-top:auto!important} /* 絵柄×色味の見本（2026-09-30）。横が色味・縦が絵柄 */ .ad-plan-gallery{margin:34px 0 8px;padding:22px 0 0;border-top:1px solid var(--line)} .ad-plan-gallery>h4{margin:0 0 4px;font-size:15px;color:var(--ink)} .ad-plan-gallery>p{margin:0 0 16px;font-size:12.5px;color:var(--ink-2)} .ad-plan-gallery-grid{display:grid; grid-template-columns:130px repeat(var(--cols,5),minmax(0,1fr));gap:10px;align-items:start} .ad-plan-gallery-tone{font-size:12px;color:var(--ink-2);text-align:center;padding:0 0 2px} .ad-plan-gallery-style{display:grid;gap:4px;padding:6px 4px 0 0;align-self:center} .ad-plan-gallery-style strong{font-size:13px;color:var(--ink)} .ad-plan-gallery-style small{font-size:11px;line-height:1.5;color:var(--ink-2)} .ad-plan-gallery-cell{display:block;padding:0;border:1px solid var(--line);border-radius:10px; overflow:hidden;background:#ffffff;cursor:pointer;aspect-ratio:4/5; transition:border-color .12s,box-shadow .12s,transform .12s} .ad-plan-gallery-cell img{display:block;width:100%;height:100%;object-fit:cover} .ad-plan-gallery-cell:hover{border-color:var(--p);box-shadow:0 4px 12px #2563eb26;transform:translateY(-1px)} .ad-plan-gallery-cell[data-on=true]{border-color:var(--p);box-shadow:0 0 0 2px var(--p)} .ad-plan-gallery-cell>span{display:grid;place-items:center;height:100%;font-size:11px; color:#9aa0a6;background:repeating-linear-gradient(45deg,#f0f4f9 0 8px,#e8f0fe 8px 16px)} @media(max-width:900px){.ad-plan-gallery-grid{grid-template-columns:90px repeat(var(--cols,5),minmax(0,1fr));gap:6px} .ad-plan-gallery-style small{display:none}} /* 仲間のレベル一覧（2026-09-30 卓馬指摘：中のデータが崩れている）。 カードを縦に積む指定が #my-office の中だけに効く書き方で、この一覧は その外に置かれていたため、横一列の古い指定が効き、名前や説明が 1文字ずつ縦に折り返していた（撮影で確認）。**この一覧にも効かせる** */ .flow-team-training #office-growth-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px; background:#f6f8fb;border-top:1px solid #d5dde8} .flow-team-training .office-growth-card{display:flex;flex-direction:column; align-items:stretch;gap:8px;padding:18px;text-align:left; border:1px solid #d5dde8;border-radius:12px;background:#fff;color:#0f172a; box-shadow:0 1px 2px #0f172a0d;cursor:pointer} .flow-team-training .office-growth-card:hover:not(:disabled){border-color:#2563eb; box-shadow:0 2px 8px #2563eb1f} .flow-team-training .office-growth-card .guild-card-level{align-self:flex-start; padding:3px 10px;border-radius:999px;background:#eff6ff;color:#2563eb; font-size:12px;font-weight:700} .flow-team-training .office-growth-card .growth-card-info{display:grid;gap:2px} .flow-team-training .office-growth-card .growth-card-info strong{font-size:17px;color:#0f172a} .flow-team-training .office-growth-card .growth-card-info span{font-size:12px;color:#2563eb;font-weight:700} .flow-team-training .office-growth-card .growth-card-info small{font-size:12px;color:#475569} .flow-team-training .office-growth-card .guild-level-progress{display:block;height:6px; border-radius:999px;background:#e2e8f0;overflow:hidden} .flow-team-training .office-growth-card .guild-level-progress i{display:block;height:100%;background:#2563eb} .flow-team-training .office-growth-card>span{font-size:12.5px;color:#475569;line-height:1.6} .flow-team-training .office-growth-card .guild-card-missing{color:#475569} .flow-team-training .office-growth-card>span:last-child{font-size:13px;color:#2563eb;font-weight:700} /* チーム全体の平均レベル：金色の文字が淡い地で読めなかった */ .flow-team-training .guild-team-level{grid-column:1/-1;display:flex;flex-wrap:wrap; align-items:center;gap:10px 16px;padding:16px 18px;border-radius:12px;background:#fff; border:1px solid #d5dde8;color:#0f172a} .flow-team-training .guild-team-level>strong{font-size:22px;color:#0f172a} .flow-team-training .guild-team-level>p{flex-basis:100%;margin:0;font-size:13px;color:#475569} .flow-team-training .guild-level-note{grid-column:1/-1;font-size:12px;color:#475569} /* 「キャラクター図鑑」：地と文字がほぼ同じ色で読めなかった */ /* **このボタンだけに絞る。**カード自体も button なので、button 全体に 白を当てるとカードの文字まで消える */ .flow-team-training #office-roster-open{background:#2563eb;color:#fff;border:0} .flow-team-training #office-roster-open:hover{background:#1d4ed8} @media(max-width:900px){.flow-team-training #office-growth-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.flow-team-training #office-growth-strip{grid-template-columns:1fr}} /* チーム全体の棒と称号も青白に揃える（黒い棒・茶色の札が浮いていた） */ .flow-team-training .guild-team-bar{position:relative;display:block;flex:1 1 220px; height:8px;border-radius:999px;background:#e2e8f0;overflow:visible} .flow-team-training .guild-team-fill{display:block;height:100%;border-radius:999px;background:#2563eb} .flow-team-training .guild-team-next{position:absolute;top:-3px;width:2px;height:14px;background:#f97316} .flow-team-training .guild-rank{padding:3px 10px;border-radius:999px;background:#eff6ff; color:#2563eb;font-size:12px} /* 見本の表を「横5列で折り返す」形に（2026-09-30）。色味が9種に増えたため、 絵柄ごとに見出しを置き、その下に色味を5列で並べる */ .ad-plan-gallery .ad-plan-gallery-grid{grid-template-columns:repeat(5,minmax(0,1fr)); margin:0 0 22px} .ad-plan-gallery .ad-plan-gallery-style{display:flex;align-items:baseline;gap:12px; padding:6px 0 10px;align-self:auto} .ad-plan-gallery .ad-plan-gallery-style small{display:inline} .ad-plan-gallery .ad-plan-gallery-cell{aspect-ratio:auto;display:grid; grid-template-rows:auto auto} .ad-plan-gallery .ad-plan-gallery-cell img{aspect-ratio:4/5;height:auto} .ad-plan-gallery .ad-plan-gallery-cell>span{aspect-ratio:4/5;height:auto} .ad-plan-gallery-cap{display:block;padding:6px 8px;font-size:11.5px;color:var(--ink-2); text-align:center;border-top:1px solid var(--line);background:#ffffff} .ad-plan-gallery .ad-plan-gallery-cell[data-on=true] .ad-plan-gallery-cap{color:#ffffff; background:var(--p);border-top-color:var(--p)} @media(max-width:900px){.ad-plan-gallery .ad-plan-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ── できた広告を、その場で直す（2026-09-30） ── */ .ad-edit-bar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px} .ad-edit-bar button{border:1px solid #bdc1c6;background:#ffffff;color:#1f1f1f;border-radius:999px; padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer} .ad-edit-bar button[aria-pressed="true"]{background:#0b57d0;border-color:#0b57d0;color:#ffffff} .ad-edit-bar .ad-edit-undo{margin-left:auto} .ad-edit-bar button:disabled{opacity:.45;cursor:default} .ad-note-host[data-mode="ai"]{cursor:crosshair;touch-action:none} .ad-edit-rect{position:absolute;border:2px dashed #0b57d0;background:rgba(37,99,235,.12); pointer-events:none;border-radius:4px} .ad-edit-layer{position:absolute;inset:0} .ad-edit-item{position:absolute;cursor:move;touch-action:none} .ad-edit-item canvas{display:block;pointer-events:none} .ad-edit-item[data-picked="true"]{outline:2px solid #d93025;outline-offset:2px} .ad-edit-panel{margin:4px 0} .ad-edit-ai,.ad-edit-overlay{display:grid;gap:8px;padding:12px;border:1px solid #e8eaed; border-radius:10px;background:#f0f4f9} .ad-edit-ai textarea,.ad-edit-props textarea{width:100%;font:inherit;padding:8px;border:1px solid #bdc1c6;border-radius:8px} .ad-edit-ai small,.ad-edit-overlay small{color:#5f6368;font-size:12px} .ad-edit-adders{display:flex;flex-wrap:wrap;gap:6px} .ad-edit-adders button,.ad-edit-props button{border:1px solid #bdc1c6;background:#ffffff;border-radius:8px; padding:6px 10px;font-size:13px;cursor:pointer;color:#1f1f1f} .ad-edit-props{display:grid;gap:6px} .ad-edit-props label{display:grid;grid-template-columns:5em 1fr;align-items:center;gap:8px;font-size:13px;color:#1f1f1f} .ad-edit-said{font-size:13px;color:#0b57d0;margin:4px 0;min-height:1.2em} .ad-edit-versions{list-style:none;padding:0;margin:4px 0 12px;display:flex;flex-wrap:wrap;gap:6px} .ad-edit-versions button{border:1px solid #e8eaed;background:#ffffff;border-radius:6px;padding:4px 8px; font-size:12px;color:#1f1f1f;cursor:pointer;max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ad-edit-versions li[data-current="true"] button{border-color:#0b57d0;color:#0b57d0;font-weight:700} .ad-edit-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px} .ad-edit-compare figure{margin:0} .ad-edit-compare img{width:100%;border-radius:8px;border:1px solid #e8eaed} .ad-edit-compare figcaption{font-size:12px;color:#3c4043;text-align:center;margin-top:4px} .ad-edit-compare p{grid-column:1/-1;margin:0;font-size:12px;color:#c5221f} .ad-edit-compare-acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap} .ad-edit-compare-acts button:not(.ad-plan-go){border:1px solid #bdc1c6;background:#ffffff;border-radius:8px;padding:8px 12px;cursor:pointer} .ad-edit-props input[type="color"]{width:52px;height:32px;padding:2px;border:1px solid #bdc1c6;border-radius:6px;background:#ffffff} /* ── 広告の編集画面（2026-10-01） ── */ .ad-edit-open{margin:10px auto 6px;display:block} img.ad-edit-clickable{cursor:pointer} dialog.ad-editor{width:min(1480px,98vw);height:94vh;max-height:94vh;padding:0;border:none;border-radius:14px; background:#e8f0fe;color:#1f1f1f;display:flex;flex-direction:column;overflow:hidden} dialog.ad-editor::backdrop{background:rgba(15,23,42,.55)} .ad-editor-head{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#ffffff;border-bottom:1px solid #e8eaed} .ad-editor-head strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26em} .ad-editor-tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .ad-editor-tools button,.ad-editor-rail button,.ad-editor-props button{border:1px solid #bdc1c6;background:#ffffff;color:#1f1f1f; border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer} .ad-editor-tools button:disabled{opacity:.4;cursor:default} .ad-editor-tools .ad-editor-save{background:#0b57d0;border-color:#0b57d0;color:#ffffff;font-weight:700} .ad-editor-note{margin:0;padding:6px 14px;font-size:13px;color:#0b57d0;background:#f0f4f9;min-height:1.4em} .ad-editor-grab{display:flex;gap:10px;align-items:center;padding:10px 14px;background:#fef7e0;border-bottom:1px solid #bdc1c6;font-size:13px} .ad-editor-primary{background:#d93025!important;border-color:#d93025!important;color:#ffffff!important;font-weight:700} .ad-editor-body{flex:1;display:grid;grid-template-columns:220px 1fr 290px;min-height:0} .ad-editor-rail,.ad-editor-props{overflow:auto;background:#ffffff;padding:12px} .ad-editor-rail{border-right:1px solid #e8eaed}.ad-editor-props{border-left:1px solid #e8eaed} .ad-editor-group{margin-bottom:14px} .ad-editor-group h4{margin:0 0 6px;font-size:12px;color:#5f6368} .ad-editor-group>button{display:block;width:100%;text-align:left;margin-bottom:4px} .ad-editor-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .ad-editor-icons .ad-editor-icon{display:flex;align-items:center;justify-content:center;padding:6px} .ad-editor-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0} .ad-editor-stage .canvas-container{box-shadow:0 8px 30px rgba(15,23,42,.18)} .ad-editor-tip{position:absolute;background:#0b57d0;color:#ffffff;font-size:12px;padding:3px 8px;border-radius:6px;pointer-events:none;white-space:nowrap} .ad-editor-inline{position:absolute;z-index:5;border:2px solid #0b57d0;border-radius:6px;background:rgba(255,255,255,.92); color:#1f1f1f;padding:4px;line-height:1.15;resize:both} .ad-editor-props h3{margin:0 0 8px;font-size:14px} .ad-editor-props p{font-size:12px;color:#3c4043;line-height:1.6} .ad-editor-field{display:grid;grid-template-columns:7em 1fr;align-items:center;gap:8px;margin:6px 0;font-size:13px;color:#1f1f1f} .ad-editor-field textarea,.ad-editor-field select,.ad-editor-field input[type=number]{width:100%;font:inherit;padding:6px;border:1px solid #bdc1c6;border-radius:6px} .ad-editor-field input[type=color]{width:52px;height:30px;padding:2px;border:1px solid #bdc1c6;border-radius:6px;background:#ffffff} .ad-editor-hint{font-size:12px;color:#5f6368} @media (max-width:900px){.ad-editor-body{grid-template-columns:1fr}.ad-editor-rail,.ad-editor-props{max-height:28vh}} /* 編集画面の書体（2026-10-01）。SIL OFL 1.1・同梱。使うときだけ読む */ @font-face{font-family:"EX Rounded";font-weight:800;font-display:block;src:url(/fonts/mplus-rounded-800.woff2) format("woff2")} @font-face{font-family:"EX Rounded";font-weight:900;font-display:block;src:url(/fonts/mplus-rounded-900.woff2) format("woff2")} @font-face{font-family:"EX Maru";font-weight:900;font-display:block;src:url(/fonts/zen-maru-900.woff2) format("woff2")} @font-face{font-family:"EX Klee";font-weight:600;font-display:block;src:url(/fonts/klee-one-600.woff2) format("woff2")} @font-face{font-family:"EX Brush";font-weight:400;font-display:block;src:url(/fonts/yuji-syuku-400.woff2) format("woff2")} @font-face{font-family:"EX Mincho";font-weight:800;font-display:block;src:url(/fonts/shippori-mincho-800.woff2) format("woff2")} .ad-editor-props button.ad-editor-primary:disabled{opacity:.45;cursor:not-allowed} /* 仕上げ・書き出し（2026-10-01） */ .ad-editor-sheet{position:absolute;inset:0;z-index:8;background:rgba(15,23,42,.35);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:16px} .ad-editor-sheet-inner{background:#ffffff;border-radius:12px;box-shadow:0 20px 50px rgba(15,23,42,.3);width:min(1000px,100%);max-height:100%;overflow:auto} .ad-editor-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #e8eaed;position:sticky;top:0;background:#ffffff;z-index:1} .ad-editor-sheet-head button{border:1px solid #bdc1c6;background:#ffffff;border-radius:8px;padding:6px 10px;cursor:pointer} .ad-editor-sheet-body{padding:14px;display:grid;gap:10px} .ad-editor-sheet-body textarea,.ad-editor-sheet-body select,.ad-editor-sheet-body input:not([type=checkbox]):not([type=color]):not([type=file]){width:100%;font:inherit;padding:8px;border:1px solid #bdc1c6;border-radius:8px} .ad-editor-sheet-body .ad-editor-primary{justify-self:start;border:none;border-radius:8px;padding:8px 14px;cursor:pointer} .ad-editor-variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;align-items:start} .ad-editor-variant{margin:0;border:1px solid #e8eaed;border-radius:10px;padding:8px;background:#f0f4f9;display:grid;gap:6px} .ad-editor-variant figcaption{font-size:12px;color:#1f1f1f;font-weight:700} canvas.ad-editor-variant-canvas{width:100%!important;height:auto!important;border-radius:6px;background:#fff} .ad-editor-variant-acts{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;align-items:center} .ad-editor-variant-acts a{color:#0b57d0} .ad-editor-variant-acts button{border:1px solid #bdc1c6;background:#ffffff;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer} .ad-editor-check{display:flex;gap:8px;align-items:center;font-size:13px} .ad-editor-motion{display:grid;gap:8px;max-width:360px} .ad-editor-ok{color:#0d652d;font-weight:700;margin:0}.ad-editor-ng{color:#c5221f;font-weight:700;margin:0} .ad-editor-issues{list-style:none;padding:0;margin:0;display:grid;gap:6px} .ad-editor-issue{display:grid;grid-template-columns:8em 1fr;gap:8px;font-size:13px;padding:8px;border-radius:8px;background:#f0f4f9} .ad-editor-issue[data-level=error]{background:#fce8e6}.ad-editor-issue[data-level=error] strong{color:#c5221f} .ad-editor-issue[data-level=warn]{background:#fef7e0}.ad-editor-issue[data-level=warn] strong{color:#c5221f} .ad-editor-issue[data-level=info] strong{color:#3c4043} table.ad-editor-lp{border-collapse:collapse;font-size:13px} table.ad-editor-lp th,table.ad-editor-lp td{border:1px solid #e8eaed;padding:6px 10px;text-align:left} table.ad-editor-lp tr[data-where=missing] td{background:#fce8e6;color:#c5221f} table.ad-editor-lp tr[data-where=later] td{background:#fef7e0} .ad-editor-brand-colors{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .ad-editor-brand-colors input[type=color]{width:40px;height:32px;padding:2px;border:1px solid #bdc1c6;border-radius:6px} .ad-editor-swatches{grid-column:2;display:flex;gap:4px;flex-wrap:wrap} .ad-editor-swatch{width:20px;height:20px;border-radius:50%;border:1px solid #bdc1c6;padding:0;cursor:pointer} .ad-code{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0;padding:10px;border-radius:8px;background:#f0f4f9;font-size:13px} .ad-code strong{font-family:ui-monospace,Menlo,monospace;font-size:16px;color:#0b57d0} .ad-code small{flex-basis:100%;color:#3c4043} .ad-editor-sheet-body label.ad-editor-check{display:flex!important;grid-template-columns:none!important;justify-content:flex-start!important;gap:8px;width:auto} .ad-editor-sheet-body label.ad-editor-check input{width:auto!important;margin:0} .ad-editor-sheet-body label.ad-editor-check span{flex:0 1 auto} .ad-editor-issue-link{cursor:pointer}.ad-editor-issue-link:hover,.ad-editor-issue-link:focus{outline:2px solid #0b57d0;outline-offset:1px} .ad-editor-grab button:not(.ad-editor-primary){border:1px solid #bdc1c6;background:#ffffff;border-radius:8px;padding:6px 10px;cursor:pointer} /* ── Canva に寄せた編集画面（2026-10-01） ── */ .ad-editor-body{grid-template-columns:300px 1fr 280px} .ad-editor-rail{display:grid;grid-template-columns:64px 1fr;padding:0;gap:0} .ad-editor-tabs{display:flex;flex-direction:column;gap:2px;padding:8px 4px;background:#f0f4f9;border-right:1px solid #e8eaed} .ad-editor-tab{display:flex!important;flex-direction:column;align-items:center;gap:2px;border:none!important;background:none!important;padding:8px 2px!important;border-radius:8px!important;color:#3c4043!important;width:auto!important} .ad-editor-tab span{font-size:18px;line-height:1}.ad-editor-tab small{font-size:10px} .ad-editor-tab[aria-pressed=true]{background:#e8f0fe!important;color:#0b57d0!important} .ad-editor-rail-body{overflow:auto;padding:12px;min-width:0} .ad-editor-preset{font-size:15px!important;padding:10px!important;text-align:center!important} .ad-editor-preset[data-kind=pill]{border-radius:999px!important;border:none!important} .ad-editor-preset[data-kind=circle]{border-radius:999px!important;border:none!important;width:72px!important;height:72px;margin:0 auto 6px;font-size:12px!important} .ad-editor-ctx{position:sticky;top:6px;z-index:6;align-self:flex-start;margin:6px auto 0;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:#ffffff;border-radius:12px;box-shadow:0 4px 16px rgba(15,23,42,.14);padding:6px 8px;max-width:calc(100% - 24px)} .ad-editor-stage{flex-direction:column;justify-content:flex-start;padding-top:8px} .ad-editor-stage .canvas-container{margin:auto} .ad-editor-ctx button,.ad-editor-float button{border:none;background:none;border-radius:6px;padding:6px 8px;font-size:13px;font-weight:700;color:#1f1f1f;cursor:pointer} .ad-editor-ctx button:hover,.ad-editor-float button:hover{background:#e8f0fe} .ad-editor-ctx button[aria-pressed=true]{background:#e8f0fe;color:#0b57d0} .ad-editor-ctx select{font:inherit;font-size:13px;padding:5px;border:1px solid #bdc1c6;border-radius:6px;max-width:150px} .ad-editor-float-size{display:inline-flex;align-items:center;border:1px solid #bdc1c6;border-radius:6px} .ad-editor-float-size input{width:48px;border:none;text-align:center;font:inherit;font-size:13px} .ad-editor-float-color{position:relative} .ad-editor-float-color::after{content:'';position:absolute;left:6px;right:6px;bottom:2px;height:4px;border-radius:2px;background:var(--c);box-shadow:0 0 0 1px #bdc1c6} .ad-editor-float-sep{width:1px;height:22px;background:#d3e3fd;margin:0 4px} .ad-editor-float{position:absolute;z-index:7;display:flex;gap:2px;align-items:center;background:#ffffff;border-radius:999px;box-shadow:0 4px 16px rgba(15,23,42,.18);padding:4px 8px;white-space:nowrap} .ad-editor-float button:first-child{color:#0b57d0} .ad-editor-float-count{font-size:12px;color:#3c4043;padding:0 6px} .ad-editor-pop{position:absolute;z-index:9;background:#ffffff;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.2);padding:12px;display:grid;gap:8px;min-width:240px} .ad-editor-pop h5,.ad-editor-color-pane h5{margin:6px 0 2px;font-size:12px;color:#5f6368} .ad-editor-pop button{border:1px solid #e8eaed;background:#ffffff;border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer} .ad-editor-pop-slider{display:grid;grid-template-columns:1fr 60px;gap:6px;font-size:12px;color:#1f1f1f;align-items:center} .ad-editor-pop-slider span{grid-column:1/-1}.ad-editor-pop-slider input[type=number]{width:60px;padding:4px;border:1px solid #bdc1c6;border-radius:6px} .ad-editor-stroke-kinds{display:flex;gap:6px}.ad-editor-stroke-kinds button{min-width:48px;font-size:16px} .ad-editor-pop-row{display:flex;flex-wrap:wrap;gap:6px} .ad-editor-pop-row .ad-editor-swatch{width:30px;height:30px} .ad-editor-swatch[data-now=true]{box-shadow:0 0 0 2px #ffffff,0 0 0 4px #0b57d0} .ad-editor-color-pane{padding:12px} .ad-editor-color-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .ad-editor-color-head button{border:none;background:none;font-size:18px;cursor:pointer} .ad-editor-color-search{width:100%;padding:8px;border:1px solid #bdc1c6;border-radius:8px;font:inherit} .ad-editor-color-more{width:30px;height:30px;padding:0;border:none;border-radius:50%;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);cursor:pointer} .ad-editor-align{display:grid;grid-template-columns:repeat(2,1fr);gap:4px} .ad-editor-layers{list-style:none;padding:0;margin:0;display:grid;gap:4px} .ad-editor-layer{display:grid;grid-template-columns:1fr repeat(4,auto);gap:2px;align-items:center;border:1px solid #e8eaed;border-radius:8px;padding:2px} .ad-editor-layer[data-now=true]{border-color:#0b57d0;background:#f0f4f9} .ad-editor-layer button{border:none!important;background:none!important;padding:4px 6px!important;font-size:12px!important;width:auto!important;margin:0!important} .ad-editor-layer .ad-editor-layer-name{text-align:left!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ad-editor-menu{position:absolute;z-index:20;background:#ffffff;border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.22);padding:6px;display:grid;min-width:210px} .ad-editor-menu button{border:none;background:none;text-align:left;padding:7px 10px;border-radius:6px;font-size:13px;cursor:pointer;color:#1f1f1f} .ad-editor-menu button:hover{background:#e8f0fe}.ad-editor-menu button:disabled{color:#bdc1c6;cursor:default;background:none} .ad-editor-menu hr{border:none;border-top:1px solid #e8eaed;margin:4px 0} .ad-editor-drop{border:2px dashed #bdc1c6;border-radius:10px;padding:24px 8px;text-align:center;color:#5f6368;font-size:13px;margin-top:8px} .ad-editor-drop[data-over=true]{border-color:#0b57d0;background:#f0f4f9} .ad-editor-zoom{position:absolute;right:300px;bottom:14px;z-index:8;display:flex;gap:4px;align-items:center;background:#ffffff;border-radius:999px;box-shadow:0 4px 16px rgba(15,23,42,.16);padding:4px 10px;font-size:12px} .ad-editor-zoom button{border:none;background:none;border-radius:6px;padding:4px 8px;cursor:pointer;font-size:12px;font-weight:700} .ad-editor-zoom button[aria-pressed=true]{background:#fad2cf;color:#a50e0e} .ad-editor-meter{padding:2px 8px;border-radius:999px;background:#ceead6;color:#0d652d;font-weight:700} .ad-editor-meter[data-level=warn]{background:#feefc3;color:#c5221f} .ad-editor-ai-title{font-size:18px;line-height:1.4;background:linear-gradient(90deg,#0b57d0,#0b57d0);-webkit-background-clip:text;background-clip:text;color:transparent;margin:4px 0 12px} .ad-editor-ai-chip{display:flex;align-items:center;gap:8px;border:1px solid #e8eaed;border-radius:10px;padding:8px 10px;font-size:13px;margin-bottom:8px} .ad-editor-ai-chip span{color:#5f6368;font-size:12px}.ad-editor-ai-chip strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ad-editor-ai-chip button{border:none!important;background:none!important;width:auto!important;padding:2px 6px!important;font-size:16px!important} .ad-editor-ai-input{width:100%;border:1px solid #bdc1c6;border-radius:12px;padding:10px;font:inherit;font-size:14px;resize:vertical} .ad-editor-ai-ideas{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0} .ad-editor-ai-ideas button{width:auto!important;border-radius:999px!important;font-size:12px!important;padding:4px 10px!important;margin:0!important} .ad-editor-rail-body .ad-editor-primary{width:100%!important;text-align:center!important;border-radius:8px} .ad-editor-phone{width:375px;margin:0 auto;border:10px solid #1f1f1f;border-radius:32px;overflow:hidden;background:#ffffff} .ad-editor-phone-top{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px} .ad-editor-phone-top small{color:#5f6368} .ad-editor-phone-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#d93025,#0b57d0)} canvas.ad-editor-phone-img{display:block;width:100%!important;height:auto!important} .ad-editor-phone-cta{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #e8eaed;font-size:13px;font-weight:700;color:#0b57d0} .ad-editor-phone-acts{padding:8px 12px;font-size:18px} .ad-editor-ctx select{width:auto!important;flex:0 0 auto} .ad-editor-float-size input{width:56px!important;height:28px;padding:0!important} .ad-editor-float-size button{padding:4px 8px!important} .ad-editor-score{display:grid;gap:6px} .ad-editor-score-row{display:grid;grid-template-columns:11em 1fr 3em;gap:8px;align-items:center;font-size:13px} .ad-editor-score-bar{height:10px;border-radius:5px;background:#d3e3fd;position:relative;overflow:hidden} .ad-editor-score-bar::after{content:'';position:absolute;inset:0;width:calc(var(--v)*1%);background:#9aa0a6;border-radius:5px} .ad-editor-score-bar[data-level=good]::after{background:#146c2e}.ad-editor-score-bar[data-level=mid]::after{background:#f9ab00} .ad-editor-score-bar[data-level=low]::after{background:#d93025} .ad-editor-variant .ad-editor-score-row{grid-template-columns:1fr 60px 2.4em;font-size:11px} /* ── ノートパソコンでも広く（2026-10-01）：全画面・道具バーとお知らせは浮かべる・右の欄はたたむ ── */ dialog.ad-editor{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;border-radius:0;position:fixed;inset:0} dialog.ad-editor .ad-editor-body{grid-template-columns:300px 1fr} dialog.ad-editor[data-rail=closed] .ad-editor-body{grid-template-columns:64px 1fr} dialog.ad-editor[data-rail=closed] .ad-editor-rail-body{display:none} dialog.ad-editor[data-rail=closed] .ad-editor-rail{grid-template-columns:64px} dialog.ad-editor .ad-editor-props{display:none} dialog.ad-editor[data-props=open] .ad-editor-body{grid-template-columns:300px 1fr 280px} dialog.ad-editor[data-props=open][data-rail=closed] .ad-editor-body{grid-template-columns:64px 1fr 280px} dialog.ad-editor[data-props=open] .ad-editor-props{display:block} .ad-editor-stage{padding-top:64px!important} .ad-editor-ctx{position:absolute!important;top:8px!important;left:50%;transform:translateX(-50%);margin:0!important;white-space:nowrap;flex-wrap:nowrap!important;overflow-x:auto;max-width:calc(100% - 16px)} .ad-editor-note{position:absolute;left:316px;bottom:14px;z-index:9;max-width:min(560px,40vw);border-radius:10px;padding:8px 12px!important;box-shadow:0 4px 16px rgba(15,23,42,.14);font-size:12px!important} .ad-editor-note:empty{display:none} dialog.ad-editor[data-rail=closed] .ad-editor-note{left:80px} dialog.ad-editor .ad-editor-zoom{right:16px} dialog.ad-editor[data-props=open] .ad-editor-zoom{right:296px} @media (max-width:900px){dialog.ad-editor .ad-editor-body{grid-template-columns:64px 1fr}.ad-editor-rail-body{display:none}} dialog.ad-editor .ad-editor-head{padding:5px 12px} dialog.ad-editor .ad-editor-tools button{padding:5px 9px;font-size:12px} .ad-editor-stage{padding-top:56px!important} /* ── 2026-10-01 全体点検の直し ── */ /* 小さすぎた文字（10px）を読める大きさに */ .ad-plan-head small{font-size:12px} .ad-editor-tab small{font-size:11px} .ad-plan-tags span{font-size:11.5px} /* 押す場所が小さかったリンク */ .ad-plan-open{display:inline-block;padding:6px 10px;min-height:28px} .ad-editor-variant-acts a{display:inline-block;padding:5px 8px;min-height:26px} /* 3 ゴールの説明の吹き出しが、狭い画面で右にはみ出した */ @media (max-width:700px){.ad-plan-dialog .ad-plan-tip{right:0;left:0;width:auto;max-width:none}} /* 狭い画面（900px以下）：左の欄は引き出しで開く／お知らせはズームの上に */ @media (max-width:900px){ dialog.ad-editor .ad-editor-rail{overflow:visible;position:relative;z-index:12} dialog.ad-editor[data-rail=drawer] .ad-editor-rail-body{display:block;position:absolute;left:64px;top:0;bottom:0; width:min(300px,calc(100vw - 80px));background:#ffffff;box-shadow:8px 0 24px rgba(15,23,42,.18);overflow:auto;padding:12px} dialog.ad-editor .ad-editor-note{left:72px;right:12px;bottom:64px;max-width:none} dialog.ad-editor .ad-editor-zoom{right:8px;left:72px;justify-content:center;flex-wrap:wrap} } /* 錠前の仲間を押したときの案内（2026-10-01：alert をやめた） */ .lock-notice{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;margin:0 0 10px;padding:10px 14px;border-radius:10px;background:#fef7e0;border:1px solid #bdc1c6;color:#a50e0e;font-size:13px} .lock-notice strong{grid-row:1/3}.lock-notice small{grid-column:2;color:#a50e0e} .lock-notice button{grid-row:1/3;grid-column:3;border:none;background:none;font-size:18px;cursor:pointer;color:#a50e0e;min-width:32px;min-height:32px} .lock-notice-page{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1000;max-width:min(640px,calc(100vw - 24px));box-shadow:0 8px 24px rgba(15,23,42,.18)} /* 小さかったリンク（全体点検） */ a[href="/market"]{display:inline-block;padding:6px 0;min-height:28px} .lp-variants{display:flex;gap:6px;margin-top:8px}.lp-variants button{flex:1;padding:7px 8px;border:1px solid #bdc1c6;border-radius:7px;background:#ffffff;font-weight:700;cursor:pointer}.lp-variants button[aria-pressed=true]{background:#0b57d0;color:#ffffff;border-color:#0b57d0}.lp-note{font-size:12px;color:#3c4043;margin:8px 0 0;line-height:1.6}#lp-settings .lp-setting-box>button{margin-top:8px;font-size:12px}#lp-settings select:disabled,#lp-settings input:disabled{background:#f1f3f4;color:#3c4043}.lp-score{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 10px;margin-top:10px;font-size:12px}.lp-score b{font-size:12px}.lp-score .win{color:#1f1f1f;font-weight:800} .lp-ideas{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}.lp-ideas li{border:1px solid #dadce0;border-radius:8px;padding:8px 10px;background:#ffffff}.lp-ideas .idea-head{font-weight:800;font-size:14px;line-height:1.5;color:#1f1f1f}.lp-ideas .idea-sub{font-size:12px;color:#1f1f1f;margin-top:2px}.lp-ideas .idea-meta{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:11px;color:#3c4043;margin-top:6px}.lp-ideas .idea-angle{background:#e8eaed;color:#1f1f1f;border-radius:4px;padding:0 6px;font-weight:700}.lp-ideas .idea-basis{font-size:11px;color:#3c4043;margin-top:4px}.lp-ideas button{margin-top:6px;font-size:12px} .lp-ab-dates{display:grid;grid-template-columns:1fr 1fr;gap:6px}.lp-ab-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px;align-items:center;margin-top:8px;font-size:12px}.lp-ab-grid input{min-width:0}.lp-ab-manual{margin-top:10px}.lp-ab-manual summary{font-size:12px;cursor:pointer}#lp-ab-result{font-weight:600;color:#1f1f1f} /* WebGL が無いときの立ち絵は visual.css（art/pop-*.webp・リグと同じポップな絵）。写実の portrait-*.webp は使わない（2026-10-09） */ /* ===== 鍵のかかったカードを読めるように（2026-10-01 世界観の完成度）===== 鍵の表示がカード全体を覆い、「ロック中・0/60・解除条件」の文字が、裏の名前・役割の文字に 重なって、どちらも読めなかった。鍵の表示は**絵の上だけ**に収め、名前と役割は絵の下で読めるようにする。 解除条件と「デモで中身を見る」は、指を合わせたとき（キーボードで選んだとき）だけ絵の上に出す。 */ .studio-specialists>button[data-design-locked="true"]{position:relative} .studio-specialists>button[data-design-locked="true"] .agent-lock{ inset:0 0 auto 0!important;aspect-ratio:1;height:auto!important; display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:10px 10px 12px!important;box-sizing:border-box;border-radius:inherit; border-bottom-left-radius:0;border-bottom-right-radius:0; background:linear-gradient(180deg,#0a1220b8 0%,#0a1220e0 100%)!important} .studio-specialists>button[data-design-locked="true"] .agent-lock-todo-head, .studio-specialists>button[data-design-locked="true"] .agent-lock-todo, .studio-specialists>button[data-design-locked="true"] .agent-lock-peek{display:none!important} .studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-shield, .studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-title{display:none!important} .studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-todo-head{display:block!important;color:#f3d58f;font-size:11px;font-weight:800;letter-spacing:.12em} .studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-todo{ display:grid!important;gap:3px;width:100%!important;margin:0;padding:0;list-style:none} .studio-specialists>button[data-design-locked="true"] .agent-lock-todo li{ display:flex;justify-content:space-between;gap:6px;align-items:center; background:rgba(255,255,255,.08);border-radius:6px;padding:3px 7px!important;font-size:10.5px!important;color:#eef2f7;line-height:1.35} .studio-specialists>button[data-design-locked="true"] .agent-lock-todo-pt{color:#f3d58f;font-weight:800;white-space:nowrap} .studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-peek{ display:inline-flex!important;margin-top:4px;padding:4px 12px!important;min-height:0!important; border-radius:20px!important;border:1px solid #f3d58f!important;background:transparent!important;color:#f3d58f!important;font-size:11px!important;font-weight:700} .studio-specialists>button[data-design-locked="true"] .agent-lock-title{color:#fff;font-size:13px!important;letter-spacing:.24em} .studio-specialists>button[data-design-locked="true"] .agent-lock-say{color:#e7edf5;font-size:11px!important;font-weight:700} .studio-specialists>button[data-design-locked="true"] .agent-lock-track{width:72%!important} /* 薄くする指定が3段に重なっていた（カード全体 0.42 → 中身 0.4 → 明るさ1.9倍）。 黒い面に白い文字（2026-09-26 決定）は残し、重ねがけだけを打ち消す。 鍵のかかった仲間は「絵を白黒にする」だけで伝わる */ .studio-specialists>button[data-design-locked="true"]{opacity:1!important;filter:none!important} .studio-specialists>button[data-design-locked="true"]>*:not(.design-lock-badge):not(.agent-lock){opacity:1!important;filter:none!important} .studio-specialists>button[data-design-locked="true"] .agent-lock{opacity:1!important;filter:none!important} .studio-specialists>button[data-design-locked="true"] .guild-portrait{filter:grayscale(.7) brightness(.85)!important} .studio-specialists>button[data-design-locked="true"] .specialist-card-copy{color:#c9d3dd!important} .studio-specialists>button[data-design-locked="true"] .specialist-card-copy :is(strong,small,b,span,em){color:#eef2f6!important;opacity:1!important} .studio-specialists>button[data-design-locked="true"] .agent-lock-todo-pt{background-color:#f3d58f!important;color:#1f2a33!important;border-radius:10px;padding:0 7px!important;font-size:10px!important} /* ===== オフィスの鍵のかかったカード（横長）も読めるように（2026-10-01）===== 鍵の表示がカード全体に重なり、名前・説明と「ロック中・解除条件」が二重に読めなかった。 絵は左、右に名前、その下に「ロック中・進み具合・あと何点」を並べる。説明は鍵が開いてから */ #office-team .office-list-agent[data-design-locked="true"]{ opacity:1!important;filter:none!important;display:grid!important;grid-template-columns:auto 1fr; grid-template-rows:auto 1fr;column-gap:14px;row-gap:6px;align-items:start;text-align:left; background:#26323c!important;border-color:#3a4752!important} #office-team .office-list-agent[data-design-locked="true"]>*{opacity:1!important;filter:none!important} #office-team .office-list-agent[data-design-locked="true"] .guild-portrait{grid-column:1;grid-row:1/3;filter:grayscale(.7) brightness(.85)!important} #office-team .office-list-agent[data-design-locked="true"]>span:last-child{grid-column:2;grid-row:1} #office-team .office-list-agent[data-design-locked="true"]>span:last-child strong{color:#eef2f6!important} #office-team .office-list-agent[data-design-locked="true"]>span:last-child small{display:none!important} #office-team .office-list-agent[data-design-locked="true"] .agent-lock{ position:static!important;inset:auto!important;grid-column:2;grid-row:2;display:flex!important;flex-direction:column; align-items:flex-start!important;justify-content:flex-start!important;gap:5px;padding:0!important;background:none!important; opacity:1!important;filter:none!important;width:100%} #office-team .office-list-agent[data-design-locked="true"] .agent-lock-shield, #office-team .office-list-agent[data-design-locked="true"] .agent-lock-todo-head, #office-team .office-list-agent[data-design-locked="true"] .agent-lock-todo, #office-team .office-list-agent[data-design-locked="true"] .agent-lock-peek{display:none!important} #office-team .office-list-agent[data-design-locked="true"] .agent-lock-title{font-size:11px!important;letter-spacing:.2em;color:#f3d58f!important;margin:0} #office-team .office-list-agent[data-design-locked="true"] .agent-lock-track{width:100%!important;max-width:220px} #office-team .office-list-agent[data-design-locked="true"] .agent-lock-say{font-size:11px!important;color:#c9d3dd!important;margin:0} /* 左上は会社名を大きく（2026-10-01 卓馬「左上のロゴの位置がずれて汚い。名前を大きく入れるだけでOK」）。 ロゴの画像と頭文字の札は出さない（会社の切り替えで出し入れされるので、ここで常に隠す） */ .app-header .brand-logo,.app-header .brand-monogram{display:none!important} .app-header>strong{display:flex!important;align-items:baseline;gap:12px;min-width:0} .app-header .brand-company{font-size:22px!important;font-weight:800!important;letter-spacing:.02em; max-width:min(420px,40vw)!important;line-height:1.3} .app-header .product-wordmark{order:2;font-size:13px!important;letter-spacing:.16em;opacity:.75} @media(max-width:760px){.app-header .brand-company{font-size:17px!important;max-width:60vw!important}} /* LPのデモの手順（2026-10-01）。「次へ」で最後まで進む */ .lp-demo-bar{background:#fff;border:1px solid #d3e3fd;border-radius:14px;padding:10px 14px;margin:0 0 12px;display:grid;gap:8px} .lp-demo-bar>strong{font-size:12px;color:#0b57d0} .lp-demo-bar ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0} .lp-demo-bar ol button{font-size:12px;padding:5px 12px;min-height:0;border-radius:16px;border:1px solid #c4c7c5;background:#fff;color:#444746} .lp-demo-bar ol button.done{background:#e8f0fe;color:#0842a0;border-color:#e8f0fe} .lp-demo-bar ol button[aria-current=step]{background:#0b57d0;color:#fff;border-color:#0b57d0} .lp-demo-say{margin:0;font-size:13px;line-height:1.7;color:#1f1f1f} .lp-demo-nav{display:flex;gap:8px;justify-content:flex-end} .lp-demo-nav button.primary{background:#0b57d0;color:#fff;border-color:#0b57d0} .lp-ab-dates>label{min-width:0}.lp-ab-dates input{min-width:0;width:100%;box-sizing:border-box} /* プルム（LP）の部屋（2026-10-01）。キャラクターは世界観の絵、操作は道具の見た目 */ .lp-hub-dialog{width:min(860px,94vw);padding:24px 26px} .lp-hub-head{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;margin-bottom:18px} .lp-hub-art{width:96px;height:96px;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.18)} .lp-hub-head h2{margin:0 0 4px;font-size:26px} .lp-hub-head p{margin:0;color:#444746;font-size:13px;line-height:1.7} .lp-hub-head p:first-child{font-size:12px;letter-spacing:.12em;color:#0b57d0;font-weight:700} .lp-hub-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .lp-hub-card{border:1px solid #dadce0;border-radius:16px;padding:18px;display:grid;gap:10px;align-content:start;background:#fff} .lp-hub-card.main{border-color:#0b57d0;background:#f0f4f9} .lp-hub-card h3{margin:0;font-size:17px} .lp-hub-card p{margin:0;font-size:13px;line-height:1.75;color:#444746} .lp-hub-card button{justify-self:start} .lp-hub-card.main button{background:#0b57d0;color:#fff;border-color:#0b57d0} .lp-hub-card small{font-size:12px;color:#5f6368} .lp-hub-list{margin-top:20px} .lp-hub-list h3{font-size:15px;margin:0 0 8px} .lp-hub-list>div{display:grid;gap:8px} .lp-hub-item{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;border-radius:12px!important;padding:12px 16px!important;color:#1f1f1f!important} .lp-hub-item small{color:#5f6368;font-weight:400} @media(max-width:900px){.lp-hub-actions{grid-template-columns:1fr}} @media(max-width:700px){.lp-hub-actions{grid-template-columns:1fr}.lp-hub-head{grid-template-columns:64px 1fr}.lp-hub-art{width:64px;height:64px}.lp-hub-close{grid-column:1/-1;justify-self:end}} /* LPの依頼の「次にやること」（2026-10-01） */ .lp-ready{border:1px solid #d3e3fd;background:#f0f4f9;border-radius:16px;padding:14px 18px;margin:10px 0 14px;display:grid;gap:6px} .lp-ready strong{font-size:15px;color:#1f1f1f} .lp-ready p{margin:0;font-size:13px;color:#444746;line-height:1.7} .lp-ready button{justify-self:start;margin-top:4px} .lp-ready button.primary{background:#0b57d0;color:#fff;border-color:#0b57d0} /* ===== 成果物フォルダ：Googleドライブと同じ見た目（2026-10-02 卓馬指示）===== 上に中身のサムネイル、下にアイコンと名前。横は最大4列。はみ出したら枠の中でスクロール （下に伸び続けて画面が縦長になっていた） */ #feed-cards.drive-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important; max-height:min(76vh,860px);overflow:auto;padding:4px 6px 12px 2px;align-items:start;overscroll-behavior:contain} @media(max-width:1180px){#feed-cards.drive-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:860px){#feed-cards.drive-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:520px){#feed-cards.drive-grid{grid-template-columns:1fr!important}} #feed-cards .drive-card{position:relative;border:1px solid #dadce0!important;border-radius:12px!important;background:#fff!important; padding:0!important;overflow:hidden;box-shadow:none!important;transition:box-shadow .15s,border-color .15s;min-width:0} #feed-cards .drive-card:hover{box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)!important;border-color:#c4c7c5!important} #feed-cards .drive-open{display:block;width:100%;text-align:left;border:0!important;background:transparent!important;padding:0!important; border-radius:0!important;min-height:0;color:#1f1f1f;cursor:pointer} .drive-thumb{position:relative;height:168px;background:#f0f4f9;border-bottom:1px solid #e1e3e1;overflow:hidden;display:flex;justify-content:center;align-items:flex-start} .drive-thumb-image{background:#e9eef6;align-items:center} .drive-thumb-image img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .drive-page{width:78%;margin-top:14px;min-height:200px;background:#fff;box-shadow:0 1px 3px rgba(60,64,67,.25);border-radius:2px;padding:12px 12px 0; font-size:7.5px;line-height:1.55;color:#3c4043;overflow:hidden} .drive-page b{display:block;font-size:9.5px;line-height:1.4;color:#1f1f1f;margin-bottom:6px;font-weight:700} .drive-page p{margin:0 0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .drive-state{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:600;border-radius:8px;padding:2px 8px;background:#fff;color:#444746;box-shadow:0 1px 2px rgba(60,64,67,.25)} .drive-state[data-phase=review]{background:#fef7e0;color:#8a4b00} .drive-state[data-phase=new]{background:#e8f0fe;color:#0842a0} .drive-state[data-phase=done],.drive-state[data-phase=sent]{background:#e6f4ea;color:#0d652d} .drive-meta{display:flex;align-items:center;gap:10px;padding:10px 40px 2px 12px;font-size:14px;font-weight:500;min-width:0} .drive-meta>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .drive-sub{padding:0 12px 12px 42px;font-size:12px;color:#5f6368;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .drive-icon{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;font-size:10px;font-weight:800;color:#fff;background:#4285f4;letter-spacing:-.02em} .drive-icon[data-kind=ad_creative]{background:#ea4335} .drive-icon[data-kind=lp],.drive-icon[data-kind=website]{background:#1a73e8} .drive-icon[data-kind=proposal],.drive-icon[data-kind=sales]{background:#188038} .drive-icon[data-kind=marketing_design]{background:#9334e6} .drive-icon[data-kind=report],.drive-icon[data-kind=seo]{background:#e37400} .drive-icon[data-kind=instagram],.drive-icon[data-kind=post],.drive-icon[data-kind=youtube]{background:#d01884} #feed-cards .drive-more{position:absolute!important;right:6px;bottom:8px;top:auto!important;width:30px;height:30px;min-height:0!important;padding:0!important; border:0!important;border-radius:50%!important;background:transparent!important;color:#444746!important;font-size:18px;line-height:30px;font-weight:700} #feed-cards .drive-more:hover{background:rgba(68,71,70,.08)!important} #feed-cards .library-saved-open{margin:0 12px 10px;font-size:12px} /* 一覧で表示（ドライブのリスト表示） */ #feed-cards.drive-list{display:block!important;max-height:min(76vh,860px);overflow:auto;border:1px solid #dadce0;border-radius:12px;background:#fff} #feed-cards.drive-list .drive-card{border:0!important;border-bottom:1px solid #e1e3e1!important;border-radius:0!important} #feed-cards.drive-list .drive-card:hover{box-shadow:none!important;background:#f0f4f9!important} .drive-row{display:grid!important;grid-template-columns:28px minmax(0,3fr) minmax(0,1.2fr) minmax(0,1.4fr) 70px 36px;gap:12px;align-items:center;padding:10px 14px!important;font-size:13px;color:#444746} .drive-row .drive-name strong{font-weight:500;color:#1f1f1f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .drive-head{position:sticky;top:0;z-index:1;background:#fff;border-bottom:1px solid #dadce0;font-size:12px;font-weight:600;color:#444746} #feed-cards.drive-list .drive-more{top:50%!important;bottom:auto;transform:translateY(-50%)} @media(max-width:700px){.drive-row{grid-template-columns:28px minmax(0,1fr) 60px 36px}.drive-row>:nth-child(3),.drive-row>:nth-child(4){display:none}} .drive-view-switch{display:inline-flex;border:1px solid #c4c7c5;border-radius:20px;overflow:hidden;margin-left:auto;margin-right:12px} .drive-view-switch button{border:0!important;border-radius:0!important;padding:5px 14px!important;min-height:0!important;font-size:12px;background:#fff!important;color:#444746!important} .drive-view-switch button[aria-pressed=true]{background:#c2e7ff!important;color:#001d35!important} .feed-list-toolbar{display:flex;align-items:center;gap:8px} /* ===== 仲間のレベル一覧：ドラクエの「つよさ」の窓（2026-10-02 卓馬指示「ゲーム性があるように面白おかしく」）===== 黒い地・白い二重の枠・▶。仲間ごとに、絵・なまえ・しょくぎょう・Lv・けいけんち・そうび・つぎに おぼえる */ .office-work-hub{display:none!important} /* 「仕事を依頼する／仕事の進捗」は使わない（2026-10-02 卓馬指示で外した） */ .flow-team-training{background:#0b0f2b!important;color:#f4f4f4;padding:26px 24px 30px!important;border-top:0!important} .flow-team-training>h2{color:#fff!important;font-size:24px!important;letter-spacing:.12em;margin:0 0 14px!important; display:inline-block;background:#000;border:3px solid #fff;border-radius:10px;padding:6px 18px;box-shadow:0 0 0 3px #000} .flow-team-training>h2::before{content:'▶ ';color:#ffd84a} .flow-team-training .office-roster-heading{background:transparent!important;color:#e9ecf5!important;border:0!important} .flow-team-training .office-roster-heading *{color:#e9ecf5!important} .flow-team-training .office-roster-heading button{background:#000!important;border:2px solid #fff!important;border-radius:8px!important;color:#fff!important} .flow-team-training details,.flow-team-training #office-growth-strip{background:transparent!important;border:0!important;box-shadow:none!important} .flow-team-training summary{color:#ffd84a!important;font-weight:800;letter-spacing:.08em} /* パーティのへいきんレベル */ .flow-team-training .guild-team-level{background:#000!important;border:3px solid #fff!important;border-radius:12px!important;color:#fff!important; box-shadow:0 0 0 3px #000,0 6px 0 #00000080!important;padding:16px 20px!important} .flow-team-training .guild-team-level>span:first-child{color:#cfd6ff!important;letter-spacing:.14em} .flow-team-training .guild-team-level strong{color:#fff!important;font-size:28px!important;letter-spacing:.06em} .flow-team-training .guild-team-level p{color:#ffd84a!important;font-weight:700} .flow-team-training .guild-team-bar{background:#1d2547!important;border:2px solid #fff!important;border-radius:4px!important;height:14px!important} .flow-team-training .guild-team-fill{background:linear-gradient(90deg,#3fd16b,#c6f25a)!important} /* 仲間ごとの「つよさ」の窓 */ .flow-team-training .office-growth-card.dq-status{display:grid!important;grid-template-columns:72px 1fr;grid-template-areas:'face head' 'exp exp' 'stats stats' 'next next' 'go go'; gap:8px 12px;align-content:start;text-align:left;background:#000!important;color:#fff!important;border:3px solid #fff!important;border-radius:12px!important; box-shadow:0 0 0 3px #000,0 6px 0 #00000080!important;padding:14px 16px!important;transition:transform .12s} .flow-team-training .office-growth-card.dq-status:hover:not(:disabled){transform:translateY(-3px)} .flow-team-training .office-growth-card.dq-status:hover:not(:disabled) .dq-go{color:#ffd84a} .dq-face{grid-area:face;width:72px;height:72px;border:2px solid #fff;border-radius:8px;overflow:hidden;display:block} .dq-face .guild-portrait{width:72px!important;height:72px!important;border-radius:0!important} .dq-face .guild-role-crest{display:none!important} .dq-head{grid-area:head;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-content:center} .dq-name{font-size:19px;letter-spacing:.08em;color:#fff} .dq-level{justify-self:end;background:transparent!important;color:#ffd84a!important;font-weight:900;font-size:17px;border:0!important;padding:0!important} .dq-job{grid-column:1/-1;font-size:12px;color:#aeb6e8} .dq-title{grid-column:1/-1;font-size:12px;color:#7fe0a0;font-weight:700} .dq-title::before{content:'しょうごう：';color:#aeb6e8;font-weight:400} .flow-team-training .dq-exp{grid-area:exp;display:block!important;height:12px!important;background:#1d2547!important;border:2px solid #fff!important;border-radius:4px!important;overflow:hidden} .flow-team-training .dq-exp>i{display:block;height:100%;background:linear-gradient(90deg,#3fd16b,#c6f25a)!important} .dq-stats{grid-area:stats;display:grid;gap:3px;font-size:13px} .dq-row{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted #3b4370;padding-bottom:2px} .dq-row span{color:#cfd6ff} .dq-row b{color:#fff;font-variant-numeric:tabular-nums} .flow-team-training .dq-next{grid-area:next;font-size:12px!important;color:#ffe9a6!important;line-height:1.6} .dq-go{grid-area:go;justify-self:end;font-weight:800;color:#fff;letter-spacing:.08em} .flow-team-training .office-growth-card.dq-soon{opacity:.75} .flow-team-training .guild-level-note{color:#aeb6e8!important;font-size:12px} .flow-team-training .office-growth-card.dq-status .dq-go{color:#fff!important} .flow-team-training .office-growth-card.dq-status:hover:not(:disabled) .dq-go{color:#ffd84a!important} .flow-team-training .office-roster-heading button,.flow-team-training .office-roster-heading button:disabled{color:#fff!important;opacity:1!important;font-weight:700} .flow-team-training #office-roster-open{background:#000!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:2px solid #fff!important;border-radius:8px!important;font-weight:800} .flow-team-training #office-roster-open:hover{color:#ffd84a!important;-webkit-text-fill-color:#ffd84a!important} /* LPを1段ずつ作る（2026-10-02）。何を売るか→型→数字→文章→イメージ→生成・公開。どの段でも保存できる */ .lp-wizard{width:min(980px,96vw);max-height:92vh;padding:0;display:none;flex-direction:column;overflow:hidden} .lp-wizard[open]{display:flex} .lp-wizard-head,.lp-wizard-steps,.lp-wizard-foot{flex-shrink:0} .lp-wizard-head{display:flex;gap:12px;align-items:center;padding:16px 22px 8px} .lp-wizard-head h2{margin:0;font-size:20px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-wizard-status{font-size:12px;padding:3px 10px;border-radius:999px;background:#e8eaed;color:#3c4043;white-space:nowrap} .lp-wizard-status[data-status="review"]{background:#fef7e0;color:#7a4f01} .lp-wizard-status[data-status="approved"]{background:#e6f4ea;color:#0d652d} .lp-wizard-status[data-status="published"]{background:#d3e3fd;color:#041e49} .lp-wizard-steps{display:flex;gap:6px;list-style:none;margin:0;padding:6px 22px 12px;border-bottom:1px solid #dadce0;overflow-x:auto} .lp-wizard-steps button{border-radius:999px!important;padding:6px 14px!important;font-size:13px;white-space:nowrap;background:#fff;color:#444746!important;border:1px solid #dadce0} .lp-wizard-steps button.done{background:#e8f0fe;color:#0b57d0!important;border-color:#c2d7fb} .lp-wizard-steps button[aria-current="step"]{background:#0b57d0;color:#fff!important;border-color:#0b57d0} .lp-wizard-steps button:disabled{opacity:.45} .lp-wizard-main{flex:1;overflow:auto;padding:18px 22px 24px} .lp-wizard-main h3{margin:0 0 4px;font-size:18px} .lp-wizard-lead{margin:0 0 14px;color:#5f6368;font-size:13px;line-height:1.7} .lp-wizard-choices{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px} .lp-wizard-choices legend{font-weight:700;font-size:14px;margin-bottom:8px;padding:0} .lp-wizard-choices button{display:grid;gap:2px;text-align:left;border-radius:12px!important;padding:10px 14px!important;background:#fff;border:1px solid #dadce0;color:#1f1f1f!important;max-width:240px} .lp-wizard-choices button small{color:#5f6368;font-size:11px;font-weight:400} .lp-wizard-choices button[aria-pressed="true"],.lp-wizard-template[aria-pressed="true"]{border-color:#0b57d0;background:#e8f0fe;box-shadow:inset 0 0 0 1px #0b57d0} .lp-wizard-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .lp-wizard-template{display:grid;gap:6px;align-content:start;text-align:left;border-radius:14px!important;padding:14px!important;background:#fff;border:1px solid #dadce0;color:#1f1f1f!important} .lp-wizard-template small{color:#5f6368;font-weight:400;line-height:1.6} .lp-wizard-template ol{margin:4px 0 0;padding-left:20px;font-size:12px;font-weight:400;color:#3c4043;line-height:1.7} .lp-wizard-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .lp-wizard-fields label,.lp-wizard-block label,.lp-wizard-free{display:grid;gap:4px;font-size:13px} .lp-wizard-fields span,.lp-wizard-block label span,.lp-wizard-free span{font-weight:600;color:#3c4043} .lp-wizard input,.lp-wizard textarea,.lp-wizard select{width:100%;box-sizing:border-box;min-width:0} .lp-wizard-ad{margin-top:18px;padding:14px;border:1px dashed #c4c7c5;border-radius:12px} .lp-wizard-ad h4,.lp-wizard-issues h4{margin:0 0 4px} .lp-wizard-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .lp-wizard-actions .primary,.lp-wizard-foot .primary{background:#0b57d0;color:#fff;border-color:#0b57d0} .lp-wizard-issues{background:#fef7e0;border-radius:12px;padding:12px 14px;margin-bottom:12px} .lp-wizard-issues p{margin:4px 0;font-size:13px} .lp-wizard-blocks{display:grid;gap:12px} .lp-wizard-block{border:1px solid #dadce0;border-radius:14px;padding:14px;display:grid;gap:8px;background:#fff} .lp-wizard-block-top{display:flex;gap:6px;align-items:center} .lp-wizard-block-top strong{flex:1} .lp-wizard-block-top button{padding:4px 10px!important;font-size:12px} .lp-wizard-add{margin:12px 0} .lp-wizard-add select{max-width:260px} .lp-wizard-howto{line-height:1.9;font-size:14px;padding-left:22px} .lp-wizard-published{background:#e6f4ea;border-radius:10px;padding:10px 14px;word-break:break-all} .lp-wizard-foot{display:flex;gap:10px;align-items:center;padding:12px 22px;border-top:1px solid #dadce0;background:#f8fafd} .lp-wizard-msg{flex:1;margin:0;font-size:13px;color:#3c4043;min-width:0} @media(max-width:700px){.lp-wizard-foot{flex-wrap:wrap}.lp-wizard-msg{order:-1;flex-basis:100%}.lp-wizard-choices button{max-width:none;flex:1 1 140px}} /* LP制作の道具（2026-10-02）。点数・型・ページの上で直す・広告ごとの1画面・数字と改善 */ .lp-wizard-score{border-radius:999px!important;padding:4px 12px!important;font-size:12px;font-weight:700;background:#e8f0fe;color:#0b57d0!important;border:1px solid #c2d7fb;white-space:nowrap} .lp-wizard-score[data-grade="C"]{background:#fef7e0;color:#7a4f01!important;border-color:#f3d48a} .lp-wizard-score[data-grade="D"]{background:#fce8e6;color:#a50e0e!important;border-color:#f4b4ae} .lp-wizard-modes{display:inline-flex;border:1px solid #c4c7c5;border-radius:999px;overflow:hidden;margin:8px 0 12px} .lp-wizard-modes button{border:0!important;border-radius:0!important;padding:7px 16px!important;background:#fff;color:#444746!important} .lp-wizard-modes button[aria-pressed="true"]{background:#0b57d0;color:#fff!important} .lpt-quality{border:1px solid #dadce0;border-radius:14px;padding:14px 16px;margin:0 0 14px;background:#fff} .lpt-quality-head{display:flex;gap:14px;align-items:center} .lpt-quality-head h4{margin:0 0 2px}.lpt-quality-head p{margin:0;font-size:13px;color:#444746} .lpt-score{--p:0;width:64px;height:64px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(#0b57d0 calc(var(--p)*1%),#e8eaed 0);position:relative;flex-shrink:0} .lpt-score:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff} .lpt-score strong,.lpt-score small{position:relative;line-height:1}.lpt-score strong{font-size:20px}.lpt-score small{font-size:10px} .lpt-quality[data-grade="C"] .lpt-score{background:conic-gradient(#e37400 calc(var(--p)*1%),#e8eaed 0)} .lpt-quality[data-grade="D"] .lpt-score{background:conic-gradient(#d93025 calc(var(--p)*1%),#e8eaed 0)} .lpt-bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 16px;margin:12px 0} .lpt-bar{display:grid;grid-template-columns:86px 1fr 46px;gap:8px;align-items:center;font-size:12px} .lpt-bar meter{width:100%;height:8px} .lpt-fixes{margin:4px 0 0;padding-left:20px;display:grid;gap:8px} .lpt-fixes li{font-size:13px}.lpt-fixes p{margin:2px 0 4px;color:#444746}.lpt-fixes button{padding:3px 10px!important;font-size:12px} .lpt-warn{background:#fef7e0;color:#5f3b00;border-radius:10px;padding:8px 12px;font-size:13px;margin:6px 0} .lpt-blank{background:#fde7e7!important;border-color:#f4b4ae!important} .lpw-flash{box-shadow:0 0 0 3px #fbbc04!important} .lp-wizard-patnote{color:#5f6368;font-size:12px} .lpt-patterns{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:8px 0} .lpt-patterns>h4,.lpt-patterns>p,.lpt-patterns>button{grid-column:1/-1;margin:0} .lpt-pattern{border:1px solid #dadce0;border-radius:14px;padding:14px;display:grid;gap:6px;background:#fff;align-content:start} .lpt-pattern small{color:#5f6368}.lpt-pattern p{margin:0;font-size:13px} .lpt-pattern button{justify-self:start} .lpt-skeleton{background:#f8fafd;border-radius:10px;padding:8px 10px;display:grid;gap:2px;font-size:12px;color:#3c4043} .lp-wizard-pagehost{border:1px solid #dadce0;border-radius:14px;overflow:hidden;max-width:430px;margin:0 auto;background:#fff} .lpt-page{max-height:70vh;overflow:auto;container-type:inline-size} .lp-wizard-adpick{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:14px} .lp-wizard-adpick input{width:auto!important} .lp-wizard-adpick small{color:#5f6368} .lp-wizard-adrow{display:grid;gap:6px;padding:10px 0;border-top:1px dashed #dadce0} .lp-wizard-adrow small{color:#5f6368}.lp-wizard-adrow button{justify-self:start} .lp-wizard-urls{margin:12px 0;display:grid;gap:6px} .lp-wizard-urlrow{display:grid;grid-template-columns:180px 1fr auto;gap:8px;align-items:center;font-size:13px} .lp-wizard-winners{margin-top:18px;display:grid;gap:8px} .lpt-stats{display:grid;gap:16px} .lpt-advice{display:grid;gap:8px}.lpt-advice h4,.lpt-funnel h4,.lpt-cv h4{margin:0 0 6px} .lpt-adv{border-radius:12px;padding:12px 14px;background:#f1f3f4;border-left:5px solid #9aa0a6} .lpt-adv.error{background:#fce8e6;border-color:#d93025}.lpt-adv.warn{background:#fef7e0;border-color:#f9ab00}.lpt-adv.ok{background:#e6f4ea;border-color:#188038} .lpt-adv p{margin:4px 0 6px;font-size:13px} .lpt-frow{display:grid;grid-template-columns:150px 1fr 110px;gap:10px;align-items:center;font-size:13px;margin:4px 0} .lpt-frow b{height:12px;background:#e8eaed;border-radius:6px;overflow:hidden}.lpt-frow i{display:block;height:100%;background:#0b57d0} .lpt-table{border-collapse:collapse;width:100%;font-size:13px}.lpt-table th,.lpt-table td{border-bottom:1px solid #e8eaed;padding:6px 8px;text-align:left} .lpt-cv{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.lpt-cv h4,.lpt-cv p,.lpt-cv ul{flex-basis:100%;margin:0} .lpt-cv input,.lpt-cv select{width:auto!important;min-width:110px} .lpt-lead{color:#5f6368;font-size:13px;margin:0 0 8px} @media(max-width:700px){.lp-wizard-urlrow,.lpt-frow{grid-template-columns:1fr}} /* 左上の会社名から会社を切り替える（2026-10-02） */ /* ヘッダーのボタン共通の見た目（白地・枠・13px）を打ち消して、もとの大きな社名に見せる */ body .app-header>strong>button.brand-company{background:none!important;border:0!important;box-shadow:none!important;padding:2px 8px!important;border-radius:8px!important;cursor:pointer;display:inline-flex!important;align-items:center;gap:8px;color:var(--flow-ink,#1f1f1f)!important;font:inherit;font-size:22px!important;font-weight:800!important;min-height:0!important;max-width:min(440px,42vw)!important;overflow:hidden} body .app-header>strong>button.brand-company>span{font:inherit!important;font-size:inherit!important;letter-spacing:.02em!important;color:inherit!important;border:0!important;padding:0!important;margin:0!important;display:inline!important;opacity:1!important} body .app-header>strong>button.brand-company>.brand-company-caret{font-size:.55em!important;opacity:.7!important} body:has([data-world="fantasy-guild"]) .app-header>strong>button.brand-company{color:#fff1d0!important} @media(max-width:760px){body .app-header>strong>button.brand-company{font-size:17px!important;max-width:60vw!important}} .app-header button.brand-company>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app-header button.brand-company:hover,.app-header button.brand-company[aria-expanded="true"]{background:rgba(127,127,127,.14)!important} .brand-company-caret{font-size:.6em;opacity:.75} .brand-company-menu{position:fixed;z-index:1000;min-width:260px;max-width:min(360px,92vw);max-height:60vh;overflow:auto;background:#fff;border:1px solid #dadce0;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:grid;gap:2px} .brand-company-menu>p{margin:6px 10px 4px;font-size:12px;color:#5f6368} .brand-company-menu button{display:grid;grid-template-columns:32px 1fr 16px;gap:10px;align-items:center;text-align:left;background:#fff;border:0;border-radius:10px;padding:8px 10px;font-size:14px;color:#1f1f1f;cursor:pointer} .brand-company-menu button:hover,.brand-company-menu button:focus-visible{background:#f1f3f4} .brand-company-menu button[aria-selected="true"]{background:#e8f0fe;color:#0b57d0;font-weight:700} .brand-company-mark{width:32px;height:32px;border-radius:8px;background:#e8eaed;display:grid;place-items:center;font-size:12px;font-weight:700;overflow:hidden;color:#3c4043} .brand-company-mark img{width:100%;height:100%;object-fit:contain;background:#fff} .brand-company-menu .brand-company-add{display:block;border-top:1px solid #e8eaed;border-radius:0 0 10px 10px;margin-top:4px;color:#0b57d0} /* 1段ずつ作る流れのデモ（2026-10-02） */ .lp-wizard-demo{background:#fff6dd;color:#60491e;border:1px solid #e7d9b6;border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 12px} .lp-hub-actions{grid-template-columns:repeat(2,1fr)} @media(max-width:700px){.lp-hub-actions{grid-template-columns:1fr}} /* ユーザー管理（2026-10-02） */ .user-admin{width:min(1040px,96vw);max-height:92vh;padding:0;overflow:hidden;flex-direction:column} .user-admin[open]{display:flex} .user-admin-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 8px} .user-admin-head h2{margin:0;font-size:20px} .user-admin-tabs{display:flex;gap:6px;padding:0 22px 10px;border-bottom:1px solid #dadce0} .user-admin-tabs button{border-radius:999px!important;padding:6px 14px!important;background:#fff;border:1px solid #dadce0;color:#444746!important} .user-admin-tabs button[aria-selected="true"]{background:#0b57d0;color:#fff!important;border-color:#0b57d0} .user-admin-msg{margin:8px 22px 0;font-size:13px;color:#0d652d;min-height:1em} .user-admin-msg[data-bad="1"]{color:#a50e0e} .user-admin-main{overflow:auto;padding:12px 22px 24px;display:grid;gap:14px;align-content:start} .user-admin-lead{margin:0;color:#5f6368;font-size:13px;line-height:1.7} .user-admin-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#f8fafd;border:1px solid #dadce0;border-radius:12px;padding:12px 14px} .user-admin-add h3{flex-basis:100%;margin:0 0 4px;font-size:14px} .user-admin-add input{flex:1 1 220px;min-width:0} .user-admin-add .primary,.user-admin .primary{background:#0b57d0;color:#fff;border-color:#0b57d0} .user-admin-members{display:grid;gap:12px} .user-admin-member{border:1px solid #dadce0;border-radius:14px;padding:14px;display:grid;gap:8px;background:#fff} .user-admin-member-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} .user-admin-member-top small{color:#5f6368} .user-admin-active{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:13px;white-space:nowrap} .user-admin-active input{width:auto!important} .user-admin-companies input{width:auto!important} .user-admin-add select{flex:0 0 160px} .user-admin-usage{margin:0;font-size:13px;color:#3c4043} .user-admin-member-fields{display:flex;flex-wrap:wrap;gap:10px} .user-admin-limit{display:grid;gap:4px;font-size:12px;color:#444746} .user-admin-limit input,.user-admin-limit select{width:200px;max-width:100%} .user-admin-member h4{margin:6px 0 0;font-size:13px} .user-admin-companies{display:grid;gap:6px} .user-admin-company-list{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:140px;overflow:auto;padding:4px 0} .user-admin-companies label{display:flex;gap:6px;align-items:center;font-size:13px} .user-admin-actions{display:flex;gap:8px;justify-content:flex-end} .user-admin-matrix{border-collapse:collapse;width:100%;font-size:13px} .user-admin-matrix th,.user-admin-matrix td{border-bottom:1px solid #e8eaed;padding:8px 10px;text-align:center} .user-admin-matrix tr>th:first-child{text-align:left;display:grid;gap:2px} .user-admin-matrix th small{color:#5f6368;font-weight:400} .user-admin-matrix input[type=checkbox]{width:18px;height:18px} .user-admin-matrix input[type=number]{width:120px} .user-admin-matrix tr.user-admin-group>th:first-child{display:table-cell;background:#f1f3f4;padding-top:14px} /* 列の見出し（一般・リーダー・管理者）を、下へ送っても見えるようにする */ .user-admin-matrix tr:first-child>th{position:sticky;top:-12px;background:#fff;z-index:1} .user-admin-matrix tr:first-child>th:first-child{display:table-cell;vertical-align:bottom} .user-admin-matrix .user-admin-group th strong,.user-admin-matrix .user-admin-group th small{display:block} .user-admin-matrix .user-admin-group th small{line-height:1.6;margin-top:2px} .user-admin-matrix .user-admin-ai>th strong{color:#174ea6} .user-admin-help{margin:0;padding-left:20px;font-size:13px;color:#444746;line-height:1.8} .user-admin-audit{margin:0;padding-left:20px;font-size:13px;line-height:1.9} #my-access{margin:4px 0 0;font-size:12px;color:#5f6368} @media(max-width:700px){.user-admin-limit input,.user-admin-limit select{width:100%}} /* 390px：管理者の列まで画面に収める（2026-10-09 AIで作るの許可の行を足したとき） */ @media(max-width:700px){.user-admin-main{padding:10px 12px 20px}.user-admin-matrix{font-size:12px}.user-admin-matrix th,.user-admin-matrix td{padding:6px 4px}.user-admin-matrix input[type=number]{width:64px}.user-admin-matrix th small{overflow-wrap:anywhere}} /* スマホ幅でのLP制作の見出し（2026-10-02 点検：点数・状態の札に押されて題が「LPを…」まで縮んでいた） */ @media(max-width:700px){ .lp-wizard-head{flex-wrap:wrap;row-gap:6px;padding:12px 14px 6px} .lp-wizard-head h2{flex-basis:100%;order:-1;white-space:normal;font-size:16px;line-height:1.4} .lp-wizard-head .lp-wizard-score{margin-right:auto} .lp-wizard-steps{padding:6px 14px 10px} .lp-wizard-main{padding:14px} .lp-wizard-foot{padding:10px 14px} } /* 役割で使えないAI社員（2026-10-02）。押すと理由を出す。サーバー側でも止めている */ [data-no-permission="true"]{position:relative;filter:grayscale(.7);opacity:.75} .no-permission-tag{position:absolute;top:8px;left:8px;z-index:3;background:#3c4043;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;pointer-events:none} /* 作りながら見る（2026-10-02）。左で選ぶ・書く、右にできあがりの見本 */ .lp-wizard{width:min(1440px,98vw)} .lp-wizard-body{flex:1;min-height:0;display:flex} .lp-wizard-body>.lp-wizard-main{flex:1 1 auto;min-width:0} .lpt-live{flex:0 0 40%;max-width:560px;border-left:1px solid #dadce0;background:#f1f3f4;display:flex;flex-direction:column;min-height:0} .lpt-live[hidden]{display:none} .lpt-live-head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid #dadce0} .lpt-live-head small{color:#5f6368;font-size:12px;flex:1} .lpt-live-switch{display:inline-flex;border:1px solid #c4c7c5;border-radius:999px;overflow:hidden} .lpt-live-switch button{border:0!important;border-radius:0!important;padding:4px 12px!important;font-size:12px;background:#fff;color:#444746!important} .lpt-live-switch button[aria-pressed="true"]{background:#0b57d0;color:#fff!important} .lpt-live-frame{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:12px 0} .lpt-live-inner{background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.14);border-radius:14px;overflow:hidden;flex:0 0 auto;container-type:inline-size} .lpt-live-adref{display:flex;align-items:center;gap:10px;margin:0;padding:8px 14px;background:#fff;border-bottom:1px solid #dadce0} .lpt-live-adref[hidden]{display:none} .lpt-live-adref-img{flex:0 0 auto;width:auto;height:72px;max-width:96px;object-fit:contain;border-radius:6px;border:1px solid #dadce0;background:#f8f9fa} .lpt-live-adref-cap{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;color:#1f1f1f} .lpt-live-adref-cap strong{display:inline-block;align-self:flex-start;padding:2px 8px;border-radius:999px;background:#e8f0fe;color:#0b57d0;font-size:12px} .lpt-live-adref-cap small{color:#5f6368;font-size:11.5px;line-height:1.5} .lpt-live-note{margin:0;padding:8px 14px;font-size:12px;color:#5f6368;background:#fff;border-top:1px solid #dadce0} .lp-wizard-peek{display:none} @media(max-width:900px){ .lpt-live{position:absolute;inset:auto 0 64px 0;top:110px;max-width:none;z-index:5;display:none;border-left:0;box-shadow:0 -8px 30px rgba(0,0,0,.25)} .lp-wizard.show-live .lpt-live:not([hidden]){display:flex} .lp-wizard.has-live .lp-wizard-peek{display:inline-flex} .lpt-live-adref{padding:6px 12px} .lpt-live-adref-img{height:52px;max-width:72px} .lp-wizard{position:fixed} } /* 生成・公開の段：Opus 5.5 で仕上げる（2026-10-02） */ .lp-wizard-make{border:2px solid #0b57d0;border-radius:16px;padding:16px;margin:8px 0 14px;background:linear-gradient(135deg,#f0f4ff,#fff)} .lp-wizard-make .primary{font-size:16px;padding:12px 20px!important;border-radius:999px!important} .lp-wizard-make p{margin:8px 0 0} .lp-wizard-looksw{display:flex;gap:6px;padding:8px 14px;background:#fff;border-bottom:1px solid #dadce0} .lp-wizard-looksw[hidden]{display:none} .lp-wizard-looksw button{border-radius:999px!important;padding:5px 12px!important;font-size:12px;background:#fff;border:1px solid #c4c7c5;color:#444746!important} .lp-wizard-looksw button[aria-pressed="true"]{background:#0b57d0;border-color:#0b57d0;color:#fff!important} /* 鍵を開ける（2026-10-02）。開けられる鍵は金色に光って跳ね、押すと砕け散る */ .agent-lock-ready{cursor:pointer;background:radial-gradient(circle at 50% 40%,rgba(255,214,102,.35),rgba(20,26,40,.78) 70%)!important} .agent-lock-ready .agent-lock-shield{animation:lock-ready-bob 1.4s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(255,210,90,.95))} .agent-lock-ready .agent-lock-title{color:#ffe08a!important;letter-spacing:.06em!important;text-shadow:0 0 10px rgba(255,200,80,.8)} .agent-lock-ready .agent-lock-say{color:#fff4cf!important} .agent-lock-open{margin-top:8px;justify-self:center;border:2px solid #ffe08a!important;background:linear-gradient(180deg,#ffd45a,#f0a020)!important;color:#3a2600!important;font-weight:900;border-radius:999px!important;padding:8px 18px!important;font-size:13px;box-shadow:0 0 0 0 rgba(255,210,90,.7);animation:lock-ready-pulse 1.6s ease-out infinite;cursor:pointer} @keyframes lock-ready-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes lock-ready-pulse{0%{box-shadow:0 0 0 0 rgba(255,210,90,.75)}70%{box-shadow:0 0 0 14px rgba(255,210,90,0)}100%{box-shadow:0 0 0 0 rgba(255,210,90,0)}} .agent-lock-breaking .agent-lock-shield{animation:lock-break-shield .5s ease-in forwards} .agent-lock-breaking .agent-lock-title,.agent-lock-breaking .agent-lock-say,.agent-lock-breaking .agent-lock-open{transition:opacity .25s;opacity:0} .agent-lock-breaking{animation:lock-break-fade .95s ease-out forwards} @keyframes lock-break-shield{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.25) rotate(-8deg);filter:brightness(2) drop-shadow(0 0 22px #fff)}100%{transform:scale(.2) rotate(30deg);opacity:0}} @keyframes lock-break-fade{0%,45%{opacity:1}100%{opacity:0}} .agent-lock-burst{position:absolute;left:50%;top:42%;width:0;height:0;pointer-events:none} .agent-lock-burst i{position:absolute;width:10px;height:14px;margin:-7px 0 0 -5px;background:linear-gradient(135deg,#ffe9a8,#c8902a);clip-path:polygon(50% 0,100% 40%,70% 100%,0 70%);animation:lock-piece .8s cubic-bezier(.2,.7,.3,1) forwards} @keyframes lock-piece{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6);opacity:0}} .agent-just-unlocked{animation:agent-unlocked-glow 1.6s ease-out} @keyframes agent-unlocked-glow{0%{box-shadow:0 0 0 0 rgba(255,215,100,.9)}40%{box-shadow:0 0 30px 10px rgba(255,215,100,.7)}100%{box-shadow:0 0 0 0 rgba(255,215,100,0)}} @media(prefers-reduced-motion:reduce){.agent-lock-ready .agent-lock-shield,.agent-lock-open{animation:none}} /* 構成の型の完成見本（2026-10-03） */ .lp-wizard-template-box{display:grid;gap:6px;align-content:start} .lp-wizard-template-thumb{width:100%;aspect-ratio:390/700;object-fit:cover;object-position:top;border-radius:10px;border:1px solid #e1e5ec;margin-bottom:4px} .lp-wizard-template-sample{font-size:12px;font-weight:600;color:#0b57d0;text-decoration:none;padding:2px 4px} .lp-wizard-template-sample:hover{text-decoration:underline} /* ── LPスタジオ（2026-10-03 卓馬「LPを見せるには横幅が狭すぎる。編集画面を大きく、使いやすく。安っぽく見せない」） ── */ #lp-dialog.lp-studio{width:calc(100vw - 24px);max-width:1840px;height:calc(100dvh - 24px);max-height:none;padding:0;background:#f3f4f8;border:1px solid #e3e6ee;border-radius:18px;overflow:hidden;box-shadow:0 30px 90px rgba(17,24,39,.22)} #lp-dialog.lp-studio[open]{display:flex;flex-direction:column} #lp-dialog.lp-studio .lp-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;gap:16px;padding:12px 18px;background:#fff;border-bottom:1px solid #e6e8ef;flex-wrap:nowrap} #lp-dialog.lp-studio .lps-name small{display:block;font-size:11px;letter-spacing:.18em;color:#7a8394;font-weight:700} #lp-dialog.lp-studio #lp-heading{margin:0;font-size:17px;font-weight:700;color:#1b2333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lps-modes{display:inline-flex;background:#eef1f6;border-radius:12px;padding:4px;gap:4px} .lps-modes button{border:0;background:transparent;color:#4b5565;font-weight:700;font-size:14px;padding:8px 18px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:0} .lps-modes button[aria-pressed=true]{background:#fff;color:#0b57d0;box-shadow:0 1px 3px rgba(16,24,40,.12),0 1px 2px rgba(16,24,40,.06)} .lps-opt{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:#e2e8f3;color:#5a6577} .lps-modes button[aria-pressed=true] .lps-opt{background:#e8f0fe;color:#0b57d0} .lps-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center} .lps-actions>button{min-height:38px;padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px;border:1px solid #d3d8e2;background:#fff;color:#1b2333;cursor:pointer} .lps-actions>#lp-export{background:#0b57d0;color:#fff;border-color:#0b57d0} .lps-actions>.lps-ghost{background:#fff} .lps-device{display:inline-flex;border:1px solid #d3d8e2;border-radius:10px;overflow:hidden;margin-right:4px} .lps-device button{border:0;background:#fff;padding:8px 12px;font-size:13px;font-weight:700;color:#5a6577;cursor:pointer;min-height:0} .lps-device button[aria-pressed=true]{background:#1b2333;color:#fff} #lp-dialog.lp-studio #lp-unsaved{margin:0;padding:6px 20px;font-size:12px;color:#6b7383;background:#fafbfd;border-bottom:1px solid #eceef3} #lp-dialog.lp-studio #lp-unsaved:empty{display:none} #lp-dialog.lp-studio .lp-body{flex:1;min-height:0;display:flex;gap:0} #lp-dialog.lp-studio #lp-settings{width:min(420px,40vw);flex:none;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px;background:#fff;border-right:1px solid #e6e8ef;font-size:13px} #lp-dialog.lp-studio #lp-settings[hidden]{display:none} /* ステップ */ .lps-steps{display:grid;gap:10px} .lps-steps[hidden]{display:none} .lps-step{border:1px solid #e3e6ee;border-radius:14px;background:#fff;transition:border-color .2s,box-shadow .2s} .lps-step.open{border-color:#a8c3f5;box-shadow:0 6px 24px rgba(11,87,208,.08)} .lps-step-head{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;padding:14px 14px;border:0;background:transparent;cursor:pointer;color:#1b2333;min-height:0;border-radius:14px} .lps-step-head:hover{background:#f7f9fc} .lps-num{font-size:11px;font-weight:800;letter-spacing:.08em;color:#0b57d0;background:#e8f0fe;border-radius:8px;padding:5px 8px;white-space:nowrap} .lps-step[data-mode=ab] .lps-num{color:#8a4b00;background:#fdf0dc} .lps-title b{display:block;font-size:15px} .lps-title small{display:block;color:#6b7383;font-size:12px;font-weight:400;margin-top:2px} .lps-chev{width:9px;height:9px;border-right:2px solid #9aa3b2;border-bottom:2px solid #9aa3b2;transform:rotate(45deg);transition:transform .2s;margin-right:4px} .lps-step.open .lps-chev{transform:rotate(-135deg)} .lps-step-body{display:none;padding:2px 16px 16px} .lps-step.open .lps-step-body{display:block} #lp-dialog.lp-studio #lp-settings .lps-step-body .lp-setting-box{border:0;padding:0;background:transparent} .lps-next{margin-top:16px;width:100%;min-height:42px;border-radius:10px;border:1px solid #0b57d0;background:#fff;color:#0b57d0;font-weight:700;cursor:pointer} .lps-next:hover{background:#e8f0fe} .lps-finish{display:grid;gap:8px;margin-top:12px} .lps-finish button,.lps-primary{min-height:44px;border-radius:10px;font-weight:700;cursor:pointer;border:1px solid #d3d8e2;background:#fff;color:#1b2333} .lps-finish .lps-primary,.lps-guide-nav .lps-primary{background:#0b57d0;border-color:#0b57d0;color:#fff} .lps-ab-intro{background:linear-gradient(135deg,#fff8ec,#fff);border:1px solid #f3dcb5;border-radius:14px;padding:14px 16px} .lps-ab-intro b{font-size:14px;color:#8a4b00}.lps-ab-intro p{margin:6px 0 0;color:#5a4a33;line-height:1.7} /* デモの案内 */ #lps-guide{flex:none;background:linear-gradient(135deg,#0b57d0,#3b7cf0);color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 10px 30px rgba(11,87,208,.25)} #lps-guide[hidden]{display:none} .lps-guide-head{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em} .lps-guide-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.25);margin:8px 0 10px;overflow:hidden} .lps-guide-bar i{display:block;height:100%;background:#fff;border-radius:4px;transition:width .3s} .lps-guide-where{margin:0;font-weight:800;font-size:15px} .lps-guide-say{margin:6px 0 12px;line-height:1.75;font-size:13px;color:#eaf1ff} .lps-guide-nav{display:flex;gap:8px;justify-content:flex-end} .lps-guide-nav button{min-height:36px;padding:6px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-weight:700;cursor:pointer} .lps-guide-nav .lps-primary{background:#fff;color:#0b57d0;border-color:#fff} .lps-guide-nav button:disabled{opacity:.45} /* 右のプレビュー */ .lps-stage{flex:1;min-width:0;display:flex;flex-direction:column;background:radial-gradient(circle at 20% 0,#eef2fb,#e9ecf3 60%);padding:18px 22px 22px;gap:10px} .lps-ab-bar{display:flex;align-items:center;gap:6px;align-self:center;background:#fff;border:1px solid #e3e6ee;border-radius:12px;padding:4px 6px;font-size:13px;color:#6b7383} .lps-ab-bar[hidden]{display:none} .lps-ab-bar button{border:0;background:transparent;padding:6px 14px;border-radius:8px;font-weight:700;cursor:pointer;color:#4b5565;min-height:0} .lps-ab-bar button[aria-pressed=true]{background:#1b2333;color:#fff} .lps-frame-wrap{flex:1;min-height:0;display:flex;justify-content:center} #lp-dialog.lp-studio #lp-frame{flex:1;width:100%;max-width:1440px;height:100%;margin:0;border:0;border-radius:14px;background:#fff;overflow:auto;box-shadow:0 20px 60px rgba(17,24,39,.14),0 2px 6px rgba(17,24,39,.06);transition:max-width .25s,border-radius .25s} #lp-dialog.lp-studio.device-sp #lp-frame{flex:none;width:min(390px,100%);max-width:390px;height:min(844px,100%);border-radius:46px;border:12px solid #111318;box-shadow:0 30px 70px rgba(17,24,39,.3),inset 0 0 0 1px #2a2d35;scrollbar-width:none} @media(max-width:1100px){#lp-dialog.lp-studio .lp-toolbar{grid-template-columns:1fr;justify-items:start}#lp-dialog.lp-studio .lp-body{flex-direction:column}#lp-dialog.lp-studio #lp-settings{width:auto;max-height:42%}} /* 左の欄：案内は上に固定、ステップだけが動く。ボタンの文字は折り返さない（2026-10-03） */ #lp-dialog.lp-studio #lp-settings{overflow:hidden} #lp-dialog.lp-studio #lps-make,#lp-dialog.lp-studio #lps-ab{flex:1;min-height:0;overflow:auto;padding:2px 2px 12px;align-content:start} #lp-dialog.lp-studio .lps-actions>button,#lp-dialog.lp-studio .lps-device button,#lp-dialog.lp-studio .lps-modes button{white-space:nowrap} #lp-dialog.lp-studio .lp-toolbar{grid-template-columns:minmax(160px,1fr) auto minmax(0,auto)} /* ── 作業画面を広く（2026-10-03 卓馬「作業のスペースが狭いと非常に使いにくい。編集画面を大きく。安っぽく見せない」） ── エージェントの作業画面は、画面いっぱい（最大1840px）の作業スペースにする。中身の並びは各画面のまま */ :is(#lp-wizard-dialog,.ad-plan-dialog,.intake-dialog,.interview-dialog,.employee-work-dialog,.funnel-dialog,.dossier-dialog,#order-dialog,#request-dialog,.guided-brief-dialog,.flow-work-dialog)[open]{ width:calc(100vw - 24px)!important;max-width:1840px!important;height:calc(100dvh - 24px)!important;max-height:calc(100dvh - 24px)!important; border-radius:18px!important;border:1px solid #e3e6ee!important;box-shadow:0 30px 90px rgba(17,24,39,.22)!important;box-sizing:border-box} /* 上の共通ヘッダーの下に出す作業画面（flow-room）は、その分だけ低くする（2026-10-06 初心者の通し確認）。 上の行で高さを画面いっぱいにしたまま、ヘッダーの分だけ下にずらしていたため、下の約65px（「この内容で作る」など）が 画面の外にはみ出していた（390×844でも1440×900でも） */ :is(#lp-wizard-dialog,.ad-plan-dialog,.intake-dialog,.interview-dialog,.employee-work-dialog,.funnel-dialog,.dossier-dialog,#order-dialog,#request-dialog,.guided-brief-dialog,.flow-work-dialog)[open].flow-room{ height:calc(100dvh - var(--flow-header-h,68px) - 20px)!important;max-height:calc(100dvh - var(--flow-header-h,68px) - 20px)!important} /* LP制作の右の見本も広く（2026-10-03） */ @media (min-width:1100px){#lp-wizard-dialog .lpt-live{flex:0 0 46%;max-width:920px;background:radial-gradient(circle at 20% 0,#eef2fb,#e9ecf3 60%)}#lp-wizard-dialog .lpt-live-inner{border-radius:18px;box-shadow:0 20px 50px rgba(17,24,39,.16)}} /* ── プルム：はじめての人の流れ（2026-10-03） ── */ .lpq{max-width:980px;margin:0 auto;padding:8px 4px 20px} .lpq-progress{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:700;color:#5a6577;letter-spacing:.06em} .lpq-progress b{flex:1;height:6px;border-radius:6px;background:#e6e9f0;overflow:hidden;display:block} .lpq-progress i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#0b57d0,#3b7cf0);transition:width .35s} .lpq-title{font-size:26px;line-height:1.45;margin:22px 0 10px;color:#1b2333;letter-spacing:.01em} .lpq-why{margin:0 0 22px;padding:12px 16px;border-radius:12px;background:#f3f6fc;color:#3c4656;font-size:14px;line-height:1.7;display:flex;gap:12px;align-items:flex-start} .lpq-why strong{flex:none;font-size:12px;font-weight:800;color:#0b57d0;background:#e2ebfc;border-radius:999px;padding:3px 10px;margin-top:1px} .lpq-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .lpq-option{position:relative;display:grid;gap:6px;align-content:start;text-align:left;padding:18px 18px 16px;border-radius:16px;border:1.5px solid #e1e5ec;background:#fff;color:#1b2333;cursor:pointer;min-height:96px;transition:border-color .2s,box-shadow .2s,transform .2s} .lpq-option:hover{border-color:#9db7ea;box-shadow:0 10px 28px rgba(11,87,208,.1);transform:translateY(-2px)} .lpq-option strong{font-size:16px} .lpq-option small{color:#5f6878;font-size:12.5px;line-height:1.6} .lpq-option[aria-pressed=true]{border-color:#0b57d0;background:#f2f6ff;box-shadow:inset 0 0 0 1px #0b57d0} .lpq-option.best{border-color:#f0b35c;background:linear-gradient(180deg,#fffaf2,#fff)} .lpq-option.best[aria-pressed=true]{border-color:#0b57d0;background:#f2f6ff} .lpq-badge{position:absolute;top:-10px;left:14px;font-style:normal;font-size:11px;font-weight:800;color:#fff;background:#e37400;border-radius:999px;padding:3px 10px;letter-spacing:.06em;box-shadow:0 4px 10px rgba(227,116,0,.25)} /* かんたん／くわしく と、最初の1画面の3案（2026-10-26 全社マーケMTG） */ .lpw-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px} .lpw-mode button{display:grid;gap:2px;text-align:left;padding:10px 14px;border-radius:12px;border:1.5px solid #e1e5ec;background:#fff;color:#1b2333;cursor:pointer} .lpw-mode button strong{font-size:14.5px} .lpw-mode button small{color:#5f6878;font-size:12px} .lpw-mode button[aria-pressed=true]{border-color:#0b57d0;background:#f2f6ff;box-shadow:inset 0 0 0 1px #0b57d0} .lpw-fv-note{color:#5f6878;font-size:12.5px;margin:8px 0 0} .lpw-fv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0} .lpw-fv-card{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:12px;border-radius:16px;border:1.5px solid #e1e5ec;background:#fff} .lpw-fv-card.is-picked{border-color:#0b57d0;background:#f2f6ff} .lpw-fv-device{position:relative;width:100%;aspect-ratio:390/640;overflow:hidden;border-radius:18px;border:6px solid #1b2333;background:#fff} .lpw-fv-frame{position:absolute;top:0;left:0;width:390px;height:640px;overflow:hidden;pointer-events:none;transform-origin:0 0;transform:scale(var(--fv-scale,.58))} .lpw-fv-grid.is-pc .lpw-fv-device{aspect-ratio:1200/760;border-width:4px;border-radius:8px} .lpw-fv-grid.is-pc .lpw-fv-frame{width:1200px;height:760px;transform:scale(var(--fv-scale,.2))} .lpw-fv-info{position:relative;display:grid;gap:6px;align-content:start;padding-top:8px} .lpw-fv-info .lpq-badge{position:static;justify-self:start} .lpw-fv-info strong{font-size:15px;line-height:1.5} .lpw-fv-info small{color:#5f6878;font-size:12.5px;line-height:1.6} .lpw-fv-basis{border-left:3px solid #e1e5ec;padding-left:8px} .lp-wizard-channel{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid #c6d4f2;background:#f2f6ff;color:#0b57d0;white-space:nowrap;cursor:pointer} @media (max-width:860px){.lpw-fv-grid{grid-template-columns:1fr}.lpw-fv-device{max-width:320px}} .lpq-bestwhy{color:#a35400!important} .lpq-nav{display:flex;gap:10px;justify-content:space-between;margin-top:20px} .lpq-nav button{border:0;background:none;color:#0b57d0;font-weight:700;cursor:pointer;padding:8px 4px} /* おすすめの形 */ .lpq-rec{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px;padding:22px;border-radius:20px;background:#fff;border:1.5px solid #f0b35c;box-shadow:0 16px 40px rgba(17,24,39,.08);margin:6px 0 22px;position:relative} .lpq-rec[aria-pressed=true]{border-color:#0b57d0} .lpq-rec-thumb{width:100%;aspect-ratio:390/700;object-fit:cover;object-position:top;border-radius:14px;border:1px solid #e6e9f0;box-shadow:0 12px 30px rgba(17,24,39,.12)} .lpq-rec-info{position:relative;display:flex;flex-direction:column;gap:8px} .lpq-rec-info .lpq-badge{position:static;align-self:flex-start} .lpq-rec-info h4{font-size:26px;margin:4px 0 0;color:#1b2333} .lpq-reasons{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px} .lpq-reasons li{position:relative;padding-left:26px;line-height:1.7;color:#2c3545} .lpq-reasons li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#e6f4ea;color:#137333;font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:4px} .lpq-sections{font-size:12.5px;color:#6b7383;margin:4px 0} .lpq-rec-acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:10px} .lpq-rec-acts button{min-height:48px;padding:10px 26px;border-radius:12px;font-size:15px} .lpq-rec-acts a{color:#0b57d0;font-weight:700;text-decoration:none} .lpq-alts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:16px} .lpq-alts h4{grid-column:1/-1;margin:0;font-size:14px;color:#5a6577} .lpq-alt{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:start;text-align:left;padding:12px;border-radius:14px;border:1.5px solid #e1e5ec;background:#fff;cursor:pointer;color:#1b2333} .lpq-alt[aria-pressed=true]{border-color:#0b57d0;background:#f2f6ff} .lpq-alt img{width:84px;aspect-ratio:390/560;object-fit:cover;object-position:top;border-radius:8px} .lpq-alt div{display:grid;gap:4px}.lpq-alt small{color:#5f6878;font-size:12px;line-height:1.6} .lpq-more{margin-top:8px}.lpq-more summary{cursor:pointer;font-weight:700;color:#0b57d0;padding:8px 0} /* 中身の確認 */ .lpq-count{font-size:13px;color:#0b57d0;background:#eef4ff;border-radius:10px;padding:8px 12px;display:inline-block} .lpq-src{font-style:normal;font-size:11px;font-weight:700;color:#137333;background:#e6f4ea;border-radius:999px;padding:2px 8px;margin-left:8px} .lpq-make{margin:22px 0 6px;padding:18px;border-radius:16px;background:linear-gradient(135deg,#f2f6ff,#fff);border:1px solid #d4e1fb;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .lpq-make button{min-height:50px;padding:10px 28px;border-radius:12px;font-size:16px} .lpq-make small{color:#5a6577;font-size:12.5px} @media(max-width:760px){.lpq-rec{grid-template-columns:1fr}.lpq-rec-thumb{max-height:320px}.lpq-title{font-size:21px}} /* 広告の部分直し：言葉を選んで組み立てる・範囲を囲む・顔はそのまま（2026-10-03 MTG） */ .ad-editor-ai-build{display:grid;gap:6px;margin:8px 0} .ad-editor-ai-row{display:grid;gap:4px} .ad-editor-ai-row>span{font-size:11px;color:#5f6368;font-weight:600} .ad-editor-ai-row>div{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:4px} .ad-editor-ai-row button{width:auto!important;border-radius:999px!important;font-size:12px!important;padding:4px 10px!important;margin:0!important} .ad-editor-ai-row button[aria-pressed="true"]{background:#e8f0fe!important;border-color:#0b57d0!important;color:#0b57d0!important;font-weight:600} .ad-editor-ai-region{display:flex;gap:6px;margin:6px 0} .ad-editor-ai-region button{width:auto!important;margin:0!important;font-size:12px!important;padding:6px 10px!important} .ad-editor-ai-keep{display:flex;align-items:center;gap:6px;font-size:12px;color:#3c4043;margin:6px 0} .ad-editor-ai-keep input{width:auto!important;margin:0!important;flex:none} .ad-editor-ai-keep span{flex:1} /* 入れた内容の点検（2026-10-03 C向け商品MTG） */ .growth-check{border:1px solid #f0d9a7;background:#fffaf0;border-radius:12px;padding:14px 16px;margin:12px 0} .growth-check h3{margin:0 0 4px;font-size:15px} .growth-check>p{font-size:12px;color:#5f6368;margin:4px 0} .growth-check-list{display:grid;gap:8px;margin:8px 0} .growth-check-item{background:#fff;border:1px solid #e8eaed;border-left:4px solid #e37400;border-radius:8px;padding:8px 12px} .growth-check-item[data-kind="出典なし"],.growth-check-item[data-kind="根拠不足"]{border-left-color:#5f6368} .growth-check-item[data-kind="あいまい"]{border-left-color:#1a73e8} .growth-check-item p{margin:4px 0;font-size:13px;color:#202124} .growth-check-kind{font-size:11px;font-weight:700;color:#b06000} .growth-check-q{color:#3c4043!important} .growth-check-go{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .growth-check-go button{font-size:12px;padding:4px 10px;width:auto} .growth-check-ok{color:#137333;font-weight:600} .growth-check-summary{font-weight:600} .tmap-toast{position:fixed;inset:auto 16px 20px auto;margin:0;max-width:min(420px,calc(100vw - 32px));background:#4a3418;color:#f9efd6;border:0;border-radius:10px;padding:12px 16px;font-size:13px;line-height:1.6;box-shadow:0 6px 20px #0004} .tmap-toast:not(:popover-open):not(.tmap-toast-on){display:none} .rival-keep{font-size:12px;padding:6px 12px;border-radius:8px;margin:0 8px;cursor:pointer} /* おすすめの形：ページの流れ（段ごとの役割）・ほかの候補の違い（2026-10-04） */ .lpq-secs{margin:8px 0 10px;font-size:13px} .lpq-secs summary{cursor:pointer;font-weight:700;color:#3c4043} .lpq-secs ol{margin:8px 0 0;padding-left:22px;display:grid;gap:4px} .lpq-secs li strong{font-size:13px;margin-right:6px} .lpq-secs li small{font-size:11.5px;color:#6b7383} .lpq-alt-why{color:#0b57d0!important;margin-top:4px} /* ライルの宝の地図（2026-10-04 作り直し）。卓馬「ビジュアル重視・ドラクエっぽく宝の地図っぽく。詳細はクリックして1つずつ」 トップ＝羊皮紙の地図＋ドラクエの黒い窓に1行だけ。詳しくはクエストの画面 */ .tmap{--tm-ink:#4a3418;--tm-paper:#f3e1b5;--tm-edge:#a87c3c;--tm-red:#b3261e;margin:18px 0;padding:0;color:var(--tm-ink);background:none;border:0} .tmap-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:-14px;position:relative;z-index:2;padding:0 18px} .tmap-ribbon{margin:0;padding:8px 26px;font-size:20px;letter-spacing:.14em;color:#fff7e0;background:linear-gradient(#9c2a1c,#7a1d12);border:2px solid #f3d27a;border-radius:4px;box-shadow:0 3px 0 #4a1008,0 6px 14px #0003;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;position:relative} .tmap-ribbon::before,.tmap-ribbon::after{content:"";position:absolute;top:8px;width:16px;height:100%;background:#6b170e;z-index:-1} .tmap-ribbon::before{left:-12px;transform:skewY(20deg)}.tmap-ribbon::after{right:-12px;transform:skewY(-20deg)} .tmap-gauge{display:flex;align-items:center;gap:8px;background:#111;border:2px solid #fff;border-radius:6px;padding:5px 12px;color:#fff;font-size:13px;font-family:ui-monospace,"Hiragino Kaku Gothic ProN",monospace} .tmap-gauge-bar{display:block;width:120px;height:8px;background:#333;border-radius:4px;overflow:hidden} .tmap-gauge-bar i{display:block;height:100%;background:linear-gradient(90deg,#f3d27a,#ffb300)} .tmap-board{position:relative;border-radius:14px;overflow:hidden; background:radial-gradient(ellipse at 20% 25%,#fbf0d2 0,transparent 55%),radial-gradient(ellipse at 80% 75%,#e8cf98 0,transparent 55%),radial-gradient(circle at 50% 50%,transparent 60%,#c9a46a 140%),var(--tm-paper); border:3px solid var(--tm-edge);box-shadow:inset 0 0 0 6px #f8ebc8,inset 0 0 60px #a87c3c66,0 4px 16px #4a341830} .tmap-board::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0 22px,#a87c3c08 22px 23px)} .tmap-svg{display:block;width:100%;height:auto} .tmap-blank .tmap-svg{filter:sepia(.4) blur(1.2px);opacity:.55} .tmap-mt{fill:#c7a46a;stroke:#8a6a3a;stroke-width:2} .tmap-tree{fill:#7e9a5a;stroke:#5b7340;stroke-width:2} .tmap-trunk{fill:#6b4f2a} .tmap-lake{fill:#9cc3c9;stroke:#6f9aa0;stroke-width:2;opacity:.8} .tmap-compass circle{fill:#f8ebc8;stroke:#8a6a3a;stroke-width:2} .tmap-compass path{fill:#b3261e}.tmap-compass .tmap-compass-ew{fill:#8a6a3a} .tmap-road{fill:none;stroke:#b3261e;stroke-width:5;stroke-dasharray:14 12;stroke-linecap:round;opacity:.75} .tmap-road-done{fill:none;stroke:#2e7d32;stroke-width:7;stroke-linecap:round;opacity:.55} .tmap-pin,.tmap-treasure{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;z-index:1} .tmap-medal{display:block;width:clamp(48px,7vw,74px);height:clamp(48px,7vw,74px);border-radius:50%;overflow:hidden;border:4px solid #f3d27a;background:#fff8e6;box-shadow:0 0 0 3px #7a5320,0 5px 10px #4a341866;transition:transform .15s} .tmap-medal .guild-portrait{width:100%;height:100%} .tmap .guild-role-crest,.tq-face .guild-role-crest{display:none} .tmap-pin:hover .tmap-medal,.tmap-pin:focus-visible .tmap-medal{transform:scale(1.12)} .tmap-num{position:absolute;right:-6px;top:-6px;min-width:26px;height:26px;border-radius:13px;background:#111;color:#fff;border:2px solid #fff;font-weight:700;font-size:13px;display:grid;place-items:center} .tmap-pin[data-state="done"] .tmap-medal{filter:grayscale(.5) brightness(.95)} .tmap-pin[data-state="done"] .tmap-num{background:#2e7d32} .tmap-pin[data-state="doing"] .tmap-medal{border-color:#ffb300} .tmap-flag{position:absolute;left:-10px;top:-22px;font-size:24px} .tmap-here{position:absolute;left:50%;top:-34px;transform:translateX(-50%);color:var(--tm-red);font-size:22px;text-shadow:0 2px 0 #fff} .tmap-pin-next .tmap-medal{border-color:#fff;box-shadow:0 0 0 4px var(--tm-red),0 0 18px 6px #ffcf6a} @media (prefers-reduced-motion:no-preference){.tmap-here{animation:tmap-bob 1s ease-in-out infinite}.tmap-pin-next .tmap-medal{animation:tmap-glow 1.6s ease-in-out infinite}} @keyframes tmap-bob{50%{transform:translate(-50%,-6px)}} @keyframes tmap-glow{50%{box-shadow:0 0 0 4px var(--tm-red),0 0 28px 12px #ffcf6a}} .tmap-treasure-icon{display:grid;place-items:center;width:clamp(56px,8vw,86px);height:clamp(56px,8vw,86px);font-size:clamp(34px,5vw,54px);border-radius:50%;background:radial-gradient(circle,#fff3c4 0,#f3d27a 60%,transparent 72%)} .tmap-treasure[data-open="true"] .tmap-treasure-icon{background:radial-gradient(circle,#fff 0,#ffd54f 55%,transparent 72%)} .tmap-treasure::after{content:"✕";position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);color:var(--tm-red);font-weight:900;font-size:22px} .tmap-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:64px;filter:drop-shadow(0 4px 6px #0004)} .tmap-window{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-10px 18px 0;position:relative;z-index:2;background:#111;color:#fff;border:3px solid #fff;border-radius:8px;box-shadow:0 0 0 3px #111,0 6px 16px #0004;padding:12px 16px;font-size:15px;line-height:1.6} .tmap-window p{margin:0;flex:1;min-width:200px} .tmap-window-note{flex-basis:100%;color:#f3d27a;font-size:12px} .tmap-cmd{background:#111;color:#fff;border:2px solid #fff;border-radius:6px;padding:6px 16px;font:inherit;font-weight:700;cursor:pointer} .tmap-cmd:hover,.tmap-cmd:focus-visible{background:#fff;color:#111} @media (max-width:640px){.tmap-head{padding:0 8px}.tmap-ribbon{font-size:16px;padding:6px 16px}.tmap-window{margin:-8px 8px 0;font-size:14px}} /* クエストの画面（1つずつクリアする） */ .tmap-quest{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:4px solid #fff;border-radius:12px;background:#111;color:#fff;box-shadow:0 0 0 4px #111,0 20px 50px #000a} .tmap-quest::backdrop{background:#2a1a08cc} .tq-top{display:flex;align-items:center;gap:8px;padding:12px 14px 6px} .tq-dots{display:flex;gap:6px;flex-wrap:wrap;flex:1} .tq-dots button{min-width:32px;height:32px;border-radius:16px;border:2px solid #666;background:#222;color:#ccc;font-weight:700;cursor:pointer} .tq-dots button[data-state="done"]{background:#2e7d32;border-color:#2e7d32;color:#fff} .tq-dots button[aria-current="true"]{border-color:#f3d27a;color:#fff;box-shadow:0 0 0 2px #f3d27a} .tq-close{background:none;border:0;color:#fff;font-size:24px;cursor:pointer} .tq-card{position:relative;margin:6px 14px;padding:16px 18px;background:#f3e1b5;color:#4a3418;border-radius:8px;border:2px solid #a87c3c} .tq-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:#8a5a1a} .tq-card h3{margin:4px 0 6px;font-size:19px;line-height:1.5;font-family:"Hiragino Mincho ProN","Yu Mincho",serif} .tq-chest{font-size:56px;text-align:center;margin:4px 0} .tq-now{font-size:13.5px;line-height:1.7;margin:6px 0 12px} .tq-hero{display:flex;gap:14px;align-items:center} .tq-face{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;border:4px solid #f3d27a;box-shadow:0 0 0 3px #7a5320} .tq-face .guild-portrait{width:100%;height:100%} .tq-who{color:#7a6040} .tq-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .tq-steps li{display:grid;grid-template-columns:28px 1fr;gap:2px 8px;background:#fbf0d2;border-radius:8px;padding:8px 10px} .tq-icon{grid-row:span 2;font-size:20px} .tq-label{font-size:12px;color:#8a5a1a} .tq-steps p,.tq-ask p{margin:0;font-size:13.5px;line-height:1.65} .tq-ask{margin-top:10px;background:#111;color:#fff;border-radius:8px;padding:10px 12px} .tq-ask .tq-label{color:#f3d27a} .tq-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .tq-primary,.tq-clear,.tq-sub{font:inherit;font-weight:700;border-radius:8px;padding:9px 18px;cursor:pointer} .tq-primary{background:#b3261e;color:#fff;border:2px solid #7a1d12} .tq-clear{background:#2e7d32;color:#fff;border:2px solid #1b5e20} .tq-sub{background:#fffaf0;color:#4a3418;border:1px solid #a87c3c;font-weight:400} .tq-memo{margin-top:10px;font-size:13px}.tq-memo summary{cursor:pointer;font-weight:700} .tq-memo h4{margin:10px 0 2px;font-size:13px}.tq-memo p,.tq-memo li{margin:2px 0;line-height:1.6} .tq-card.tq-stamped::after{content:"CLEAR!";position:absolute;right:16px;top:40%;transform:rotate(-14deg);border:4px solid #b3261e;color:#b3261e;font:900 30px/1 ui-monospace,monospace;padding:6px 12px;border-radius:8px;background:#fff8;animation:tq-stamp .4s ease-out} @keyframes tq-stamp{from{transform:rotate(-14deg) scale(2.2);opacity:0}} .tq-nav{display:flex;justify-content:space-between;padding:8px 14px 14px} .tq-nav button{background:#111;color:#fff;border:2px solid #fff;border-radius:6px;padding:6px 14px;font-weight:700;cursor:pointer} .tq-nav button:disabled{opacity:.3;cursor:default} .tmap-chest-svg{width:78%;height:78%;overflow:visible} .tmap-chest-body{fill:#8b5a2b;stroke:#4a2c10;stroke-width:3} .tmap-chest-lid{fill:#a0692f;stroke:#4a2c10;stroke-width:3} .tmap-chest-band{fill:#f3c24a;stroke:#9a6b10;stroke-width:1.5} .tmap-chest-lock{fill:#ffd54f;stroke:#9a6b10;stroke-width:2} .tmap-chest-coin{fill:#ffd54f;stroke:#b8860b;stroke-width:1.5} .tmap-chest-glow{fill:#fff3b0;opacity:.8} .tq-chest{width:96px;height:86px;margin:6px auto;display:grid;place-items:center} .tq-chest .tmap-chest-svg{width:100%;height:100%} /* 文章の段を軽くする（2026-10-04） */ .lp-wizard-review{margin:6px 0 10px;font-size:13px} .lp-wizard-review summary{cursor:pointer;color:#0b57d0;font-weight:600} .lpt-quality-compact .lpt-fix-one{margin:4px 0 6px} .lpt-more{margin-top:6px;font-size:13px} .lpt-more summary{cursor:pointer;color:#5f6368} .lpt-more .lpt-bars{margin:8px 0} /* 宝の地図から開いた仲間の画面の上に出す帯（2026-10-04） */ .quest-banner{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto auto;gap:6px 10px;align-items:start;margin:0 0 10px;padding:10px 14px;background:#111;color:#fff;border:3px solid #fff;border-radius:8px;box-shadow:0 0 0 3px #111} .quest-banner>div{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding-right:28px} .quest-banner-kicker{font-size:11px;color:#f3d27a;letter-spacing:.06em} .quest-banner strong{font-size:14px} .quest-banner-ask{grid-column:1;margin:0;font-size:13px;line-height:1.6;color:#eee} .quest-banner button{background:#111;color:#fff;border:2px solid #fff;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;width:auto} .quest-banner button[aria-label="閉じる"]{position:absolute;right:8px;top:6px;border:0;font-size:18px;padding:0 4px} /* 宝の地図：説明と3ステップ・カーソルのカード（2026-10-04 卓馬「何のことか分からない」「読みにくい」） */ .tmap-intro{margin:20px 18px 10px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center} .tmap-lead{margin:0;flex:1 1 360px;font-size:14px;line-height:1.7;color:#3c2a12} .tmap-how{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap} .tmap-how li{display:grid;grid-template-columns:auto 1fr;gap:0 6px;align-items:center;background:#fff8e6;border:2px solid #a87c3c;border-radius:10px;padding:5px 10px;position:relative} .tmap-how li:not(:last-child)::after{content:"›";position:absolute;right:-8px;top:50%;transform:translateY(-50%);color:#a87c3c;font-weight:900} .tmap-how-ic{grid-row:span 2;font-size:20px} .tmap-how b{font-size:12.5px}.tmap-how small{font-size:10.5px;color:#7a6040} .tmap-tip{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);width:220px;display:none;flex-direction:column;gap:3px;text-align:left;background:#111;color:#fff;border:2px solid #fff;border-radius:8px;box-shadow:0 0 0 2px #111,0 8px 18px #0006;padding:8px 10px;z-index:5;pointer-events:none} .tmap-pin:hover .tmap-tip,.tmap-pin:focus-visible .tmap-tip{display:flex} .tmap-tip-below{bottom:auto;top:calc(100% + 10px)} .tmap-tip-left{left:0;transform:none}.tmap-tip-right{left:auto;right:0;transform:none} .tmap-tip-kicker{font-size:10.5px;color:#f3d27a} .tmap-tip-title{font-size:13px;line-height:1.45} .tmap-tip-who{font-size:11px;color:#ccc} .tmap-tip-go{font-size:11px;color:#9fd4ff;margin-top:2px} .tmap-pin:hover,.tmap-pin:focus-visible{z-index:6} /* クエストの画面（図・チェックリスト・手順） */ .tq-goal{display:flex;gap:12px;align-items:center;background:#fff3c4;border:2px solid #d9a93a;border-radius:10px;padding:8px 12px;margin:6px 0 4px} .tq-goal .tq-chest{width:70px;height:62px;margin:0;flex:none} .tq-goal h3{margin:2px 0 0;font-size:16px} .tq-sec{margin-top:12px} .tq-sec-h{margin:0 0 6px;font-size:13px;color:#8a5a1a;letter-spacing:.04em} .tq-bullets{margin:0;padding-left:20px;display:grid;gap:4px;font-size:13.5px;line-height:1.6} .tq-checks{list-style:none;margin:0;padding:0;display:grid;gap:5px} .tq-checks li{position:relative;padding:6px 10px 6px 32px;background:#fbf0d2;border-radius:8px;font-size:13.5px;line-height:1.5} .tq-checks li::before{content:"";position:absolute;left:10px;top:9px;width:13px;height:13px;border:2px solid #8a5a1a;border-radius:3px;background:#fff} .tq-card[data-state="done"] .tq-checks li::before{content:"✓";color:#2e7d32;font-weight:900;font-size:12px;line-height:12px;text-align:center} .tq-chips{display:flex;flex-wrap:wrap;gap:6px} .tq-chip{display:inline-block;background:#fff;border:1px solid #a87c3c;border-radius:999px;padding:3px 12px;font-size:12.5px;color:#4a3418} .tq-chip-link{cursor:pointer;font:inherit;font-size:12.5px} .tq-chip-link:hover{background:#fff3c4} .tq-route{display:flex;align-items:center;margin:10px 0 2px;overflow-x:auto;padding:4px 2px} .tq-route-dot{flex:none;width:24px;height:24px;border-radius:12px;display:grid;place-items:center;font-size:11px;font-weight:700;background:#fff;border:2px solid #a87c3c;color:#4a3418} .tq-route-dot[data-state="done"]{background:#2e7d32;border-color:#2e7d32;color:#fff} .tq-route-here{background:#b3261e;border-color:#b3261e;color:#fff;transform:scale(1.2);box-shadow:0 0 0 3px #ffcf6a} .tq-route-line{flex:1 1 10px;min-width:8px;border-top:2px dashed #b3261e;opacity:.6} .tq-route-goal{flex:none;font-size:18px} .tq-made{margin:10px 0 0;font-size:12.5px;color:#4a3418} .tq-next{list-style:none;counter-reset:qn;margin:0;padding:0;display:grid;gap:8px} .tq-next li{counter-increment:qn;position:relative;padding:8px 10px 8px 40px;background:#fbf0d2;border-radius:8px} .tq-next li::before{content:counter(qn);position:absolute;left:10px;top:8px;width:22px;height:22px;border-radius:11px;background:#111;color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center} .tq-next b{display:block;font-size:13.5px}.tq-next small{display:block;font-size:12px;color:#7a6040;margin-top:2px} .tq-bubble{display:flex;gap:8px;align-items:flex-start;margin-top:8px} .tq-bubble-face{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid #f3d27a} .tq-bubble-face .guild-portrait{width:100%;height:100%}.tq-bubble-face .guild-role-crest{display:none} .tq-bubble p{position:relative;margin:0;background:#111;color:#fff;border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.6} .tq-bubble p::before{content:"";position:absolute;left:-7px;top:12px;border:7px solid transparent;border-right-color:#111;border-left:0} .tq-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .tq-flow li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:#fbf0d2;border-radius:10px;padding:10px 6px;position:relative} .tq-flow li:not(:last-child)::after{content:"▶";position:absolute;right:-9px;top:40%;font-size:11px;color:#a87c3c} .tq-flow-ic{font-size:24px}.tq-flow b{font-size:13px}.tq-flow small{font-size:11px;color:#7a6040;line-height:1.4} .tq-wide{width:100%;margin-top:14px} @media (max-width:520px){.tq-flow{grid-template-columns:1fr}.tq-flow li:not(:last-child)::after{content:"▼";right:auto;top:auto;bottom:-10px}.tmap-how{width:100%}} /* クエストのボタンはマウスを乗せても読めるように（共通の hover が薄い青に上書きしていた・2026-10-04） */ .tmap-quest .tq-primary:hover,.tmap-quest .tq-primary:focus-visible{background:#8f1d16;color:#fff;border-color:#5c120c} .tmap-quest .tq-clear:hover,.tmap-quest .tq-clear:focus-visible{background:#1b5e20;color:#fff} .tmap-quest .tq-sub:hover{background:#fff3c4;color:#4a3418} .tmap-quest .tq-nav button:hover:not(:disabled),.tmap-quest .tq-dots button:hover{background:#333;color:#fff} .tmap-quest .tq-chip-link{border-radius:999px;padding:4px 12px} /* できあがりの見本：スマホの枠（2026-10-05） */ .lpt-live-frame.is-phone{align-items:center;overflow:hidden;padding:16px 0} .lpt-live-frame.is-phone .lpt-live-inner{overflow-y:auto;overscroll-behavior:contain;border:14px solid #111;border-radius:46px;box-shadow:0 0 0 2px #3c3c3c,0 24px 60px rgba(17,24,39,.35);scrollbar-width:none;background:#fff} .lpt-live-frame.is-phone .lpt-live-inner::-webkit-scrollbar{display:none} /* 入力の質（2026-10-05） */ .intake-quality{margin:4px 0 0;font-size:12px;line-height:1.55;display:grid;gap:1px} .intake-quality:empty{display:none} .intake-quality .iq-ok{color:#137333} .intake-cell[data-quality="ng"] .intake-quality{color:#b3261e} .intake-cell[data-quality="weak"] .intake-quality{color:#8a5a00} .intake-cell[data-quality="ng"] :is(input,textarea){border-color:#d93025!important;background:#fff8f7} .intake-cell[data-quality="weak"] :is(input,textarea){border-color:#f9ab00!important} .intake-quality small{color:#5f6368} .growth-quality{font-size:12px;margin:4px 0 0} .growth-quality-ng{color:#b3261e}.growth-quality-weak{color:#8a5a00} /* ライルの最後のAIの点検（2026-10-05） */ .intake-review{margin:10px 16px;padding:12px 14px;border:1px solid #f0d9a7;background:#fffaf0;border-radius:12px;display:grid;gap:8px;max-height:40vh;overflow:auto} .intake-review-head{display:flex;align-items:center;gap:10px} .intake-review-head strong{font-size:14px}.intake-review-head small{color:#5f6368;flex:1} .intake-review-head button{width:auto;border:0;background:none;font-size:18px;cursor:pointer} .intake-review-summary{margin:0;font-size:13px} .intake-review-item{background:#fff;border:1px solid #e8eaed;border-left:4px solid #e37400;border-radius:8px;padding:8px 12px} .intake-review-item p{margin:4px 0;font-size:13px;line-height:1.6} .intake-review-kind{font-size:11px;font-weight:700;color:#b06000} .intake-review-fix{color:#3c4043} .intake-review-go{display:flex;gap:6px;flex-wrap:wrap} .intake-review-go button{width:auto;font-size:12px;padding:4px 10px} .intake-flagged{outline:2px solid #e37400;outline-offset:4px;border-radius:8px} /* LPの材料の揃い具合（2026-10-05） */ .lpq-materials{border:1px solid #dadce0;border-radius:14px;padding:14px 16px;margin:12px 0;background:#fff;display:grid;gap:8px} .lpq-materials h4{margin:0;font-size:15px} .lpq-weak{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .lpq-more{justify-self:start;font-size:12px} .lpq-weak-go{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#f8f9fa;border:1px solid #e8eaed;border-radius:10px;padding:8px 10px;cursor:pointer;font-size:13px} .lpq-weak-go:hover{background:#eef4ff;border-color:#c2d7fb} .lpq-weak-go small{color:#5f6368} .lpq-tag{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;flex:none} .lpq-tag.is-weak{background:#fef7e0;color:#8a4b00} .lpq-tag.is-ng{background:#fce8e6;color:#c5221f} .lpq-tag.is-empty,.lpq-tag.is-none{background:#f1f3f4;color:#5f6368} .lpq-q{font-size:12px;line-height:1.5} .lpq-q.is-ok{color:#137333} .lpq-q.is-weak{color:#8a4b00} .lpq-q.is-ng{color:#c5221f} .lpq-review{display:grid;gap:8px} .lpq-review-item{border-left:3px solid #f29900;background:#fffaf0;border-radius:8px;padding:8px 12px;display:grid;gap:6px;font-size:13px} .lpq-review-item p{margin:0;color:#3c4043} .lpq-review-btns{display:flex;flex-wrap:wrap;gap:6px} .lpq-review-btns button{font-size:12px;padding:4px 12px} .lpq-review-ok{color:#137333;font-size:13px} .lpq-review-err{color:#c5221f;font-size:13px} /* ライルの入力：どの会社の入力か（2026-10-05） */ .intake-company{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0b57d0;background:#e8f0fe;border:1px solid #c2d7fb;border-radius:999px;padding:3px 12px;margin-bottom:6px} .intake-company::before{content:"";width:8px;height:8px;border-radius:50%;background:#0b57d0} .intake-score-side[data-unlocked="true"] p{color:#137333;font-weight:700} .intake-score-source{display:block;margin-top:6px;font-size:12px;color:#5f6368;line-height:1.6} .intake-src{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#137333;background:#e6f4ea;border-radius:999px;padding:1px 8px;vertical-align:middle} .intake-summary-note{margin:4px 0 8px;font-size:12px;line-height:1.6;color:#5f6368;background:#f8f9fa;border-left:3px solid #c4c7c5;padding:6px 10px;border-radius:6px} /* 部品に分ける：進み具合（2026-10-05） */ .ad-editor-grab{flex-wrap:wrap} .ad-editor-progress{flex:1 1 100%;display:grid;gap:4px} .ad-editor-progress-track{height:8px;border-radius:999px;background:#e8eaed;overflow:hidden} .ad-editor-progress-fill{display:block;height:100%;width:calc(var(--pct,0) * 1%);background:#1a73e8;border-radius:999px;transition:width .6s ease} .ad-editor-progress-label{font-size:12px;color:#3c4043;font-variant-numeric:tabular-nums} /* エラーの知らせ（理由と次の行動）2026-10-05 */ .err-help{width:min(520px,92vw);border:0;border-radius:16px;padding:22px 24px;box-shadow:0 24px 64px rgba(0,0,0,.28);color:#202124;font-size:14px;line-height:1.7} .err-help::backdrop{background:rgba(32,33,36,.45)} .err-help-head{display:flex;align-items:center;gap:12px;margin-bottom:8px} .err-help-head h2{margin:0;font-size:17px;line-height:1.5} .err-help-icon{flex:none;width:32px;height:32px;border-radius:50%;background:#fce8e6;color:#c5221f;display:grid;place-items:center;font-weight:800;font-size:18px} .err-help-reason{margin:0 0 12px;color:#3c4043} .err-help-next{background:#e8f0fe;border-radius:12px;padding:10px 14px;margin-bottom:10px} .err-help-next strong{color:#0b57d0;font-size:13px} .err-help-next ol{margin:6px 0 0;padding-left:20px} .err-help-detail{font-size:12px;color:#5f6368;margin-bottom:14px} .err-help-detail code{display:block;white-space:pre-wrap;word-break:break-all;background:#f1f3f4;border-radius:8px;padding:8px 10px;margin-top:6px;font-size:11.5px} .err-help-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .err-help-actions button{font:inherit;border-radius:999px;padding:8px 18px;cursor:pointer;border:1px solid #dadce0;background:#fff;color:#202124} .err-help-actions .err-help-close{background:#1a73e8;border-color:#1a73e8;color:#fff} /* スマホで見る：iPhone の形（393×852ポイント）2026-10-05 */ .ad-iphone-stage{display:flex;justify-content:center;height:var(--h,880px);margin:8px auto} .ad-iphone{--k:1;width:421px;height:880px;flex:none;padding:14px;border-radius:64px;background:linear-gradient(145deg,#2b2b2e,#0f0f10);box-shadow:0 0 0 2px #3a3a3d inset,0 30px 60px rgba(0,0,0,.35);transform:scale(var(--k));transform-origin:top center;box-sizing:border-box} .ad-iphone-screen{position:relative;width:393px;height:852px;border-radius:50px;overflow:hidden;background:#fff;display:flex;flex-direction:column;font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;color:#111} .ad-iphone-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:36px;border-radius:20px;background:#000;z-index:3} .ad-iphone-status{flex:none;height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 8px 36px;font-size:16px} .ad-iphone-icons{width:66px;height:12px;background:linear-gradient(90deg,#111 0 18px,transparent 18px 24px,#111 24px 40px,transparent 40px 44px,#111 44px 66px);border-radius:3px} .ad-iphone-app{flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 16px 10px;border-bottom:1px solid #efefef;font-size:20px} .ad-iphone-app span{font-size:18px} .ad-iphone-feed{flex:1;overflow-y:auto;scrollbar-width:none} .ad-iphone-feed::-webkit-scrollbar{display:none} .ad-iphone-post-top{display:flex;align-items:center;gap:10px;padding:10px 12px} .ad-iphone-post-top i{display:block;width:110px;height:10px;border-radius:5px;background:#e9e9ea} .ad-iphone-avatar{width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af)} .ad-iphone-avatar.is-ghost{background:#e9e9ea} .ad-iphone-who{display:grid;line-height:1.25;font-size:13.5px;flex:1} .ad-iphone-who small{font-size:11.5px;color:#737373} .ad-iphone-more{color:#111;font-weight:700} .ad-iphone-ghost-img{height:393px;background:#f2f2f3} canvas.ad-iphone-img{display:block;width:393px!important;height:auto!important} .ad-iphone-cta{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:#f5f8ff;color:#0b57d0;font-weight:700;font-size:14px;border-bottom:1px solid #efefef} .ad-iphone-acts{display:flex;justify-content:space-between;padding:9px 14px 4px;font-size:22px} .ad-iphone-caption{margin:0;padding:2px 14px 14px;font-size:13.5px;line-height:1.5;color:#262626} .ad-iphone-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#111;z-index:3} .lpq-badge.is-picked{background:#0b57d0;color:#fff} /* はじめての方へ（2026-10-06） */ .onboarding-intro{background:#e8f0fe;border-radius:14px;padding:14px 18px;margin-bottom:16px;display:grid;gap:8px} .onboarding-intro strong{color:#0b57d0;font-size:15px} .onboarding-intro ol{margin:0;padding-left:20px;display:grid;gap:6px} .onboarding-intro li b{display:block;font-size:14px} .onboarding-intro li span{font-size:12.5px;color:#3c4043} .onboarding-start{justify-self:start;background:#0b57d0;color:#fff;border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:700;cursor:pointer} .lp-wizard-steps button.ahead{color:#5f6368!important;border-style:dashed;background:#fff} /* スマホでは下の帯が画面の半分以上を取り、入力欄が100pxほどしか見えなかった（2026-10-06 初心者の通し確認・390px）。 注意書きは隠し、足りない欄の名前は横に流す1行に、ボタン2つは横並びにする。 自動保存の注意書きまで出すと「この内容で作る」が画面の下に50px はみ出した（同日・390×844で実測）ので、それも隠す */ @media(max-width:600px){ .intake-footer{padding:8px 12px 10px;gap:4px 8px} .intake-footer>p:nth-of-type(3){display:none} .intake-footer>p:nth-of-type(2){flex:1 1 100%;white-space:nowrap;overflow-x:auto;scrollbar-width:none} .intake-footer>p:nth-of-type(4){display:none} .intake-footer>p:nth-of-type(n+5){font-size:11px} .intake-footer>p:nth-of-type(2){padding:0;line-height:1.5} .intake-footer>:is(.intake-summary-open,.intake-review-run){flex:1 1 0;min-width:0;margin:0;padding:6px;font-size:11.5px;line-height:1.3;white-space:normal} .intake-footer>button:last-child{margin-top:4px;padding:10px} } /* 下の帯をたたむ（2026-10-07 結合テスト：390px で帯が約260px＝画面の3割、入力欄は約260pxしか見えなかった）。 たたんだときは「何項目入れたか」＋「足りない欄 3つ ▾」＋主役のボタン1つ。押すと足りない欄・ほかのボタン・注意書きが出る。 上の見出しの説明文（「分かるところから埋めて…」）もスマホでは隠し、入力欄に高さを回す */ .intake-footer-more{display:none} @media(max-width:600px){ .intake-footer>p:first-child{flex:1 1 auto;min-width:0} .intake-footer-more{display:inline-flex;align-items:center;flex:0 0 auto;margin:0;padding:4px 10px;border:1px solid #c4c7c5;border-radius:999px;background:#ffffff;color:#0b57d0;font:inherit;font-size:12px;font-weight:700;cursor:pointer} .intake-footer progress{flex:1 1 100%;min-width:0;height:5px} .intake-footer[data-open=false]>:is(.intake-summary-open,.intake-review-run,.intake-make-hint){display:none} .intake-footer[data-open=false]>p:nth-of-type(2){display:none} .intake-footer[data-open=true]>p:nth-of-type(2){white-space:normal;overflow:visible} .intake-footer>button:last-child{margin-top:2px;padding:9px 10px;font-size:14px;line-height:1.35} .intake-header>div>p{display:none} /* header{min-height:64px}・dialog button{min-height:44px} が効いて、会社名1行の見出しが64px・小さな札が44pxになっていた */ .intake-dialog .intake-header,.intake-dialog .agent-hdr~.intake-header{min-height:0;padding:4px 16px} .intake-dialog .intake-header .intake-company{margin:0;padding:2px 10px;font-size:12px} .intake-dialog .intake-stepbar{padding:3px 0} .intake-dialog .intake-step{min-height:34px;padding:5px 11px} .intake-dialog .intake-footer-more{min-height:30px} /* 進み具合の棒は帯の上の縁に細く置く（1行ぶん浮かせる） */ .intake-dialog .intake-footer progress{position:absolute;top:0;left:0;right:0;width:100%;height:3px;margin:0} .intake-dialog .intake-footer{padding:6px 12px 8px} .intake-dialog .intake-footer>p:empty{display:none} } /* はじめはライルから（2026-10-06）。鍵付きのカードが並ぶ中で、押す場所を1つだけ光らせる */ [data-agent].studio-start-here{position:relative;outline:3px solid #0b57d0;outline-offset:2px;box-shadow:0 0 0 6px #0b57d022} .studio-start-badge{position:absolute;top:10px;left:10px;z-index:3;background:#0b57d0;color:#fff;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px #0b57d055} /* ストーリー型の写真（2026-10-06） */ .lp-story-photos{display:grid;gap:12px;margin:16px 0;padding:16px;border:1px solid #e3e6ee;border-radius:14px;background:#fff} .lp-story-photo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .lp-story-photo-row>b{flex:1 1 100%;font-size:14px} .lp-story-photo-row>small{flex:1 1 100%;color:#5f6368} .lp-story-thumb{position:relative;margin:0;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid #e3e6ee} .lp-story-thumb img{width:100%;height:100%;object-fit:cover} .lp-story-x{position:absolute;right:4px;bottom:4px;min-height:0;padding:2px 8px;font-size:11px;border-radius:999px;border:0;background:#202124cc;color:#fff;cursor:pointer} .lp-story-add{min-height:44px;padding:8px 16px;border-radius:999px;border:1px dashed #0b57d0;background:#f5f8ff;color:#0b57d0;font-weight:700;cursor:pointer} .lp-wizard-big{margin-left:auto;align-self:center;font-size:13px;font-weight:700;color:#0b57d0;text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid #c6d4f5;background:#fff} /* 画像で仕上げる（2026-10-06） */ .lp-image-box{display:grid;gap:10px;margin:0 0 16px;padding:16px;border:2px solid #0b57d0;border-radius:14px;background:#f5f8ff} .lp-image-box>strong{font-size:16px} .lp-image-tier{min-height:40px;border-radius:10px;border:1px solid #c6d4f5;padding:0 10px;background:#fff} .lp-image-state{margin:0;font-size:13px;color:#3c4043} .lp-image-secs{background:#fff;border:1px solid #e3e6ee;border-radius:10px;padding:8px 12px} .lp-image-secs>summary{cursor:pointer;font-weight:700;font-size:13px} .lp-image-sec{display:grid;gap:6px;padding:10px 0;border-top:1px solid #eef0f4} .lp-image-sec textarea,.lp-image-sec input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;border:1px solid #dadce0;border-radius:8px;padding:6px 8px} .lp-image-sec button{justify-self:start} /* 画像LPの段ごとの点検の札（2026-10-08） */ .lp-image-checks{margin:0;font-size:13px;color:#137333} .lp-image-checks.warn{color:#8a4b00} .lp-image-sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .lp-image-check{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid #dadce0;background:#f1f3f4;color:#3c4043} .lp-image-check.ok{background:#e6f4ea;border-color:#b7dfc3;color:#137333} .lp-image-check.fixed{background:#e8f0fe;border-color:#c6d4f5;color:#0b57d0} .lp-image-check.warn{background:#fef7e0;border-color:#f6d77a;color:#8a4b00} .lp-image-check-why{margin:0;font-size:12px;color:#5f6368;line-height:1.6} .lp-image-sec.warn .lp-image-check-why{color:#8a4b00} /* プルムの改善（2026-10-06 MTG）：広告と合わせる・入れる部品・参考にするLP・スマホの最初の1画面 */ .lpw-adlink{display:grid;gap:10px;margin:8px 0 16px;padding:12px 14px;border:1px solid #d2e3fc;background:#f5f9ff;border-radius:14px} .lpw-adlink-row{display:flex;gap:12px;align-items:center} .lpw-adlink-thumb{width:72px;height:90px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.15)} .lpw-adlink-text{display:grid;gap:4px;min-width:0} .lpw-adlink-text strong{font-size:14px;line-height:1.5} .lpw-adlink-text small{font-size:12px;color:#5f6368;line-height:1.6} .lpw-adlink-sw{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px} .lpw-adlink-sw select{flex:1;min-width:0;max-width:100%;font:inherit;border:1px solid #dadce0;border-radius:8px;padding:6px 8px;background:#fff} .lpw-parts{margin:12px 0;padding:10px 14px;border:1px solid #e3e6ea;border-radius:14px;background:#fff} .lpw-parts summary{cursor:pointer;font-weight:700;font-size:14px;padding:4px 0} .lpw-parts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:8px 0} .lpw-part{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid #eef0f4;border-radius:10px;cursor:pointer} .lpw-part input{margin-top:3px} .lpw-part span{display:grid;gap:2px} .lpw-part strong{font-size:13.5px} .lpw-part small{font-size:11.5px;color:#5f6368;line-height:1.5} .lpw-refs{margin:16px 0;padding:12px 14px;border:1px solid #e3e6ea;border-radius:14px;background:#fff} .lpw-refs h4{margin:0 0 4px} .lpw-refs-list{display:grid;gap:8px;margin:10px 0} .lpw-ref{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eef0f4;border-radius:12px;cursor:pointer} .lpw-ref input{margin-top:4px} .lpw-ref-text{display:grid;gap:3px;flex:1;min-width:0} .lpw-ref-text strong{font-size:14px} .lpw-ref-text small{font-size:12px;color:#5f6368;line-height:1.6} .lpw-ref-flow{color:#0b57d0!important} .lpw-ref-x{font-size:12px;padding:4px 10px} .lpw-ref-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:8px;border-top:1px dashed #e3e6ea} .lpw-ref-add input{flex:1 1 220px;min-width:0;font:inherit;font-size:13px;border:1px solid #dadce0;border-radius:8px;padding:7px 9px} .lpw-ref-add select{font:inherit;font-size:13px;border:1px solid #dadce0;border-radius:8px;padding:6px 8px} .lpw-ref-state{flex-basis:100%;color:#5f6368} .lpw-fold{margin:16px 0;padding:12px 14px;border:1px solid #e3e6ea;border-radius:14px;background:#fff;display:grid;gap:8px} .lpw-fold h4{margin:0} .lpw-fold button{justify-self:start} .lpw-fold ul{margin:4px 0 0;padding-left:20px;font-size:13px;line-height:1.7} .lpw-fold-ok{background:#e6f4ea;color:#137333;border-radius:10px;padding:8px 12px;font-size:13px;margin:0} .lp-wizard .lpw-part input,.lp-wizard .lpw-ref input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;min-width:0} .lp-wizard .lpw-part span,.lp-wizard .lpw-ref-text{flex:1;min-width:0} .lp-wizard .lpw-part,.lp-wizard .lpw-ref{margin:0}